1、满屏品字布局
第一种方法：下面一排的div均采用float。
第二种方法：flex布局
注意外部的div设置flow-wrap：wrap。默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
2、品字布局
注意：HTML中先写右下角的div,再写左下角的div。这与float浮动与盒子在文档流的位置有关系。如果反过来排列div，则左下的div在float之后就不会被右下角的div卡住，就会自己浮动到网页的最左边。
其实实现方法很简单，基本思路：
（1）三块高宽是确定的；
（2）上面那块用margin: 0 auto;居中；
（3）下面两块用float；
（4）用margin调整位置使他们居中。右下的div用margin-left：50%，左下的div的margin-left：-2*width，使得左下的div跑到右下div的左边。
下面的这种方法，不用在HTML中先写右下角的div,再写左下角的div。直接按先写左边div、后写右边div的顺序写。但是注意：左下的div浮动之后，又进行了相对定位，这样一来，本来相对定位是相对于自己在文档流以前的位置定位的，浮动之后再相对定位，则就相对与自身脱离了文档流的浮动元素的位置定位。左下的margin-left是负的自身宽度，且left：50%。右下的margin-left不变。
3、两列自适应布局（左列宽度固定，右列宽度自适应）
第一种方法：float+margin（推荐）
第二种方法flex布局：
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
4、三列自适应布局（左右两列宽度固定，中间列宽度自适应）
注意HTML中左列在前，右列在中，中间列在最后。且右列float：right，左列float：left
第二种方法：flex布局
HTML中的div按照左、中、右的顺序即可。
5、三列高度自适应布局（1、3的高度随2变）
table布局，table标签border-collapse：collapse；为了内容向上对齐，td标签vertical-align:top；vertical-align:top设置到table标签上没用。设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可使得内容换行。
其中：word-break:break-all正如其名字，所有的都换行。毫不留情，一点空隙都不放过。而word-wrap:break-word则带有怜悯之心，如果这一行文字有可以换行的点，则就不打英文单词或字符的主意了，让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现一片一片牛皮癣一样的空白的情况。
table-layout 属性用来显示表格单元格、行、列的算法规则。
automatic默认。列宽度由单元格内容设定。
fixed列宽由表格宽度和列宽度设定。
inherit规定应该从父元素继承 table-layout 属性的值。
可以看出3列最后的高度是其中最高的高度。
6、三行布局，中间一行自适应
第一种方法：注意把body的margin清除，不然浏览器自带margin会影响。对上下两行使用绝对定位。
第二种方法，flex布局。加上flex-wrap属性。
第三种：table布局
table布局，table标签border-collapse：collapse；为了内容向上对齐，td标签vertical-align:top；vertical-align:top设置到table标签上没用。设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可使得内容换行。
7、有固定间隔的品字布局
第一种方法：使用margin实现间隔。上面的div设置margin-bottom，左下的div设置margin-right
第二种方法：table布局，利用border-spacing实现间隔。且上面一行td的colspan="2"
8、品字布局的上下两行的高度保持一致，即下面一行的高度随上面一行高度的变化而变化。
两行的高度保持一致，这是无法利用纯CSS实现的。就算是利用rem，也只是让上下两行的高度与屏幕自适应，即高度随屏幕的变化而变化。但这两行的高度保持一致，即上面一列的高度变了，下面一列的高度也变化。这是不可能的。因为上面一行的内容如果很多，会把高度撑大，而这时候，下面一列的高度不会变。
注意：height不设置，则默认height就是0.这点height和width不同。不设置width，则width默认不为0。即，不设置height，则元素显示不出来，不设置width，元素可以显示出来。
但是，float一定要指定宽度。如果不指定宽度，那么float之后元素width为0。
网友评论