盒模型

1. 宽 width 高 height

width:100px; height:100px;

2. 内边距 padding

1. 分别赋值

padding-top:20px; /*上内边距*/
padding-right:30px; /*右内边距*/
padding-bottom:40px; /*下内边距*/
padding-left:50px; /*左内边距*/

2. 上右下左, 顺时针

padding:20px 30px 40px 50px; /*上右下左, 顺时针*/

3. 上与下 左与右

padding:40px 50px; /*上与下 左与右*/

4. 上 左右 下

padding:40px 20px 50px; /*上 左右 下*/

5. 四个值相等

padding:20px;/*四个值相等*/

3. 外边距 margin

1. 分别赋值

margin-top:20px; /*上外边距*/
margin-right:30px; /*右外边距*/
margin-bottom:40px; /*下外边距*/
margin-left:50px; /*左外边距*/

2. 上右下左, 顺时针

margin:20px 30px 40px 50px; /*上右下左, 顺时针*/

3. 上与下 左与右

margin:40px 50px; /*上与下 左与右*/

4. 上 左右 下

margin:40px 20px 50px; /*上 左右 下*/

5. 四个值相等

margin:20px;/*四个值相等*/

4. 边框 border

1. 四边框属性相同, 分别赋值

border-width:20px;
border-color:deeppink;
border-style:solid;

2. 复合赋值

border-width:10px 20px 30px 40px;
border-color:deeppink darkred blueviolet #8b2782;
border-style:solid double;

3. 四边框属性不同

border-top:10px solid yellow;
border-right:15px double red;
border-bottom:20px dashed red;
border-left:26px solid blue;

4. 四边框属性相同, 统一赋值

border:26px blue double;

5. 单条边框赋值

border-left:25px solid red;

5. 边距的合并

1. 上下外边距合并

   • 当有一个盒子下外边距和另一个盒子上外边距相遇的时候，就会发生外边距合并，这个时候，边距取两者中的最大值

   .box1{ background: purple; margin-bottom: 20px; }
   .box2{ background: green; margin-top: 30px; }
   

   结果是30px, 解决方法

   /*方法1 */ .box1{ background: purple; margin-bottom: 50px; }
   /*方法2 */ .box2{ background: green; margin-top: 50px; }
   

2. 内外边距合并

   • 内部嵌套的盒子相对父级有上外边距，父级盒子和子级盒子会同时向下移动
   • 当父级盒子和子级盒子都有上外边距的时候，这个时候父级盒子和子级盒子会同时向下移动，值取两者中的最大值
     解决方法:
     1. 给父级盒子 overflow: hidden;
     2. 给父级盒子 border: 1px solid blue;
     3. 给父级盒子 padding-top: 1px;

   实质：就是要把父级盒子和子级盒子隔开
   overflow: hidden超出隐藏