CSS中的盒子

CSS中盒子

在html中每一个标签基本都能看作是一个盒子，而这个盒子和我们生活中的使用的纸箱子差不多，纸箱子里面就是内容区域，有的箱子里面装的东西比较重要，那么他就会往里面添加海绵什么的，那这个就是内边距（padding），每个纸箱子都有厚度，这个就是盒子的边框（border），当两个纸箱子放在一起的时候，他们之间有距离这个就是外边距（margin），不管是内边距、边框、外边距都有上下左右四个方位。书写方式都是差不多的，就是在后面加-方位词即可。

 

盒子的内容区域、外边距、内边距只能设置高宽，边框只能设置宽度、颜色、样式。

 

一个盒子的大小是由内容区域、边框、内边距决定的，因此我们在使用的时候要注意。

 

举例：

内容区域：高（height）宽（width）

内边距：上（padding-top）、右（padding-right）、下（padding-button）、左（padding-left）

边框：上（border-top）、右（border-right）、下（border-button）、左（border-left）

边框属性：粗细（weight：数字+px）、样式（style：实线（solid）/虚线（dashed）/点线（dotted）、颜色（color：颜色的表示方法）

外边距：上（margin-top）、右（margin-right）、下（margin-button）、左（margin-left）

 

在使用中，如果子盒子没有设置宽度，会默认继承父盒子的宽度。