最近遇到的一些css题目

首发于 2017-10-22，更新于 2018-08-15

最近被 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：display: none; | visibility: hidden | opacity=0 的区别

问题 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;
}

<div class="wrapper">
  <div class="upper"></div>
  <div class="inner"></div>
</div>

结果如图：

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

.inner {
  width: 200px;
  height: 200px;
  background-color: red;
}

结果如图：

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

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

回答七：子元素在上面。
先看代码：

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

.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;
}

效果如下：

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

以下转自segmentfault

根据规范，z-index 是应用到定位元素的，也就是 position 属性不为 relative 的元素，否则，设置 z-index 是没有意义的；
z-index 的作用有两点，一是设置在当前堆叠上下文(stacking context)中的层级；二是创建一个新的堆叠上下文；
z-index 并不是设置的值越高，就会越靠近用户，还和堆叠上下文有关系；

在同一个堆叠上下文中的元素，z-index 越高越靠近用户；
在不同堆叠上下文中的元素，如果堆叠上下文一距离用户更近，那么它的所有子元素都在另一个堆叠上下文子元素的前面，也就是离用户更近，不同堆叠上下文中的子元素不可能发生交叉；
所以，z-index 其实不是一个绝对值，而是一个相对值；

以下内容为 2018-08-15 更新

问题 8: display: none; | visibility: hidden | opacity=0 的区别

空间

属性为 display: none; 的元素浏览器不会渲染，即不占据空间。
属性为 visibility: hidden; 的元素会被隐藏，但是不会消失，依然占据空间。
属性为opacity:0;的元素只是透明度为 0，元素隐藏，依然占据空间。

子元素

display: none; 不会被子元素继承。
visibility: hidden;会被子类继承，子类也可以通过显示的设置 visibility: visible;来反隐藏。
opacity:0;会被子元素继承,但子元素并不能通过 opacity:1;，进行反隐藏。
与transition一起使用时，无效。

绑定事件

display: none; 不会触发该元素已经绑定的事件。
visibility: hidden;不会触发该元素已经绑定的事件。
opacity:0;依然会触发该元素已经绑定的事件。
与transition一起使用时，无效。

重排与重绘

display被改变会触发浏览器重排。
visibility被改变会触发浏览器重绘。
opacity被改变会触发浏览器重绘。
可以与transition一起使用。

海秋