84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
个人来看
1、绝对定位完全脱离了普通流(flow,后面不再说明),无法跟普通流建立交互关系(普通流能影响绝对定位,但绝对定位不影响普通流)。这样来说,在一些弹性布局的场景中,绝对定位就存在一些缺陷,它只适应也固定布局场景。
2、浮动,本身不是用来做布局的,而是做文字环绕效果。但是CSS2.1好像也就这个属性能够快速地满足一些需求,因此才有了浮动布局。浮动相对绝对定位好处是,它可以影响IFC,也可以通过 clear 清除浮动影响块级布局,可以与普通流建立良好的交互。 而且浮动本身是脱离普通流的,在顶端对齐和右对齐上有特别的优势。而 inline-block 的垂直对齐上有更多选择。
3、inline-block,这个属性也不是用来布局的(偏向于排版),但是在 CSS3 普及之前,它的用处也很大。该元素的盒子在行框中进行格式化,其顺序与源HTML中的顺序一一对应。 同时该元素不脱离普通流,这比浮动来说有更大的优势,它可以跟普通流产生自然交互,而不必要借助去其他属性。而且相比浮动,相邻元素间的垂直对齐方式,inline-block 比 float 更加灵活, float 格式化时有一条规则,就是越高越好(因此常常表现为顶端对齐),而 inline-block 在行内格式化,拥有更灵活的垂直对齐方式。
应用:
如果使用了浮动,清除浮动就会成为你的副作用,而且如果你没有良好的HTML/CSS 结构的话,清除浮动是一个很复杂的事情。
inline-block 虽然避免了清除浮动的事情,但是会有另一个副作用,即空白符问题。这个问题的解决方案也令人十分蛋疼,因为毕竟 inline-block 不是布局属性,它仅仅是行内级块容器盒子。 同时,垂直居中、行高等问题也有可能是一个副作用。
其他:
其实在 CSS2.1中,利用表格 table 布局也是非常强大的方法。表格布局在同行等高,同列等宽,垂直居中对齐上面的优势是其他方法很难媲美的。甚至于在自适应场景中,表格布局的灵活性也非常出众。
个人来看
1、绝对定位完全脱离了普通流(flow,后面不再说明),无法跟普通流建立交互关系(普通流能影响绝对定位,但绝对定位不影响普通流)。这样来说,在一些弹性布局的场景中,绝对定位就存在一些缺陷,它只适应也固定布局场景。
2、浮动,本身不是用来做布局的,而是做文字环绕效果。但是CSS2.1好像也就这个属性能够快速地满足一些需求,因此才有了浮动布局。浮动相对绝对定位好处是,它可以影响IFC,也可以通过 clear 清除浮动影响块级布局,可以与普通流建立良好的交互。 而且浮动本身是脱离普通流的,在顶端对齐和右对齐上有特别的优势。而 inline-block 的垂直对齐上有更多选择。
3、inline-block,这个属性也不是用来布局的(偏向于排版),但是在 CSS3 普及之前,它的用处也很大。该元素的盒子在行框中进行格式化,其顺序与源HTML中的顺序一一对应。 同时该元素不脱离普通流,这比浮动来说有更大的优势,它可以跟普通流产生自然交互,而不必要借助去其他属性。而且相比浮动,相邻元素间的垂直对齐方式,inline-block 比 float 更加灵活, float 格式化时有一条规则,就是越高越好(因此常常表现为顶端对齐),而 inline-block 在行内格式化,拥有更灵活的垂直对齐方式。
应用:
如果使用了浮动,清除浮动就会成为你的副作用,而且如果你没有良好的HTML/CSS 结构的话,清除浮动是一个很复杂的事情。
inline-block 虽然避免了清除浮动的事情,但是会有另一个副作用,即空白符问题。这个问题的解决方案也令人十分蛋疼,因为毕竟 inline-block 不是布局属性,它仅仅是行内级块容器盒子。 同时,垂直居中、行高等问题也有可能是一个副作用。
其他:
其实在 CSS2.1中,利用表格 table 布局也是非常强大的方法。表格布局在同行等高,同列等宽,垂直居中对齐上面的优势是其他方法很难媲美的。甚至于在自适应场景中,表格布局的灵活性也非常出众。