1. 首页
  2. IT资讯

web前端程序员必看之浮动布局与弹性布局的区别

“u003Cdivu003Eu003Cpu003EWeb页面布局技术主要css2.0中主要出现了浮动布局与定位,以及css3中新的布局方式弹性布局。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ff528b1c6d0c147bbbb020cbc5a6d1ba1″ img_width=”509″ img_height=”288″ alt=”web前端程序员必看之浮动布局与弹性布局的区别” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E对于web页面布局史中,浮动与定位统治了所有页面的布局。定位有不可替代的优点,主要的优点是可以实现多层级结构,且子元素的位置不局限于父元素的范围内。u003Cu002Fpu003Eu003Cpu003E浮动布局主要用于解决多个块元素共存于一行的问题。虽然浮动可以解决多个块元素共存一行的问题,但是也会有非常不好的影响。u003Cu002Fpu003Eu003Cpu003E影响一,浮动元素会脱离文档流,使用浮动技术后,还要清除浮动的影响。u003Cu002Fpu003Eu003Cpu003E图1:元素浮动u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F4509b6b0a1b0432f8b649fa1991d70c3″ img_width=”736″ img_height=”518″ alt=”web前端程序员必看之浮动布局与弹性布局的区别” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E图2:清除浮动u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Facba6557fded4c80b84edd650c3b8bd4″ img_width=”734″ img_height=”560″ alt=”web前端程序员必看之浮动布局与弹性布局的区别” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E影响二,在多个块元素共存于一行后,在块元素的宽度无法达到父元素的宽度时,为了美观,会采用等距分隔或等距环绕设计。对于这样的设计,则需要人为的,精确的计算块元素的外边距。u003Cu002Fpu003Eu003Cpu003E图3:精确计算实现等距分隔u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F32a2e1b57e694d64a70dbfb5749b52c8″ img_width=”740″ img_height=”582″ alt=”web前端程序员必看之浮动布局与弹性布局的区别” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E由于浮动技术有很多的缺点,所以将会受到很大的冲击,它的对手将是弹性布局。弹性布局主要作用是,设置父元素内的多个块元素的排列顺序以及分布方式。u003Cu002Fpu003Eu003Cpu003E弹性布局与浮动相比,不但可以实现多个块元素共存于一行,而且对父元素没有不好的影响,同时实现子元素等距分隔,或等距环绕并不需要人为的计算。弹性布局会自动计算。u003Cu002Fpu003Eu003Cpu003E图4:弹性布局u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fcebb57bc9465444a8bbc1842e753a7b3″ img_width=”743″ img_height=”536″ alt=”web前端程序员必看之浮动布局与弹性布局的区别” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E图5:实现等距离分隔u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F002b6c87ea0c41db9c214bebdca798d8″ img_width=”744″ img_height=”574″ alt=”web前端程序员必看之浮动布局与弹性布局的区别” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E结束语:u003Cu002Fpu003Eu003Cpu003E望此文成为一盏明灯,指引你们来时的路。u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:web前端程序员必看之浮动布局与弹性布局的区别

主题测试文章,只做测试使用。发布者:玩家L-,转转请注明出处:http://www.cxybcw.com/26878.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code