通过阅读和实践,我对几种常用的布局样式有了一定的了解,也稍微总结了一下原理,若有不对请大家纠错。谢谢
我理解的【两列布局】左边固定和右边自适应,或者右边固定左边自适应的原理是:
1.设置固定区域的宽度
2.设置自适应的区域的宽度为100%
3.设置他们向左或者向右浮动。
4.固定区域设置它的 外边距为负数 使 自适应区域能够和固定区域同在一行。
5.虽然自适应区域与固定区域同一行 但是它宽度其实是父级的宽度,所有自适应区域需要设置一个子区域,并且也需要让子区域中的内容能够正确显示在可视范围内。
【三列布局】 两边固定 中间自适应
1.我们可以把中间和右边看成一个 右边固定,左边自适应的布局。
2.设置左边区域的宽度和浮动
3.因为左边的区域就应该是文档流中的区域,但是我们设置了浮动,导致左边区域已经脱离了文档流,所有我们应该使用 position:relative 使左边区域还依旧显示在文档流的位置中。
4.给自适应区加一个子区域,并设置子区域的显示区域。