一、品字:
1、html:
2、css
总结:主要是利用margin属性和float加上transform,值得注意的是当div2使用了tranform改变了其位置时,它还占据着原来的位置,这是因为transform不会脱离文档流,也不改变文档流的大小和位置
div2和div3仅设置浮动后的图:
div2加上tranform之后的图,按道理,div3应该会直接浮动到div2的位置,但是因为div2还占据着之前的位置,所以div3不改变其位置,需要利用transform属性将div3移动
最后效果图:
二、满屏品字布局
html:
css:
结果:
总结:满屏品字布局比较简单,只需要width百分比布局和float浮动属性即可