5种CSS布局

Posted by luoway on October 28, 2015

浮动布局

使用CSS float属性完成布局

需要指定父元素宽度,子元素宽高。
能够完成子元素浮动排布,并随父元素宽度变化而改变排布。

圣杯布局

圣杯布局是一种三列布局,两边定宽,中间自适应

圣杯布局的原理就是当子元素处于浮动状态时,某个元素虽然是写在了后面,但可以通过负边距让它在浏览器显示的时候是在前面的。

栅格布局

栅格布局指定了1~12一系列栅格,方便地设置宽度比例的同时,能够自适应宽度。

对于bootstrap中的栅格负边距,其具体意义众说纷纭,有待考证。

列表布局

拜拜了,浮动布局-基于display:inline-block的列表布局

对于浮动局部的局限性,想必同行们都知道,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐,此原因是属于恶魔系的float属性破坏了inline box

在表格布局时代,我们基本上不用担心列表元素高度不一会错位的问题,表格中的单元格(td标签)自动回等高关联,且水平列表项还包裹在tr等标签中,所以,不可能发生错位。所以,很正常的,我们会想到利用类似table属性的样式进行一些布局,例如display:table; display:table-row; display:table-cell;display:inline-block;等属性

text-jusyify下的inline-block自适应列表布局实例页面

特点在于不会出现像浮动布局的特征“瀑布流”那样参差不齐,在文字配图的情况下更具美感。

弹性盒子布局

w3school: CSS3 box-flex 属性 的例子

Hello

W3School

知乎:CSS3 display:flex和display:box有什么区别?