工程师必知必会-盒模型与块状行内元素VIP免费

上海腾一研发部内部技术文档文档标题589f3825-23e3-47b8-9b07-85a8c7b2c7d4.docx分类标签资料来源网络URL修订历史2010-01-18由zhy收录http://topic.csdn.net/u/20100114/21/08182102-7442-42FA-9EA1-B4641A663DA8.html第2页共7页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第2页共7页前端工程师对这些东西要“想都不用想”就知道么*盒模型外边距、内边距和边框之间的关系，IE<8中的盒模型有什么不同。*块级元素与行内元素怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式css2.1标准：http://www.w3.org/TR/CSS21/visuren.htmlhttp://www.w3.org/TR/CSS21/visudet.html中文详解：http://www.ddcat.net/blog/?p=138如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。第3页共7页第2页共7页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第3页共7页图1盒模型图解填充、边框和边界都分为“上右下左”四个方向，既可以分别定义，也可以统一定义。CSS内定义的宽（width）和高（height），指的是填充以内的内容范围，因此一个元素：实际宽度=左边界+左边框+左填充+内容宽度（width）+右填充+右边框+右边界实际高度=上边界+上边框+上填充+内容高度（height）+下填充+下边框+下边界例如有CSS定义如下：Html代码1.#menu{2.background:#9cf;3.margin:20px;4.border:10pxsolid#039;5.padding:40px;6.width:200px;7.}则其实际宽度如图2所示。第4页共7页第3页共7页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第4页共7页图2元素总宽度的计算而对于WindowsIE5.x及更前的版本，把这个盒模型的定义搞错了，它认为：宽度（width）=元素内容+填充+边框这个确实很容易搞错，很多对于盒模型定义没有深入了解的人也同样容易犯这个错误。例如：Html代码1.#menu{2.width:200px;3.padding:5px;4.border:1pxsolid#ccc;5.}那么，在IE5.5中div实际内容的宽度将是200px-5px-1px-5px-1px=188px，而在Firefox、Opera及IE6等浏览器内宽度则是200px。注意：工作在怪癖模式下的IE7-将使用IE5的盒模型，所以注意给文档一个正确的DTD说明！这正是很多新手发现自己定义的页面在不同的浏览器内看会发生错位的原因之一。因此就需要采取一定的弥补措施，一般可以避免同时定义元素的宽度和填充、边框，而将一些定义放到元素的子元素内定义。如果必须同时定义这几个值，也可以使用一些手段来校正这个错误，即俗称的csshack，其基本思想就是为没有错误的浏览器提供一个正确的宽度值，而对IE5.5等有问题的浏览器提供另一个值。第5页共7页第4页共7页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第5页共7页例如如下的写法：Html代码1.#menu{2.padding:5px;3.width:110px;4.voice-family:"\"}\"";5.voice-family:inherit;6.width:100px;7.}定义中第一个width:110px，是IE5.5认为的元素的宽度，100px+5px+5px。Html代码1.voice-family:"\"}\"";2.voice-family:inherit;是CSS2.0中的语音属性，由于WindowsIE5.5不完全支持CSS2.0，不识别此属性，因此跳到下一个选择符。但是其他浏览器（包括IE6）会继续解读下面的定义，由于css是“层叠”的，即对于同一个选择符的相同的属性，后面的定义会覆盖掉前面的定义，因此，对于其他的浏览器，#menu的宽度为最后的100px。另一个常用的hack手法是使用!important（声明），声明加在CSS属性定义的后面，此条属性的级别将变成最高，即使后面有相同的定义也不会覆盖掉声明过的定义，不过IE不支持!important。例如有如下css定义：Html代码1.#box{2.border:1pxsolid#B51C8C;3.width:768px;4.}而其修正方法如图3所示。第6页共7页第5页共7页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第6页共7页图3针对IE修正CSS对于支持!important的浏览器，将接受width:768px，而ie...