详谈CSS中块级元素的宽度

1.块级元素和行内元素

CSS把处在正常文档流中的不同html元素区分为块级元素（block> 

2．块级元素的宽度

块级元素的宽度是指块级元素内容区、左右内边距、左右边框和左右外边距的宽度之和。而块级元素内容区的宽度由该元素的width属性来表示（或设置）。

图1简单的盒模型示意图

有一个简单的规则，就是块级元素的宽度总是等于其父元素内容区的宽度。如果一个div元素的父元素是body，那么这个div元素的宽度就等于body的宽度，也就是浏览器中窗口的宽度。一个处在正常文档流中的块级元素，其宽度是由七个部分共同决定的。可以称为块级元素的水平“七属性”，它们分别是：

• margin-left
• border-left
• padding-left
• width
• padding-right
• border-right
• margin-right

如下图盒子模型所示：

 

·         我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。

·         所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方。

P.S :因为width是内容部分的宽度，所以要增加外边距的时候要注意改小内容宽度的大小，否则内容部分将会出线，同志们可以简单试一下。

3.自动水平属性如何决定块级元素的宽度

在块级元素的水平七属性中，只有三个属性可以使用auto（自动）值，如图3所示。

图3 可以取auto值的水平属性

也就是说，只有margin-left、width和margin-right这三个属性可以使用auto值。这正是本文要讨论的核心问题，即在上述三个属性分别取不同的auto值和长度值，形成不同组合的情况下，相应块级元素盒子中各部分的宽度是如何确定的？

在掌握了各种组合的可能性和相应结果的基础上，我们就可以在遇到意外的情况时，对到底是CSS样式的问题，还是CSS解析引擎的问题作出正确的判断。并根据判断来决定是修改CSS样式、向浏览器提供商报告bug，还是采取过滤或hack手段来解决问题。

现在举例子说明，假设有如下简单的html代码：

<div>

    <p> </p>

</div>

而相应有8种可能的CSS规则：

1. p { margin-left:auto;width:auto;margin-right:auto; }

2. p { margin-left:50px;width:auto;margin-right:auto; }

3. p { margin-left:auto;width:auto;margin-right:50px; }

4. p { margin-left:50px;width:auto;margin-right:50px; }

5. p { margin-left:auto;width:200px;margin-right:auto; }

6. p { margin-left:50px;width:200px;margin-right:auto; }

7. p { margin-left:auto;width:200px;margin-right:50px; }

8. p { margin-left:50px;width:200px;margin-right:50px; }

将这8种可能的CSS规则应用到上面的标记以后，会得到如图3所示的结果（图中为父元素div添加了边框，而为了表示内容区的宽度，也为p元素添加了背景）。

（注意浅粉色背景的位置和大小）

图4 自动宽度的8种可能性

下面，我们就来逐一分析这8种情况：

第一种情况：

规则是 p {>p元素内容区在左右外边距之间以自动适应的宽度值补足了div元素的宽度。

第五种情况：

规则是 p {>

在width属性的值设置成auto的情况下，块级元素内容区的宽度取决于左右外边距是否明确设置了值。如果左右外边距值都是auto，则左右外边距的值都会被重置为默认的值0；如果左右外边距中只有一个值是auto，则该值被重置为0，另一个值有效；如果左右外边距都设置了明确的值，两个值都将有效，此时元素内容区的宽度就是父元素的宽度减去左右外边距后的值。需要说明的是，左右外边距的默认值是0，这意味着如果没有在CSS规则中声明margin-left或者margin-right，它们就会使用默认值0。

在width属性的值设置为大于0的值的情况下，块级元素内容区的宽度就是由width属性设置的值。此时，左右外边距的值如果都是auto，则会使块级元素在其父元素中居中；如果左右外边距中只有一个值是auto，则明确设置的值有效，auto值会自动适应剩余的宽度；如果左右外边距都设置了明确的值，那么在从左往右阅读的语言中，会把右外边距的值重置为auto。

（注：本文所说“设置明确的值”，是指设置了大于0的值）

以下是今天（2012年1月17日）在Chrome中做的一个测试的截图。


0 0

• 详谈CSS中块级元素的宽度
• css编写超出元素宽度的中文显示省略号
• css 不定宽度的块级元素水平居中
• CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
• [css]如何让一个元素div1的宽度由子元素的宽度决定，并超出父元素div0
• css div的宽度随内部元素的宽度的变化而变化
• css获取到指定元素的宽度，在回调返回宽度值
• Javascript操作CSS之3——获取元素的真实高度和宽度
• CSS解决部分浏览器块状元素由于边框占用一定宽度导致换行的问题
• 纯 CSS实现根据元素已知的宽度设置高度以及注意事项
• 居中没有宽度的元素
• 居中没有宽度的元素
• 规定元素的高度，宽度
• HTML元素的宽度计算
• 元素宽度的最大百分比
• CSS中浮动和定位对元素宽度-外边距-其他元素所占空间的影响
• CSS容器宽度的困惑
• span 的宽度css设置
• Eclipse上GIT插件EGIT使用手册
• 倒计时插件
• 黑马程序员_类加载器
• logstash Kibana 快速搭建实时日志查询
• JSON对象转字符串的一些方法
• 详谈CSS中块级元素的宽度
• android 4.0以后对HOME键的捕捉
• 理工大学ACM平台题答案关于C语言 1581 求和
• iOS 动画总结----UIView动画
• Java Web 中 过滤器与拦截器的区别
• qemu 使用串口与主机通信
• 天枢导航-微信公众平台开发-导航定位GPS车辆管理系统
• Spring 自动定时任务配置
• Gluster常见故障处理和HOWTO资源