html样式的不足,一点微不足道的CSS

最近被CSS怼成傻逼，总结一下平时没有注意的点，持续更新。

问题1：一个没有设置宽度的div，它的宽度是多少？

问题2：把问题1里面的div设置为float为left呢？

问题3：float脱离了文档流吗？

问题4：脱离了文档流文字为什么还会环绕呢？

问题5：postion:absolute脱离了文档流吗？

问题6：postion:absolute没有设置left与top，div位置在哪，宽度如何？

问题7：与absolute搭配的往往有z-index这个属性。那么如果有一个父元素z-index为1000，子元素z-index为100，谁在上面？

问题8：为什么margin:0 auto可以水平居中元素？

问题9：postion:absolute;left:0;right:0;top:0;bottom:0;margin:auto;为什么可以水平垂直居中？

问题1：一个没有设置宽度的div，它的宽度是多少？

回答一：div为块级元素，每个块级元素默认占一行,自动充满父级元素的内容区域。

W3C:div元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

问题2：把问题1里面的div设置为float为left呢？

回答二：设置了float:left后，如果没有设置宽度，宽度是被内容撑开的，如果设置了宽度就是该宽度。

W3C:如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容，如input/img/select等等。

问题3：float脱离了文档流吗？

问题4：脱离了文档流文字为什么还会环绕呢？

回答三：脱离了文档流，但仍然保持着部分的流动性。

回答四：同上。

MDN:float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性(与绝对定位相反)。

问题5：postion:absolute脱离了文档流吗？

回答五：脱离了文档流

MDN:绝对定位的元素不再存在于正常文档布局流程中.相反，它坐在它自己的层独立于一切。

问题6：postion:absolute没有设置left与top，div位置在哪，宽度如何？

回答六：如果没有设置left,top又没有设置right，bottom，它跟static时的位置一样。也就是说，如果其前面还有一个div，他就在这个div后面，和static时一样，不会浮在上面，也不会在左上角(当然，如果前面没有元素就在左上角了)。

测试：

.wrapper{

width: 500px;

height: 500px;

background-color: grey;

position: relative;

}

.upper{

height:100px;

background-color: yellow;

}

.inner{

width:200px;

height:200px;

background-color: red;

}

结果如图：

image.png

我们再来给inner加上position: absolute;

.inner{

width:200px;

height:200px;

background-color: red;

}

结果如图：

image.png

可以看出，设置了postion:absolute后，inner并没有如我们预想的那样和left:0 top:0一般蹲到左上角，而是乖乖的呆在了upper后面，和之前static一样。

问题7：与absolute搭配的往往有z-index这个属性。那么如果有一个父元素z-index为1000，子元素z-index为100，谁在上面？

回答七：子元素在上面。

先看代码：

.par{

position: absolute;

width:300px;

height:300px;

z-index:1000;

background-color: #000;

}

.child{

position: absolute;

width:150px;

height:150px;

z-index:500;

background-color: #fff;

}

效果如下：

image.png

子元素在上面，即使父元素的z-index远远大于子元素的z-index

根据规范，z-index是应用到定位元素的，也就是position属性不为relative的元素，否则，设置z-index是没有意义的；

z-index的作用有两点，一是设置在当前堆叠上下文(stacking context)中的层级；二是创建一个新的堆叠上下文；

z-index并不是设置的值越高，就会越靠近用户，还和堆叠上下文有关系；

在同一个堆叠上下文中的元素，z-index越高越靠近用户；

在不同堆叠上下文中的元素，如果堆叠上下文一距离用户更近，那么它的所有子元素都在另一个堆叠上下文子元素的前面，也就是离用户更近，不同堆叠上下文中的子元素不可能发生交叉；

所以，z-index其实不是一个绝对值，而是一个相对值；