CSS基础知识电子书.pptVIP

（三）、盒子大小的计算 Page ? * 盒子实际宽度=margin-left + border-left + padding-left+width+padding-right+border-right+margin-right 盒子大小的计算-续 Page ? * 盒子实际高度=margin-top + border-top + padding-top + width + padding-bottom+ border-bottom + margin-bottom Example2 Page ? * div id=box计算在网页占据多大空间？/div #box{ width:200px; margin:20px; padding:20px; border:solid 1px #000000; } 注意： 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸 但是，IE5.x和IE6在怪异模式中使用自己的非标准框架模型，这些浏览器的width不是内容的宽度，而是： width= content + padding + border Page ? * (四)、盒子外边距合并 外边距合并是指，当两个垂直外边距相遇时，将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 存在如下几种情形的外边距的合并： Page ? * Page ? * 合并前 合并后 Page ? * 发生嵌套时,若未设父元素的边框和填充,父元素的上下margin会和子元素的上下margin发生叠加。若父元素的边框或填充不为0，不存在叠加的问题。 -续上页 Page ? * 合并前 合并后 经验:如果有盒子嵌套，要调整外面盒子和里面盒子之间的距离，一般用外面盒子的padding来调整,不要用里面盒子的margin,这样可以避免外边距叠加的现象出现 。 行内元素之间的水平margin不会叠加 Page ? * （五）、盒模型总结 Page ? * 关于盒模型，注意一下几点： 1、边框border默认值为0，即不显示，而padding和margin都无法看到，只能看到它们对元素的影响； 2、margin可以设负值，而padding不可以； 3、行内元素如a ,span,img,input等,高度宽度设置无效的，其宽度就是自身文字或者图片的宽度；定义上下外边距不影响行高。 4、大部分html元素的margin,padding默认值为0，但有少数元素的浏览器默认值不为0，例如:body,p,ul,li,form标记等，有必要先设置为0； 盒模型总结-续 Page ? * 对padding,margin等属性值的简写： 盒模型总结-续 Page ? * 注意： 只有标准文档流中块元素的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。 补充：浏览器的怪异模式与标准模式 quirks mode和strict mode是浏览器解析css的两种模式 1、历史原因 早期浏览器对css解析时,未遵守w3c标准,此时的浏览器的解析模式称为怪异模式！后来,随着w3c标准的重要,浏览器开始依照w3c标准解析Css,称为标准模式！ 因此,为了支持早期在怪异模式下开发的站点,浏览器并未放弃怪异模式,所以浏览器当解释页面时,首先得判读 采用哪种模式进行解释！ 2、浏览器如何判断采用哪种模式呢？ 采用doctype声明！浏览器根据doctype是否存在以及是何种doctype来确定。 Page ? * 怪异模式与标准模式-续 3、两种模式的区别？ 最大的不同就是提现在对盒模式的解释上 Page ? * !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtd !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd 标准模式的Doctype的声明如下： Page ? * 设置为标准模式后，是不是就没有问题了呢？ 标准模式确实会让IE对CSS的解释合理很多,但事情并没有那么简单。不同浏览器即使同样在标准模式,其对CSS的理解仍然有所差异,而差异当中最多只可能有一个是正确的,甚至可能全部都是错误的! 六、CSS重点和难点-定位与浮动 Page ? * 1、块元素与行内元素 2、相对定位 3、绝对定位 4、浮动 定位 position:relativ