css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?

 壹 ? 引

当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论。

 贰 ? 关于top left right bottom

position定位属性大家都不会陌生,添加position属性的元素可以定位,而top,left,right,bottom属性决定元素定位后所在的位置,而在使用定位属性需要注意两点:

第一点,top,left此类定位属性只对添加了position属性且值为非static的元素生效,即值为fixed,absolute,relative,sticky其一。

第二点,在使用top,left,right与bottom属性时一般只设置两个属性进行定位,比如常见的top与left为一对,设置了top一般不会再设置bottom。

而四个同时设置时,我们常见就是值为0,那么四个值设置0有哪些使用场景,一般有两种:

1.让明确宽高的盒子垂直水平居中

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent {
    width: 200px;
    height: 200px;
    background: #ffb6b9;
    position: relative;
}

.child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #8ac6d1;
    margin: auto;
}

效果图:

通过设置top,left四属性为0居中元素的做法有个前置条件,就是需要居中的盒子必须有固定的宽高(px),否则会失效。这就像四个方向有相同的力在拉这个盒子,配上margin:auto让这个盒子的位置保持中立,来达到盒子处于正中心的目的。

2.让无宽高的盒子填满父容器

在做弹窗或者loading效果时,我们往往会给弹窗加一个半透明的黑色遮罩,用于凸显核心内容;当父容器宽高不确定时,遮罩的宽高也无法确定,除了设置width:100%,height:100%外,设置top,right四属性为0就是第二做法。

.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
}

这样一看,貌似也没问题,那么它与宽高设置为100%都能填满父容器呢?

 叁 ? top:0,left:0,right:0,bottom:0和width:100%和height:100有什么区别

从实现效果上来看,两种做法都能让一个没有宽高的盒子完全填满父容器。

但设置子容器宽高为100%表示继承父容器宽高,即父容器不管多大子容器始终为父容器的百分百。

而设置top:0,left:0,right:0,bottom:0本质目的,是让子盒子四边与父容器间距为0,而子盒子没有明确宽高,自然被拉伸到完全填满父容器了。这也是为何上文中对于让盒子垂直水平居中时必须要有明确宽高的原因。

那么到这里,我们了解了top,left等为0常见的使用场景(其实一开始不是想写这些,但遇到的问题无法重现了...),水了一篇文章,本文结束。

原文地址:https://www.cnblogs.com/echolun/p/11353627.html

时间: 2024-09-28 08:03:37

css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?的相关文章

前端之css(宽高)设置小技巧

一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小,最大宽度: a)最小高度 min-height:value; IE6不识别min-height属性,解决方案如下: 方案一:min-height:100px; _height:100px; 方案二:min-height:100px; height:auto!important; height:10

纯CSS 实现DIV 高度 height 100% 全屏布局

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css"> *{ margin: 0; padding:0;

jquery中使用css,offset和position设置top和left属性

有一个dom元素,它的position属性值为absolute,要通过jquery设置它的位置. 我们可以通过三种方法设置该元素的top和left值,设置这两个属性的值时,元素的position属性必须为absolute或relative. 第一种:使用jQuery对象的css方法,使用该方法可以直接把对象的位置设定到指定的地方,指定哪个位置就是哪个位置. 第二种:使用jQuery对象的offset方法,使用该方法时要注意,offset方法的作用是获取或设置匹配元素在当前视口的相对偏移.这句话粗

定位属性left,right,top,bottom

1.官方解释 left: 设置定位元素左外边距边界与其包含块左边界之间的偏移.(该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移,下面也差不多..) right: 设置定位元素右外边距边界与其包含块右边界之间的偏移. top: 设置定位元素的上外边距边界与其包含块上边界之间的偏移. bottom: 设置定位元素下外边距边界与其包含块下边界之间的偏移. 2.个人理解 left等定位属性,要使用时,它得(dei)是已定位的元素.(absolute,relative,fixed) eg:im

Android left top right bottom mScrollX mScrollY 坐标讲解

Android View left top right bottom mScrollX mScrollY 坐标讲解 View left top right bottom android view 的left top right bottom 是相对parent的空间数据 View  mScrollX mScrollY 我们知道View绘图的三个重要的阶段: 1. measure:预估计ViewTree的各个View的占用空间. 2. layout : 确定ViewTree中各个View所处的空间

The Portable Executable File Format from Top to Bottom(每个结构体都非常清楚)

The Portable Executable File Format from Top to Bottom Randy KathMicrosoft Developer Network Technology Group Created: June 12, 1993 Click to open or copy the files in the EXEVIEW sample application for this technical article. Click to open or copy t

js中setTimeout()时间参数设置为0的探讨

起因源于一道前端笔试题: var fuc = [1,2,3]; for(var i in fuc){ setTimeout(function(){console.log(fuc[i])},0); console.log(fuc[i]); } 问:控制台会如何打印? chrome打印结果如下: 虽然setTimeout函数在每次循环的开始就调用了,但是却被放到循环结束才执行,循环结束,i=3,接连打印了3次3. 这里涉及到javascript单线程执行的问题:javascript在浏览器中是单线程

html 5 marign top right bottom left

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

div设置高度height:100%实际却为0的解决

<html> <head> <title>无题</title> </head> <body> <div id="div" style="width:100%;height:100%>     我是DIV里的内容 </div> </body> </html> 如上,当设置div的height为100%时,打开页面是一片空白,点审查元素进去看,发现div的高度为