轻量级前端框架助力开发者提升项目效率与性能
730
2022-09-08
布局解决方案
两列布局
一列定宽,另一列自适应
直接上代码一看就懂
left right
不兼容ie6
更加完美的方案
left
right
right
2.float+overflow:hidden 这里用的overflow会触发一个叫做bfc模式,就是块级格式化上下文,这就会把这个盒子和外界隔离开来,不会让其他浮动影响到自己,(javascript:void(0)) 仔细看清楚浮动和bfc可以看这篇文章。
left
right
right
3.使用table
left right right 4.使用flex left right right flex是根据内容来进行调整,所以对性能有影响,所以只能做小范围的布局。 多列顶宽,一列自使用 还是上面的思路 left right right 上面这些就是做个演示,看清楚思路就行,具体效果需要靠实际项目实现 一列不定宽,一列自适应 1.使用float+overflow left right right ie6不可以 2.使用table left right right 3.使用flex left right right 在更多列的布局中,还是使用float就可以把第二列设置成第一列同样的样式。 多列等宽布局 1。 仔细看这幅图片这个公式 得到下面这个代码 1 2 3 4 5 2.使用table布局 1 2 3 4 5 3.使用flex 1 2 3 4 5 等高布局 1.使用table left right right 2.使用flex left right right 3.使用float left right right 兼容性较好,但是不是真正的等高,是伪登高,只是让他的背景看起来登高,并且做了截取。 全屏布局 1.使用position布局 先看效果图 下面是实现代码: 2.使用flex布局 以上的两种方案,就是实现定宽和定高的实现方案。如过是不定宽和不定高的话,只要把相应的值改为百分比就可以了。 还有一种是全部都自适应的情况 采用position是无法做到的因为top的值会随时影响其他的值,那么就只有使用flex解决了。 使用flex就只需要把定宽和定高的地方去掉就可以了 讲了这么多,总结起来,布局就是靠float和position和table加上很强大的flex但是性能和兼容是个问题,载加上相应的html结构就可以实现我们想要的任何布局了,并且要学会分解问题,这才是最重要的。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
center top left right bottom top left right bottom top left right bottom
发表评论
暂时没有评论,来抢沙发吧~