web浮动布局与弹性布局有什么区别

电子说

1.3w人已加入

描述

Web页面布局技术主要css2.0中主要出现了浮动布局与定位,以及css3中新的布局方式弹性布局。

对于web页面布局史中,浮动与定位统治了所有页面的布局。定位有不可替代的优点,主要的优点是可以实现多层级结构,且子元素的位置不局限于父元素的范围内。

浮动布局主要用于解决多个块元素共存于一行的问题。虽然浮动可以解决多个块元素共存一行的问题,但是也会有非常不好的影响。

影响一,浮动元素会脱离文档流,使用浮动技术后,还要清除浮动的影响。

图1:元素浮动

CSS

图2:清除浮动

CSS

影响二,在多个块元素共存于一行后,在块元素的宽度无法达到父元素的宽度时,为了美观,会采用等距分隔或等距环绕设计。对于这样的设计,则需要人为的,精确的计算块元素的外边距。

图3:精确计算实现等距分隔

CSS

由于浮动技术有很多的缺点,所以将会受到很大的冲击,它的对手将是弹性布局。弹性布局主要作用是,设置父元素内的多个块元素的排列顺序以及分布方式。

弹性布局与浮动相比,不但可以实现多个块元素共存于一行,而且对父元素没有不好的影响,同时实现子元素等距分隔,或等距环绕并不需要人为的计算。弹性布局会自动计算。

图4:弹性布局

CSS

图5:实现等距离分隔

CSS

结束语:

望此文成为一盏明灯,指引你们来时的路。

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分