学习了css布局的基础后又来翻阅《精通css》这本经典书籍,对布局有了进一步的认识。
基于浮动的布局
两列的布局仍然是使用一个元素向左浮动,一个元素向右浮动,值得注意的是要加入display:inline 用来防止IE中的双外边距浮动产生的bug。
三列布局与昨天的使用了不同的方法,全部依靠浮动来实现,与两列布局一样先实现主内容与次内容的左右浮动,然后对主内容中的主div与次div在分别浮动。
不要忘记因为元素的浮动需要对父元素清理浮动的处理 overflow:hidden
但是三列布局的时候没有对主内容清除浮动也没有问题的。(什么原因?)
流式布局和弹性布局
固定宽度的布局有很多缺点,第一是固定的 第二也关于行长和文本易读性的,往往只适合于浏览器默认字号。
流式布局的话尺寸采用百分比而不是像素设置,能够相对于浏览器窗口进行伸缩。
弹性布局的话就是设置基字号,布局会随着文本字号的增大而增大。
时间: 2024-10-19 08:02:03