布局解决方案

网友投稿 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

center

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布局

先看效果图

下面是实现代码:

top
left
right
bottom

2.使用flex布局

top
left
right
bottom

以上的两种方案,就是实现定宽和定高的实现方案。如过是不定宽和不定高的话,只要把相应的值改为百分比就可以了。

还有一种是全部都自适应的情况

采用position是无法做到的因为top的值会随时影响其他的值,那么就只有使用flex解决了。 使用flex就只需要把定宽和定高的地方去掉就可以了

top
left
right
bottom

讲了这么多,总结起来,布局就是靠float和position和table加上很强大的flex但是性能和兼容是个问题,载加上相应的html结构就可以实现我们想要的任何布局了,并且要学会分解问题,这才是最重要的。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:STM32测试试题
下一篇:python基本数据类型都在这里(数据类型 Python)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~