CSS盒子模型

作用：布局网页，摆放盒子和内容。

1. 盒子模型组成

内容区域：width和height

内边距：padding（出现在内容与盒子边缘之间）

边框线：border

外边距：margin（出现在盒子外面）

2. 边框线

属性名：border

属性值：边框线粗细 线条样式 颜色（不区分顺序）

2.1 常用线条样式

线条样式	属性值
实线	solid
虚线	dashed
点线	dotted

2.2 设置单方向边框线

属性名：border-方向名词（top、right、left、bottom）

属性值：边框线粗细 线条样式 颜色（不区分顺序）

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        border-top: 1px solid #888;
        border-right: 2px dashed red;
        border-bottom: 5px dotted green;
        border-left: 10px solid orange;
    }
</style>

3. 内边距

作用：设置内容与盒子边缘之间的距离。

属性名：padding/padding-方位名词

<style>
    div {
        /*四个方向 内边距相同 */
        padding: 30px;
        /*单独设置一个方向内边距*/
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 40px;
        padding-left: 80px;
        width: 280px;
        height: 200px;
        background-color: pink;
    }
</style>

padding多值写法

取值个数	示例	含义
一个值	padding: 10px;	四个方向内边距均为10px
四个值	Padding: 10px 20px 40px 0Px;	上:10px;右:20px;下:40px;左:80pX
三个值	padding:10px 40px 80x;	上:10px;左右:40px;下:80pX
两个值	padding:10px 80px;	上下:10px;左右:80px

4. 盒子模型尺寸计算

默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸

结论：给盒子加border和padding会撑大盒子

解决：

• 手动减法：设置盒子尺寸时减去border和padding的尺寸
• 内减模式：会自动调整盒子，不会撑大盒子，语法：box-sizing : border-box

<style>
    div {
        width: 200px;
        height: 200px;
        /*手动减法*/
        /* width: 160px;
        height: 160px; */
        background-color: pink;
        padding: 20px;
        box-sizing: border-box;
    }
</style>

5. 外边距

作用：拉开两个盒子之间的距离（不会撑大盒子）

属性名：margin/margin-方位名词，支持多值写法

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 外边距，不会撑大盒子 */
        margin-top: 50px;
        margin-left: 100px;
    }
</style>

版心居中效果

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 版心居中 */
        margin: 50px auto;
    }
</style>

6. 外边距问题

6.1 外边距合并现象

场景：垂直排列的兄弟元素，上下margin会合并

现象：取两个margin中的较大值生效

6.2 外边距塌陷问题

场景：父子级的标签，子级的添加上外边距会产生塌陷问题。

现象：导致父级一起向下移动。

解决方法：

• 取消子级margin，父级设置padding（推荐）
• 出现塌陷问题后，父级设置overflow:hidden
• 出现塌陷问题后，父级设置border-top

7. 行内元素内外边距问题

场景：行内元素添加margin和padding，无法改变元素垂直位置。

解决方法：给行内元素添加line-height可以改变垂直位置。

<style>
    span {
        /* margin 和 padding 属性，无法改变垂直位置 */
        margin: 50px;
        padding: 20px;
        /*行高可以改变垂直位置 */
        line-height: 100px;
    }
</style>

8. 盒子圆角

作用：设置元素的外边框为圆角。

属性名：border-radius

属性值：数字+px/百分比

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 从左上角顺时针赋值，没有赋值的取对角值 */
        border-radius: 20px;
    }
</style>

8.1 正圆形状应用

给正方形盒子设置圆角属性值为宽高的一半/50%。

 

<style>
    img {
        width: 200px;
        height: 200px;
        border-radius: 100px;
        /* 或者 */
        border-radius: 50%;
    }
</style>

8.2 胶囊形状应用

给长方形盒子设置圆角属性值为盒子高度的一半。

<style>
    div {
        width: 200px;
        height: 50px;
        background-color: orange;
        border-radius: 25px;
    }
</style>

9. 盒子阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

• x轴偏移量和Y轴偏移量必须书写
• 默认是外阴影，内阴影需要添加inset

<style>
    div {
        margin: 5px auto;
        width: 200px;
        height: 80px;
        background-color: orange;
        box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5)
    }
</style>

10. 元素溢出

作用：控制溢出元素的内容显示方式。

属性名：overflow

属性值	效果
hidden	溢出隐藏（推荐）
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）