网页的盒子概念

盒子模型的概念

---

在网页布局中，我们经常能发现，网页都是有一个个不同的盒子嵌套排列组成的。如同我们在前面学习的表格。而我们平时使用的各种元素也可以看做是不同的盒子。
盒子的组成有四个元素：

• 边框(border)
• 内边距(padding)
• 外边距(margin)
• 内容

---

边框（border）

这个属性我们在表格中就接触到了，是用来定义边框宽，样式和颜色的。

<style>
	.one{
		border:1px solid red; 
	}
</style>

上面的solid是表示样式为单实线。
常用的边框样式有：

• solid（单实线）
• dashed（单虚线）
• dotted（点线）

如上面编写是直接设定上下左右所有边框。而在实际使用时，我们可能需要单独对某条边指定特殊的样式或者颜色：

• border-top:（上）
• border-buttom:（下）
• border-left:（左）
• border-right:（右）

---

内边距(padding)

在我们前面学习的表格中也有一个类似的属性：cellpadding内容与单元格的距离。而这个内边距也是指的盒子内容和边框的距离。
需要注意的是盒子大小是由内容加边框加内边距决定的。所以当我们给一个盒子添加内边距时，盒子会被撑大，所以在给添加内边距时应当计算好相应的减去盒子的大小。
编写内边距时，后面给几个属性会有不同的指定：
padding:20px
当后面只有一个属性时，指定的是盒子上下左右所有的内边距。
padding:20px 30px
当后面有两个属性时，前属性指定的是上下内边距，后属性指定的是左右内边距。
padding:20px 30px 40px
当后面有三个属性时，前属性指定的是上内边距，中属性指定的是左右内边距，后属性指定的是下内边距
padding:20px 30px 40px 50px
当后面有四个属性时，后面属性为盒子的顺时针方向内边距，分别为：上,右,下,左。

---

外边距（margin）

同样的在表格中也有一个类似的属性：cellspacing单元格和边框的距离。margin表示的是盒子与其他盒子的距离。
外边距的定义方式和内边距一样，但是，在定义上下外边距时，如果上下两个盒子的下外边距和上外边距重合将只会显示更长的那个外边距，所以在我们定义时，应当避免上下外边距重叠。

---

---

拓展

• 边框的合并
• 圆角边框
• 盒子的阴影

---

边框的合并

我们给盒子边框后发现，两个相连的盒子在一起，两个边框合在一起非常的不好看，如我们设定为1px的边框，在两条表相连后，就成了一条2px的边框。这样使得看起来非常的别扭。想要清除这个就需要用到合并边框了：
border-collapse:collapse

---

圆角边框

我们用到的盒子都是四条边，棱角分明的盒子。但在实际的网页中，太多这样的盒子会让网页看起来非常生硬，而且网络布局中也会经常使用到圆形或者的做了边角圆处理的边框。

当我们要将一个正方向的盒子变成正圆，只需要添加：
border-radius:50%
后面的数值可以是宽度1/2的精确数据，不好计算时，直接写百分比也是可以的。

当我们要将一个长方形的盒子做边角圆处理时，则给到高度的一半的数值就好了，注意，在这里是不能给百分比的，必须是高度一半的精确数值。数值的加减会影响到效果，这个可以在使用时去调试。

---

盒子阴影

box-shadow:(h-shadow)水平阴影 (v-shadow)垂直阴影 (blur)模糊距离 (sprerd)阴影大小 (color)阴影颜色 (inset)内/外阴影
其中前两个数值必须填写，允许出现负值。