HTML 盒模型+边距篇+垂直居中

HTML 盒模型+边距篇，

padding 内边距

* 设置padding
* 1. 分别设置某个方向的padding
* 	 padding-方位词
* 	 方位词: top bottom left right
* 2. 合写
* 	 padding:
* 		一个值 表示: 四个方向都设置同一个值
* 		两个值  表示: 上下  + 左右
* 		三个值  表示: 上  + 左右  + 下
* 		四个值  表示: 上  + 右  + 下  + 左
* 如果有某个方向的值不需要设置, 可以直接设置成0, 此时px可以不写
				

margin 外边距

注：写法参照padding

盒模型

• 盒模型简介

HTML文档是由是由一个个的HTML标签组成的
盒模型: 反应的是每个HTML元素的结构的组成

注意事项: 每个HTML元素都有自己的盒模型结构

1. 盒模型的各个组成部分.
2. 盒模型是如何影响元素的位置的.
3. 在盒模型的使用过程中坑点
	

盒模型的组成部分: 
盒模型由4部分组成, 这4部分是逐层包裹, 向外延伸,分别是

1. content(内部): 标签内容的显示区域; 如果元素可以设置宽高, 宽高设置的区域就是content区域; 如果元素不支持设置宽高, 其撑出的大小就是content区域
2. padding(内边距): 用于隔开content与border之间的距离的, 背景色会渲染进padding区域
3. border(边框): 元素的边界, 背景色会渲染进border区域; 边框类型是必须的, 边框宽度和边框颜色非默认值 , 宽度默认值3px, 颜色默认继承于当前元素的color值
4. margin(外边距): 用来隔开元素与元素之间的距离, 背景色不会渲染进margin区域
		

• 盒模型计算规则

  在普通盒模型的计算规则下, 一个HTML元素的盒子大小:

  ​ 盒子的宽度 = width + 左右padding + 左右border-width + 左右margin

  ​ 盒子的高度 = height + 上下padding + 上下border-width + 上下margin

  ​

  注： 除了有普通盒模型之外, 还有一种怪异盒模型

  ​ 两个盒模型的组成部分, 写法, 用法没有区别

  ​ 区别是计算盒子大小的方法不同

• margin 塌陷

1. 相邻兄弟元素在垂直方向上margin 会出现融合

   ​ 融合的标准: 取两者间的较大值充当融合值

   ​ 解决办法:

   ​ 1.1 尽量只给一个元素设置margin值

   ​ 1.2 给两个元素中的任何一个添加display:inline-block

​

2. 父子关系的元素在垂直方向上margin 会出现传递

​ 传递的规则: 子元素添加了垂直方向的margin值, 该值会传递给父元 素, 导致子元素没有移动到预期的位置. 父元素却发生了移动.

​ 解决办法:

​ 2.1. 利用父级的padding代替子级的margin;

​ 2.2. 给父级加边框;

​ 2.3. 给父级添加overflow:hidden;

​ 2.4. 给父级或者子级添加display:inline-block;

• auto 值

  ​ auto不是一个css样式, 而是一个样式值

  ​ auto值表示自适应, 一般可以通过设置auto值, 灵活的进行块级元素的布局

  ​ 元素居中的办法:

  ​ 1. 行元素居中

  ​ 水平居中：给行元素的父级设置: text-align:center
  垂直居中: (单行文本)让父级的行高等于父级的height

  ​ 2. 块元素居中

  水平居中: width要给定值, 左右margin值为auto
  垂直居中: 结合定位和margin的auto值实现(不但可以实现垂直居中, 水平也可以)

  **如果想要块级元素在父级的垂直方向上居中**
    1. 想办法脱离文档流(浮动, 定位)  选择:absolute定位
    2. 让元素距离上下为0, 利用上下的margin满足条件, 使元素被挤到垂直方向的中间位置
  

  ​ 注： 一般情况下, 我们会给width, margin这两个值设置为auto

  ​ 2.1 如果width, margin-left, margin-right三个值里有一个值为auto, 其余两个要为定值

  ​ 2.2 如果width, margin-left, margin-right三个值都为定值且发生了冲突, 系统会强制修改margin-right的值

  ​ 2.3 如果margin-left和margin-right的值都为auto, 那么width必须给定值