前端CSS的各种布局方法

web前端开发面试理由 前端开发需要学的英文怎么说 前端开发需要那些技术

当产品把一个需求设计交到手中,我首先要做的是一点点的解剖这些需求,首先想到的是html的结构,根据要兼容的浏览器,数据的拼接,代码的可维护性,扩展性来选择css的布局方法。有时候,一个好的布局可以减少很多代码。

布局方法主要有以下几种:

一.零布局
零布局的意思就是几乎完全按照正常文档流的方式来布局,不采用比如float,position,display等css属性。

二.display布局
每个元素都有自己的display属性,有的是block,有的是inline。css3中增加了好几个display的值,比如list-item,table-cell,inline-block等。其中,用于布局最多的是inline-block,但是因为IE8以下不支持它,所以要用这个属性值的时候要触发行内元素的hasLayout。
inline-block和inline差不多,但是具备一个width和height,还能以inline不占一行的方式排列。但有些地方是我们要注意的:
1.Vertical-align 属性能够影响inline-block,你可能需要把vertical设定为top。
2.在每一栏上设定宽度。
3.如果在html中他们存在空格代码,那么列与列之间同样也存在间隙。

三.float布局
float布局的用途是比较广泛的,如果项目做的多的话,场景的积累也会变得 越来越多。例如float可以用来实现类似inline-block的布局效果,也可以用来实现文字在图片周围浮动的效果,或者是文字向左边增加的效果等等。但是需要注意的是:
1.float属性不会让元素上浮到另一个z-index层,它仍然让元素在z-index:0层排列。
2.float会影响它周围的元素。
3.float会把该元素以inline-block显示,就算我们显式地让元素以block或者inline显示都不行。

四.position布局
position布局能应对很多复杂的布局。给元素设置relative值,元素会相对于它之前的位置做相应的移动,但它还是在z-index:0这一层,但它对于周围的元素是没有影响的。
给元素设置absolute值,该元素会完全脱离文档流,就是不在z-index:0这一层了,也不会对周围元素有影响。给元素设置Fixed值,该元素相对于视窗进行定位,不管你的滚动条滚到哪里,该元素总会出现在相同位置。所以position布局可以用来实现元素的重叠摆放,元素固定位置呈现等。

前端开发项目难点 前端开发网上接项目 前端项目开发时间

» 本文来自:前端开发者 » 《前端CSS的各种布局方法》
» 本文链接地址:https://www.rokub.com/5888.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!