- 1、本文档共33页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
背景图片的叠加是很重要的CSS技术,当两个元素是嵌套关系时,那么里面元素的盒子背景的不透明部分将覆盖在外面元素盒子背景之上,利用这一点,再结合对背景图片位置的控制,可以得到滑动门技术。下面以4图像可变宽度圆角栏目框的制作来介绍多个元素背景叠加的技巧 固定宽圆角 可变宽圆角 在标准流中,块级元素的盒子都是上下排列,行内元素的盒子都是左右排列,如果仅仅按照标准流的方式进行排列,就只有这几种可能性,限制太大。CSS的制订者也想到了这样排列限制的问题,因此又给出了浮动和定位方式进行盒子的排列,从而使排版的灵活性大大提高。 例如:有时希望相邻块级元素的盒子左右排列(所有盒子浮动)或者希望一个盒子被另一个盒子中的内容所环绕(一个盒子浮动)做出图文混排的效果,这时最简单的办法就是运用浮动(float)属性使盒子在浮动方式下定位。 在标准流中,一个块级元素在水平方向会自动伸展,在它的父元素中占满整个一行;而在竖直方向和其他元素依次排列,不能并排,使用“浮动”方式后,这种排列方式就会发生改变。 CSS中有一个float属性,默认值为none,也就是标准流通常的情况,如果将float属性的值设为left或right,元素就会向其父元素的左侧或右侧靠紧,同时盒子的宽度不再伸展,而是收缩,在没设置宽度时,会根据盒子里面的内容来确定宽度。 盒子模型是CSS的基石之一,它指定元素如何显示以及(在某种程度上)如何相互交互 页面上的每个元素都被浏览器看成是一个矩形的盒子,这个盒子由元素的内容、填充、边框和边界组成。 网页就是由许多个盒子通过不同的排列方式(上下排列,并列排列,嵌套排列)堆积而成。 每个HTML元素都可以看作是一个装了东西的盒子 盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间,还有边界(magin) 默认情况下盒子的边框是无,背景色是透明,所以我们在默认情况下看不到盒子 content padding-top padding-bottom padding-left padding-right border-top border-bottom border-right border-left margin-right margin-left margin-top margin-bottom width height 一个元素实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界 当将文档声明DOCTYPE删除后,IE 6对网页的解释会进入quirk(怪异)模式,此时盒子的宽度等于左边界+宽度+右边界 因此当使用了盒子属性后切忌删除DOCTYPE 如果盒子里面嵌套有盒子,且两个盒子都有边框,那么两个盒子边框之间的距离等于外面盒子的填充值+里面盒子的边界值 盒子模型的margin和padding属性比较简单,只能设置宽度值,最多分别对上、右、下、左设置宽度值。而边框border则可以设置宽度、颜色和样式。 分别是border-width(宽度)、border-color(颜色)和border-style(样式)其中border-style属性可以将边框设置为实线(solid)、虚线(dashed)、点划线(dotted)、双线(double)等效果 填充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,
您可能关注的文档
- 第4节免疫调节.ppt
- 第4课 亚洲封建国家的建立.ppt
- 第4课__为民族独立而战课件2015-9-16.ppt
- 第4课“合同为一家”.ppt
- 第4课第2节词语的兄弟姐妹--同义词课件(人教版选修《语言文字应用》).ppt
- 第4课明清君主专制的加强.ppt
- 第4课明清之际活跃的儒家思想.ppt
- 第4课亚洲封建国家的建立.ppt
- 第4课专制集权的不断加强.ppt
- 第4章 钢的热处理.ppt
- 2023-2024学年山东省济南市某区统编版二年级上册期末考试语文试卷.pdf
- 大招3角平分线定理.pdf
- 2023-2024学年福建省莆田市第48、49教研片区统编版三年级上册期末考试语文试卷.docx
- 2023-2024学年河北省邢台市巨鹿县巨鹿县三校联考冀教版一年级下册期末测试数学试卷.docx
- 四川省成都市第七中学2024-2025学年高三上学期8月学科素养测试数学试题.docx
- 上海市建平中学2023-2024学年高一下学期数学5月月考试卷(数列专题卷).docx
- 北京市北京师范大学附属实验中学2025届高三上学期统一练习数学试题.pdf
- 深入理解苏教版七年级上册动点问题.docx
- 苏教版小学语文古诗解析.docx
- 高中苏教版语文教材目录汇编.docx
文档评论(0)