flex布局,grid布局,弹性布局

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字号,从而实现了自适应布局。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值