CSS教程：盒子模型 作者：马育民 • 2021-06-06 22:20 • 阅读：10061 # 类比 为了便于理解、记忆，看下图： [](/upload/0/0/1IX7dkgtHAD8.png) # 盒子模型 [](https://www.malaoshi.top/upload/pic/html/20140124141001609.jpg) 盒子模型包括： - margin(外边距) - 清除边框外的区域，外边距是透明的。 - border(边框) - 围绕在内边距和内容外的边框。 - padding(内边距) - 清除内容周围的区域，内边距是透明的。 - content(内容) - 盒子的内容，显示文本和图像。 # 边框 ### 设置方式一 ``` div{ border:2px solid red; } ``` ##### 边框样式有： - solid（实线） - dashed（虚线） - dotted（点线） ##### 边框颜色 可设置为十六进制颜色，如: ``` border-color:#888; ``` **注意：** 前面有 `#` 号 ##### 边框宽度 ``` 数字+px(象素) ``` ### 设置方式二 单独设置某个边框 ``` div{ border-top:1px solid blue; border-right:2px solid green; border-bottom:3px solid red; border-left:4px solid gray; } ``` # margin 外边距 元素与其它元素之间的距离 ### 设置外边距方式一： 如果上、右、下、左的外边距相同，写法如下： ``` div{ margin:10px; } ``` ### 设置外边距方式二： 如果上、右、下、左的外边距不同，写法如下： ``` div{ margin:20px 10px 15px 30px;/*顺序：上、右、下、左*/ } ``` 或者 ``` div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px; } ``` # 内边距 元素内容与边框之间的距离 ### 设置方式一： 如果上、右、下、左的填充都相同： ``` div{ padding:20px; } ``` ### 设置方式二： 如果上、右、下、左的填充都不同： ``` div{ padding:20px 10px 15px 30px;/*顺序：上、右、下、左(顺时针)*/ } ``` 或者 ``` div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px; } ``` # 宽度 和 高度 设置内容的宽度、高度 ``` div { width: 300px; height: 100px; } ``` # 实际宽度 元素实际宽度（盒子的宽度）=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距 元素实际高度（盒子的高度）=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距 原文出处：http://www.malaoshi.top/show_1IX1GOYgpDy8.html