calc(x - y)函数
calc() 函数用于动态计算长度值
每个运算符前后都需要留一个空格
pointer-events:一般用于遮罩层
auto
none:你让点击无效 穿透当前元素(一般用于遮罩层)
怪异盒模型
标准盒模型:
宽高是独立的,内边距是独立的,会把元素撑大,边框是独立的
注:宽高不包含内边距和边框
怪异盒模型: box-sizing:border-box;
宽高包含内边距和边框
怪异盒模型触发方式:
方式一:丢失<!doctype html> 在IE678下会触发
方式二:box-sizing:border-box
verticle-align 元素垂直对齐方式
top 顶部对齐
middle 中间对齐
bottom 底部对齐
针对inline-block和inline元素有效
弹性盒布局:display:flex;diaplay:inline-flex;(两个元素在一行显示)
作用:控制子集在“主轴”上排列
显示规则:所有的子元素都会在主轴上排列
默认X轴为主轴,则Y为侧轴
如果设置Y轴为主轴,则X为侧轴
设置方法:父元素必须为diaplay:flex;
设置为diaplay:flex;
1.弹性盒,默认X轴为主轴,子元素默认沿主轴排列
2.父级元素为弹性盒子,子元素都能设置宽高
3.父元素为弹性盒子,让子元素在弹性盒中上下左右居中,只要设置margin;
设置display:flex/inline-flex;对于子元素的影响
子元素的float和clear无效
vertical-align(元素垂直对齐方式)无效
容器(父元素)
属性:
flex-direction 设置主轴
row 水平方向为主轴
column 垂直方向为主轴
row-reverse 水平反向主轴
column 垂直反向为主轴
flex-wrap 子元素是否换行
nowrap 不换行
wrap 子元素换行
wrap-reverse 子元素反向换行
flex-flow :设置主轴 是否换行;(复合写法)
justify-content:;子元素在主轴上的对齐方式
flex-start 起始位置
flex-end 终点位置
center 居中
space-around 完全自动分配
space-between 两端对齐
align-items:;子元素在侧轴上的对齐方式
flex-start 起始位置
flex-end 终点位置
center 居中
stretch 默认位置对齐
baseline 基线对齐
align-content:;多行元素在侧轴上的对齐方式 多行元素才会生效
flex-start 起始位置
flex-end 终点位置
center 居中
space-around 完全自动分配
space-between 两端对齐
stretch 默认位置对齐
项目(子元素)
align-self:;子元素在侧轴上的对齐方式
flex-start 起始位置
flex-end 终点位置
center 居中
stretch 元素被拉伸以适应容器(此元素不设置宽度和高度时会被拉伸)
auto 默认值 如果父元素设置align-items,子元素将跟随父元素的设置
order:;数值越大,越靠到后边去 (可以为负数)
flex:1; 剩余的空间都给指定子元素