2018.06.04 Day7&Day8.这两天继续在学习CSS布局方式。
display
1.li标签可以使用display属性，修改成inline行内元素，形成水平导航菜单。
2.浏览器窗口小于元素宽度时，使用max-width代替width可以使浏览器更好的处理小窗口情况。
3.box-sizing:border-box;设置后，内边距和边框不会再增加盒模型的宽度。在各浏览器页面添加此设置可直接设置如下：
``` { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}```
position
1.relative相对元素本应在的正常位置定位，元素偏移了，但它仍然占据着没偏移前的空间。
2.absolute绝对定位，相对"positioned"父元素定位。被设置了绝对定位的元素在文档流中不占据空间，某元素设置了绝对定位，其在文档流中的位置会被删除。
3.fixed固定定位，相对浏览器窗口固定，不会随屏幕滚动而滚动。
inline-block布局
1.inline-block可以取代float帮助多个网格铺满浏览器，但是需要设置每一列的宽度。
2.vertical-align会影响inline-block，需要将它设置成top。
z-index
1. z-index可以改变元素覆盖顺序，但仅适用于定位元素。
2. 父元素设置z-index，则子元素无论设置与否都与父元素一直，位于父元素之上。
3. 如果父元素未定位或默认值，子元素z-index生效。
4. 同级元素均未设置z-index，定位元素在未定位元素之上。
5. 同级元素均设置或均未设置z-index，两元素重合，则按文档流先后顺序，后者覆盖前者。
float
被设置了float的元素会脱离文档流。
float可以清空格。
float可以清浮动：
1. 父级元素未设置高度，需要为父元素添加overflow:hidden
2. 浮动父元素
3. 浮动元素下添加一个clear:both的元素
4. bootstrap使用的clearfix
网页布局方式：
一列布局
通常是固定宽高，利用margin:0 auto来水平居中，用于界面标题居中显示等。
两列布局
最常见的是使用float，但需要及时清除浮动。父元素添加overflow:hidden，同级元素使用clear:both。
三列布局
首先设置父元素宽度，其次可采用左左右浮动或左左左浮动。要注意清除浮动的影响。
混合布局 top和footer布局保留，中间采用两列布局或三列布局等。
overflow: hidden;的作用
当设置了父元素.item的宽高时，overflow: hidden;的作用是隐藏溢出。
当未设置父元素宽高时，overflow: hidden;可用于清除浮动，子元素会将父元素撑开。
编码任务：
1.实现一个两栏布局，左侧占30%宽度，右侧占70%宽度。
2.实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化
