怪异盒模型(IE盒模型)
在IE低版本的浏览器中如果丢失了文档类型,触发IE盒模型
属性:box-sizing
属性值:
– content-box 默认值 标准盒模型
– border-box 怪异盒模型
特点
– 当盒子形成了怪异盒模型之后,padding值不会撑大容器大小,不需要减去padding值
– border是向盒子内部形成的
怪异盒模型宽高大小的计算方式
– 计算自身的大小 content(包含padding和border)
– 盒子在浏览器中所占位置的大小 content(padding+border)+margin
和普通盒模型的区别
– 不需要计算border和padding的值
– 工作的项目中如果使用到怪异盒模型 不考虑兼容问题(移动端都是-webkit-内核)
– 由于兼容问题 怪异盒模型都是在移动端使用,不建议在PC端使用
弹性盒模型的基础概念(控制子集元素在父级容器中的排列位置)
属性:display
属性值:flex
– 盒模型是控制子集元素在父级容器中的位置,flex一定要设置在父级容器上
– 形成盒模型后,默认的主轴方向是X轴,侧轴是Y轴(可以通过设置改变)
– 盒模型中的任何元素类型,都可以直接设置宽高大小,
– 居中方式
之前的居中方式 – 表格居中 align/valign
– 文本居中 text-align/line-height
– 图片居中 基线对齐
– 背景图片居中 background-position
– 版心居中 margin:0 auto
– 定位居中:已知大小设置50%宽高,再减去一半的自身宽高
未知大小设置left,right,top,bottom为0;再margin auto
– 弹性盒模型居中 单个元素居中:margin :auto
在弹性盒模型中,浮动不可以使用,定位,盒模型都可以正常使用
弹性盒模型的属性
设置在父级上面的属性 =>控制所有的子级元素
设置在子集上面的属性 =>控制单个子级元素
1.改变默认的主轴方向
属性:flex-direction
属性值:
– row X轴方向为主轴方向(默认值)
– column Y轴方向为主轴方向
2.对齐方向
①主轴上的对齐方向
属性:justify-content
属性值
– flex-start 默认值,表示元素在起始位置
– flex-end 表示元素在结束位置
– center 居中
– space-between 两端对齐,其余空间自动分配
– space-around 所有子级元素左右间距都是一样
– space-evenly 所有子级元素之间的间距都是一样的
②侧轴上的对齐方向
属性:align-items
属性值:
– flex-start 同上
– flex-end
– center
– baseline 基线对齐
当所有子级元素宽高都一样的情况下,baseline和flex-start的效果一样
当子级元素不设置高度的情况下不设置baseline,子级会默认拉伸
当所有子级元素都是文本的情况下,排列方式都是基线对齐
– stretch 拉伸
③当子级元素的总宽度大于父级的时候,默认是进行挤压,不会掉下去
换行属性:flex-wrap
属性值:
– nowrap 不换行(默认)
– wrap 换行
④当设置换行时,行与行之间默认间距较大
属性:align-conter
属性值:
– 常用 flex-start 换行为起始位置
– flex-end
– center
– space-between
– space-around
– space-evenly
添加在子级元素的属性:控制单个元素的位置
1.控制子级元素在侧轴上的对齐方式
属性:align-self
属性值:
– flex-start 同上
– flex-end
– center
– auto
父级元素有侧轴的对齐方向 继承父级元素的对齐方式
父级元素没有侧轴的对齐方向 默认为拉伸
– stretch 拉伸
2.order 优先级 number 往后显示
属性flex的使用(不是属性值flex)
属性:flex
属性值:
number
常用的是1,也可以设置2,3,4
设置为1的时候一般用于移动端中间main布局,上下为固定高度,中间设置flex为1可以自适应到用户手机屏幕的宽度。
flex-grow:空间分配
0 为当前元素正常显示分配
1 当前元素分配比例
flex-shirnk:收缩的量
0 表示不缩放
1 表示正常缩放
flex-basis:显示的比例
auto 正常显示
0%~100% 所占比例(不会撑开父级元素,会把其他子级撑小)