本文详细介绍了CSS中的三种元素类型：block、inline和inline-block。block元素占据整行，支持宽高和内外边距设置；inline元素不独占行，宽度随内容变化，水平方向的margin和padding有效；inline-block则结合两者特性，允许同行显示并可调整宽高。常见block元素包括div、p、h1等，内联元素如a、img、span等。
1、block块级元素
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
2、inline内联元素
inline元素不会独占一行，多个相邻的行内联元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left,padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top,padding-bottom,margin-top, margin-bottom不会产生边距效果。水平有效果，竖直无效果
3、inline-block内联块
将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将ul元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
最低0.47元/天 解锁文章
扫一扫
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
