块级元素
- a)特点
i.所有块级元素占用全部宽度,不能和其他元素共享一行。
ii.可以根据盒模型特性设置宽高内外间距,如果不设置宽度,则默认填充父级元素的宽度。
iii.内部可以继续容纳其他元素。包括:div、dl、h系列、hr、ul、li、ol、table、p等
iv.包括:div、dl、h系列、hr、ul、li、ol、table、p等
内联元素
- a)特点
i.所有内联元素只占用必要的宽度,默认和其他元素在同一行。
ii.不遵循盒模型特性设置,宽高只和内容有关。
iii.内部可以继续容纳其他元素。
iv.元素包括:文本标签(a、b、u、font、span )、input、label、textarea、img、select等。
块级和内联相互转换
- a)块级元素->内联元素
增加css属性display:inline - b)内联元素->块级元素:
增加css属性display:block - c)既是内联元素又是块级元素:(既希望元素具有宽度高度特性,又具有同行特性)
增加css属性inline-block
i.每一行所有的inline-block元素会共同形成一个line box
ii.line box的高度由里面最高的元素决定,不会与下一行的列表元素发生错位
正确使用 Display的属性
- a)display: block后不应该再使用vertical-align
- b)display: inline后不应该再使用width、height、margin、padding以及float
- c)display: inline-block后不应该再使用float