怪异盒:
box-sizing 属性允许你以特定的方式定义元素;
怪异盒模型:(又称ie盒模型):在低版本浏览器如果丢失了文本类型,触发ie盒模型;
属性值:content-box 默认 标准盒模型;
border-box 怪异盒模型 特点:当盒子形成怪异盒模型之后,当前padding值不会撑大盒子;
标准盒模型由content+padding+border+margin组成;自身大小:content+padding+border;所占位置:content+padding+border+margin;
在怪异盒模型中 ,border是向内形成的。
怪异盒模型由content形成(内容包括padding+border);所占大小由content(padding+border)+margin;
两者区别:怪异盒模型不需要计算border和padding的值;
工作的项目中如果使用怪异盒模型,不考虑兼容问题;怪异盒模型通常都在移动端使用;
弹性盒的基础概念:
控制子级元素在父级元素中的排列位置;
属性:display;
属性值:flex;
盒模型是控制子级元素在父级元素中的排列顺序位置;display:fkex;一定要添加在父级容器上;
当前元素形成盒模型后,默认:主轴是x轴,侧轴是y轴
注意:在弹性盒环境中,浮动不可使用,定位、盒模型正常使用;
如果在元素中设置了盒模型则不考虑元素类型,都可以设置宽高大小;
弹性盒居中的两种方式:1、父级元素设置弹性盒,子级设置margin:auto;2、弹性盒对齐方式居中
弹性盒属性很多可以分为两类:1、添加在父级元素上,控制所有子级元素2、添加在子级元素上,控制单个子级元素
改变默认的主轴方向:
属性:flex-dirction;
属性值:row 方向x轴(默认);column 方向y轴;column-reverse 相反的排列;
主轴上的对齐方式:
属性:justify-content
属性值:flex-startr 默认,表示元素在初始位置
flex-end 元素在结束位置
center 元素在居中的位置
space-between 两端对齐,其余空间自动分配;
space-around 所有的空间,都是自动分配的;
space-evenly 所有的间距都是一样的
侧轴上的对应方式:
属性:align-itmes
属性值:fiex-start
fiex-end
center
baseline 基线对齐。
1、所有子级元素都有宽高的情况下,baseline和flex-start一样的效果 。
2、当子级元素不设置高低的情况下,并且不设置baseline,子级默认拉伸。
3、当前所有页面都是文本类型的时候排列顺序再设置字体大小,以基线对齐
stretch 拉伸;(line-height:原理以基线对齐)
4、当子级元素的宽度总和大于父级元素,默认挤压。
flex-wap:wap 换行;no -wap 不换行;wap-reverse 排序倒转;
当设置换行属性,行与行之间有间距;
属性:align-content
属性值:flex-start;
flex-end;
center;
space-between;
space-around;
space-evenly;
align-self属性
控制子级元素在侧轴上对齐方式
属性值:auto:如果父级元素有侧轴对齐方式,那就继承父级的对齐方式,如果没有默认拉伸
flex-start;
flex-end;
stretch;
order 优先级
属性值:unmber 数字大排在后面;
flex属性
常用值:1 表示占据主轴上剩余的空间;父级必须为弹性盒
flex-grow 空间分配
规定项目将相对于其他项目的灵活
flx-shrink 收缩的量
0 不缩放
1 正常缩放
flex-basis 盒子的宽度
auto自适应
0%-100% 当前主轴占据的宽度