1.
1.block
单独占一行，可以设置width,height，maigin四个方向，padding四个方向；
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度；
2.inline
多个内联元素占同一行，直到放不下才换行。设置width,height,margin-top,margin- bottom,padding-top,padding-bottom无效；
元素的宽度就是它包含的文字或图片的宽度，不可改变。
像inline一样放置(比如和它相邻的元素处在同一行)，像block一样表现。比如：input,select,img等。
即:和内联元素在同一行，但自身相当于块级元素，可以设置width,height等属性。
适用情况
不用添加浮动，多个block可以一行显示（比如导航栏）[不适用ie6/7]
使一个inline元素具有高宽边距等而它依然能够保持inline;
inline和inline-block出现的问题
水平呈现的元素间，换行显示或空格分隔的情况下会有间距
解决方法
● 相邻inline-block元素不分行写，写在同一行并且中间无空格
● select父元素使用font-size:0
4.none
隐藏该区域，不占实际空间。但对后台来说真实存在，可以获取被隐藏的元素
和visibility:hidden的区别
hidden占实际空间，其后的元素仍在该有的位置，而none后的元素占none原有的位置
5.display其他属性值
list-item 此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示（类似table），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似table），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似tbody）
table-header-group 此元素会作为一个或多个行的分组来显示（类似thead）
table-footer-group： 此元素会作为一个或多个行的分组来显示（类似tfoot）
table-row 此元素会作为一个表格行显示（类似 tr ）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 colgroup ）。
table-column 此元素会作为一个单元格列显示（类似 col ）
table-cell 此元素会作为一个表格单元格显示（类似 td 和 th）
table-caption 此元素会作为一个表格标题显示（类似 caption）
这些属性可以让内容以表格的形式呈现，比如（但是ie6/7不支持）：
display:table-cell可以让大小不固定元素垂直居中，可以用在两栏的自适应布局上，可以实现等高布局和等列布局。
网友评论