CSS box model guide

1. Classification of box models

1. Standard box model

2. Weird box model

3. Flexible box model

2. Composition of the standard box model (content-box)

1. Margin (margin) - clear the area outside the border, the margin is transparent

   div{
     margin-top:100px;
     margin-bottom:100px;
     margin-right:50px;
     margin-left:50px;
   }
   

   Value: auto (centered left and right) or numerical value

   div{
       margin:100px auto;
   }
   

   margin:25px 50px 75px 100px; // 顺序：上 右 下 左
   margin:25px 50px 75px; // 顺序：上 (左右) 下
   margin:25px 50px; // 顺序：上下 左右
   margin:25px; // 顺序：所有方向
   

   Things to note about margins

   Margin merging problem

   When the margins collide in the vertical direction, take the larger value.

2. Border - the border around padding and content

   1.border-style	solid (solid line) double (double solid line) dashed (dashed line) dotted (wire)
   2.border-width	p{border-width:5px;}
   3.border-color	p{border-color:red;}