CSS布局之盒子模型[二]
元素有行内元素(inline)
、块级元素(block)
以及行内块元素(inline-block)
之分,对应地它们之间的盒模型也会有不同。
1. 行内元素(inline)
通过display: inline
可将元素声明为行内元素,顾名思义指在行里面的元素,因此没有换行
的行为。
1.1 宽度和高度
行内元素不能设置宽度和高度,宽度和高度由内容撑开;
1.2 内边距
行内元素可以设置内边距,上下内边距不会影响行内元素的位置,但左右内边距会影响行内元素的位置;
1.3 边框
行内元素可以设置边框,上下边框不会影响行内元素的位置,但左右边框会影响行内元素的位置
1.4 外边距
行内元素不可以设置上下外边距(无效),但可以设置左右内边距,且会影响元素的位置。
2. 块级元素(block)
通过display: block
可将元素声明为块级元素,块级元素拥有换行
的行为。
2.1 宽度和高度
块级元素可以自由设置宽度和高度,其中宽度默认为父元素内容区的宽度,而高度则由内容高度撑开。
2.2 内边距
块级元素的内边距也可自由设置,默认为0;
2.3 边框
块级元素的边框可自由设置,默认为0;
2.4 外边距
块级元素的外边距可自由设置,默认为0。值得注意的是,上下两个元素的外边距会发生重叠,比如A元素下外边距(margin-botom)
为10px
,A元素的上外边距(margin-top)
为20px
,两者之间的外间距为20px,而非想象中的30px。
3. 行内块元素(inline-block)
通过display: inline-block
可将元素声明为行内块元素,行内块元素没有换行的行为,却可以设置宽度和高度,相当于行内元素
和块级元素
的综合体。
3.1 宽度和高度
行内块可自由设置宽度和高度;
3.2 内边距
行内块元素可正常设置内边距;
3.3 边框
行内块元素可正常设置边框;
3.4 外边距
行内块元素可正常设置外边距。值得注意的是,行内块的外边距跟其他行内块元素
或块级元素
的外边距不会发生重叠。