# CSS盒子模型学习笔记

发布时间：2024-11-25 04:16:25

CSS盒子模型学习笔记


什么是CSS盒子模型？


CSS盒子模型是网页布局的核心概念之一，每个HTML元素都被看作一个矩形盒子，由以下几个部分组成：



内容区域 (content)：元素的实际内容。
内边距 (padding)：内容与边框之间的间隔。
边框 (border)：环绕内边距和内容的边框。
外边距 (margin)：元素与其他元素之间的距离。




盒子模型的结构


盒子的宽度与高度


元素的总宽度和高度由以下计算得出：


总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距
总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距


示例代码：


.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}




内边距 (padding)



内边距位于内容区域和边框之间。
padding属性可以设置内边距。
可用值：像素(px)、百分比(%)。


示例代码：


.box {
    padding: 20px;
}




外边距 (margin)



外边距位于边框之外，用于控制元素与周围元素的间距。
margin属性可以设置外边距。
使用 margin: auto 实现块级元素水平居中。


示例代码：


.box {
    margin: 20px auto;
}


外边距折叠现象



垂直相邻的外边距会合并为较大的一个。


示例代码：


.box1 {
    margin-bottom: 20px;
}
.box2 {
    margin-top: 30px;
}
/* 最终的外边距为 30px，而不是 50px。 */




边框 (border)



边框用于包围内容与内边距。
属性：
border-width
border-style
border-color
边框样式：
solid（实线）、dashed（虚线）、dotted（点线）、double（双线）。


示例代码：


.box {
    border: 2px solid blue;
}


圆角边框



使用border-radius创建圆角。


示例代码：


.box {
    border: 2px solid blue;
    border-radius: 15px;
}




盒子模型类型


标准盒模型（默认）：



box-sizing: content-box;
宽度和高度仅包括内容区域。


替代盒模型：



box-sizing: border-box;
宽度和高度包括内边距和边框。


示例代码：


.box {
    box-sizing: border-box;
}




CSS盒子阴影



使用box-shadow属性添加元素阴影。


语法：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色 inset;


示例代码：


.box {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}




总结



CSS盒子模型包括content、padding、border和margin。
掌握了内外边距、边框及其设置方法。
了解了标准盒模型与替代盒模型的区别。
掌握了使用box-shadow实现阴影效果。

评论数：0