第5/6天,学习布局

position：fixed;
固定定位固定元素是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。
min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width的值。

box-sizing 属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

关于设置z-index层级无效的问题

最近在写一个小项目，遇到很多小细节的问题，果然还是要实战才能知道自己的不足之处啊~回归正题，我在一个div明明设置了属性z-index，但是为什么在网页上显示无效呢？首先排除设置的层级不够的问题；然后我就去 W3School 查询了才知道问题所在。
先来看官方给的定义的用法：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（position属性值设置除默认值static以外的元素，包括relative，absolute，fixed样式）

还有三个条件下也能导致这个问题的出现：

1、父标签 position属性为relative；
2、问题标签含有浮动(float)属性；
3、问题标签无position属性（不包括static）；

解决方法也很简单：
1、position:relative改为position:absolute；
2、去除浮动。
3、浮动元素添加position属性（如relative，absolute等）；