(掌握盒模型轻松DIVcss网页布局.docVIP

掌握盒模型轻松DIV css网页布局 若是想谙练把握DIV和CSS的结构体例，首先要对盒模子有足够的体味。每个HTML元素都可以看作一个装了工具的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子自己有边框（border），而盒子边框外和其他盒子之间，还有鸿沟（margin），如图1所示。 图1 盒模子图解 填充、边框和鸿沟都分为“上右下左”四个标的目标，既可以分袂界说，也可以统必然义。 CSS内界说的宽（width）和高（height），指的是填充以内的内容规模，是以一个元素： 现实宽度 = 左鸿沟 + 左边框 + 左填充 + 内容宽度（width） + 右填充 + 右边框 + 右鸿沟 现实高度 = 上鸿沟 + 上边框 + 上填充 + 内容高度（height） + 下填充 + 下边框 + 下鸿沟 例若有CSS界说如下： #menu { background: #9cf; margin: 20px; border: 10px solid #039; padding: 40px; width: 200px; }则其现实宽度如图2所示。 本文来自：佳木中国() 详细地址：/jc/wysj/divcss12697.html 图2 元素总宽度的计较 而对于Windows IE 5.x及更前的版本，把这个盒模子的界说搞错了，它认为： 宽度（width）= 元素内容 + 填充 + 边框 这个确实很轻易搞错，良多对于盒模子界说没有深切体味的人也同样轻易犯这个错误。例如： #menu { width: 200px; padding: 5px; border: 1px solid #ccc; }那么，在IE5.5中div现实内容的宽度将是200px-5px-1px-5px-1px=188px，而在Firefox、Opera及IE 6等浏览器内宽度则是200px。 这恰是良多新手发现自己界说的页面在分歧的浏览器内看会发生错位的原因之一。 是以就需要采纳必然的填补法子，一般可以避免同时界说元素的宽度和填充、边框，而将一些界说放到元素的子元素内界说。 若是必需同时界说这几个值，也可以利用一些手段来校正这个错误，即俗称的css hack，其根基思惟就是为没有错误的浏览器供给一个准确的宽度值，而对IE5.5等有问题的浏览器供给另一个值。 例如如下的写法： #menu { padding: 5px; width:110px; voice-family: }; voice-family: inherit; width: 100px; }界说中第一个width:110px，是IE 5.5认为的元素的宽度，100px+5px+5px。 voice-family: “”}”; voice-family: inherit; 是CSS2.0中的语音属性，因为Windows IE5.5不完全撑持CSS2.0，不识别此属性，是以跳到下一个选择符。可是其他浏览器（包罗IE6）会继续解读下面的界说，因为css是“层叠”的，即对于统一个选择符的不异的属性，后面的界说会笼盖失踪前面的界说，是以，对于其他的浏览器，#menu的宽度为最后的100px。 另一个常用的hack手法是利用!important（声明），声明加在CSS属性界说的后面，此条属性的级别将酿成最高，即使后面有不异的界说也不会笼盖失踪声明过的界说，不外IE不撑持!important。 例若有如下css界说： #box { border: 1px solid #B51C8C; width:768px; }而其批改体例如图3所示。 图3 针对IE批改CSS 对于撑持!important的浏览器，将接管width:768px，而ie6固然不撑持!important，可是因为其无法诠释“ /**/（空注释）”，是以会忽略后面的界说，而ie 5.5却会接管最后界说的width:770px，是以达到批改的目标。 关于盒模子，还有以下几点需要注重： ?对于块级元素（display:block），未浮动的垂直相邻元素的上鸿沟和下鸿沟会被压缩，例如：有上下2个元素，上元素的下鸿沟为5px，下面元素的上鸿沟为20px，则现实2个元素的间距为20px（2个鸿沟值中较大的值）。如图4所示。 本文来自：佳木中国() 详细地址：/jc/wysj/divcss12697.html 图4 鸿沟的压缩 注1. 块级元素（display: block）每个块级元素都从一个新行起头，而且厥后的元素也需另起一行起头，题目、段落、表格、层、body等都是块级元素。块级元素只能作为其他块