盒模型的组件和注意事项_html/css_WEB-ITnose

盒模型，包括content(width+height)、padding、border、margin四部分，具体视图如下：

平时使用chrome的开发者模式进行调试的时候，每个盒模型都会像上图一样被列出来，方便我们找出bug所在。（另外，还可以直接在开发者模式里增减修改代码，实时观测页面变动，方便快捷)

content：即上图padding下虚线里的部分，在盒模型里输入的内容会在里面显示。

立即学习“前端免费学习笔记（深入）”；

padding：内边距，会增大盒子面积，赋值从上开始顺时针进行，具体如下--

1.当只有一个值的时候，四周都是一样的内边距；

2.当只有两个值的时候，第一个值控制上下，第二个值控制右左；

3.当有三个值的时候，第一个值控制上，第二个值控制右左，第三个值控制下；

4.当有四个值的时候，按照padding赋值原则进行。

例如padding: 10px 20px 30px 40px;即padding-top :10px;padding-right:20px;padding-bottom:30px;padding-left:40px.

border:是外嵌的，会增大盒子的面积。细分出的属性有很多，例如--

border-width: 2px;

border-style: dashed;

border-color: cyan;

border-top-radius:10px;

.....

经常用的属性可以汇在一起写，即border：宽度 线型 颜色。

线型一般有：solid（实线）、double（双实线）、dashed（虚线）、dotted（点线）。

颜色一般用三种方式表示：直接赋值（color:black);十进制赋值(rgb(12,45,3);十六进制赋值(#2fe800).

注意：使用padding和border时注意相应减少盒子的宽高值（宽/高-padding/border-width*2)

盒子面积s =(border-left-width+padding-left+width+border-right-width+padding-right)*(border-top-width+padding-top+height+padding-bottom+border-bottom-width)

margin：外边距，设定与周围元素的距离。赋值顺序同padding。

注意：同级块属性使用margin会出现上下叠压现象，即两者间距离取决于margin值大者。如果是使用了float或者display属性从而同排显示的话，两者的距离为其margin值之和。

当块属性层级结构为父子级时，当对第一个子级使用margin-top时，效果会转移到父级，即相当于对父级设置了margin-top。

解决方法--

1.为父级添加一个border,但是会增加计算量,拓展性受到一定的限制；

2.为父级添加一个属性，overflow: hidden;

3.不使用margin-top，对父级使用padding-top。