css

框模型
1、框模型
框：盒子(box)
页面元素皆为框
框模型：(box-model)定义了元素处理内容，内边距，外边距，边框的一种方式
元素的 width和height属性 指定了内容区域的宽度和高度

元素的边框是绘制于元素外围的一条线，会扩大元素的占地尺寸

内边距和外边距 也会增加元素的占地尺寸，但不会影响元素的内容区域

元素的实际宽度=左右外边距+左右边框+左右内边距+width

元素的实际高度=上下外边距+上下边框+上下内边距+height

2、外边距
1、什么是外边距
围绕在元素边框周围的空白区域
作用：
1、控制元素与元素之间的距离
2、移动元素位置
2、移动元素位置
2、属性
margin:四个方向的外边距
margin-方向:单边设置
margin-top:上外边距
margin-bottom:下外边距
margin-left:左外边距
margin-right:右外边距

取值：
1、px 像素
2、%
3、auto(自动)
4、负值

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

3、取值-auto
左右方向设置为 auto 时，允许元素在其父元素中水平居中对齐，前提，必须设置该元素的宽度
4、取值-负值
移动元素，向着反方向移动
margin-left:-10px;向左移动10px
margin-top:-10px;向上移动10px

假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin（需要键入很多 auto），而是可以采用以下方法：

p {margin-left: 20px;}

5、margin 属性的取值数量
margin:value;四个方向外边距
margin:v1 v2;上下 左右
margin:v1 v2 v3;上 左右 下
margin:v1 v2 v3 v4;上右下左
ex:
margin:0 auto;水平居中标准写法
6、页面中具备默认外边距的元素
h1,h2,h3,h4,h5,h6,p,ol,ul,pre,dl,dd
通过 CSS Reset 的方式 重写默认外边距
7、特殊效果
1、外边距合并
当两个垂直外边距相遇时，它们将形成一个外边距
合并后的外边距的高度等于两个发生合并外边距高度重的较大者

<div class="l_box">       
</div>
<div class="l_container">
</div>

2、外边距的溢出
在某种特殊场合下，给子元素设置外边距时，效果却作用在父元素的外边距效果上了。
特殊场合：父元素不设置边框时，为父元素中的第一个子元素设置上外边距时，或为最后一个子元素设置下外边距时

 /** 上外边距溢出 */
.div-parent::before {
   display: table;
   content: "";
}
  /** 下外边距溢出 */
 .div-parent::after {
   display: table;
   content: "";
 }

3、内边距
1、什么是内边距
内容区域与边框之间的空间
会扩大元素边框所占用的区域
2、属性
padding:四个方向内边距
padding-top:
padding-bottom:
padding-right:
padding-left:
取值：
1、px
2、%
取值数量：
padding:value;四个方向内边距
padding:v1 v2;上下 左右
padding:v1 v2 v3;上 左右 下
padding:v1 v2 v3 v4;上右下左
3、特殊影响
为行内元素设置上下内边距时，只会影响元素自身，并不会影响到其他元素

按照上、右、下、左的顺序分别设置各边的内边距

h1 {padding: 10px 0.25em 2ex 20%;}