Web前端——css样式（盒子模型）

一、盒子模型

（一）盒子的概念

页面的标签都可以看做一个个“盒子”，浏览器在渲染网页时会将标签看做一个个矩形区域，我们也形象地称之为“盒子”。

（二）盒子模型

css中规定：每个盒子由内容区域（content），内边距区域（padding），边框区域（border）和外边距区域（margin）构成，这就是“盒子模型”。

（三）边框属性

1.边框属性语法

border：宽度 样式 颜色

.box1 {
    border: 5px solid yellow;
}
/*
solid:实线边框，单实线
dashed:虚线边框，短划线
dotted:点线边框，小圆点
double:双线边框，两条实线
groove:3D凹槽边框，镂空效果
ridge:3D凸槽边框，突出效果
inset:3D内阴影边框，镶嵌效果
outset:3D外阴影边框，突出效果
hidden:隐藏边框，布局仍占据空间
none:无边框，不显示边框，也不占据空间
*/

2.外边距属性语法

.box2 {
    margin-top: 5px;/*上外边距*/
    margin-right: 5px;/*右外边距*/
    margin-bottom: 5px;/*下外边距*/
    margin-left: 5px;/*左外边距*/
}

3.内边距属性语法

.box3 {
    padding-top: 5px;/*上内边距*/
    padding-right: 5px;/*右内边距*/
    padding-bottom: 5px;/*下内边距*/
    padding-left: 5px;/*左内边距*/
}

4.边距简写形式：

从上方顺时针开始赋值，如果没有就看对侧的值

（四）box-sizing

box-sizing属性用于控制元素框模型的尺寸计算方式。它有两种常见的取值：

1.content-box（默认值）：

在content-box模式下，元素的宽度和高度仅包括内容区域（content area），而边框（border）和内边距（padding）会增大元素的总尺寸。

2.border-box：

在border-box模式下，元素的宽度和高度包括内容区域（content area），而边框（border）和内边距（padding）。