1 / 52

content

height. margin-top. border-top. padding-top. width. padding-right. padding-left. border-right. margin-right. border-left. content. margin-left. padding-bottom. border-bottom. margin-bottom. 元素盒子大小的计算. 一个元素实际宽度 = 左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界. IE quirk 模式下盒子的宽度.

melody
Télécharger la présentation

content

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. height margin-top border-top padding-top width padding-right padding-left border-right margin-right border-left content margin-left padding-bottom border-bottom margin-bottom

  2. 元素盒子大小的计算 一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界

  3. IE quirk模式下盒子的宽度 • 当将文档声明DOCTYPE删除后，IE对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界＋宽度＋右边界 • 因此当使用了盒子属性后切忌删除DOCTYPE

  4. 本节内容 • 盒子在标准流下的排列 • 行内元素盒子显示问题 • display属性 • 盒子的margin叠加问题 • 背景的运用

  5. 盒子的定位

  6. 盒子的三种定位形式 • 在标准流下的定位 • 在浮动属性下的定位 • 在定位属性下的定位 • 除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。

  7. 标准流 • HTML元素在标准状况下的定位方式 • 行内元素在同一行内横向排列 • 块级元素占满整个一行，在页面中竖向排列 • 元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系

  8. 标准流下的盒子排列分析 <style type="text/css"> * { border: 2px dashed #FF0066; padding: 10px; margin: 2px; } </style> <body> <div>网页的banner（块级元素）</div> <a href="#">行内元素1</a><a href="#">行内2</a> <a href="#">行内3</a> <div>这是无名块<p>这是盒子中的盒子</p></div>

  9. 行内元素的盒子 • 行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。 • 因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。

  10. 改变行内元素的高度 • 如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响

  11. display属性 • 通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示 • display:block | inline | none | list-item

  12. block元素 • block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非用width设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

  13. inline元素 inline元素的特点是： • 和其他元素都在一行上 • 高，行高及顶和底边距不可改变； • 宽度就是它的文字或图片的宽度，不可改变。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子

  14. 列表项元素display: list-item • 在html中只有li元素默认是此类型，将元素设置为列表项元素后将按列表元素显示，再通过设置列表选项可使元素的左边出现小黑点。

  15. 隐藏元素display: none; • 当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。像title元素默认就是此类型。 • 比较visibility: hidden; • 制作下拉菜单、tab面板等有时就需要用display: none把菜单或面板隐藏起来

  16. 需要使用display属性切换的情况 • 让一个inline元素从新行开始； • 让块元素和其他元素保持在一行上； • 控制inline元素的宽度; • 控制inline元素的高度（对导航条特别有用）； • 无须设定宽度即可为一个块元素设定与文字同宽的背景色

  17. 用盒子属性制作导航条 #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; * 改变文字颜色 */ }

  18. 盒子的margin叠加问题

  19. 盒子的margin在标准流中的计算 • 实验1——行内元素之间的水平margin span.left{ margin-right:30px; background-color:#a9d6ff; } span.right{ margin-left:40px; background-color:#eeb0b0; }

  20. 行内元素之间的水平margin • 行内元素之间的水平margin不会叠加 margin-right margin-left span 1 span 2

  21. 上下margin叠加 • 实验2——块级元素之间的竖直margin <body> <div style="margin-bottom:50px;">块元素1</div> <div style="margin-top:30px;">块元素2</div> </body> 块元素1 块元素1 margin-bottom:50px margin-bottom:50px margin-top:30px 块元素2 块元素2

  22. 空白边叠加 • 当一个元素包含在另一个元素中时，若父元素的边框和填充为0，此时父元素和子元素的margin挨在一起，那么父元素的上下margin也会和子元素的上下margin发生叠加。若父元素的边框或填充不为0，那么父元素和子元素的margin会被分隔开，因此不存在叠加的问题。 • 经验：如果有盒子嵌套，要调整外面盒子和里面盒子之间的距离，一般用外面盒子的padding来调整，不要用里面盒子的margin，这样可以避免空白边叠加的现象出现

  23. 嵌套盒子之间的margin • 盒子在标准流中的定位原则 • 实验3——嵌套盒子之间的margin

  24. 嵌套盒子在IE和Firefox中的不同显示 • 当一个块元素包含在另一个块元素中时，若对父块设置高度，但父块的高度不足以容纳子块时，IE将使父块的高度自动伸展，达到能容纳子块的最小高度为止；若同时设置了子块高度，IE将使子块高度自动压缩，直到能容纳内容的最小高度为止。而Firefox对父块和子块均以定义的高度为准，父块高度不会伸展，任其子块露在外面，子块高度也不会压缩。

  25. 背景的应用

  26. CSS的背景属性 • 背景（background）是网页中常用的一种表现方法，无论是单纯的背景颜色还是背景图片，都能为网页带来丰富的视觉效果，HTML的很多元素都具有bgcolor和backgroud属性，可以设置背景颜色和背景图片，如（table、td等），但形式比较单一，对背景图片的设定，只支持在X轴和Y轴都平铺的方式，因此，如果同时设置了背景颜色和背景图片，那么背景颜色将被背景图片挡住，以背景图片来显示。 • 而CSS对元素的背景设置，则提供了更多的途径，如背景图片既可以平铺也可以不平铺，还可以在X轴平铺或在Y轴平铺，当背景图片不平铺时，并不会完全挡住背景颜色，因此可以综合设置背景颜色和背景图片达到希望的效果。 • CSS的背景属性是backgroud或以backgroud开头

  27. CSS的背景属性

  28. 各个背景属性的默认值 • background-color: transparent 透明模式 • background-image: none • background-repeat: repeat • background-attachment: scroll • background-position: 0% 0%

  29. 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;}

  30. DW中的背景设置面板 background-color:#0099cc background-image: url(img/bottom.gif) background-repeat: no-repeat background-attachment: no-repeat background-position: right bottom

  31. 背景的运用技巧

  32. 背景的运用技巧 • 同时运用背景颜色和背景图片 • 控制背景在盒子中的位置及是否平铺 • 多个元素背景的叠加 • 滑动门技术 • 背景位置的控制－实现图片的翻转 • 圆角的设计方法总结

  33. 同时运用背景颜色和背景图片 • 目前网页中流行采用一种渐变背景，即网页的背景从上至下由一种深颜色过渡到一种浅颜色，由于网页的长度通常是不好估计的，所以无法用一幅背景图片来做这种渐变背景，只能在网页的上部用渐变的图片做背景，下部使用用一种和图片下部颜色相同的颜色做背景色 • 通过在CSS中设置body标记的背景颜色和背景图片，并把背景图片设置为横向平铺就可以实现渐变背景了。 • body{background:#666666 url(xxwlzx/body_bg.gif) repeat-x;}

  34. 控制背景在盒子中的位置及是否平铺 • 在html中，背景图像只能平铺，而在CSS中，背景图像能做到精确定位，允许不平铺，效果就像普通的图像元素一样。因此有人建议所有的网页图像都作为元素的CSS背景引入。例如下面的网页的背景就是用让背景图片不平铺并且定位于右下角实现的。 body { background: #F7F2DF url(cha.jpg) no-repeat right bottom ; }

  35. li元素的背景应用 • 通过背景图片不平铺的技术还可以用来改变列表的项目符号，虽然使用列表元素ul的CSS属性list-style-image:url(arrow.gif)可以将列表项前面的小黑点改变成自定义的小图片，但无法调整小图片和列表文字之间的距离。 • 要解决这个问题，可以将小图片设置成li元素的背景，不平铺，且居左，为防止文字遮住图片，将li元素的左padding设置成20px，这样还可通过调整左padding的值实现任意调整列表小图片和文字之间的距离。

  36. ul{ list-style-type:none; } li{ background:url(arrow.gif) no-repeat 0px 3px; /*距左边0px，距上边3px*/ padding-left:20px; } 可以看出，有了背景的精确定位能力，完全可以使列表项目图片符号出现在li元素中的任意位置上。

  37. 多个元素背景的叠加 • 背景图片的叠加是很重要的CSS技术，当两个元素是嵌套关系时，那么里面元素的盒子背景的不透明部分将覆盖在外面元素盒子背景之上，利用这一点，再结合对背景图片位置的控制，可以得到滑动门技术。下面以4图像可变宽度圆角栏目框的制作来介绍多个元素背景叠加的技巧

  38. 圆角的设计 • 固定宽圆角 • 可变宽圆角

  39. 盒子背景的重叠 <h3> <div id="round"> <p> <span> <div id="round"> <h3>这是圆角矩形的标题</h3> <p><span>……</span></p> </div>

  40. #round p { background-image: url(xxwlzx/tly4.gif); background-repeat: no-repeat; background-position: left bottom; margin: 0px; } #round span { background-image: url(xxwlzx/tly3.gif); background-repeat: no-repeat; background-position: right bottom; display: block; padding: 16px; font-size: 14px; line-height: 140%; color: #FF0000; } #round { background-image: url(xxwlzx/tly.gif); background-repeat: no-repeat; background-color: #00FF99; width: 244px; } #round h3 { background-image: url(xxwlzx/tly2.gif); background-repeat: no-repeat; background-position: right top; text-align: center; padding: 12px; margin: 0px; }

  41. 最后再设置背景色 • 由于几层背景的叠加，背景色只能放在最底层的盒子上，也就是对最外层的元素设置背景色，这样背景色就不会把背景图片给覆盖了。与此相反，为了让内容能放在距边框有一定边距的区域，必须设置padding值，而且padding值只能设置在最里层的盒子上。 • 但这个圆角框没有边框，要制作带有边框的可变宽度圆角框，需要采用5图像二维滑动门法制作

  42. 滑动门技术 图片阴影，自适用宽度圆角导航条

  43. CSS图像阴影

  44. 自适应宽度圆角导航条 • 原理：背景图片比盒子长一些 • 背景图片： • 里面的盒子 设置背景图片为从右边开始铺 • 外面的盒子 • 设置背景图片为从左边开始铺 • 把里面的盒子放在外面盒子上方，则两边的圆角都能显示，同时，改变文字的多少，能使导航条自动伸展，而圆角部分位于padding区域，不会影响圆角

  45. 滑动门导航条代码 display: block; padding-right: 24px;} a:hover { color: #FFFFFF; } </style> <body> <a href="#"><b>首 页</b></a> <a href="#"><b>中心简介</b></a> <a href="#"><b>政策法规</b></a> <a href="#"><b>常用下载</b></a> <a href="#"><b>为您服务</b></a> <a href="#"><b>技术支持和服务</b></a> <style type="text/css"> a { font-size: 14px; color: #F1E474; text-decoration: none; background-image: url(xxwlzx/yuanjiao2.gif); height: 32px; padding-left: 24px; display: block; float: left; line-height: 32px;} b { background-image: url(xxwlzx/yuanjiao2.gif); background-position: right top;

  46. 背景图片的翻转－背景位置的控制 • 通过背景定位技术可使背景图片出现在盒子的任意位置上，如果盒子没有背景那么大，那么只能显示背景图的一部分，利用这一点，我们可以将多个背景图片放置在一个大的背景图里，让每个元素只显示这张大背景图的一部分，例如制作导航条时，可以让链接状态显示背景图的上一部分，鼠标滑过时显示背景图的下一部分，这就是背景的翻转，使我们只用一幅图片就能实现背景图的切换。

  47. 通过背景图片位置控制实现图片翻转 #nav li a{ color:#FFFFFF; text-decoration:none; padding-top:7px; display:block; width:97px; height:19px; text-align:center; background:url(img/nav.gif); margin-left:2px; } #nav li a:hover{ background:url(img/nav.gif); background-position:0px -26px;/* background-position:left center;*/ color:#FFFFFF; }

  48. 将滑动门技术和背景图片翻转结合的例子

  49. 圆角技术的总结

More Related