元素类型
行内元素
不自动换行，除非占满一行时
宽高由内容决定，不可手动设置
margin,padding只左右有效
a、span、em、b、strong、i
块元素
块元素独占一行
可设置宽高，如不设置宽占父容器的100%
margin，padding有效
float浮动元素会变成块级元素
div、p、ul、li、h1~h6、dl、dt、dd
行内块元素
- 支持全部样式
- 如果不设置宽高，就由内容决定
- 不换行
- 代码换行，盒子会产生间距
flex布局
- 将父容器display:flex 或者 display:inline-flex
- flex-direction属性有四个值设置元素按横轴线还是竖轴线排序
- row 从左到右
- row-reverse 从右到左
- column从上到下
- column-reverse从下到上
- flex-wrap是否换行
- nowarp不换行 默认值
- wrap无法容纳时换行
- wrap-reverse换行，但是每行的顺序与wrap的顺序相反
- justify-content控制在横轴线上的布局
- justify-content:flex-start在主轴线开始处排序，默认属性
- justify-content:flex-end在主轴线结束处排序
- justify-content:center在主轴线处居中
- justify-content:space-between除最后一个和第一个元素其他元素间隔相同
- justify-content:space-around让每个flex有相同的空间
- align-items控制在竖轴线上的布局
- align-items:stretch让flex项目和flex容器同高度，默认属性
- align-items:flex-start在竖轴线开始处排序
- align-items:flex-end在竖轴线结束处排序
- align-items:center在竖轴线处居中
- align-items:baseline让flex项目沿着基线对齐
- flex-grow:默认0，1使元素填充容器
- flex-shrink:默认1，使元素自动收缩
- flex-basis：设置元素的固定宽度不受flex-shrink影响
- align-self:改变单独一个flex项目的侧轴位置
- 与align-items一样
- auto继承align-items
水平居中
#parent{text-align:center}
这种居中方法只对文字,行内元素，行内块元素有效，且会被行内元素继承
#son{
width: 100px; /*必须定宽*/
margin: 0 auto;
}
auto让左右两边自动分配，但是就必须要设定宽度，且只作用域块级元素
#son{
width: 100px; /*必须定宽*/
margin: 0 auto;
}
使用flex布局
垂直居中
#parent{
height: 150px;
line-height: 150px; /*与height=line-height等值*/
}
只能用于单行行内容
#parent{
display: flex;
align-items: center;
}
flex布局
水平垂直居中
#parent{
height: 150px;
line-height: 150px; /*行高的值与height相等*/
text-align: center;
font-size: 0; /*消除幽灵空白节点的bug*/
}
#son{
/*display: inline-block;*/ /*如果是块级元素需改为行内或行内块级才生效*/
vertical-align: middle;
}
只对行内元素有效
button#parent{
height: 150px;
width: 200px;
outline: none;
border: none;
}
#son{
display: inline-block;
}
内部子元素要改成行内元素
#parent{
display: flex;
justify-content: center;
align-items: center;
}
