独行DIV自适应宽度布局CSS实例与应用范围

独行DIV自顺应宽度结构CSS实例与缩减应用畛域

CSS5先给各人简介自力一列自顺应宽度，也便是零丁一行宽度自适应DIV的机关。经由过程DIV CSS实例CSS自适应宽度构造门径，再过常见用场介绍子虚掌控自适应独占一行一列的组织才智。

枢纽点：自适应，这个时分就不克不及使用固定的CSS宽度值，这个时刻就只能使用百分比的宽度告白宽度。

环节代码：width:?% 以百分比为单元的百分比值，人造对象会根据配置百分比自动计算该对象宽度。

实例CSS代码：

.box{ width:60%; height:80px; border:1px solid #F00; margin:0 auto}

说明：这里设置宽度为60%，为了便于考察到成效，以是赐与设置装备摆设高度和血色边框，由于考虑到自力设置一个DIV盒子通常居中的，所以配置margin:0 auto

完整的HTML源代码（包含HTML与CSS）：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自力一个宽度自顺应实例</title>
<style>
.box{ width:60%; height:80px; border:1px solid #F00; margin:0 auto}
</style>
</head>
<body>
<div class="box">形式</div>
</body>
</html>

实例成效截图：

div css独列一行自适应宽度实例截图独列一行自顺应宽度实例截图

以上是自力一行自顺应宽度残破实例。

CSS5扩展思想熟谙： 1、在通常网页构造中，通常主体形式凡是固定宽度，所以详细配置宽度凡是依据美工图肯定获得，但无心也不扫除宽度是自顺应的这个时候就不克不及配置静止宽度格局。 2、在一部分DIV CSS机关中，因为对最外层都设置详细宽度，而独行的子级偶尔就不必要设置装备摆设宽度名堂，这样默许DIV宽度就是100%，假定一个对象设置宽度固定后，而子集不设置装备摆设宽度而设置装备摆设paddding-left或padding-right（笼统两个都设置装备摆设）这个时刻涉猎器解释涌现这个子集DIV宽度仿照照旧会非常智能地用总宽度去减去padding占用宽度。一样平常状况机关有部分时，独行一列的DIV只需不使用浮动均可以不用设置装备摆设详细宽度或百分比宽度，因为浏览器都市根据此层父级而智能处理宽度。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/shili/s51868.shtml