怪异盒模型:(IE盒模型:丢失文档类型的时候,在IE低版本浏览器中会以怪异盒模型方式解析)
box-sizing:content-box(标准盒模型)/border-box(怪异盒模型)
特点:1)padding不会撑大容器大小;2)border向内长(button也是)
--不推荐PC端使用,建议在移动端使用;
弹性盒: display:flex;(控制子级元素在父级元素上的排列方式)
-- 弹性盒属性要给父级添加,使父级形成弹性盒环境 控制子级元素;
-- 弹性盒中默认主轴方向是X轴(水平方向) 默认的侧轴是Y轴;
--弹性盒环境下所有的元素都可以直接设置宽高大小;
--居中方式:针对于单个元素设置(margin:auto);
注意:浮动在弹性盒的环境下是没有作用;定位、盒模型可以使用;
添加在父级元素上的属性:
控制弹性盒主轴方向: flex-direction:row(默认x轴)/column(主轴为Y轴,测轴为X轴)
主轴的对齐方式:justify-content:flex-start /flex-end /center /space-between(两端对齐,其他空间自动分配)/space-around(元素间间距自动分配)/space-evenly(元素间间距完全相等)
侧轴对齐方式:align-items:flex-start/ flex-end/ center/ baseline
换行:flex-wrap:nowrap/wrap (弹性盒中默认所有的子级元素都会在一行内显示 进行挤压)
行间距:align-content:flex-start /flex-end /center /space-between(两端对齐,其他空间自动分配)/space-around(元素间间距自动分配)/space-evenly(元素间间距完全相等)
添加在子集元素上的属性:
align-items:表示侧轴上的对齐方式 控制所有的子级元素
align-self:表示侧轴上的对齐方式 控制单个子级元素
flex作为属性:
flex:数字 (表示所占份额)
flex:1 占主轴上的剩下的空间并且会撑大当前盒子的大小 重点!!!
居中方式的总结:
- 表格居中 align、valign
- 文本居中 text-align、line-height
- 版心居中 margin:0 auto
- 基线对齐 加标签 转类型 基线对齐 vertical-align
- 背景居中 background-position
- 定位居中 已知(1. left50%、top50% + margin:-本身宽高的一半; 2.计算属性)和未知居中(上下左右都为0)
- 位移居中
- 弹性盒的主轴/侧轴居中