纯css html难点布局,前端CSS的各种布局方法

当产品把一个需求设计交到手中，我首先要做的是一点点的解剖这些需求，首先想到的是

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

一.零布局

零布局的意思就是几乎完全按照正常文档流的方式来布局，不采用比如float，position，display等

二.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.如果在

三.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布局可以用来实现元素的重叠摆放，元素固定位置呈现等。

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