透彻理解块级元素的宽度
作者按:又翻出来一篇5年前(2006年12月28日)写的关于盒模型的文章,都不知道参考了哪本书了。只能凭印象感谢 Eric Meyer 的《CSS权威指南(第2版)》(The Definitive Guide, 2nd Edition)——因为当时作为练习刚翻译完这本书。
内容提要 透彻掌握CSS可视化模型的原理,可以让我们准确判断某个意外行为到底是因为CSS样式问题,还是CSS解析引擎问题。本文要讨论的要点是,当
margin-left
、width
和margin-right
这三个属性分别取auto值或大于0的值,进而形成不同组合的情况下,如何确定块级元素中各个组成部分的宽度。
块级元素和行内元素
CSS把处在正常文档流中的不同html元素区分为块级元素(block element)和行内元素(inline element)。一般来说,所谓块级元素就是指当它们显示在浏览器中时,会在自身前后各插入一个空行,而使自身在页面中占据一个相对独立的块状区域的元素。因此,HTML文档中连续的块级元素的典型显示方式就是“堆叠”。块级元素的例子有h1
到h6
、div
、p
等。而行内元素则是指以自身所包含的内容决定在页面中占据空间的大小,并且可以与其他行内元素共处一行的元素。行内元素的典型显示方式就是“连接”。行内元素的例子有a
、img
、span
、input
等。对于行内元素,又可以进一步分为可替换行内元素和不可替换行内元素,两者的区别在于元素中所包含的内容是否直接显示在页面中。不可替换的行内元素,如a
元素中的链接文本会直接显示在网页中;而可替换的行内元素,如img
,当它在网页中显示时会被其src
属性指向的图像替代。本文讨论的是块级元素,有关行内元素的更多内容请参考其他资料。
正常文档流 指的是HTML文档元素在进行内容布局时所遵循的从左到右、从上到下的表现方式。这种文档流布局的方式对于某些语言可能会有所不同(比如从右往左阅读的语言)。HTML中的大多数元素都处在正常的文档流中,而一个元素要脱离正常流的唯一途径就是浮动或定位。
块级元素的宽度
块级元素的宽度是指块级元素内容区、左右内边距、左右边框和左右外边距的宽度之和。而块级元素内容区的宽度由该元素的width
属性来表示(或设置)。
图1简单的盒模型示意图
有一个简单的规则,就是块级元素的宽度总是等于其父元素内容区的宽度。如果一个div
元素的父元素是body
,那么这个div
元素的宽度就等于body的宽度,也就是浏览器中窗口的宽度。一个处在正常文档流中的块级元素,其宽度是由七个部分共同决定的。可以称为块级元素的水平“七属性”,它们分别是:
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
图2 块级元素的水平“七属性”
如图2所示,块级元素在水平方向上的宽度是由七个CSS属性共同决定的。例如,一个div元素中包含一个p元素。而div
元素的宽度是500px,那么这个p
元素内容区的宽度(width
)加上其左右内边距、左右边框和左右外边距之和就等于500px。这个计算过程用公式表示,就是:
margin-left +
border-left +
padding-left +
width +
padding-right +
border-right +
margin-right
= 500px
自动水平属性如何决定块级元素的宽度
在块级元素的水平七属性中,只有三个属性可以使用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 { margin-left:auto;width:auto;margin-right:auto; }
即,三个属性全都取auto
值。如图3所示,结果是p
元素的内容区的宽度和父元素div
的宽度相等。根据前面的公式(此例未考虑左右边框和内边距,假设它们全取默认值0)我们知道,此时的margin-left:auto
和margin-right:auto
等同于margin-left:0
和margin-right:0
。或者说此时的左右外边距都等于0。
第二种情况:
规则是 p { margin-left:50px;width:auto;margin-right:auto; }
即,把左外边距明确设置为50像素,width
和margin-right
的值仍然是auto
。如图3所示,结果是p
元素的内容区宽度等于div
元素的宽度减去50像素。也就是说,此时左外边距是50像素,而margin-right:auto
相当于margin-right:0
,即右外边距为0。
第三种情况:
规则是 p { margin-left:auto;width:auto;margin-right:50px; }
与第二种情况类似,只不过是把右外边距而不是左外边距明确设置为50像素。图3所示的结果告诉我们,此时右外边距是50像素,而左外边距为0。(以上三种情况,值为auto的外边距都被重置为默认值0)
第四种情况:
规则是 p { margin-left:50px;width:auto;margin-right:50px; }
这次是把左、右外边距都明确地设置为50像素,而只有width
属性是auto
。如图3所示,结果是p
元素内容区的宽度等于div
的宽度减去(50+50=)100像素。也就是说,50像素的左、右外边距是有效的。p
元素内容区在左右外边距之间以自动适应的宽度值补足了div
元素的宽度。
第五种情况:
规则是 p { margin-left:auto;width:200px;margin-right:auto; }
这次把左、右外边距都设置为auto
,而把width
明确地设置为200像素。如图3所示,结果是p
元素的内容区宽度就是设置的200像素,而且,由于左右外边距同为auto
,使得p
元素在div
元素中水平居中。这种情况也是网页布局中最常用的居中块级元素居的主要手段。
第六种情况:
规则是 p { margin-left:50px;width:200px;margin-right:auto; }
这次margin-left
和width
分别明确设置成了50px和200px,只有右外边距的值是auto
。从图3中可以看到,结果是p
元素的内容区就是设置的200像素,而左外边距也是设置的50像素。但右外边距此时在前两个部分之后以自动适应的宽度值补足了div
元素的宽度。
第七种情况:
规则是 p { margin-left:auto;width:200px;margin-right:50px; }
与第六种情况相似,但这次是左外边距在后两个部分之前以自动适应的宽度值补足了div
元素的宽度。
第八种情况:
规则是 p { margin-left:50px;width:200px;margin-right:50px; }
这是一种典型的情况,即三个属性都明确地设置相应的值。从图3的结果中我们看到,只有左外边距和p
元素内容区的宽度是设置的值。右外边距虽然也明确设置了50像素的值,但实际情况就像是使用了auto
的第六种情况一样。实际上,在三个属性都明确设置了值,但其中一个值在没有解的情况下--即在不能满足三者之和等于div
元素宽度的情况下--在从左往右阅读的语言中,会把右外边距重置为自动适应的宽度值,也就是auto
。
小结
通过对以上8种可能情况的逐一分析,我们可以得出如下结论:
- 在
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中做的一个测试的截图。
透彻理解块级元素的宽度相关推荐
- 5、HTML块级元素及行内元素
在 HTML 中,标签(tag)通常又被称作元素(element).例如 <a> 标签又叫做 <a> 元素,<p> 标签也叫作 <p> 元素. HTML ...
- 块级元素 内联元素 的区别 ,空元素
1.块级元素 常见的块级元素: display:block/table 的元素<div></div><ul></ul><li></li ...
- css变成块级元素_css块级元素
<CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是"行布局"形式,这里的"行布局"的意思就是说其表现形式始终以行进 ...
- html块级标签转换,html标签中的块级元素详解
今天,我们就讲解一下html标签中的块级元素,主要包括块级元素的概念.作用.特点,还有就是块级元素有哪些标签等内容. 块级元素概念 块级元素是一类css样式display默认值为block的html标 ...
- html5块元素怎么理解,HTML5-块级元素
HTML 5 还增加了一些纯语义性的块级元素: aside figure dialog 我在文章和书中一直使用前两个元素.第三个元素我不经常用,它主要用于书面文本. aside aside 元素代表说 ...
- [HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
- CSS块级元素与行内元素的区别和联系
块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素.块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方. 默认情况下块元素,是独占一行的 常见 ...
- CSS的块级元素和内联元素,以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...
- html5:块级元素
最常见块级元素:div div的属性: <div title="title属性">title属性</div> title属性: 当鼠标悬停在div上时候会有 ...
最新文章
- 基于Matlab的BP神经网络在语音特征信号识别中的应用
- 字节AI Lab总监李磊离职加入UCSB,马维英后又一大牛回归学界
- 【原创】原来你竟然是这样的Chrome?!Firefox笑而不语
- python学习笔记1.1
- 使用JBoss AS 7进行SSL加密的EJB调用
- 【C语言进阶深度学习记录】十二 C语言中的:字符和字符串
- hibernate系列之一
- 支付宝:提现免费再延3年,不设上限!
- 2020网络数据平面峰会-无损网络,真的无损?-杨益锋
- java 获取方法的注释_java – 有更有效的方法来获取注释方法吗?
- Android Studio 编译异常Could not execute build using Gradle installation解决办法
- 枫之谷m平板玩服务器维护,枫之谷 M无法连接服务器是什么原因
- 操作对象_word选择操作技巧:不同操作对象,选择方式不同?
- 将表中一整列数据都生成五笔和拼音
- java同步锁有哪几种_Java实现锁的几种方式
- 7-3 小孩子才做选择,大人全都要 (10 分)
- 通过iptable进行流量转发
- 委派模式(Delegate)
- IIS——服务器上部署网站及遇到的问题图解(二)
- MySQL创建用户,并赋予表权限
热门文章
- 洛谷 1608 路径统计
- Sencha Touch2 -- 11.1:定义具有关联关系的模型
- CPython对象模型:string(留坑待填)
- hibernate小记
- c# as 关键字作用
- 21 week4 submit buidAndRun() node-rest-client
- elastic search2.3.1(3) 查询语句拼接实战termQuery ,matchQuery, boolQuery, rangeQuery, wildcardQuery...
- 接口是否可继承接口? 抽像类是否可实现(implements)接口? 抽像类是否可继承实体类(concrete class)?...
- ThinkPHP源码学习 data_to_xml函数 数据转成xml格式
- 使用SHA256证书进行微软数字签名代码签名