1、Web标准网页设计与PHP,唐四薪 编著 清华大学出版社,4.4 CSS的盒子模型,CSS的盒子模型,盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互 页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。 网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。,CSS的盒子模型,CSS的盒子模型,每个HTML元素都可以看作是一个装了东西的盒子 盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示 默
2、认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子,元素盒子大小的计算,一个元素实际宽度=左边界左边框左填充内容宽度右填充右边框右边界,IE quirk模式下盒子的宽度,当将文档声明DOCTYPE删除后，IE 6对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边框左填充宽度右填充右边框因此当使用了盒子属性后切忌删除DOCTYPE,CSS盒子模型计算题,如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充(padding)值里面盒子的边界（margin）值,嵌套盒子例题, #box1 background-color: #ddd
3、;margin:15px;padding:5px; #box2 color: black;background-color: #aaa;margin: 20px;padding: 10px 0px 10px;width:100px;,bodyborder:1px dotted #FF0000这是里面的盒子 ,边框border属性,盒子模型的margin和padding属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。而边框border则可以设置宽度、颜色和样式。 分别是border-width（宽度）、border-color（颜色）和border-style（样式）其中bor
4、der-style属性可以将边框设置为实线（solid）、虚线（dashed）、点划线（dotted）、双线（double）等效果,各种边框的效果,border: 4px solid red; /*同时设置4个边框*/*-*/ border-bottom: 6px double black; /*-*/ border:3px dotted #00f; border-right:none; /*-*/ border:5px dashed #666; border-width:0 5px;,边框的交汇效果,边框border有个有趣的特点，即两条交汇的边框之间是一个斜角，我们可以通过为边框设置不同的
5、颜色，再利用这个斜角，制作出像三角形一样的效果,填充padding属性,填充padding属性，也称为盒子的内边距。就是盒子边框到内容之间的距离，和表格的填充属性（cellpadding）比较相似。如果填充属性为0，则盒子边框会紧挨着内容，这样通常不美观。 当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，并且默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的,盒子模型的特性,边界值margin可为负，填充padding不可为负 边框border默认值为0，即不显示 行内元素，如a，定义上下边界不影响行高,对盒子模型的思考,边框是实的，我们可以看
6、到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响 盒子模型中只能设置两类颜色，即边框颜色和背景颜色盒子模型可设置三类距离，即边界距margin，填充距padding和边框值border,属性值的简写形式,问题：padding: 6px 10px 4px; 左填充是多少？答案：如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性； 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性； 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。,各种元素盒子属性的默认值,大部分html元素的盒子属性:margin
7、, padding默认值都为0；body，p，ul，li，form等少数html元素的margin, padding浏览器默认值不为0，有时有必要先设置它们的这些属性为0。input元素的边框属性默认不为0，可以设置它为0达到美化表单中输入框和按钮的目的。,4.4.2 盒子模型的应用,1. 美化表单 网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。下列代码通过CSS改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。,用盒子美化表格,让表格的外边框为2象素 首先用间距制作1像素边框的表格，然后用css为table元素加一个1象素宽的border制作
8、1象素虚线边框 首先将表格的边框和间距设为0，然后设置table的CSS上边框和左边框为1象素虚线，再设置td的css下边框和右边框为1象素虚线,4.4.3 盒子在标准流下的定位,盒子的三种定位形式,在标准流下的定位 在浮动属性下的定位 在定位属性下的定位除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。,标准流,标准流下的定位：HTML元素在标准状况下的定位方式，特点如下: 行内元素在同一行内横向排列 块级元素占满整个一行，在页面中竖向排列元素不会移动到其它地方去，对于嵌套的元素，盒子也是嵌套的关系(嵌套说明父元素包含了
9、子元素),标准流下的盒子排列分析, * border: 2px dashed #FF0066; padding: 10px; margin: 2px; 网页的banner（块级元素） 行内元素1行内2 行内3 这是无名块这是盒子中的盒子,行内元素的盒子,行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子发生重叠。 因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再
10、设置它的盒子属性。,改变行内元素的高度,如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响,display属性,为了解决这个问题，可将行内元素转换成块级元素显示通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示 display:block | inline | none | list-item,block元素,block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非用width设定一个宽度 , ,
11、 , , 和 都是块级元素的例子。,inline元素,inline元素的特点是： 和其他元素都在一行上 高，行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度，不可改变, , , , , 和是inline元素的例子,隐藏元素display: none;,当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。 比较visibility: hidden; 应用：制作下拉菜单、tab面板等有时就需要用display: none把菜单或面板隐藏起来,需要使用display属性切换的情况,让一个inline元素从新行开始； 让块元素和其他元素保持
12、在一行上； 控制inline元素的高度（对导航条特别有用）；无须设定宽度即可为一个块元素设定与文字同宽的背景色,标准流下定位的应用制作竖直导航菜单,#nav a font-size: 14px;color: #333333;text-decoration: none;background-color: #CCCCCC;display: block;width:140px;padding: 6px 10px 4px;border: 1px solid #000000;margin: 2px; #nav a:hover color: #FFFFFF;background-color: #66666
13、6; ,盒子的margin叠加问题,盒子的margin在标准流中的计算,实验1行内元素之间的水平margin span.leftmargin-right:30px;background-color:#a9d6ff; span.rightmargin-left:40px;background-color:#eeb0b0; ,行内元素之间的水平margin,行内元素之间的水平margin不会叠加,span 2,span 1,margin-right,margin-left,实验2块级元素之间的竖直margin 块元素1块元素2,块元素1,块元素2,块元素1,块元素2,margin-bottom:5
14、0px,margin-top:30px,margin-bottom:50px,块级元素之间的上下margin,空白边叠加,当一个元素包含在另一个元素中时，若父元素的边框和填充为0，此时父元素和子元素的margin挨在一起，那么父元素的上下margin也会和子元素的上下margin发生叠加。若父元素的边框或填充不为0，那么父元素和子元素的margin会被分隔开，因此不存在叠加的问题。 经验：如果有盒子嵌套，要调整外面盒子和里面盒子之间的距离，一般用外面盒子的padding来调整，不要用里面盒子的margin，这样可以避免空白边叠加的现象出现,嵌套盒子之间的margin,嵌套盒子在标准流中的定位原
15、则 实验3嵌套盒子之间的margin,嵌套盒子在IE和Firefox中的不同显示,当一个块元素包含在另一个块元素中时，若对父块设置高度，但父块的高度不足以容纳子块时，IE将使父块的高度自动伸展，达到能容纳子块的最小高度为止；而Firefox对父块和子块均以定义的高度为准，父块高度不会伸展，任其子块露在外面，子块高度也不会压缩。 Firefox对元素的高度解释严格按照我们设定的高度执行，而IE对元素高度的设定有点自作主张的味道，它总是使标准流中子元素的盒子包含在父元素盒子当中。,4.5 背景的控制,CSS的背景属性,背景（background）是网页中常用的一种表现方法，无论是单纯的背景颜色还是
16、背景图片，都能为网页带来丰富的视觉效果CSS对元素的背景设置，则提供了更多的途径，如背景图片既可以平铺也可以不平铺，还可以在X轴平铺或在Y轴平铺CSS的背景属性是backgroud或以backgroud开头,CSS的背景属性,各个背景属性的默认值,background-color: transparent 透明模式 background-image: none background-repeat: repeat 平铺 background-attachment: scroll background-position: 0% 0% 注意背景定位中百分比数值的意义和像素的意义不同 使用百分数定位时
17、，是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说，百分数定位是改变了背景图和元素的对齐基点。,background属性的缩写,background属性是所有背景属性的缩写形式，就像font属性一样，其缩写顺序为： background: background-color | background-image | background-repeat | background-attachment | background-position如body background:#EFF4FF url(images/body_bg.jpg) repeat-x fixed;,DW中的背景设
18、置面板,background-color:#0099cc,background-image: url(images/bottom.gif),background-repeat: no-repeat,background-position: right bottom,background-attachment: fixed,CSS背景运用技巧,网页中插入图像的两种方法,用HTML标记：用CSS背景属性插入图像 background:url(hua.jpg) no-repeat;所有装饰性的图像建议都用CSS背景方式插入,背景属性,设置背景颜色：background-color backgroun
19、d-image: 设置背景图片或渐变 background-repeat:设置背景图片的平铺方式 background-attachment :设置背景图片是否随内容滚动 background-position：设置背景图片显示的起始位置 缩写： background: background-color | background-image | background-repeat | background-attachment | background-position,背景图片,背景颜色,背景定位,背景不平铺,background-repeat属性,background-repeat: re
20、peat（默认）、repeat-x、repeat-y、no-repeat,background-position属性,background:url(hua.gif) no-repeat 50% 33%;,background-attachment属性,background-attachment ：scroll（默认）、fixed fixed：背景在网页中的位置是固定的，不随容器的移动而移动。（案例：http:/ li background:url(arrow.gif) no-repeat 0px 3px; /*距左边0px，距上边3px*/ padding-left:20px; 有了背景的精确
21、定位能力，完全可以使列表项目图片符号出现在li元素中的任意位置上。,背景图案的翻转控制背景的显示区域,通过背景定位技术可使背景图片出现在盒子的任意位置上，如果盒子没有背景那么大，那么只能显示背景图的一部分例如制作导航条时，可以让链接状态显示背景图的上一部分，鼠标滑过时显示背景图的下一部分，这就是背景的翻转，从而只用一幅图片就能实现背景图案的切换。,通过背景图片位置控制实现图片翻转,#nav li acolor:#FFFFFF;text-decoration:none;padding-top:7px;display:block;width:97px;height:19px;text-align:
22、center;background:url(img/nav.gif); margin-left:2px; #nav li a:hoverbackground:url(img/nav.gif);background-position:0px -26px;/* background-position:left center;*/color:#FFFFFF; ,将滑动门技术和背景图片翻转结合的例子,a:hover background-position:100% -42px; a:hover bbackground-position:0 -42px;color: red; ,多个元素背景的叠加,当两
23、个元素是嵌套关系时，那么里面元素的盒子背景将覆盖在外面元素盒子背景之上，利用这一点，再结合对背景图片位置的控制，可以得到滑动门技术。下面以4图像可变宽度圆角栏目框的制作来介绍多个元素背景叠加的技巧,圆角的设计,固定宽圆角可变宽圆角,4图像可变宽度圆角栏目框, 这是圆角矩形的标题 ,4.5.3滑动门技术背景的高级运用,图片阴影，自适用宽度圆角导航条,1. 图像阴影,阴影是一种很流行、很有吸引力的图像处理技巧，它给平淡的设计增加了深度，形成立体感。使用图像处理软件很容易给图像增添阴影。但是，可以使用CSS产生简单阴影效果，而不需要修改底层的图像。通过滑动门技术制作的阴影能自适应图像的大小，即不管图
24、像是大是小都能为它添加阴影效果。,滑动门制作图片阴影原理图,2. 自适应宽度圆角导航条,原理：背景图片比盒子长一些 背景图片： 里面的盒子 设置背景图片为从右边开始铺 外面的盒子 设置背景图片为从左边开始铺 把里面的盒子放在外面盒子上方，则两边的圆角都能显示，同时，改变文字的多少，能使导航条自动伸展，而圆角部分位于padding区域，不会影响圆角,滑动门导航条代码, a font-size: 14px;color: #F1E474;text-decoration: none;background-image: url(xxwlzx/yuanjiao2.gif);height: 32px;pad
25、ding-left: 24px;display: block;float: left;line-height: 32px; b background-image: url(xxwlzx/yuanjiao2.gif);background-position: right top;,display: block;padding-right: 24px; a:hover color: #FFFFFF; 首 页 中心简介 政策法规 常用下载 为您服务 技术支持和服务,CSS圆角设计,本节课内容,border-radius 圆角盒子属性，实际是box-radius 饼状图过渡属性 transition
26、图标变文字阴影属性 box-shadow,border-radius 属性,border-radius：用于设置元素盒子四个角的圆角效果,border-radius: 5px 10px 20px 40px; /* 上左 上右 下右 下左*/ border-radius: 5px 10px 20px; /* 上右和下左都是10px */ border-radius: 5px 10px; border-radius: 10px; /* 四个角的半径都是10px */,border-radius 属性示例,div width: 100px; height: 100px; background:#C9
27、6; .box1border-radius: 100px; .box2 border-radius: 100px 0; .box3 height:50px;border-radius: 50%; .box4 border-radius: 50%; background:url(images/head01.jpg) no-repeat; background-size:cover; .box5height:50px;border-radius: 50px 50px 0 0; ,制作饼状图,display属性,display: block; 以块级元素显示display: inline; 以行内元
28、素显示display: inline-block; 以行内块元素显示，行内块元素将在一行内水平排列，但每个元素又具有块级元素的特点 display:none; 将元素隐藏，且不占据网页空间,过渡属性 transition,CSS的动态伪类( 如hover)能为网页添加一些动态效果，但动态伪类没有中间状态 过渡属性就是让一个属性在两种状态之间平滑改变的动画。 transition: color .5s ease-in .1s; /*作用属性 持续时间 速度变化 延迟*/ transition: color .5s .1s; /*作用属性 持续时间 延迟*/ transition: color .
29、5s; /*作用属性 持续时间*/,transition属性的子属性,transition属性实际上是4个属性的简写 transiton: transition-property transition-duration transition-timing-function transition-delay;transiton-property：指定在元素的某个属性上有动画效果 transition-duration：指定过渡的持续时间。 transition-timing-function：能够让动画在过渡持续期间在速度上有变化 transition-delay：用于延迟一段时间后再开启过渡效
30、果,transition应用举例,图像渐变列表文本移动图标变文字,阴影属性box-shadow,box-shadow: h-shadow v-shadow blur spread color inset;box-shadow: 10px 10px 5px #888888; /*设置左下角阴影，*/ box-shadow: 0 0 15px #888888; /*设置外发光，*/ box-shadow: 10px 10px 5px #888888 inset; /*设置内凹阴影，*/,翘边阴影和曲线阴影,圆角的设计方法,圆角在网页设计中让人又爱又恨，一方面设计师为追求美观的效果经常需要借助于圆角
31、，另一方面为了在网页中设计圆角又不得不增添很多工作量。 制作固定宽度的圆角（不带边框的、带边框的） 制作可变宽度圆角（不带边框的、带边框的） 不用图片做圆角,1. 制作固定宽度的圆角框,用CSS制作不带边框的固定宽度圆角框（如图4-57左所示）至少需要两个盒子，一个盒子放置顶部的圆角图案，另一个盒子放置底部的圆角图案，并使它位于盒子底部。把这两个盒子叠放在一起，再对栏目框设置和圆角相同的背景色就可以了 制作带边框的固定宽度圆角框（如图4-57右所示）则至少需要三个盒子，最底层的盒子放置圆角框中部的边框和背景组成的图案，并使它垂直平铺，上面两层的盒子分别放置顶部的圆角和底部的圆角，这样在顶部和底
32、部圆角图片就遮盖了中部的图案，形成了完整的圆角框,2. 制作可变宽度圆角,制作可变宽度不带边框的圆角框就是前面介绍的4图像法制作圆角框，而要制作带边框的可变宽度圆角则要采用5图像二维滑动门方法,3. 不用图片做圆角山顶角方法,如果不想用图片做圆角，那也是可以实现的，这需要一种称为山顶角(mountaintop corner)的圆角制作方法，所谓山顶角，就是说不是纯粹意义上的平滑圆角，而是通过几个1像素高的div（水平细线）叠放起来形成视觉上的圆角，用这种方法做圆角一般采用4个div叠放，所以圆角的弧度不是很大。,3. 不用图片做圆角山顶角方法,如果把最上方一条细线的颜色改为黑色，再设置下面三条
33、细线的左右边框是1像素黑色，那么就出现了带有边框的圆角框效果了,4. 学习圆角制作的意义,由于人们的审美观念决定了圆角比方角更具有亲和力，使我们很多时候必须制作圆角框。另外，圆角框技术是制作其他不规则图案栏目框的基础。例如图4-61所示的栏目框，就可以把栏目框上面部分看成是上圆角，下面部分看成是下圆角，再按照制作圆角框的思路制作了。,盒子的浮动,盒子的浮动,在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，限制太大。 所有盒子浮动 有时希望相邻块级元素的盒子左右排列或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果,左浮动,不浮动,一个盒子浮动和多个
34、盒子浮动,默认样式,浮动样式,HTML代码顺序： 左列 右列 ,浮动效果展示,结论：通过CSS布局，可以在不改变HTML代码的同时， 调整盒子的显示位置。,两个盒子的故事,误差,左浮动,原因：左列进行浮动后，脱离了默认文档流，所以只剩右列的盒子。 解决方法：同一层盒子的一起加浮动属性。,我也浮动,总结：一个盒子浮动后的特点,（1）浮动后的盒子将以行内块元素显示，但宽度不会自动伸展。 （2）浮动的盒子将脱离标准流，即不再占据浏览器原来分配给它的位置（IE有时例外）。 （3）未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。,2. 多个盒子浮动的特点,多个盒子都浮动后，就
35、产生了块级元素水平排列的效果 多个浮动元素不会相互覆盖，一个浮动元素的外边界（margin）碰到另一个浮动元素的外边界后便停止运动。 若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动（图4-68）。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住,清除浮动的影响,浮动和清除浮动：131布局,4.6.2 清除浮动的影响,clear: left、right：表示该盒子的左边或右边不允许有浮动的对象。 clear: both：表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示 clear:none：默认值，不清除浮动的影响,Box-3清除浮动前,B
36、ox-3清除浮动后,4.6.2清除浮动的影响,如果对Box-3同时设置清除浮动和浮动，即： .son3clear:both; float:left;上下margin叠加只会发生在标准流中，浮动盒子的上下margin不会叠加,Box-3浮动且清除浮动,Box-3清除浮动,5.1.3 清除浮动影响的用途,1. 扩展外围盒子高度 本质：清除子元素浮动对父元素的影响。,清除浮动前,清除浮动后,5.1.3 清除浮动影响的方法,如果一个父元素内所有的子元素都浮动，一定要记得对这个父元素作清除浮动处理。否则该父元素下面的元素会顶到浮动元素的位置上去 方法： 在所有子元素最后添加一个清除浮动的元素。 在父元素
37、内部的末尾添加一个伪元素 .father:after content: ; display: table; clear: both; ,补充：伪元素选择器,:before和:after 在元素内部的左右两侧产生两个伪元素,内容,:before,:after,内容,:before,:after,伪元素默认是行内元素,设置伪元素为块级元素,p:before,p:aftercontent: “-“; color:red; display:block;,补充：伪元素选择器,:first-letter和:first-line 将内容文本的第一个字符或第一行转变为一个伪元素,5.1.3 清除浮动影响的方法
38、,如果一个元素前面的兄弟元素浮动，则可以对紧邻该浮动元素的后一个元素作清除浮动处理。 或者增加一个元素专用于清除浮动 Box-1Box-2 ,浮动的应用：131布局,4.6.4 浮动的应用举例,1 图文混排及首字下沉效果等,微博对话框,栏目框,2 菜单的竖横转换,3 制作栏目框标题栏 标题栏的左端是栏目标题，右端是“更多”之类的链接。如何将文字分别放在一个盒子的左右两端呢？最简单的办法就是设置左边的文字左浮动，右边的文字右浮动。这时由于两个盒子都浮动，不占据外围容器的空间，所以必须设置外围盒子h3的高度，使它在视觉上能包含住两个浮动的盒子,3. 制作栏目框标题栏,有3种方法，最简单的方法如下：
39、more 栏目标题1#coltitle span.morefloat:right; padding-right:12px; ,3. 网页固定宽度1-3-1布局,在默认情况下，div作为块级元素是占满整行从上到下依次排列的，但在网页的分栏布局中，例如1-3-1固定宽度布局，我们希望中间三栏（三个div盒子）从左到右并列排列，这时就需要将这三个div盒子都设置为浮动。 但三个div盒子都浮动后，只能浮动到窗口的左边或右边，无法在浏览器中居中，因此需要在三个div盒子外面再套一个盒子（称为container），让container居中，这样就实现了里面的三个div盒子居中,Firefox中的131布
40、局示意图,131布局的结构代码,头部标题id=“navi“id=“content“id=“side“id=“pagefooter“,131布局的CSS代码,#header,#pagefooter,#containermargin:0 auto;width:772px;border: 1px dashed #FF0000; #navi,#content,#side border:2px solid #0066FF; #navifloat:left;width:200px; ,#contentfloat:left;width:360px; #sidefloat:left;width:200px; #pagefooterclear:both;,解决IE 6最后一列换行问题,提示：如果要为浮动的三列设置margin属性，以使3列之间有间隙，则最好给三列都增加一条display:inline，否则IE6会出现浮动盒子的双倍margin问题，导致最后一列移到下一行去了。,1-3-1布局的CSS代码改进,添加背景色的问题及解决方案 三列不等高 解决方法使container能包含住里面的三列盒子 保证container最下面有一个不浮动且清除浮动的元素,
