- 新老盒子模型区别 box-sizing
- calc语法和用处
- flex的使用
- jusitify-content用法
- align-items的用法
- align-content的用法
- align-items和align-contend的区别
- flex-flow讲解
- align-self的作用
10.flex-grow
11.oder注意事项
盒子box-sizing
我们在css中经常会用到padding
、border
,那这时候问题就会出现了,例如有一个div
,宽高我们都设置为100px,我们通过offsetWidth属性打印div宽度,此时为100px,如果你添加一个10px的border,在通过offsetWidth
打印div宽度,此时应该为120px;这就是老盒子模型。那么我们来看对比一下盒子模型;
box-sizing:
content-box
border-box
根据名字我们或许也能猜出,content(内容),content-box
也就是说无论是padding
还是border
不会占content的位置,所以使用了padding
、border
会向外扩张,盒子变大、宽度就会增加!border-boxpadding
、border
会向内扩张,盒子不变、宽度不变。
calc公式
刚学习css的时候,心里总有疑问有没有这样的语法(当然这样写是丝毫没有作用的❌)
width: 100% - 100px;
但是,我要告诉大家,CSS还真的提供了这样一个函数,那就是calc公式
width: calc(100% - 100px);
- 需要注意的是,运算符前后都需要保留一个空格,例如:
width: calc(100% - 10px)
;
- 任何长度值都可以使用
calc()
函数进行计算;
- calc()函数支持 "+", "-", "*", "/" 运算;
- calc()函数使用标准的数学运算优先级规则;
display:flex
display:flex
添加在父级
适配浏览器:-webkit-
(真是工作中,使用postCss
插件,会自动适配浏览器)
如果使用了flex
弹性布局,那么就不需要使用float
浮动,如果想使用position
定位,最好也是在外面套一层来使用。
父级身上其他元素
justify-content 子元素水平排列方式 演示
- center:居中
- flex-start: 居左
- flex-end: 居右
- space-between: 两端对齐
- space-around: 子元素拉手分布
align-items 子元素垂直排列
- center 居中
- flex-end 底部
- flex-start 开始
align-centent 多行的时候,垂直排列
- center 居中
flex-direction: 排列方式
- row 横向排列
- row-reverse 横向反向排列
- column 纵向排列
- column-reverse 纵向反向排列
flex-wrap 子元素是否在一行显示
- nowrap 不换行
- wrap 换行
flex-flow:等价于 flex-direction + flex-wrap
- flex-flow: row wrap
网友评论