css品字布局

一、品字：

1、html：

2、css

 

 总结：主要是利用margin属性和float加上transform，值得注意的是当div2使用了tranform改变了其位置时，它还占据着原来的位置，这是因为transform不会脱离文档流，也不改变文档流的大小和位置

div2和div3仅设置浮动后的图：

 div2加上tranform之后的图，按道理，div3应该会直接浮动到div2的位置，但是因为div2还占据着之前的位置，所以div3不改变其位置，需要利用transform属性将div3移动

 最后效果图：

二、满屏品字布局

html：

        

 css：

 结果：

总结：满屏品字布局比较简单，只需要width百分比布局和float浮动属性即可