display常见属性
display常见的属性值有block、inline、inline-block、none和HTML5新增的flex。
display:block，此元素作为块级元素显示，霸占一行不能和其他元素并列，可以直接设置宽高，不设置宽高时默认宽度为父元素的100%，margin和padding对上下左右四个方向设置均有效
常见的块级元素有h1~h6、div、p、ul、ol、dl、table和HTML5新标签header、footer、section、nav
display:inline，此元素作为行内元素显示，与其他元素并排排列，不能直接设置宽高时，宽高靠内容撑开，margin设置仅左右方向有效，上下无效，padding设置上右下左都有效
常见的行内元素有a、span、img、label、input、textarea、select
display:inline-block，此元素作为行内块元素显示，与其他元素并排排列，可以直接设置宽高，margin和padding对上下左右四个方向设置均有效
display:none，隐藏此元素，可以用于控制元素的显隐切换。
隐藏元素的几种方法
1、display:none
元素不可见且被隐藏的元素不再占据任何空间，不响应用户交互，就好像元素完全不存在，会导致页面布局变化。
2、opacity:0
只是从视觉上隐藏元素，而元素本身依然占据它自己的位置，还能响应用户交互，隐藏和没藏就差了一层视觉效果。
3、visibility:hidden
和opacity一样视觉上隐藏但是依然占据原来的位置，但是无法响应用户交互，适用于元素隐藏后不希望页面布局发生变化的情况。
4、postion:absolute;left:-9999px;或者margin-left: -9999px;
把元素移除屏幕外，达到隐藏的效果，但是太过粗暴没有必要。
postion的理解使用
position的常见属性值有relative、absolute、fixed，默认值为static。
positon：relative是相对定位，相对于元素原来的位置进行定位，不会脱离文档流。
position：absolute是绝对定位，相对于第一个position不是static的父元素进行定位，如果所有父元素都是static的话就会相对于文档进行定位，会脱离文档流。
position：fixed是固定定位，相对于浏览器进行定位，会脱离文档流，一般用于固定顶部底部导航栏和边上的功能栏。
文档流是指页面布局时元素从上到下，从左到右排列，有三种情况会使元素脱离文档流，分别是float：left / right、position：absolute和position：fixed，
而float和position的脱离文档流又有些许区别。
如两个兄弟div，当左侧的div用float脱离文档流和position脱离文档流时，得到的结果是不一样的。
用float时，左侧div会被右侧div的文字包裹
<style> *{ margin:0; } .a{ float: left; background:#c7a337; } .b{ background:#6C6E85; } </style> <div class="a"> 11 </div> <div class="b"> <p>222</p> <p>22222</p> </div>
用position时，左侧div会和右侧div重叠
<style> *{ margin:0; } .a{ position: absolute; left:0; background:#c7a337; } .b{ background:#6C6E85; } </style> <div class="a"> 11 </div> <div class="b"> <p>222</p> <p>22222</p> </div>
这是因为float虽然脱离了文档流但是没有脱离文本流，而position则是完全脱离文档流和文本流。
文档流是相对于盒模型来讲的，而文本流则是相对于文字段落来讲的。