【无标题】CSS盒子模型及属性

---

前言

在前端网页设计中，最常听到的属性名有：内容、内边距、边框和外边距，这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。本文就介绍了CSS盒子模型的基本属性。

---

一、什么是css盒子模型？

 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

二、css盒子模型基本属性

1.盒子模型

如下图：为一个简单的盒子模型

模型特点：

1)独占一行；

2)默认宽度为100%；

3)高度默认为0，如果有子元素，父元素高度由子元素决定；

4)宽度和高度可以通过width和height改变；

2.高度 height

盒子的高度， height: 200px;（一般高度默认为0）

3.宽度 width

盒子的宽度，width: 220px;（一般情况下默认宽度为100%）

如图为height: 200px;width: 220px;的盒子模型

4.外边距 margin

外边距位于盒子的最外围，是指两个盒子之间的距离，可能是子元素和父元素之间，也可能时两个兄弟元素之间。如图为外边距类型为自适应的盒子   margin：auto；（在网页中居中）

margin:1px;   外边距上右下左都有1px

margin:1px 2px; 上下为1px;右左为2px

margin:1px 2px 3px; 上1px ,右左2px,下3px

margin:1px 2px 3px 4px; 上1px ,右px,下3px,左4px

margin-top:1px;   上边距为1px

margin-bottom:2px;    下边距为2px

margin-left:10px;     左边距为10px

margin-right：20px；右边距为20px

5.内边距  padding

内边距属性与外边距相似，指内容区和边框之间的空间。有五个属性：padding-top、padding-bottom、padding-left、padding-right 和 padding。

6.边框   border

边框是环绕内容区和填充的边界；

border: 30px; border-style: double; border-color:black ;如图为边框宽度为30，样式为双实线，颜色为黑色的盒子模型

有关边框的其他属性：

宽度：border-width;单个边框宽度：border-top-width;

盒子模型的轮廓（作用在border之外的样式）：outline-style：hidden(隐藏)

border-bottom-width:1px;    下边框宽度

border-right-width:1px;         右边框宽度

border-left-width:1px;           左边框宽度

border-style 边框样式：

　　属性值：dotted(点)

　　dashed(虚线)

　　solid(实线)

　　double(双线)

border-top-style:solid;        上边框样式

border-bottom-style:dotted;             下边框样式

border-right-style:dashed;          右边框样式

border-left-style:double;             左边框样式

---

总结

以上就是CSS盒子模型的基本属性，通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。