盒相关样式

Posted 2020-11-02 飞鱼0725

盒的类型

一、盒的基本类型

在css中，使用display属性来定义盒的类型。总体来说，css中盒分为block类型与inline类型，例如div和p属于block类型，span和a属于inline类型。每一行只允许容纳一个block类型的元素，但是可以容纳多个inline类型的元素。

二、inline-block类型（inline-block类型盒加宽度时宽度会改变，inline类型盒加宽度盒不变）

Inline-block类型是在CSS2.1中追加的一个盒模型，目前为止，它受到了safari浏览器、Opera浏览器、Chrome浏览器、Firefox浏览器以及IE8以上版本浏览器的支持。inline-block类型盒属于block类型盒的一种，但是在显示时具有inline类型盒的特点。

默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式时底部对齐，如果想改为顶部对齐，还需要在div元素的样式中加入vertical-align属性。去掉换行符加float。

三、inline-tablel类型

inline-tablel类型是css2中新增的盒类型，到目前为止，该类型受到了safari、opera、chrome、firefox以及IE8以上版本浏览器的支持。

四、list-item类型

如果元素的类型设置为list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记（list-style-type）。