CSS盒模型

1. 标准盒模型

HTML每一个元素都可以看作为一个盒模型

1.1 width/height

• 盒子实际内容（content）的width/height =我们设置的width/height;
• 盒子总宽度/高度=width/height+padding+border+margin。

1.2 content 内容区域

width:; 取值px %（相对于父元素）
height:; 取值px %（相对于父元素）
min-width:; 最小宽度
max-width:; 最大宽度
min-height:; 最小高度
max-height:; 最大高度

1.3 border 边框

背景颜色可到达border

1.3.1 border-style

border-style:solid|dashed|dotted|double|none;    
             实线     虚线   点线  双实线 不显示

border-seyle 为 必须属性(若不设置，边框不生效)，默认为黑色 3px
当取值double时，最小宽度为3px

1.3.2 border-color

1.3.3 border-width

1.3.4 简写

/*三个属性值不区分先后顺序*/
border: 5px solid red;

1.3.5 单边属性

border-top:1px solid red;
     border-top-style:;
     border-top-width:;
     border-top-color:;
 border-bottom:1px solid red;
     border-bottom-style:;
     border-bottom-width:;
     border-bottom-color:;
 border-left:1px solid red;
     border-left-style:;
     border-left-width:;
     border-left-color:;
 border-right:1px solid red;
     border-right-style:;
     border-right-width:;
     border-right-color:;

1.4 padding 内边距

1.4.1 属性

不能取负值和auto

padding : value ; 上 下 左 右
padding : value value ; 上下 左右
padding : value value value; 上 左右 下
padding : value value value value; 上 下 左 右

1.4.2 单边属性

padding-top : value [value value value]; /*下面也是一样*/
padding-bottom :;
padding-left : ;
padding-right : ;

padding会撑大容器

1.5 margin

外边距是透明的

1.4.1 属性

可以取负值和auto

margin : value ; 上 下 左 右
margin : value value ; 上下 左右
margin : value value value; 上 左右 下
margin : value value value value; 上 下 左 右

1.4.2 单边属性

margin-top : value [value value value]; /*下面也是一样*/
margin-bottom :;
margin-left : ;
margin-right : ;

1.4.3 注意

1. 块级元素水平居中 margin: 0 atuo;
2. 垂直方向上外边距合并问题:
   当垂直方向上外边距相撞时，取较大值

1.4.4 margin-top问题

• 详情：
  当第一个块级子元素设置margin-top时，父元素跟着一起下来
• 解决方法：

1. 父元素加 : overflow : hidden; （找到原位置）
2. 父元素或该子元素 加 : float : left；
3. 父元素加1px透明边框 : border : 1px solid transparent;
4. 父元素加1px透明内边距 : padding : 1px ;

2. 怪异盒模型 (IE盒模型)

2.1 width/height

• 盒子实际内容（content）的width/height =我们设置的width/height - border - padding;
• 我们设置的width是内容、内边距和边框的宽度的总和
• 盒子总宽度/高度=width/height+margin

2.2 盒模型相互转换

可以 规避padding撑大容器 问题

box-sizing : content-box | border-box;
/*
content-box : 标准盒模型 <== 默认值
border-box : 怪异盒模型
不想padding撑开容器，将标准盒模型转换为怪异盒模型即可
*/

3. 弹性盒模型

3.1 父元素上设置的属性

• 在弹性盒中float和clear不生效*

3.1.1 开启弹性盒模型

display : flex;

3.1.2 弹性盒的方向

flex-direction:row|column|column-reverse|row-reverse;
row:默认值  子元素水平排列
colum:子元素垂直排列
row-reverse:子元素在水平方向倒序排列
column-reverse:子元素在垂直方向上倒序排列

默认x轴为主轴，y轴为侧轴
当flex-direction:column;时，y轴为主轴，x轴为侧轴

3.1.3 设置子元素在主轴方向上的对齐方式

justify-content:flex-start|flex-end|center|space-around|space-between ;

flex-start:默认值  弹性盒的开始
flex-end:弹性盒结束
center:居中
space-around: 两侧边界距离是中间距离的一半
或者说 ： 子元素（靠近边界的）  与边界的距离  == 1/2 *  子元素之间的距离
space-between:在子元素之间平均分配父元素剩下的空间，左右两端没有距离

3.1.4 设置子元素在侧轴方向上的对齐方式

align-items:flex-start|flex-end|center;

3.2 子元素上设置的属性

flex-grow:number;
设置子元素宽度之间的比例