display属性和实例

标准流：
1.HTML元素在标准状况下的定位方式
2.行内元素在同一行内横向排列
3.块级元素占满整个一行，在页面中竖向排列
4.元素不会移动到其他地方去，对于嵌套的元素盒子也是嵌套的关系。
行内元素的盒子：
1.行内元素的盒子永远只能在浏览器中 得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。
2.因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。
3.我们的行元素可以用line-heigh来控制行与行之间的距离，可以用像素，用像素就是一个固定的值。也可以用百分比，根据浏览器的大小不同进行缩放。
display属性：
1.通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示
2.display：block|inline|none|list-item
3.inline-block行内块元素（css2.1新增 到的值）
block元素的特点是:
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非用width设定一个宽度
<div>,<p>,<h1>,<form>,<ul>和<li>是块元素的例子。
inline元素的特点：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>,<a>,<label>,<input>,<strong>,和<em>是inline元素的例子。
inline-block 行内块元素
特点：既具有行元素一排的属性，又具有块元素可以设置宽高的属性。
隐藏元素diaplay：none
1.当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中 的位置。像title元素默认就是此类型。
2.比较visibility：hidden
3.制作下拉菜单、tab面板等有时就需要用display：none把菜单或面板隐藏起来。
需要使用display属性切换的情况：
1.让一个inline元素从新行开始；
2.让块元素和其他元素保持在一行上；
3.控制inline元素的宽度；
4.控制inline元素的高度（对导航条特别有用）；
5.无须设定宽度即可为一个块元素设定与文字同宽的背景色。