浅谈CSS的display属性

display可能的属性值:

描述
none
缺省值。像行内元素类型一样显示
block 
块类型。默认宽度为父元素宽度,可设置宽高,换行显示
inline
行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示
inline-block
默认宽度为内容宽度,可以设置宽高,同行显示
list-item 
像块类型元素一样显示,并添加样式列表标记
inherit 
规定应该从父元素继承 display 属性的值
table 
此元素会作为块级表格显示(类似),表格前后有换行符
inline-table
此元素会作为内联表格显示(类似),表格前后无换行符
)
)
)
)
)
)
table-row-group
 此元素会作为一个或多个行的分组显示(类似
table-header-group
此元素会作为一个或多个行的分组显示(类似
table-footer-group
此元素会作为一个或多个行的分组显示(类似
table-row 
此元素会作为一个表格行显示(类似
table-column-group 
此元素会作为一个或多个列的分组显示(类似
table-column
此元素会作为一个单元格列显示(类似
table-cell
此元素会作为一个表格单元格显示(类似 和)
table-caption
此元素会作为一个表格标题显示(类似
)


display:block、display:inline、display:inline-block等都是很常见的。

1display:block

block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

block元素可以设置widthheight属性,即使设置了宽度,仍然是独占一行。

block元素可以设置marginpadding属性。

2display:inline

inline元素不会独占一行,多个相邻的inline元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

inline元素设置widthheight属性无效。

inline元素的marginpadding属性,水平方向的padding-leftpadding-rightmargin-leftmargin-right都产生边距效果;但竖直方向的padding-toppadding-bottommargin-topmargin-bottom不会产生边距效果。

3display:inline-block

将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内,可以设置widthheight属性,也可以设置marginpadding属性。


下面例子谈谈不是很常见的display:list-item和display:table、display:table-cell。



  
      
  
  
	first
	second
	
one
two
three
four
注意:

设置display:list-item时,默认list-style为disc,可以设置list-style为square或circle,但一定要设置list-style-position:inside,否则list-style显示不出来。

你可能感兴趣的:(CSS)