一、使用背景自适用
通过背景颜色的设定可以实现页面自适用,其实现原理如下:父元素使用自己的默认高度值达到自适用子元素的高度,并使用清除浮动元素,使浮动元素内容影响父元素。
下面通过一个具体实例来说明上述原理:
二、左右自适用的两列布局
如果布局页面中的右侧元素是固定的,必须使用元素覆盖来实现左右均能适用的效果。
下面通过一个具体实例来说明上述原理:
三、莫列固定时的自适用
1.三列中有一列固定
如果页面的三列元素中有一列固定,要实现另外两列的完全自适用,原理和上节二一样。下面通过一个实列(右边固定)来说明:
注意上述实现中的固定元素要是中间列,其实现自适用的原理和上述实例一致,具体实现如下:
2.三列高度都不确定
如果页面中三列元素的高度都不固定,要实现任意两列的自适用,需要将嵌套的子元素放在两边的边框上。下面将通过一个具体的实例来说明三列高度都不确定时三列自适用的实现方法。
上述代码中,使用负边界将right和left列移到到mm元素的边框中。如果在任何一列元素内添加内容,则另外两列均皎自动适用高度。
四、水平自适用
在页面中要想实现元素水平自适用,可以通过百分比布局和绝对定位布局实现。
1.使用百分比布局
2.使用绝对定位布局