实现水平/垂直居中
- 水平居中
行内元素
将其父元素设置为块级元素，再给父元素设置 text-align: center;
块级元素
方案一：设置父元素为块级元素，子元素设置行内级元素使用text-align: center;
默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;
方案二：使用定位属性
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left: 50%，即让子元素的左上角水平居中；设置transform: translateX(-50%);
方案三：使用flexbox布局实现（宽度定不定都可以）
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
- 垂直居中
单行的行内元素
设置单行行内元素的"行高等于盒子的高"即可；
多行的行内元素
给父元素设置display:table-cell;和vertical-align: middle;属即可；
块级元素
方案一：使用定位
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；设置transform: translateY(-50%);
方案二：使用flexbox布局实现（高度定不定都可以）
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;
- 垂直水平居中
方案一：使用定位属性
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
方案二：使用flex布局实现
设置父元素为flex定位，display:flex; justify-content: center; align-items: center;
盒模型
- 盒模型的组成部分包括
Content(内容)- 盒子的内容，显示文本和图像。
Padding(内边距)- 盒子中的文字距离盒子边框（border）的距离，内边距是透明的。
Border(边框)- 围绕在内边距和内容外的边框。
Margin(外边距)- margin是盒子距离网页边的距离，外边距是透明的。
- 盒子模型的分类，可以使用box-sizing变更盒子模型
- IE盒子模型（content-box），元素的width=content+padding+border
- W3C盒子模型（border-box），元素的width=content的宽度
BFC
格式化上下文 (Block Formatting Context)
可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干
怎样才能形成BFC
-
float的值不能为none
-
overflow的值不能为visible
-
display的值为table-cell, table-caption, inline-block中的任何一个
-
position的值不为relative和static
BFC的约束规则
-
内部的Box会在垂直方向上一个接一个的放置
-
垂直方向的距离有margin决定(属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关)
-
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
-
BFC的区域不会与float的元素区域重叠
-
计算BFC的高度时，浮动子元素也参与计算
BFC的作用
-
不和浮动元素重叠
-
清除元素内部浮动
-
防止垂直 margin 重叠
Flex弹性盒布局
当布局涉及到不定宽度，分布对齐的场景时，可以考虑弹性盒布局。能够拓展和收缩flex容器内的元素，以最大限度地填充可用空间
常用属性：
- flex-direction 决定主轴的方向
flex-direction: row | row-reverse | column | column-reverse;
- flex-wrap 定义，如果一条轴线排不下，如何换行
flex-wrap: nowrap | wrap | wrap-reverse;
-
flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
-
justify-content 定义了项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
- align-items 定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
position
- static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
- relative
相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。
- absolute
相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于根级容器定位。
- fixed
固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
overflow
-
参数是scroll时候，必会出现滚动条。
-
参数是auto时候，子元素内容大于父元素时出现滚动条。
-
参数是visible时候，溢出的内容出现在父元素之外。
-
参数是hidden时候，溢出隐藏。
