第4章3 CSS盒子模型.ppt

基于Web标准的网页设计 唐四薪编著清华大学出版社配套网站 CSS的盒子模型 CSS的盒子模型 盒子模型是CSS的基石之一 它指定元素如何显示以及 在某种程度上 如何相互交互页面上的每个元素都被浏览器看成是一个矩形的盒子 这个盒子由元素的内容 填充 边框和边界组成 网页就是由许多个盒子通过不同的排列方式 上下排列 并列排列 嵌套排列 堆积而成 CSS的盒子模型 CSS的盒子模型 每个HTML元素都可以看作是一个装了东西的盒子盒子里面的内容到盒子的边框之间的距离即填充 padding 盒子本身有边框 border 而盒子边框外和其它盒子之间 还有边界 magin 如图所示默认情况下盒子的边框是无 背景色是透明 所以我们在默认情况下看不到盒子 元素盒子大小的计算 一个元素实际宽度 左边界 左边框 左填充 内容宽度 右填充 右边框 右边界 IEquirk模式下盒子的宽度 当将文档声明DOCTYPE删除后 IE6对网页的解释会进入quirk 怪异 模式 此时盒子的宽度等于左边界 宽度 右边界因此当使用了盒子属性后切忌删除DOCTYPE CSS盒子模型计算题 如果盒子里面嵌套有盒子 且两个盒子都有边框 那么两个盒子边框之间的距离等于外面盒子的填充值 里面盒子的边界值 box1 background color ddd margin 15px padding 5px box2 color black background color aaa margin 20px padding 10px0px10px10px width 100px body border 1pxdotted FF0000 这是里面的盒子 边框border属性 盒子模型的margin和padding属性比较简单 只能设置宽度值 最多分别对上 右 下 左设置宽度值 而边框border则可以设置宽度 颜色和样式 分别是border width 宽度 border color 颜色 和border style 样式 其中border style属性可以将边框设置为实线 solid 虚线 dashed 点划线 dotted 双线 double 等效果 边框border属性 边框border属性有个有趣的特点 即两条交汇的边框之间是一个斜角 我们可以通过为边框设置不同的颜色 再利用这个斜角 制作出像三角形一样的效果 填充padding属性 填充padding属性 也称为盒子的内边距 就是盒子边框到内容之间的距离 和表格的填充属性 cellpadding 比较相似 如果填充属性为0 则盒子的边框会紧挨着内容 这样通常不美观 当对盒子设置了背景颜色或背景图像后 那么背景会覆盖padding和内容组成的范围 并且默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的 盒子模型的特性 边界值margin可为负 填充padding不可为负边框border默认值为0 即不显示行内元素 如a 定义上下边界不影响行高 对盒子模型的思考 边框是实的 我们可以看到实实在在的边框 而填充和边界都是虚的 我们只能看到他们对元素的影响盒子模型中只能设置两类颜色 即边框颜色和背景颜色盒子模型可设置三类距离 即边界距离margin 填充距离padding和边框值border 属性值的简写形式 方法是按照规定的顺序 给出2个 3个或者4个属性值 它们的含义将有所区别 具体含义如下 如果给出2个属性值 前者表示上下边框的属性 后者表示左右边框的属性 如果给出3个属性值 前者表示上边框的属性 中间的数值表示左右边框的属性 后者表示下边框的属性 如果给出4个属性值 依次表示上 右 下 左边框的属性 即顺时针排序 各种元素盒子属性的默认值 大部分html元素的盒子属性 margin padding 默认值都为0 有少数html元素的 margin padding 浏览器默认值不为0 例如 body p ul li form标记等 因此我们有时有必要先设置它们的这些属性为0 Input元素的边框属性默认不为0 我们可以设置为0达到美化表单中输入框和按钮的目的 4 5 2盒子模型的应用 1 美化表单网页中的表单控件在默认情况下背景都是灰色的 文本框边框是粗线条带立体感的 不够美观 下列代码通过CSS改变表单的边框样式 颜色和背景颜色让文本框 按钮等变得漂亮些 用盒子美化表格 让表格的外边框为2象素首先用间距制作1像素边框的表格 然后用css为table元素加一个1象素宽的border制作1象素虚线边框首先将表格的边框和间距设为0 然后设置table的CSS上边框和左边框为1象素虚线 再设置td的css下边框和右边框为1象素虚线 盒子的定位 盒子的三种定位形式 在标准流下的定位在浮动属性下的定位在定位属性下的定位除非设置浮动属性或定位属性 否则所有盒子都是在标准流中定位 顾名思义 标准流中元素盒子的位置由元素在HTML中的位置决定 标准流 HTML元素在标准状况下的定位方式行内元素在同一行内横向排列块级元素占满整个一行 在页面中竖向排列元素不会移动到其它地方去 对于嵌套的元素盒子也是嵌套的关系 标准流下的盒子排列分析 border 2pxdashed FF0066 padding 10px margin 2px 网页的banner 块级元素 行内元素1行内2行内3这是无名块这是盒子中的盒子 行内元素的盒子 行内元素的盒子永远只能在浏览器中得到一行高度的空间 行高由line height属性决定 如果没设置该属性 则是内容的默认高度 如果给它设置上下border margin padding等值 导致其盒子的高度超过行高 那么它的盒子上下部分将和其他元素的盒子重叠 因此 不推荐对行内元素直接设置盒子属性 一般先设置行内元素以块级元素显示 再设置它的盒子属性 改变行内元素的高度 如图所示 当增加行内元素的边界和填充时 行内元素a占据浏览器的高度并没有增加 下面这个div块仍然在原来的位置 导致行内元素盒子的上下部分重叠 而左右部分不会受影响 display属性 通过display属性可控制元素是以行内元素显示还是以块级元素显示 或不显示display block inline none list item block元素 block元素的特点是 总是在新行上开始 高度 行高以及顶和底边距都可控制 宽度缺省是它的容器的100 除非用width设定一个宽度 和是块元素的例子 inline元素 inline元素的特点是 和其他元素都在一行上高 行高及顶和底边距不可改变 宽度就是它的文字或图片的宽度 不可改变 和是inline元素的例子 列表项元素display list item 在html中只有li元素默认是此类型 将元素设置为列表项元素后将按列表元素显示 再通过设置列表选项可使元素的左边出现小黑点 隐藏元素display none 当某个元素被设置成了隐藏元素之后 浏览器会完全忽略掉这个元素 该元素将不会被显示 也不会占据文档中的位置 像title元素默认就是此类型 比较visibility hidden 制作下拉菜单 tab面板等有时就需要用display none把菜单或面板隐藏起来 需要使用display属性切换的情况 让一个inline元素从新行开始 让块元素和其他元素保持在一行上 控制inline元素的宽度 控制inline元素的高度 对导航条特别有用 无须设定宽度即可为一个块元素设定与文字同宽的背景色 标准流下定位的应用 制作竖直导航菜单 nava font size 14px color 333333 text decoration none background color CCCCCC display block width 140px padding 6px10px4px border 1pxsolid 000000 margin 2px nava hover color FFFFFF background color 666666 盒子的margin叠加问题 盒子的margin在标准流中的计算 实验1 行内元素之间的水平marginspan left margin right 30px background color a9d6ff span right margin left 40px background color eeb0b0 行内元素之间的水平margin 行内元素之间的水平margin不会叠加 span2 span1 margin right margin left 实验2 块级元素之间的竖直margin块元素1块元素2 块元素1 块元素2 块元素1 块元素2 margin bottom 50px margin top 30px margin bottom 50px 块级元素之间的上下margin 空白边叠加 当一个元素包含在另一个元素中时 若父元素的边框和填充为0 此时父元素和子元素的margin挨在一起 那么父元素的上下margin也会和子元素的上下margin发生叠加 若父元素的边框或填充不为0 那么父元素和子元素的margin会被分隔开 因此不存在叠加的问题 经验 如果有盒子嵌套 要调整外面盒子和里面盒子之间的距离 一般用外面盒子的padding来调整 不要用里面盒子的margin 这样可以避免空白边叠加的现象出现 嵌套盒子之间的margin 盒子在标准流中的定位原则实验3 嵌套盒子之间的margin 嵌套盒子在IE和Firefox中的不同显示 当一个块元素包含在另一个块元素中时 若对父块设置高度 但父块的高度不足以容纳子块时 IE将使父块的高度自动伸展 达到能容纳子块的最小高度为止 若同时设置了子块高度 IE有时使子块高度自动压缩 直到能容纳内容的最小高度为止 而Firefox对父块和子块均以定义的高度为准 父块高度不会伸展 任其子块露在外面 子块高度也不会压缩 从这里可以看出 Firefox对元素的高度解释严格按照我们设定的高度执行 而IE对元素高度的设定有点自作主张的味道 它总是使标准流中子元素的盒子包含在父元素盒子当中 背景的控制 CSS的背景属性 背景 background 是网页中常用的一种表现方法 无论是单纯的背景颜色还是背景图片 都能为网页带来丰富的视觉效果 HTML的很多元素都具有bgcolor和backgroud属性 可以设置背景颜色和背景图片 如 table td等 但形式比较单一 对背景图片的设定 只支持在X轴和Y轴都平铺的方式 因此 如果同时设置了背景颜色和背景图片 那么背景颜色将被背景图片挡住 以背景图片来显示 而CSS对元素的背景设置 则提供了更多的途径 如背景图片既可以平铺也可以不平铺 还可以在X轴平铺或在Y轴平铺 当背景图片不平铺时 并不会完全挡住背景颜色 因此可以综合设置背景颜色和背景图片达到希望的效果 CSS的背景属性是backgroud或以backgroud开头 CSS的背景属性 各个背景属性的默认值 background color transparent透明模式background image nonebackground repeat repeat平铺background attachment scrollbackground position 0 0 background属性的缩写 background属性是所有背景属性的缩写形式 就像font属性一样 其缩写顺序为 background background color background image background repeat background attachment background position如body background EFF4FFurl images body bg jpg repeat xfixed DW中的背景设置面板 background color 0099cc background image url img bottom gif background repeat no repeat background position rightbottom background attachment no repeat 背景的运用技巧 背景的运用技巧 同时运用背景颜色和背景图片控制背景在盒子中的位置及是否平铺多个元素背景的叠加滑动门技术背景位置的控制 实现图片的翻转圆角的设计方法总结 同时运用背景颜色和背景图片 目前网页中流行采用一种渐变背景 即网页的背景从上至下由一种深颜色过渡到一种浅颜色 由于网页的长度通常是不好估计的 所以无法用一幅背景图片来做这种渐变背景 只能在网页的上部用渐变的图片做背景 下部使用用一种和图片下部颜色相同的颜色做背景色通过在CSS中设置body标记的背景颜色和背景图片 并把背景图片设置为横向平铺就可以实现渐变背景了 body background 666666url xxwlzx body bg gif repeat x 控制背景在盒子中的位置及是否平铺 在html中 背景图像只能平铺 而在CSS中 背景图像能做到精确定位 允许不平铺 效果就像普通的图像元素一样 因此有人建议所有的网页图像都作为元素的CSS背景引入 例如下面的网页的背景就是用让背景图片不平铺并且定位于右下角实现的 body background F7F2DFurl cha jpg no repeatrightbottom li元素的背景应用 通过背景图片不平铺的技术还可以用来改变列表的项目符号 虽然使用列表元素ul的CSS属性list style image url arrow gif 可以将列表项前面的小黑点改变成自定义的小图片 但无法调整小图片和列表文字之间的距离 要解决这个问题 可以将小图片设置成li元素的背景 不平铺 且居左 为防止文字遮住图片 将li元素的左padding设置成20px 这样还可通过调整左padding的值实现任意调整列表小图片和文字之间的距离 ul list style type none li background url arrow gif no repeat0px3px 距左边0px 距上边3px padding left 20px 可以看出 有了背景的精确定位能力 完全可以使列表项目图片符号出现在li元素中的任意位置上 多个元素背景的叠加 背景图片的叠加是很重要的CSS技术 当两个元素是嵌套关系时 那么里面元素的盒子背景的不透明部分将覆盖在外面元素盒子背景之上 利用这一点 再结合对背景图片位置的控制 可以得到滑动门技术 下面以4图像可变宽度圆角栏目框的制作来介绍多个元素背景叠加的技巧 圆角的设计 固定宽圆角可变宽圆角 4图像可变宽度圆角栏目框 这是圆角矩形的标题 4图像可变宽度圆角栏目框 round background image url xxwlzx tly gif background repeat no repeat background color 00FF99 width 244px roundh3 background image url xxwlzx tly2 gif background repeat no repeat background position righttop text align center padding 12px margin 0px roundp background image url xxwlzx tly4 gif background repeat no repeat background position leftbottom margin 0px roundspan background image url xxwlzx tly3 gif background repeat no repeat background position rightbottom display block padding 16px font size 14px line height 140 color FF0000 最后再设置背景色 由于几层背景的叠加 背景色只能放在最底层的盒子上 也就是对最外层的元素设置背景色 这样背景色就不会把背景图片给覆盖了 与此相反 为了让内容能放在距边框有一定边距的区域 必须设置padding值 而且padding值只能设置在最里层的盒子上 但这个圆角框没有边框 要制作带有边框的可变宽度圆角框 需要采用5图像二维滑动门法制作 滑动门技术 背景的高级运用 图片阴影 自适用宽度圆角导航条 1 图像阴影 阴影是一种很流行 很有吸引力的图像处理技巧 它给平淡的设计增加了深度 形成立体感 使用图像处理软件很容易给图像增添阴影 但是 可以使用CSS产生简单阴影效果 而不需要修改底层的图像 通过滑动门技术制作的阴影能自适应图像的大小 即不管图像是大是小都能为它添加阴影效果 滑动门制作图片阴影原理图 2 自适应宽度圆角导航条 原理 背景图片比盒子长一些背景图片 里面的盒子设置背景图片为从右边开始铺外面的盒子设置背景图片为从左边开始铺把里面的盒子放在外面盒子上方 则两边的圆角都能显示 同时 改变文字的多少 能使导航条自动伸展 而圆角部分位于padding区域 不会影响圆角 滑动门导航条代码 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 righttop display block padding right 24px a hover color FFFFFF 首页中心简介政策法规常用下载为您服务技术支持和服务 背景图案的翻转 控制背景的显示区域 通过背景定位技术可使背景图片出现在盒子的任意位置上 如果盒子没有背景那么大 那么只能显示背景图的一部分 利用这一点 我们可以将多个背景图片放置在一个大的背景图里 让每个元素只显示这张大背景图的一部分 例如制作导航条时 可以让链接状态显示背景图的上一部分 鼠标滑过时显示背景图的下一部分 这就是背景的翻转 使我们只用一幅图片就能实现背景图的切换 通过背景图片位置控制实现图片翻转 navlia 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 navlia hover background url img nav gif background position 0px 26px background position leftcenter color FFFFFF 将滑动门技术和背景图片翻转结合的例子 a hover background position 100 42px a hoverb background position 0 42px color FF0000 CSS圆角设计 圆角的设计方法 圆角在网页设计中让人又爱又恨 一方面设计师为追求美观的效果经常需要借助于圆角 另一方面为了在网页中设计圆角又不得不增添很多工作量 制作固定宽度的圆角 不带边框的 带边框的 制作可变宽度圆角 不带边框的 带边框的 不用图片做圆角 1 制作固定宽度的圆角框 用CSS制作不带边框的固定宽度圆角框 如图4 57左所示 至少需要两个盒子 一个盒子放置顶部的圆角图案 另一个盒子放置底部的圆角图案 并使它位于盒子底部 把这两个盒子叠放在一起 再对栏目框设置和圆角相同的背景色就可以了制作带边框的固定宽度圆角框 如图4 57右所示 则至少需要三个盒子 最底层的盒子放置圆角框中部的边框和背景组成的图案 并使它垂直平铺 上面两层的盒子分别放置顶部的圆角和底部的圆角 这样在顶部和底部圆角图片就遮盖了中部的图案 形成了完整的圆角框 2 制作可变宽度圆角 制作可变宽度不带边框的圆角框就是前面介绍的4图像法制作圆角框 而要制作带边框的可变宽度圆角则要采用5图像二维滑动门方法 3 不用图片做圆角 山顶角方法 如果不想用图片做圆角 那也是可以实现的 这需要一种称为山顶角 mountaintopcorner 的圆角制作方法 所谓山顶角 就是说不是纯粹意义上的平滑圆角 而是通过几个1像素高的div 水平细线 叠放起来形成视觉上的圆角 用这种方法做圆角一般采用4个div叠放 所以圆角的弧度不是很大 3 不用图片做圆角 山顶角方法 如果把最上方一条细线的颜色改为黑色 再设置下面三条细线的左右边框是1像素黑色 那么就出现了带有边框的圆角框效果了 4 学习圆角制作的意义 由于人们的审美观念决定了圆角比方角更具有亲和力 使我们很多时候必须制作圆角框 另外 圆角框技术是制作其他不规则图案栏目框的基础 例如图4 61所示的栏目框 就可以把栏目框上面部分看成是上圆角 下面部分看成是下圆角 再按照制作圆角框的思路制作了 盒子的浮动 盒子的浮动 在标准流中 块级元素的盒子都是上下排列 行内元素的盒子都是左右排列 如果仅仅按照标准流的方式进行排列 就只有这几种可能性 限制太大 CSS的制订者也想到了这样排列限制的问题 因此又给出了浮动和定位方式进行盒子的排列 从而使排版的灵活性大大提高 例如 有时希望相邻块级元素的盒子左右排列 所有盒子浮动 或者希望一个盒子被另一个盒子中的内容所环绕 一个盒子浮动 做出图文混排的效果 这时最简单的办法就是运用浮动 float 属性使盒子在浮动方式下定位 在标准流中 一个块级元素在水平方向会自动伸展 在它的父元素中占满整个一行 而在竖直方向和其他元素依次排列 不能并排 如图4 62所示 使用 浮动 方式后 这种排列方式就会发生改变 CSS中有一个float属性 默认值为none 也就是标准流通常的情况 如果将float属性的值设为left或right 元素就会向其父元素的左侧或右侧靠紧 同时盒子的宽度不再伸展 而是收缩 在没设置宽度时 会根据盒子里面的内容来确定宽度 1 一个盒子浮动 接下来在上述代码中添加一条CSS代码 使元素 son1 浮动 代码如下 son1 float left 此时显示效果如图4 63所示 可发现给 son1 添加浮动属性后 son1 的宽度不再自动伸展 而且不再占据原来浏览器分配给它的位置 如果再在未浮动的盒子Box 2中添一行文本 就会发现 son2 中的内容是环绕着浮动盒子的 总结 一个盒子浮动后的特点 1 浮动后的盒子将以块级元素显示 但宽度不会自动伸展 2 浮动的盒子将脱离标准流 即不再占据浏览器原来分配给它的位置 IE有时例外 3 未浮动的盒子将占据浮动盒子的位置 同时未浮动盒子内的内容会环绕浮动后的盒子 提示 所谓 脱离标准流 是指元素不再占据在标准流下浏览器分配给它的空间 其他元素就好像这个元素不存在一样 例如图4 63中 当Box 1浮动后 Box 2就顶到了Box 1的位置 相当于Box 2视Box 1不存在一样 但是 浮动元素并没有完全脱离标准流 这表现在浮动盒子会影响未浮动盒子中内容的排列 例如Box 2中的内容会跟在Box 1盒子之后进行排列 而不会忽略Box 1盒子的存在 2 多个盒子浮动 多个盒子都浮动后 就产生了块级元素水平排列的效果 多个浮动元素不会相互覆盖 一个浮动元素的外边界 margin 碰到另一个浮动元素的外边界后便停止运动 若包含的容器太窄 无法容纳水平排列的多个浮动元素 那么最后的浮动盒子会向下移动 图4 68 但如果浮动元素的高度不同 那当它们向下移动时可能会被卡住 4 7 2浮动的清除 clear是清除浮动属性 它的取值有left right both和none 默认值 如果设置盒子的清除浮动属性clear值为left或right 表示该盒子的左边或右边不允许有浮动的对象 值设置为both则表示两边都不允许有浮动对象 因此该盒子将会在浏览器中另起一行显示 clear属性既可以用在未浮动的元素上 也可以用在浮动的元素上 如果对Box 3同时设置清除浮动和浮动 即 son3 clear both float left 总结 清除浮动是清除其它盒子浮动对该元素的影响 而设置浮动是让元素自身浮动 两者并不矛盾 因此可同时设置元素清除浮动和浮动 4 7 3浮动的浏览器解释问题 1 元素浮动但是其父元素不浮动当设置了父元素的宽度或高度后 IE 非标准浏览器 中的浮动元素将占据外围容器空间 Firefox依然不占据