html盒子模型布局百分比,盒模型中的百分比和auto探讨及居中的应用

一、盒模型中百分比和auto

盒模型中属性值可以是数值、关键字、函数、百分比和auto等，本文重点探讨下常用的、非常相似的、都需要浏览器计算的的百分比和auto 。二者最大区别据某博文中总结是：auto与子元素有关，100%与父元素有关。 总体来说是正确的，但要修正一点就是margin的auto是与父元素有关 。下面是盒模型(只考虑 块级元素 )中各属性对百分比和auto处理情况。

几点重要说明：

所有margin、padding默认清除 即*{margin:0;padding:0}

块级元素的指明高度 就是CSS中用height指明的，可以是固定值、相对值或根据父父元素的百分比计算到。记 height-d (d表示定义或设置之意)。

块级元素的内容高度 顾名思义就是内容撑开的高度，记 height-c(c表示内容之意)

块级元素的真实高度 就是在chrome开发者工具中盒模型的高度或用户在浏览器中所看到的高度。记 height 。

height、height-d和height-c的关系: 不指定height时，height-d=0,而height-c是随内容增加而增加的,此时height=height-c。

指定了height时，height-d=指定高度，而height-c仍然是随内容增加而增加的，此时height=height-d。

下面在使用高度概念时要区分这三个标记，一定要看清上面的说明。

盒模型相关属性

百分比(chrome测试过结论)

auto(chrome测试过结论)

width

父元素宽度的百分比

width+margin+border+padding等于父元素宽度

height

父元素指明高度height-d的百分比

计算结果为0，元素高度由内容撑开

margin

父元素宽度的百分比

左右时 是父元素宽度减去元素的宽度后左侧或最侧最大化分配。 上下时 则为0。

padding

父元素宽度的百分比

不支持

border

不支持

不支持

left

父元素宽度的百分比

left=0

right

父元素宽度的百分比

right=父元素宽-元素宽

top

父元素真实高度height的百分比

top=父元素内容高度height-c

bottom

父元素真实高度height的百分比

bottom=父元素真实高度height-元素真实高度height-top

从上面可以看出只有盒模型中width、height和margin完全支持百分比和auto,所以本文主要探讨宽度、高度和外边距。

二、宽度和高度中百分比和auto

用户阅读习惯决定了CSS对待宽度和高度不同处理方式，即宽度受限有最大宽度，而高度是可以滚动的没有最大高度。一般来说最大宽度不大于设备横向最大尺寸。

宽度和高度的默认值: 都是auto,具体表现见上面表中说明的。

1、宽度width中的百分比和auto经典对比width:auto，此时div的高度为100px,左右margin为40px,上下margin为10px;

width:100%，此时div的高度和左右margin同上

.box{height:100px;margin:10px40px;background-color:#0072d0; }

/* 1. width:auto */

.auto{width:auto;}

/* width:100% */

.per{width:100%;}

width:auto