css中的应用自适用特性

来源：互联网发布：js怎么写css样式编辑：程序博客网时间：2024/05/09 15:40

一、使用背景自适用

通过背景颜色的设定可以实现页面自适用，其实现原理如下：父元素使用自己的默认高度值达到自适用子元素的高度，并使用清除浮动元素，使浮动元素内容影响父元素。

下面通过一个具体实例来说明上述原理：

二、左右自适用的两列布局

如果布局页面中的右侧元素是固定的，必须使用元素覆盖来实现左右均能适用的效果。

下面通过一个具体实例来说明上述原理：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>使用背景色自适用</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .mm{ width:300px; background:#cccccc; } .nn{ position:relative; float:right; margin-right:-300px; width:300px; background:#333333; color:#ffffff ; } .zz{ position:relative; float:left; margin-left:-300px; width:300px; background:#cccccc; color:#000000; } .bb{ clear:both; }</style></head><body><div class="mm"><div class="nn"><div class="zz">使用背景色自适用使用背景色自适用使用背景色自适用使用背景色自适用使用背景色自适用</div><div>使用背景色自适用使用背景色自适用使用背景色自适用使用背景色自适用使用背景色自适用</div></div><div class="bb"></div></div></body></html>

三、莫列固定时的自适用

1.三列中有一列固定

如果页面的三列元素中有一列固定，要实现另外两列的完全自适用，原理和上节二一样。下面通过一个实列（右边固定）来说明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>使用背景色自适用</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .mm{ width:450px; background:#cccccc; } .nn{ width:150px; float:left; background:#999999; } .zz{ position:relative; float:right; margin-right:-150px; width:150px; background:#333333; color:#ffffff; } .left{ position:relative; float:left; margin-left:-150px; width:150px; height:200px; background:#999999; color:#000000; } .middle{ float:right; width:150px; color:#000000; } .right{ float:right; width:150px; } .bb{ clear:both; }</style></head><body><div class="mm"><div class="nn"><div class="zz"><div class="left">左侧可变元素</div><div class="middle">中间可变元素</p> </div></div></div><div class="right">右边固定元素</div><div class="bb"></div></div></body>

注意上述实现中的固定元素要是中间列，其实现自适用的原理和上述实例一致，具体实现如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>使用背景色自适用</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .mm{ width:450px; background:#cccccc; } .nn{ width:150px; float:left; background:#999999; margin-right:150px; } .zz{ position:relative; float:right; margin-right:-300px; margin-left:150px; width:150px; background:#333333; color:#ffffff; } .left{ position:relative; float:left; margin-left:-300px; width:150px; height:200px; background:#999999; color:#000000; } .middle{ float:left; width:150px; margin-left:-150px; } .right{ float:right; width:150px; } .bb{ clear:both; }</style></head><body><div class="mm"><div class="nn"><div class="zz"><div class="left">左侧可变元素</div><div class="right">右侧可变元素</div></div></div><div class="middle">中间固定元素</div><div class="bb"></div></div></body></html>

2.三列高度都不确定

如果页面中三列元素的高度都不固定，要实现任意两列的自适用，需要将嵌套的子元素放在两边的边框上。下面将通过一个具体的实例来说明三列高度都不确定时三列自适用的实现方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>使用背景色自适用</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .mm{ width:150px; border-right:150px solid #333333; border-left:150px solid #999999; background:#cccccc; } .left{ position:relative; float:left; margin-left:-150px; width:150px; } .middle{ float:left; width:150px; } .right{ float:right; position:relative; width:150px; margin-right:-150px; color:#ffffff; } .bb{ clear:both; }</style></head><body><div class="mm"><div class="left">左侧可变元素</div><div class="middle">中间元素</div><div class="right">右侧元素</div><div class="bb"></div></div></body></html>

上述代码中，使用负边界将right和left列移到到mm元素的边框中。如果在任何一列元素内添加内容，则另外两列均皎自动适用高度。

四、水平自适用

在页面中要想实现元素水平自适用，可以通过百分比布局和绝对定位布局实现。

1.使用百分比布局

2.使用绝对定位布局