css3新特性 flex
grid,百分比布局
flex布局原理
我一直不明白flex布局原理是什么,原理是源码如何实现的吗,这个css3新特性,我也找不到源码
后来才知道,原来网上那么多主轴,纵轴讲解就是他的原理。
实践出真知。
弹性布局 em
1、浏览器默认font-size:16px
2、元素自身没有设置字体大小,其他属性:1/(父元素)font-size * 需要的大小 = ()em
3、设置字体大小,转换:1/(父元素)font-size * 需要的大小 = ()em
4、若有字体大小,其他属性:1/(元素自身)font-size * 需要的大小 = ()em
rem布局(可以实现移动端适配)
设置:
//一般情况
html{
font-size: calc(100vw/7.5)
}
这样设置的话,设计图是750px的,你根据每个元素的尺寸除以100,就是他的rem大小
rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局。