CSS标准流及背景－第九次课.ppt

元素盒子大小的计算 一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界 IE quirk模式下盒子的宽度 当将文档声明DOCTYPE删除后，IE对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界＋宽度＋右边界 因此当使用了盒子属性后切忌删除DOCTYPE 本节内容 盒子在标准流下的排列 行内元素盒子显示问题 display属性 盒子的margin叠加问题 背景的运用 盒子的定位 盒子的三种定位形式 在标准流下的定位 在浮动属性下的定位 在定位属性下的定位 除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。 标准流 HTML元素在标准状况下的定位方式 行内元素在同一行内横向排列 块级元素占满整个一行，在页面中竖向排列 元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系 标准流下的盒子排列分析 style type=text/css * { border: 2px dashed #FF0066; padding: 10px; margin: 2px; } /style body div网页的banner（块级元素）/div a href=#行内元素1/aa href=#行内2/a a href=#行内3/a div这是无名块p这是盒子中的盒子/p/div 行内元素的盒子 行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。 因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。 改变行内元素的高度 如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响 display属性 通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示 display:block | inline | none | list-item block元素 block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非用width设定一个宽度div, p, h1, form, ul 和 li是块元素的例子。 inline元素 inline元素的特点是： 和其他元素都在一行上 高，行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度，不可改变。span, a, label, input, img, strong 和em是inline元素的例子 列表项元素display: list-item 在html中只有li元素默认是此类型，将元素设置为列表项元素后将按列表元素显示，再通过设置列表选项可使元素的左边出现小黑点。 隐藏元素display: none; 当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。像title元素默认就是此类型。 比较visibility: hidden; 制作下拉菜单、tab面板等有时就需要用display: none把菜单或面板隐藏起来 需要使用display属性切换的情况 让一个inline元素从新行开始； 让块元素和其他元素保持在一行上； 控制inline元素的宽度; 控制inline元素的高度（对导航条特别有用）； 无须设定宽度即可为一个块元素设定与文字同宽的背景色 用盒子属性制作导航条 #navigation li a{ display:block; text-decoration:none; border-left:12px solid #711515; /* 左边的粗红边 */ border-right:1px solid #711515; /* 右侧阴影 */ height: 1em; /* 解决IE6的bug */ padding: 5px;} #navigation li a:hover{ background-color:#990020; /* 改变背景色 */ color:#ffff00; * 改变文字颜色 */ } 盒子的margin叠加问题 盒子的margin在标准流中的计算 实验1——行内元素之间的水平margin span.left{ margin-right:30px; background-color:#