- 1、本文档共30页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
图13.12DOM树与页面布局的对应关系第13章CSS盒子模型“盒子”与“模型”的概念探究13.1边框13.2设置内边距13.3设置外边距13.4盒子之间的关系13.5盒子在标准流中的定位原则13.6盒子模型概念的案例13.7盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法,才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念,并讲解CSS定位的基本方法。13.1“盒子”与“模型”的概念探究
图13.1画框示意图图13.2盒子模型案例13-0,1,2,3,413.2边框
图13.3border示意图13.2.1设置边框样式
13.2.2属性值的简写形式
1.对不同的边框设置不同的属性值 在13.2.1节的实例代码中,分别设置了border-color、border-width和border-style这3个属性,其效果是对上下左右4个边框同时产生作用。 在实际使用CSS时,除了采用这种方式,还可以分别对4条边框设置不同的属性值。 方法是按照规定的顺序,给出2个、3个或者4个属性值,它们的含义将有所区别,具体如下。 (1)如果给出2个属性值,那么前者表示上下边框的属性,后者表示左右边框的属性。Border-color:redblue;1122 (2)如果给出3个属性值,那么前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性。Border-color:redbluegreen;1223 (3)如果给出4个属性值,那么依次表示上、右、下、左边框的属性,即顺时针排序。Border-color:redbluegreenpurple;12342.在一行中同时设置边框的宽度、颜色和样式
要把border-width、border-border-color和border-style这3个属性合在一起,还可以用border属性来简写。 例如: border:2pxgreendashed; 这行样式表示将4条边框都设置为2像素的绿色虚线,这样就比分为3条样式来写方便多了。 3.对一条边框设置与其他边框不同的属性 4.同时制订一条边框的一种属性13.3设置内边距
13.4设置外边距
您可能关注的文档
- 微生物学:水生环境及陆地环境中的微生物.ppt
- 微生物学:生态学与共生.ppt
- 微生物学课件:微生物相互作用与微生物生态学.ppt
- 网页制作综合技术教程:CSS盒子模型.ppt
- 网页制作综合技术教程:第7章 在网页中使用Flash.ppt
- 微生物课件:蓝细菌和藻类.ppt
- 微生物课件:噬菌体.ppt
- 微生物学:微生物相互作用与微生物生态学.ppt
- 微生物学:微生物的生长及其控制.ppt
- 网页制作综合技术教程:第11章 用CSS设置链接与导航菜单.ppt
- GB/T 12959-2024水泥水化热测定方法.pdf
- GB/T 43856-2024印刷技术 印刷工作流程的颜色一致性.pdf
- 中国国家标准 GB/T 43856-2024印刷技术 印刷工作流程的颜色一致性.pdf
- 《GB/T 43856-2024印刷技术 印刷工作流程的颜色一致性》.pdf
- 中国国家标准 GB/Z 42151.77-2024电力自动化通信网络和系统 第7-7部分:用于工具的IEC 61850相关数据模型机器可处理格式.pdf
- 中国国家标准 GB/T 43930-2024宇航用电磁继电器通用规范.pdf
- 《GB/T 43930-2024宇航用电磁继电器通用规范》.pdf
- 中国国家标准 GB/T 32151.7-2023碳排放核算与报告要求 第7部分:平板玻璃生产企业.pdf
- 《GB/T 32151.7-2023碳排放核算与报告要求 第7部分:平板玻璃生产企业》.pdf
- GB/T 32151.8-2023碳排放核算与报告要求 第8部分:水泥生产企业.pdf
文档评论(0)