CSS盒子模型定义了元素如何显示以及与其他元素间的关系。它包括内容区域(content area)、填充(padding)、边框(border)和外边距(margin)。
基本的盒子模型属性包括:
width
和height
:指定内容区域的宽度和高度。padding
:内边距,增加内容区域和边框之间的距离。border
:边框宽度、样式和颜色。margin
:外边距,控制元素和其他元素之间的距离。
可以通过以下属性分别设置这些属性:
.box {
width: 100px; /* 内容宽度 */
height: 100px; /* 内容高度 */
padding: 20px; /* 内边距 */
border: 1px solid; /* 边框 */
margin: 10px; /* 外边距 */
}
在标准盒子模型中,设置的width
和height
仅包括内容区域。如果还设置了padding
、border
或margin
,这些额外的部分不会包含在你设置的width
和height
内。
CSS3中提供了box-sizing
属性,可以通过设置box-sizing: border-box;
来改变这种默认行为,使得width
和height
包括了内容、内边距和边框,不再包括外边距。
.box-sizing {
width: 100px;
height: 100px;
padding: 20px;
border: 1px solid;
margin: 10px;
box-sizing: border-box; /* 宽度和高度包括内边距和边框 */
}
以上是盒子模型的基本概念和设置方法。