工程师必知必会-盒模型与块状行内元素1703.docx

上海腾一一研发部部内部技技术文档档文档标题题前端工程程师必知知必会.docc分类标签签资料来源源网络 UURL修订历史史20100-01-18由zhhy收录录htttp:/t/u/2011001114/21/0811821102-74442-442FAA-9EEA1-B46641AA6633DA88.httml前端工程程师对这这些东西西要“想想都不用用想”就就知道么么* 盒模模型外边距、内边距距和边框框之间的的关系，IIE << 8中中的盒模模型有什什么不同同。  * 块块级元素素与行内内元素怎么用CCSS控控制它们们、它们们怎样影影响周围围的元素素以及你你觉得应应该如何何定义它它们的样样式  css 2.11标准： httpp:/wwww.w33.orrg/TTR/CCSS221/vvisuurenn.httml httpp:/wwww.w33.orrg/TTR/CCSS221/vvisuudett.httml  中文详解解： httpp:/wwww.dddcatt.neet/bblogg/?pp=1338 如果想熟熟练掌握握DIVV和CSSS的布布局方法法，首先先要对盒盒模型有有足够的的了解。每个HHTMLL元素都都可以看看作一个个装了东东西的盒盒子，盒盒子里面面的内容容到盒子子的边框框之间的的距离即即填充（ppadddingg），盒盒子本身身有边框框（boordeer），而而盒子边边框外和和其他盒盒子之间间，还有有边界（mmarggin），如如图1所所示。 图1 盒盒模型图图解 填充、边边框和边边界都分分为“上上右下左左”四个个方向，既既可以分分别定义义，也可可以统一一定义。CSSS内定义义的宽（wwidtth）和和高（hheigght），指指的是填填充以内内的内容容范围，因因此一个个元素：实际宽宽度 = 左边边界 + 左边边框 + 左填填充 + 内容容宽度（wwidtth） + 右右填充 + 右右边框 + 右右边界实实际高度度 = 上边界界 + 上边框框 + 上填充充 + 内容高高度（hheigght） + 下下填充 + 下下边框 + 下下边界例例如有CCSS定定义如下下： Htmll代码  1. #mennu   2. backkgrooundd: #9cff;   3. marggin: 200px;  4. bordder: 100px  sollid  #0339;   5. padddingg: 440pxx;   6. widtth:  2000px;  7.    则其实际际宽度如如图2所所示。 图2 元元素总宽宽度的计计算而对于WWinddowss IEE 5.x及更更前的版版本，把把这个盒盒模型的的定义搞搞错了，它它认为：宽度（wwidtth）= 元素素内容 + 填填充 + 边框框这个确确实很容容易搞错错，很多多对于盒盒模型定定义没有有深入了了解的人人也同样样容易犯犯这个错错误。例例如： Htmll代码  1. #mennu   2. widtth:  2000px;  3. padddingg: 55px;  4. bordder: 1ppx ssoliid #cccc;   5.    那么，在在IE55.5中中divv实际内内容的宽宽度将是是2000px-5pxx-1ppx-55px-1pxx=1888pxx，而在在Firrefoox、OOperra及IIE 66等浏览览器内宽宽度则是是2000px。注意：工工作在怪怪癖模式式下的IIE 77-将使使用IEE 5的的盒模型型，所以以注意给给文档一一个正确确的DTTD说明明！这正是很很多新手手发现自自己定义义的页面面在不同同的浏览览器内看看会发生生错位的的原因之之一。因此就需需要采取取一定的的弥补措措施，一一般可以以避免同同时定义义元素的的宽度和和填充、边框，而而将一些些定义放放到元素素的子元元素内定定义。如果必须须同时定定义这几几个值，也也可以使使用一些些手段来来校正这这个错误误，即俗俗称的ccss hacck，其其基本思思想就是是为没有有错误的的浏览器器提供一一个正确确的宽度度值，而而对IEE5.55等有问问题的浏浏览器提提供另一一个值。例如如下下的写法法： Htmll代码  1. #mennu   2. padddingg: 55px;  3. widtth:1110ppx;   4. voicce-ffamiily: """"  5. voicce-ffamiily: innherrit;  6. widtth:  1000px;  7.    定义中第第一个wwidtth:1110ppx，是是IE 5.55认为的的元素的的宽度，1100ppx+55px+5pxx。 Htmll代码  1. voicce-ffamiily: """"  2. voicce-ffamiily: innherrit;   是CSSS2.00中的语语音属性性，由于于Winndowws IIE5.5不完完全支持持CSSS2.00，不识识别此属属性，因因此跳到到下一个个选择符符。但是是其他浏浏览器（包包括IEE6）会会继续解解读下面面的定义义，由于于csss是“层层叠”的的，即对对于同一一个选择择符的相相同的属属性，后后面的定定义会覆覆盖掉前前面的定定义，因因此，对对于其他他的浏览览器，#mennu的宽宽度为最最后的1100ppx。另一个常常用的hhackk手法是是使用!impporttantt（声明明），声声明加在在CSSS属性定定义的后后面，此此条属性性的级别别将变成成最高，即即使后面面有相同同的定义义也不会会覆盖掉掉声明过过的定义义，不过过IE不不支持!impporttantt。例如如有如下下csss定义： Htmll代码  1. #boxx    2. bordder: 1ppx ssoliid #B511C8CC;   3. widtth:7768ppx;   4.    而其修正正方法如如图3所所示。图3 针针对IEE修正CCSS对于支持持!immporrtannt的浏浏览器，将将接受wwidtth:7768ppx，而而ie66虽然不不支持!impporttantt，但是是由于其其无法解解释“ /*/（空空注释）”，因因此会忽忽略后面面的定义义，而iie 55.5却却会接受受最后定定义的wwidtth:7770ppx，因因此达到到修正的的目的。关于盒模模型，还还有以下下几点需需要注意意：对于块级级元素（ddispplayy:bllockk），未未浮动的的垂直相相邻元素素的上边边界和下下边界会会被压缩缩，例如如：有上上下2个个元素，上上元素的的下边界界为5ppx，下下面元素素的上边边界为220pxx，则实实际2个个元素的的间距为为20ppx（22个边界界值中较较大的值值）。如如图4所所示。 图4 边边界的压压缩注1. 块级元元素（ddispplayy: bblocck）每每个块级级元素都都从一个个新行开开始，而而且其后后的元素素也需另另起一行行开 始始，标题题、段落落、表格格、层、boddy等都都是块级级元素。块级元元素只能能作为其其他块级级元素的的子元素素，而且且需要一一定的条条件。 内联元素素，例如如<a>>、<sspann>等，定定义上下下边界不不会影响响到行高高（liine-heiightt），内内联元素素距离上上一行元元素的距距离由行行高决定定，而不不是填充充或边界界。 注2. 内联元元素（ddispplayy: iinliine）内联元素不需要在新行内显示，而且也不强迫其后的元 素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。浮动元素素（无论论左或者者右浮动动）边界界不压缩缩，且若若浮动元元素不声声明宽度度，则其其宽度趋趋向于00，即压压缩到其其内容能能承受的的最小宽宽度。如果盒中中没有内内容，则则即使定定义了宽宽度和高高度都为为1000%，实实际上只只占0%，因此此不会被被显示，此此点在采采取层布布局的时时候需特特别注意意。边界值可可为负，其其显示效效果各浏浏览器可可能不相相同。填充值不不可为负负。边框默认认的样式式（boordeer-sstylle）为为不显示示（noone）。