day22知识点
一、怪异盒模型:
box-sizing:
属性值 :box-sizing:content-box; 常规盒模型
box-sizing:border-box; 怪异盒模型(IE盒模型)
触发怪异盒模型:
box-sizing:border-box;
怪异盒模型特点:padding和border都会在元素的宽高的内部,不会把盒子撑大。
二、弹性盒模型
弹性盒子:布局方案
作用:控制离它最近的一层子元素,布局方式
特点:1,弹性盒子里面的离它最近的一层子元素左右上下居中,只需要给子元素添加margin:auto 即可
2,弹性盒子里面的子元素都是沿着“主轴”排列
3,“主轴”:有可能是x轴,也有可能是y轴。如果x为主轴,y轴就是侧轴
4,弹性盒子里面的离它最近的一层子元素都可以添加大小
触发弹性盒子:
display:flex;
改变主轴的方向
flex-direction:
属性 :row (默认值:x轴)
column (y轴)
column-revese (以y轴为主轴方向排列)
row-revese (以x轴为主轴方向排列)
改变主轴的对齐方式
justify-content:
属性值:flex-start (默认状态,在弹性盒子开始的位置显示)
flex-end (在弹性盒子末端对齐)
center (居中对齐)
space-between (两端对齐)
space-around (自动分配间距)
侧轴的对齐方式
align-items:
属性值:flex-start (侧轴开始的位置)
flex-end (侧轴结束的位置)
center (侧轴居中的位置)
baseline (基线与flex-start等效)
stretch (默认值 拉伸效果)
控制弹性盒子里面的子元素(灵活元素)换行处理
flex-wrap:
wrap 换行
no-wrap 不换行
warp-peverse 反向换行
控制行与行的对齐方式
align-content:
flex-start 默认状态:行与行之间不存在默认的行间距
flex-end 在弹性盒子末端对齐
center 居中对齐
space-between 末端对齐
space-around 自动分配间距
补充:flex-direction 和 flex-warp 简写 flex-flow:;
控制弹性盒子里面 某个 灵活元素 在侧轴的对齐方式
align-self:
auto 默认值:元素继承了它的父容器 align-items 属性。 如果没有父容器则为“stretch”
stretch 元素备拉伸以适应容器
center 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
控制子元素的排列顺序:
order:数值越大越往后排列。支持负数
剩余空间的分配
flex:1; 分配主轴剩余的空间
flex:1;(为简写方式)
flex-grow 扩展的量
flex-shrink 收缩的量
flex-basis 元素的大小
flex-shrink:0; 不压缩
多列属性:
列数:column-count
列间距 column-gap
列分割线 column-fule
控制每一列的高度时候统一
column-fill:;
aoto 列高度自适应
balance 有列的高度以其中最高的一列统一
跨列 column-span:all;
列宽 column-width
columns:7; cloumn-count 和column-width 的简写