2023年6月21日发(作者：)
CSS语法规则CSS语法规则概述发展历程随着 HTML 的成长，为了满⾜页⾯设计者的要求，HTML 添加了很多显⽰功能。但是随着这些功能的增加，HTML 变的越来越杂乱，⽽且HTML 页⾯也越来越臃肿。于是 CSS 便诞⽣了。CSS3 是 CSS 层叠样式表技术的升级版本，于1999年开始制订，2001年5⽉23⽇ W3C 完成了 CSS3 的⼯作草案，主要包括盒⼦模型、列表模块、超链接⽅式、语⾔模块、背景和边框、⽂字特效、多栏布局等模块 。到⽬前为⽌，CSS3 的内容仍在不断的更新升级中。CSS概念css 全称 cascading style sheets，层叠式样式表，是⼀种⽤来表现 HTML 的⽂件样式的计算机语⾔。作⽤：静态地修饰⽹页，并且可以配合各种脚本语⾔动态地对⽹页各元素进⾏格式化。前端三层：html 结构层 从语义的⾓度出发搭建⽹页结构css 样式层 从美观的⾓度出发描述页⾯样式JavaScript ⾏为层 从交互的⾓度出发描述页⾯⾏为CSS 的出现，实现了⽹页的结构和样式分离，拯救了混乱的 HTML，更加拯救了我们 web 开发者。CSS 可以说是⽹页的美容师， 让我们的⽹页更加美观。CSS组成：层叠式：CSS中贯穿始终的加载特性层叠性继承性样式：如何定义显⽰HTML元素⽂字⽂本背景盒模型浮动定位其他样式语法CSS 规则由两个主要的部分构成：选择器，以及⼀条或多条声明，例如：以上是⼀段使⽤ css 给
标签添加宽度和字号的样式设置效果。书写位置css 的代码根据书写位置不同分为四种书写⽅式：内联式、内嵌式、外联式、导⼊式。①内联式内联式，也被习惯叫做⾏内式。书写位置：在 HTML 标签之上的 style 属性中书写 css 样式。所有的 css 样式属性总体组成标签的 style 属性的属性值。
优点：实现了结构和样式的初步分离，css 只负责样式，HTML 负责结构。多个标签可以利⽤⼀段代码设置相同的样式，节省代码量。缺点：结构和样式并没有完全分离，代码依旧书写在 HTML ⽂件的导⼊式样式表的作⽤与外联式样式表基本相同，但是由于导⼊式在浏览器中加载时，会在 HTML 结构加载完毕后再进⾏编译，如果⽹速⽐较慢时，会导致⽹页出现没有 css 样式的效果，给⽤户的体验不好。实际⼯作中⼩型案例：可以使⽤内嵌式CSS.实际⼯作、⼤型⽹站项⽬：推荐使⽤外联式CSS。样式规则明确了样式表的⼏种书写⽅式，接下来以内嵌式样式表为例，学习样式的书写规则。（1）所有的 css 代码都必须书写在
标签内部的⼀对（5）给⼀个标签添加所需要的样式时，只需要将属性名和属性值直接⼀⼀罗列出来，css 每条属性都会加载到浏览器上。div {
width: 200px;
height: 200px;
background‐color: skyblue;
margin‐bottom: 10px;
}（6）分号必要性：每条属性后⾯的分号必须写，如果不写，会导致后⾯所有的代码加载错误。（7）css 中所有属性与属性之间对空格、换⾏、缩进不敏感。div{width:200px;height:200px;background‐color:skyblue;margin‐bottom:10px;}等价于：div {
width: 200px;
height: 200px;
background‐color: skyblue;
margin‐bottom: 10px;
}提⽰：书写代码时，最好进⾏换⾏、合理缩进，有利于读取代码。 上传代码时，为了减少代码量，可以压缩代码。注释前⾯已经了解过 HTML 中注释的写法与作⽤，在 CSS 中也可以使⽤注释。css中的注释写法：/*中间部分为注释内容*/例如：div {
width: 200px;
height: 200px;
background‐color: skyblue; /*设置标签的背景颜⾊*/
margin‐bottom: 10px;
}vs code快捷键：ctrl+/。建议：在 CSS 代码中合理书写注释内容。代码书写⽅式展开格式：开发过程中，代码展开：空⽩、换⾏、缩进。div { width: 100px; height: 100px; background-color:pink;}紧凑格式：上传服务器时，减少不必要的空格，压缩⽂件⼤⼩，利于传输。div{width:100px;height:100px;background-color:pink}英⽂⼤⼩写：css中的英⽂可以使⽤⼤写，也可以使⽤⼩写。空格规范：选择器后加⼀个空格属性冒号后加⼀个空格常⽤样式属性⽂字三属性颜⾊ color作⽤：给⽂字设置颜⾊。属性名 k ：color属性值 v ：颜⾊名、颜⾊值。（1）颜⾊名就是使⽤颜⾊的英⽂单词进⾏表⽰。
看⽂字颜⾊是什么？
看⽂字颜⾊是什么？
更多的颜⾊名可以通过查询⼿册得到：（2）颜⾊值指使⽤具体颜⾊的数值表⽰，包括 rgb 模式和⼗六进制模式写法。rgb 模式：是根据红绿蓝三原⾊进⾏混合⽽成的颜⾊模式，每个原⾊的取值范围是0-255，⼀共256个数值。书写⽅法：rgb(红,绿,蓝)需要记忆常⽤颜⾊⾊值：红⾊ rgb(255,0,0)绿⾊ rgb(0,255,0)蓝⾊ rgb(0,0,255)⿊⾊ rgb(0,0,0)⽩⾊ rgb(255,255,255)灰⾊ rgb(128,128,128)看⽂字颜⾊是什么？
**⼗六进制模式：**是 rgb 模式的⼀种简化写法，使⽤⼗六进制的数字字符去替换⼗进制的 0-255 的数字。⼗六进制：逢⼗六进⼀，每个数位上只能出现 0-9，a-f 之间的字符。书写为颜⾊值时，红、绿、蓝每个⾊值都要使⽤两位数的⼗六进制进⾏标签。0→00255→ff书写⽅式：使⽤ # 开头，后⾯连续书写红、绿、蓝三个颜⾊的⼗六进制的两位数值。红⾊ #ff0000绿⾊ #00ff00蓝⾊ #0000ff⿊⾊ #000000⽩⾊ #ffffff灰⾊ #808080看⽂字颜⾊是什么？
⼀部分⼗六进制颜⾊值可以进⾏简写，如果红、绿、蓝三个颜⾊的⾊值每⼀个都是由重叠的数字组成，可以将重叠的数字简化成⼀个进⾏书写。红⾊ #f00绿⾊ #0f0蓝⾊ #00f类似 #808080 是不能进⾏简化的。**应⽤：**实际⼯作中，颜⾊值需要根据设计图得到。字体 font-family作⽤：定义元素内⽂字的字体。属性名 k ：font-family，字体属于 font 综合属性的⼀个单⼀属性。属性值 v ：字体名称，必须包裹在⼀对引号中，属性值可以有多个，值之间⽤逗号分隔。常⽤的中⽂字体：宋体 SimSun微软雅⿊ Microsoft Yahei常⽤的英⽂字体：Arialconsolas如果不设置字体属性，不同的浏览器有⾃⼰的默认字体。注意1 ：font-family 可以设置多个字体名称，在实际加载时只会选择⼀种加载，选择的依据是按书写顺序进⾏，如果浏览器不⽀持第⼀个字体，则会尝试下⼀个，直到找到第⼀个⽀持的字体。注意2 ： 浏览器中加载的字体是⽤户机器中⾃带的，如果⽤户的电脑中没有设置的字体则加载失败，需要查找下⼀个，因此，必须在最后设置⼀个所有机器都具备的通⽤字体作为后路。注意3 ：中⽂字体中⼀般带有英⽂可以加载的字体效果，为了避免对英⽂字的字体影响，建议将英⽂字体写在属性值最前⾯。看⽂字字体是什么？abc
**应⽤：**⾸选字体需要根据设计图确定，最后需要设置备⽤字体。字号 font-size作⽤：设置⽂字的⼤⼩。属性名 k ：font-size，字号属于 font 综合属性的⼀个单⼀属性。属性值 v ：可以使⽤相对长度单位，也可以使⽤绝对长度单位。推荐使⽤相对长度单位。相对长度单位pxem%绝对长度单位incmmmpt说明像素值，最常使⽤的单位倍数，继承⾃祖先元素设置的字号的倍数百分⽐，继承⾃祖先元素设置的字号的百分⽐说明英⼨厘⽶毫⽶点如果 HTML 中不设置字号，不同的浏览器有⾃⼰默认的加载字号，⽐如 chrome、IE，默认显⽰字号为 16px。看⽂字字号是多少？
不同的浏览器也有⾃⼰最⼩加载显⽰字号，如果设置的字号低于最⼩字号，都以最⼩字号加载，0除外。chrome 浏览器最⼩加载显⽰字号为12px。IE 浏览器最⼩可以⽀持1px的字号。看⽂字字号是多少？
注意：⽹页中最⼩设置字号必须是12px，如果低于12px会出现兼容问题。现在⽹页中普遍使⽤14px+。尽量使⽤12px、14px、16px等偶数的数字字号，ie6 等⽼式浏览器⽀持奇数会有 bug。**应⽤：**实际⼯作中的字号，需要以设计图为准。盒⼦实体化样式三属性如果想在浏览器中具体看到⼀个盒⼦占有的实际位置，需要设置盒⼦可以实体化的三属性。宽度属性 k：width⾼度属性 k：height属性值 v：常⽤px为单位的数值，定义元素占有的宽度和⾼度。背景颜⾊ k：background-color，背景颜⾊是background综合属性的⼀个单⼀属性。属性值 v：颜⾊名或颜⾊值，与color的属性值是⼀样的。}#hl2 { color: red;
}缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。类选择器通过标签的 class 属性去选择标签。书写⽅式：.class属性值选择范围：是页⾯中所有 class 属性值相同的标签。class 命名规则：必须以字母开头，后⾯可以有字母、数字、下划线、横线，严格区分⼤⼩写。class 属性值可以与其他的class相同。特点 1：多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同⼀个类选择器选中。特点 2：⼀个标签的 class 属性可以有多个属性值，值之间⽤空格分隔，每个属性值组成的选择器，都可以选中这⼀个标签，每个选择器后⾯的样式都会添加给同⼀个标签。
这是⼀个普通段落
.demo {color: red;
}.para {
font‐size: 30px;}优点：①通过⼀个类选择器进⾏多选，选中多个标签，添加公共样式。②⼀个标签可以被多个类选择器选中，可以将所有样式进⾏分离，分别提取公共样式和单独样式，节省代码量。实际⼯作中，通常我们有⼀个使⽤规律：类上样式(CSS)，id 上⾏为(JavaScript)。标签的class上⽤于添加css样式，id上⽤于添加js⾏为通配符选择器通过⼀个特殊符号选择页⾯内所有的标签。书写⽅式：*选择范围：包含
标签在内的所有标签。* {
color: red;
}优点：可以实现全选，简化书写。缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使⽤通配符选择，会让不需要的标签也加载⼀次样式，导致浏览器多做⽆⽤的⼯作。注意：实际上线的⽹站不允许使⽤ * 去清除默认内外边距。不过普通的案例，代码量较少时，为了节省书写，可以使⽤通配符。⾼级选择器由于基础选择器不能实现所有选择情况，后期在基础选择器的基础上衍⽣出了⼏种⾼级选择器。⾼级选择器的组成部分是基础选择器。后代选择器通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器。后代选择器也叫包含选择器。书写⽅式：空格表⽰后代，基础选择器中间使⽤空格分隔，空格前⾯的选择器选中的标签必须是后⾯选择器选中标签的祖先级。选择范围：通过后代选择器中前⾯的⼀系列基础选择器缩⼩选择范围，最终由最后⼀个选择器确定选中的标签。后代选择器必须满⾜所有的后代关系才能够被选中（你是我后代你就能被选中），后代关系不⼀定只能是⽗⼦关系。优点：减少 class 属性的定义使⽤，选择效率更⾼。交集选择器通过⼀个标签之上满⾜所有的基础选择器的需求去选择标签。书写⽅式：基础选择器进⾏连续书写，如果有标签选择器参与交集，必须书写在开头。选择范围：选择的是满⾜所有基础选择器需求的标签，如果⼀个条件不满⾜都不能被选中。⽐较常见的是标签与类的交集。 {
color: red;
}表⽰：选择的是带有 demo 类名的所有的p标签。交集选择器可以进⾏多个类名的连续交集，需要满⾜更多的条件才能选中标签。 {
font‐size: 30px;
}表⽰：选择的标签必须是
标签，同时必须具备 demo 和 para 两个类名。IE6 不⽀持类名连续交集写法。交集选择器可以作为其他⾼级选择器的组成部分。.box1 {
font‐size: 30px;
}表⽰：选择的是类名为 box1 盒⼦的后代中的类名为 demo 的
标签。并集选择器不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前⾯六种选择器可以进⾏并集书写，相当于⼀种简化写法。书写⽅式：将多个选择器中间⽤逗号进⾏分隔，最后⼀个后⾯不能加逗号。选择范围：是所有的单独选择器选中的标签的并集集合。⽤途：①如果多个标签具有公共样式，但是不能⽤⼀个选择器选中，可以使⽤并集写法。②可以使⽤标签选择器的并集写法，进⾏默认样式的清除，替换通配符的功能。body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,th,td {
margin: 0;
padding: 0;
}层叠式CSS 的概念中，除了前⾯提到的样式外，还有⼀个重要的概念就是层叠式，层叠式是贯穿整个css的⼀个性质，包含继承性和层叠性。继承性如果⼀个标签没有设置过⼀些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承⽽来，这种现象就是继承性。总结：能够被继承的样式是所有的⽂字相关样式属性（字体和⽂本），其他的属性都不能被继承。浏览器控制⾯板：作⽤：继承性是⼀个很好的性质，可以将页⾯中出现最多的⽂字样式设置给⼀个较⼤的祖先级标签⽐如
，后期所有的后代标签都可以从 进⾏继承。body{font‐size: 14px; font‐family: "微软雅⿊"; color: red; }层叠性思考问题：同⼀个标签可以被多个选择器选中，如果选择器后⾯设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的⽂字样式，后代中该继承哪个祖先级的？解决⽅法：就是使⽤层叠性去解决冲突。多个选择器在进⾏对⽐的过程中，最终只有⼀个属性会成功加载，它会层叠、覆盖掉其他的属性。接下来我们分情况来分析层叠性如何发挥作⽤：（1）如果选择器都选中了标签⾃⾝。第⼀步：⽐较多个选择器的权重，权重⾼的层叠权重低的。基础选择器的权重：根据选择范围，范围越⼤权重越⼩，*** < **标签选择器 < 类选择器 < id 选择器。⾼级选择器权重⽐较⽅法：依次⽐较组成⾼级选择器的 id 的个数，类的个数，标签的个数，如果前⾯能够⽐较出⼤⼩就不再⽐较后⾯，如果前⾯相等就往后⽐较，直到⽐较出⼤⼩。⽐较顺序：( id 个数, 类的个数, 标签的个数 )第⼆步：如果选择器权重都相同，需要⽐较 CSS 中代码的书写顺序，后写的层叠先写的。(2) 如果选择器选中的是祖先元素，⽂字的样式可以被继承。第⼀步：⽐较==就近原则==，⽐较选择器选中的祖先级在HTML结构中距离⽬标标签的远近，近的层叠远的。（选中标签与⽬标标签的近远）第⼆步：如果选中的祖先级距离⽬标⼀样近（同⼀个祖先级），⽐较选择器权重，权重⼤的层叠⼩的。第三步：如果距离⼀样近，权重也相同，最后⽐较 CSS 中的书写顺序，后⾯的层叠前⾯的。(3) important 关键字如果在⽐较选择器权重的过程中，遇见⼀个 important 关键字，可以将某条 CSS 样式属性的权重提升到最⼤。书写位置：在某个css属性的属性值后⾯空格加 !important 。注意：① 就近原则中，不需要⽐较选择器权重，所有 important 会失效。② important 不能提升选择器的权重，只能提升某条属性的权重到最⼤。(4)⾏内式权重⾏内式样式与内嵌式或外联式样式⽐较权重时，⾏内式的权重最⾼。但是，与！important关键字相⽐权重要低。总结：CSS常⽤样式常⽤的 CSS 样式中，最主要的内容分为 5 个部分：页⾯修饰类：字体⽂本样式、背景样式；布局类：盒模型、浮动、定位。字体字体类样式我们已经学习过字号 font-size、字体 font-family 两个属性，接下来还有⼏个常⽤的字体属性。字体粗细 font-weight作⽤：设置⽂字是否加粗显⽰。属性名：font-weight，属于 font 属性的⼀个单⼀属性。属性值有两种⽅式：单词类型、数字类型。单词类型：属性值normalboldbolder说明默认值，定义标准的字体定义粗体字符，b、strong标签的默认值定义更粗的字体lighter属性值定义更细的字体说明案例：p {font‐weight: bold;
}数字类型：100-900 之间的整百数字。数字越⼤，⽂字显⽰越粗。其中 400 等价于 normal，700 等价于 bold。案例：p {
font‐weight: 700;
}字体风格 font-style作⽤：设置⽂字是否斜体显⽰。属性名：font-style，属于 font 属性的⼀个单⼀属性。属性值：属性值normalitalicoblique说明设置正规的字体，⼤多数标签的默认值设置斜体的⽂字，主要针对英⽂，要求英⽂以字体中的斜体样式显⽰设置倾斜的⽂字，只是将⽂字倾斜显⽰，与字体⽆关实际应⽤中，更多的斜体效果习惯使⽤italic属性值。⾏⾼ line-height作⽤：设置的是⼀⾏⽂字实际占有的⾼度，⽂字字号在⾏⾼中是垂直居中的。属性名：line-height，属于 font 属性的⼀个单⼀属性。属性值：属性值px像素值百分⽐数值说明设置的⾏⾼的具体像素值设置的本⾝字号像素值的百分⽐实际⼯作中，⾏⾼的数值通过设计图获取，量取数值时需要使⽤⼀些辅助软件⼯具。量取⼯具：可以使⽤Fireworks软件。字体综合 font字体、字号、⾏⾼、加粗、斜体都是font综合属性的单⼀属性。font属性五个单⼀属性的值可以进⾏合写，属性值可以有2到多个，值之间⽤空格进⾏分隔。font进⾏综合书写时，必须有字号和字体参与，⽽且必须字号在前，字体在后，不能颠倒顺序。font: 14px "consolas","arial","SimSun","Microsoft Yahei";font属性经常对字体、字号、⾏⾼进⾏合写，书写顺序必须是字号、⾏⾼、字体，字号和⾏⾼之间必须⽤/进⾏分隔。font: 14px/28px "consolas","arial","SimSun","Microsoft Yahei";如果font属性需要设置加粗和斜体，两个属性值只能写在最前⾯，两个值之间可以互换位置。后⾯的字号、⾏⾼、字体不能更改位置。font: italic bold 14px/28px "consolas","arial","SimSun","Microsoft Yahei";
font: bold italic 14px/28px "consolas","arial","SimSun","Microsoft Yahei";⽂本⽂本类样式我们已经学习过颜⾊ color 属性，严格来说⾏⾼ line-height 也是⽂本类属性，由于其可以合写在 font 属性中个，暂时先归类到字体中学习，接下来还有⼏个常⽤的⽂本属性。⽔平对齐 text-align作⽤：设置⽂本⽔平⽅向的对齐。属性值：三个⽅向的单词属性值leftcenterright作⽤居左对齐,⼤部分标签的默认值居中对齐居右对齐在盒⼦中，不论⽂本是单⾏还是多⾏，都会对应⽅向对齐。案例：p { text‐align: center;}⽂本修饰 text-decoration作⽤：设置⽂本整体是否有线条的修饰效果。属性值：属性值noneoverlineline-throughunderline说明没有修饰，⼤部分标签的默认值上划线中划线，删除线， 标签的默认值下划线， 标签的默认值⽂本缩进 text-indent作⽤：设置段落⾸⾏是否进⾏缩进。属性值:属性值px 单位em 单位百分⽐说明表⽰⾸⾏缩进多少像素⾸⾏缩进⼏个中⽂字符的位置表⽰缩进⽂字所在标签的⽗级标签的 width 属性值的百分⽐属性值区分正负，正数表⽰向右缩进，负数表⽰向左缩进。盒模型盒模型⼜叫框模型，包含了五个⽤来描述盒⼦位置、尺⼨的属性，分别是宽度 width、⾼度 height、内边距 padding、 边框 border、外边距 margin。通过⼀幅图，可以简单了解五个属性的功能：盒模型的属性中，根据不同属性的效果，可以划分区域：书写元素内容区域：width+height盒⼦可以实体化的区域：width+height+padding+border盒⼦实际占位的位置：width+height+padding+border+margin学习过程中，学会查看浏览器控制台中的盒模型图：宽度width作⽤：设置可以添加元素内容的区域的宽度。属性值：属性值autopx说明默认值。浏览器可计算出实际的宽度。像素值定义的宽度。定义参考⽗元素宽度 width 的百分⽐宽度。%如果⼀个元素不添加 width 属性，默认属性值为auto，不同的元素浏览器会根据其特点⾃动计算出实际宽度，例如
元素等不需要独占⼀⾏的，其 width 属性的值是内部元素内容⾃动撑开的宽度。 元素⽐较特殊，不需要设置 width 属性，宽度会⾃动适应浏览器窗⼝的宽度。⾼度height作⽤：设置可以添加元素内容的区域的⾼度。属性值：属性值autopx说明默认。浏览器会计算出实际的⾼度。像素值定义的⾼度。定义参考⽗元素⾼度 height 的百分⽐⾼度。%如果⼀个元素不添加 height 属性，默认属性值为auto，浏览器会⾃动计算出实际⾼度，也就是是内部元素内容⾃动撑开的⾼度。元素的⾼度⾃适应内部内容的⾼度。设置百分⽐：参考⽗级⾼度 height 的百分⽐。内边距padding作⽤：设置的是元素的边框内部到宽⾼区域之间的距离。特点：可以去加载背景，不能书写嵌套的内容。属性值：常⽤px为单位的数值。padding 是⼀个复合属性，可以根据内边距的⽅向不同划分为四个⽅向的单⼀属性。书写四个⽅向时，⼀般是按照顺时针规律书写：上、右、下、左。单⼀属性：p { padding‐top: 10px;
padding‐right: 20px;
padding‐bottom: 30px;
padding‐left: 40px;}有时为了化简书写，⼀般习惯将四个⽅向的单⼀属性进⾏合写成 padding 属性。padding 属性值：可以有 1-4 个值，值之间⽤空格进⾏分隔。根据四个⽅向属性值不同，padding 有多种值的书写表⽰⽅法。根据 padding 的属性值的个数不同，区分了四种表⽰法：①四值法：设置四个属性值，分配⽅向上、右、下、左。padding: 10px 20px 30px 40px;②三值法：三个值分配给上、左右、下。padding: 10px 20px 30px;③⼆值法：两个值分配给上下、左右。padding: 10px 20px;④单值法：属性值只有⼀个，分配⽅向上右下左，四边的值相同。padding: 10px;实际应⽤时，根据设计图需要选择不同的表⽰⽅法。案例：制作三边内边距相同，⼀边不同。①使⽤四值法、三值法，进⾏属性值设置。/*padding: 10px 10px 10px 20px;*/
padding: 10px 10px 20px;②利⽤综合属性和单⼀属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后⾯使⽤单⼀属性写法，再次定义某个⽅向的属性值不同，可以实现单⼀属性层叠综合属性的⼀部分。padding: 10px;padding‐top: 20px;其中第⼆种⽤法更加灵活，推荐使⽤，使⽤过程中注意书写顺序，单⼀属性必须书写在后，才能层叠掉综合属性中重复的部分。边框border作⽤：设置的是内边距外⾯的边界区域，作为盒⼦的实体化的最外层。属性值：由三个值组成，分为线的宽度、线的形状、线的颜⾊ 。border: 10px solid #f00;border 属性是⼀个复合属性，根据划分依据不同可以有两种单⼀属性的划分⽅式。①按照属性值的类型划分：线宽：border-width线型：border-style颜⾊：border-color线宽：border-width，设置边框线的宽度。属性值：常⽤px形式的数值，四个⽅向都有边框，属性值类似于 padding，也有四种值的写法。(单值法，⼆值法，三值法，四值法)border‐width: 10px 20px 30px 40px;线型：border-style，设置边框的线条形状。属性值：形状的单词，总体也是类似 padding 的综合属性写法。(单值法，⼆值法，三值法，四值法)属性值的单词可能性：属性值nonesoliddasheddotteddoublegrooveridgeinsetoutset说明定义⽆边框。定义实线。定义虚线。在⼤多数浏览器中呈现为实线。定义点状边框。在⼤多数浏览器中呈现为实线。定义双线。双线的宽度等于 border-width 的值。定义 3D 凹槽边框。其效果取决于 border-color 的值。定义 3D 垄状边框。其效果取决于 border-color 的值。定义 3D 内容凹陷效果。其效果取决于 border-color 的值。定义 3D 内容凸出效果。其效果取决于 border-color 的值。案例：border‐style: solid dashed dotted double;边框颜⾊： border-color,设置边框的颜⾊。属性值：颜⾊名或颜⾊值，整体类似 padding 综合属性写法。(单值法，⼆值法，三值法，四值法)border‐color: #f00 #0f0 #00f #ff0;②根据边框的⽅向划分：上边框：border-top右边框：border-right下边框：border-bottom左边框：border-left每个单⼀属性都必须与复合属性 border ⼀致，设置三个属性值。（width，style，color）border‐top: 10px solid #f00;
border‐right: 10px solid #0f0;③综合属性值⽅向和类型，进⼀步细分border属性：类似 border-top 的单⼀⽅向属性，也可以根据属性值类型继续进⾏单⼀属性划分。单⼀属性写法：border-⽅向-类型。注意：细分时必须先写⽅向划分再写类型划分，否则属性名错误。border‐right‐color: #0f0;实际应⽤中：若四个边都⼀样，完全可以⽤boder综合属性来设置。boder: px solid #f00;如果某⼀边有要求，按照boder单⼀属性来书写。boder-top: px solid #f00;如果还有其他要求按类型的单⼀属性来书写。boder-top-style: dashed;利⽤综合属性和单⼀属性之间的层叠，对综合属性设置单值法，将四边属性设置相同，在后⾯使⽤单⼀属性写法，再次定义某个⽅向的属性值不同，可以实现单⼀属性层叠综合属性的⼀部分。外边距margin作⽤：设置的是盒⼦与盒⼦之间的距离。特点：不能渲染背景。属性值：常⽤ px 为单位的数值。外边距的设置⽅式与内边距 padding ⼀模⼀样的。划分单⼀属性的⽅式，通过⽅向划分：margin‐top: 20px;margin‐right: 20px;
margin‐left: 20px;
margin‐bottom: 10px;
也可以使⽤ margin 复合属性的四种值的写法。margin: 10px 20px 30px 40px;
margin: 10px 20px 30px;margin: 10px 20px;
margin: 10px;盒模型扩展清除默认样式⼤部分标签都有⼀个浏览器加载的默认样式，会对布局造成⼀些影响。为了避免默认样式对整体布局效果造成影响，⼀定要清除默认样式。盒模型属性中内外边距：⼤部分容器级标签都有默认边距，要么⽤标签选择器的并集⽅式，要么通配符清除。
- 和
jQuery实现点击图片简单放大效果
vue-cli4解决项目首次加载慢——手抄
接口自动化测试框架设计优化与实现
html网页设计心得体会
css3同时加载两个动画
html+css实现滚动到元素位置显示加载动画效果
html。css。js的面试题
vue项目的样式加载顺序
web前端(HTML+CSS)试题总结
layui动态加载表格数据
在ts中加载css样式和图片
Selenium中文 API 参考手册
CSS基本语法基础-常用属性
tornado加载CSS后无效果
HTML+CSS开始,我的第一个网页
前端可能问到的面试题(ts,js,css,es6)
bootstraptable轻松实现数据表格
实用的Swiper轮播图配置
JS插件dropload下拉刷新、上拉加载使用小结
ant-design实现主题暗黑主题和亮色主题的切换(实现网站黑白皮肤)
- 两种列表有默认的列表前缀：清除 list-style 属性。 标签的默认样式，顺带设置页⾯中常⽤的a的公共样式：设置 color 和 text-decoration。清除默认加粗效果：设置font-weight。还可以给 标签设置整体⽂字样式，让⼤部分后代标签全部去继承。 /* body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li { margin: 0; padding: 0; } */ * { margin: 0; padding: 0; } ul,ol { list-style: none; } a { color: red; text-decoration: none; } h1,h2,h3,h4,h5,h6,b,strong { font-weight: normal; } /* 设置初始化公共⽂字样式 */ body { color: black; font-size: 14px; font-family: Arial, "宋体"; }⾼度height应⽤根据不同的需求，⾼度属性可以设置也可以不设置。如果设置了⾼度：盒⼦占有的⾼度位置就确定死了，后⾯的同级元素会紧挨着加载。如果不设置⾼度：会根据标签内部内容⾼度⾃动撑开。以
}
margin塌陷现象margin 塌陷现象：在垂直⽅向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，⽽是两个边距中值较⼤的，边距值⼩的塌陷到了边距值⼤的值内部。同级元素塌陷：上⾯的元素有下边距，下⾯的元素有上边距，两个边距相遇，真正的盒⼦间距离是较⼤的那个值。⽗⼦元素塌陷：⽗⼦元素之间也会出现 margin 塌陷，⽗元素和⼦元素都设置了同⽅向的 margin-top 值，两个属性之间没有其他的内容进⾏隔离，导致两个属性相遇，发⽣ margin 塌陷。更特殊的：本⾝⽗元素与上⼀个元素的距离是0，⼦元素如果设置了垂直⽅向的上边距，会带着⽗级⼀起掉下来。解决margin塌陷问题的⽅法：(不要让margin直接相遇)①同级元素：如果两个元素垂直⽅向有间距，只需要设置给⼀个元素，不要进⾏拆分。.box1 { width: 100px; height: 100px; margin-bottom: 150px; background-color: pink; }.box2 { width: 100px; height: 100px; /* margin-top: 100px; */ background-color: pink;}②⽗⼦元素：让两个边距不要相遇，中间可以使⽤⽗元素 border 或 padding 将边距分隔开；更加常⽤的⽅法，⽗⼦盒模型之间的距离就不要⽤⼉⼦的 margin 去踹出来，⽽是⽗级的 padding 挤出来。.box3 { width: 100px; height: 80px; margin-top: 50px; padding-top: 20px; background-color: red; }.box3 .demo { width: 50px; height: 50px; margin-top: 30px; background-color: blue;}另外注意：⽔平⽅向的 margin 没有塌陷现象。标准⽂档流在我们遇到的 HTML 元素中，有的标签元素如
等在浏览器中加载时必须独⾃占满⼀⾏，有的标签元素如
等。⾏内元素：⼤部分的⽂本级标签，⽐如
、 等。各种等级的元素有⾃⼰的加载特点。块级元素a、块级元素可以设置宽⾼，在浏览器中正常加载。b、块级元素必须**独占⼀⾏**，不能与其他任何标签并排⼀⾏。c、块级元素如果不设置宽度，会⾃动撑满⽗级的 width 区域；⾼度不设置，会被内容⾃动撑开⾼度。⾏内元素a、⾏内元素不能正常加载宽度和⾼度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题（主要是垂直⽅向的问题）。b、⾏内元素可以与其他的⾏内或⾏内块元素并排⼀⾏显⽰。c、⾏内元素不论是否设置宽⾼，宽度和⾼度都只能被内容⾃动撑开。⾏内块元素a、⾏内块元素可以设置宽度和⾼度。b、⾏内块元素可以与其他的⾏内或⾏内块并排⼀⾏显⽰。c、⾏内块元素如果不设置宽⾼，要么以原始尺⼨（img图⽚⼤⼩）加载要么被（input中按钮的⼤⼩取决于value）内容⾃动撑开。d、⾏内块依旧具有标准流的微观性质，例如空⽩折叠现象。显⽰模型display标准流中的元素有⾃⼰默认的浏览器加载模式，但是加载模式不是⼀成不变的，后期可以通过 display 属性更改⼀个标签的显⽰模式。属性值：元素根据属性值不同，可以加载对应元素等级的显⽰模式的特点。属性值blockinlineinline-block作⽤表⽰元素要以块级元素模式加载，具备块级特点表⽰元素要以⾏内元素模式加载，具备⾏内特点表⽰标签要以⾏内块模式加载，具备⾏内块特点属性值none作⽤表⽰标签及内部内容直接隐藏，让出原有标准流的位置隐藏的元素要想再次显⽰，可以将 display 的属性值设置为 block。display 属性更改的显⽰模式并没有改变标准流本质性质，页⾯还是只能从上往下加载，存在空⽩折叠现象等微观性质。要想实现更多的界⾯布局效果需要脱离标准流的限制。标签元素脱离标准流的⽅法包括：浮动、绝对定位、固定定位。浮动浮动是我们学习的第⼀种脱离标准流的⽅式。定义浮动是⼀种⾮常重要的布局属性。属性名：float，漂流、浮动的意思。属性值：left 左浮动right 右浮动作⽤：让元素脱离标准流，同⼀级的浮动的元素可以并排在⼀排显⽰。float:left;margin-right: 10px;float:right;margin-right: 10px;float:right;/*margin-right: 10px;*/浮动的性质为了更好的利⽤浮动进⾏布局，我们需要了解浮动相关的性质。浮动的元素脱离标准流标准⽂档流特点：区分⾏块。 块级元素：可以设置宽⾼，必须独占⼀⾏。 ⾏内元素：不能设置宽⾼，可以并排⼀⾏。浮动的元素脱离了标准流的限制，具备⾏块⼆象性，浮动的元素可以设置宽⾼，还可以并排⼀⾏，⽽且不会有空⽩折叠现象，如果元素不设置宽⾼，可以被元素内容⾃动撑开。浮动的元素依次贴边浮动属性值：left、right。浮动⽅向设置不同，进⾏布局时，加载位置⽅向不同。以 left 为例：⽗元素宽度⾜够，所有⼦元素会按照HTML书写顺序，依次向左进⾏贴边，⽗元素左边←⼦元素1←⼦元素2← ⼦元素3←⼦元素4。浮动后：并排⼀排，⽗元素宽度⾜够。⽗元素宽度如果不够,类似于俄罗斯⽅框⼀样贴边，但不会出现钻空现象。如果⼦元素1后⾯的距离也放不下⼦元素4，⼦元素4最终会贴到⽗元素左边，如果⼦元素4的宽度超过了⽗元素，只会出现溢出现象。右浮动与左浮动贴边效果是⼀致的，只是贴边⽅向不同。按照 HTML 书写顺序依次向右向上⼀个元素贴边，第⼀个元素贴⽗元素的右边。应⽤：利⽤浮动依次贴边的性质，⽤列表结构模拟表格布局结构。注意：同⼀个盒⼦中，可以有左浮动和右浮动的⼦盒⼦并存，⼦盒⼦会根据浮动⽅向，向上⼀个同⽅向的⼦盒⼦进⾏贴边，如果空间不够，也会发⽣之前依次贴边的各种情况。利⽤浮动的这个依次贴边性质，可以完成多种⽹页布局效果。例如：①上述平均分布表格效果。②导航栏效果。③常见的电商或企业⽹站布局。浮动的元素没有margin塌陷margin 塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有 margin 塌陷现象。.ps1 { float: left;}浮动的元素让出标准流位置元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后⾯的⼀个同级元素。显⽰效果：浮动的盒⼦飘浮起来压盖住了后⾯的同级的元素。由于浏览器中有兼容性问题，不会使⽤这种属性制作压盖效果，真正的压盖效果使⽤后期学习的定位制作。如果没有特殊需求，不允许⼀个⽗元素中的⼦元素有的浮动有的不浮动，同级元素中有⼀个浮动其他的也要浮动。字围现象与前⾯压盖效果结构类似，同级元素中前⾯的元素浮动，后⾯的元素不浮动，不浮动的元素内部还有⼀些⽂字，浮动的蓝盒⼦会压盖住粉盒⼦的⼀部分，但是⽂字内容不会被盖住，粉盒⼦中的⽂字会让开蓝盒⼦位置，围绕它进⾏加载。这种效果称为字围现象。可以利⽤字围现象制作⼀些特殊的图⽂混排布局效果。浮动的问题标准流中的元素，不设置⾼度的情况下，都能被内部的标准流元素⾃动撑⾼。如果内部的⼦元素进⾏了浮动，浮动的⼦元素是撑不⾼标准流⽗亲的。另外，⽗元素没有⾼度，会影响后⾯元素的标准流位置，如果浮动的⼦元素⾜够⾼时，有可能影响到后⾯浮动元素的贴边。以上的问题需要被解决，解决⽅法是清除浮动带来的影响。清除浮动清除浮动的影响，有以下⼏种⽅法：清除浮动⼀：height给标准流的⽗元素强制给⼀个合适的⾼度：解决：⽗元素有了⾼度，前⾯的浮动不能影响后⾯元素的标准流位置和贴边。问题：⽗元素⾼度不是⾃适应，⼀旦⼦元素⾼度变化，问题可能再次出现。注意：这种height清除浮动的⽅法，只适合⽗盒⼦⾼度固定的情况。清除浮动⼆：clear属性clear，清除。作⽤：清除标签元素⾃⾝受到的前⾯的浮动元素的影响。属性值：left 清除前⾯左浮动带来的影响right 清除前⾯右浮动带来的影响both 清除前⾯所有浮动带来的影响给标准流⽗元素添加 clear 属性，⽗元素不受前⾯浮动影响，不会再占有浮动让出的位置。clear: both;解决：浮动元素影响后⾯元素标准流位置和贴边。问题：⽗元素不能⾼度⾃适应，两个⽗元素之间如果有 margin 效果不正确。清除浮动三：隔墙法清除**外墙法：**在两个⼤的⽗盒⼦之间，添加⼀个空的
clear: both;
height: 10px;}解决：浮动影响后⾯元素标准流位置和贴边，模拟⽗元素间的距离。问题：⽗元素没有⾼度⾃适应。**内墙法：**在⽗元素内部，所有的浮动⼦元素后⾯添加⼀个空的
height: 10px; clear: both;
}解决：⽗元素⾼度⾃适应，浮动影响后⾯的元素位置和贴边。缺点：浮动是 css 样式属性带来的问题，内墙法使⽤ HTML 结构去辅助解决问题，如果页⾯中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。浮动四：伪类清除本质是使⽤伪类⽅法利⽤css代码书写⼀堵内墙。伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。:after：这个伪类表⽰选中的是某个标签内部的最后的位置。书写⽅法：前⾯必须加普通的选择器，后⾯连续书写伪类名称。将伪类添加给⼀个选中⽗盒⼦的选择器后⾯，⼀般给需要清除浮动的⽗盒⼦设置⼀个clearfix的类名。.clearfix:after { content: "1"; /*添加⼀个⽂字内容 */ display: block; /*将⾏内元素转化为块级元素*/ height: 0; /*将盒⼦⾼度固定为0，避免影响⽗盒⼦的⾼度*/ clear: both; /*清除前⾯的浮动影响*/ visibility: hidden; /*将创建的元素所占位置隐藏*/
}
1
2
3
4
color: cyan;
}a:hover { /*⿏标悬浮状态*/
color: red;}a:active { /*⿏标点击状态*/
color: yellow;
}书写顺序标签上可能会同时触发 2 到 3 个状态，每个状态的属性都会进⾏加载，相同的属性之间会发⽣层叠。伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序⾮常重要。要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、⿏标移上hover、⿏标点击active。为了⽅便记忆，利⽤爱恨准则：love hate。实际应⽤⼀般会将访问前和访问后状态设置为⼀样的效果，保证了页⾯的统⼀性，可以选择性的设置⿏标移上和⿏标点击状态。a:link,a:visited {
color: #666;
}a:hover {
color: #f00;
}更加常⽤的⼀种设置⽅式如下：标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的 默认显⽰样式的属性，包括盒模型、⽂字等。a:hover 伪类选择器：设置⿏标移上时不⼀样的样式属性。a { display: block; /*a为⾏内元素想要设置宽⾼需要变成块级元素*/ width: 150px;
height: 50px;
background‐color: skyblue; font: bold 20px/50px "微软雅⿊"; text‐align: center;
color: snow; /*#fff⽩⾊*/ text‐decoration: none;
}a:hover {
background‐color: red;
}注意：其他标签也可以设置 :hover 伪类状态。背景CSS 中除了布局类属性，还需要添加⼀些背景类的内容进⾏页⾯的修饰，从⽽让⽹页变得更加的美观。CSS 中通过 background 属性来设置背景，它是⼀个综合属性，可以拆分成多个单⼀属性。背景颜⾊background-color属性名：background-color作⽤：在盒⼦区域添加背景颜⾊的修饰。加载区域：在 border 及以内加载背景颜⾊。属性值：颜⾊名、颜⾊值。颜⾊值：rgb 模式、⼗六进制模式、rgba 模式。rgba 模式：在 rgb 基础上增加了⼀个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表⽰完全透明，1 表⽰完全不透明，0.5表⽰半透明。书写⽅式：rgba(红⾊，绿⾊，蓝⾊，不透明度)注意：背景颜⾊半透明，不影响内容。background‐color: rgba(255,0,0,0.4);背景图⽚background-image属性名：background-image作⽤：给盒⼦添加图⽚的背景修饰。加载范围：默认的加载到边框及以内部分。background-repeat: no-repeat;后期如果图⽚不重复加载，加载从 border 以内开始。属性值：url(图⽚路径)url：uniform resource locator，统⼀资源定位符，⼩括号内部书写查找图⽚的路径。背景图和背景颜⾊可以同时设置，背景图会压盖背景颜⾊，没有背景图的区域会显⽰背景颜⾊。背景重复background-repeat属性名：background-repeat作⽤：设置添加的背景图是否要在盒⼦中重复进⾏加载。根据属性值不同，有四种重复加载⽅式：属性值repeatno-repeatrepeat–xrepeat–y作⽤重复，默认属性值，表⽰会使⽤背景图⽚重复加载填满整个盒⼦背景区域不重复，不论背景图是否⼤于盒⼦范围，都只加载⼀次图⽚⽔平重复，使⽤背景图⽚⽔平重复加载铺满第⼀⾏，垂直⽅向不重复垂直重复，使⽤背景图⽚垂直重复加载铺满第⼀列，⽔平⽅向不重复背景定位background-position属性名：background-position作⽤：主要⽤于设置不重复的图⽚在背景区域的加载开始位置。属性值：分为三种写法，单词表⽰法、像素表⽰法、百分⽐表⽰法。不论哪种写法，属性值都有两个，值之间⽤空格分隔。第⼀个属性值：表⽰背景图⽚在⽔平⽅向的位置。第⼆个属性值：表⽰背景图⽚在垂直⽅向的位置。单词表⽰法属性值都是使⽤代表⽅向的单词进⾏书写。⽔平⽅向可选单词：left、center、right垂直⽅向可选单词：top、center、bottom单词表⽰图⽚与盒⼦背景区域进⾏对应⽅向的对齐。background-position: left bottom;像素表⽰法使⽤像素值作为背景定位的属性值。第⼀个属性值：像素是⼏，表⽰背景图⽚左上⾓针对 border 以内的左上顶点⽔平⽅向位移的距离。第⼆个属性值：像素是⼏，表⽰背景图⽚左上⾓针对 border 以内的左上顶点垂直⽅向位移的距离。background‐position: 100px 50px;像素值区分正负，正负代表位移⽅向不同：正数：表⽰图⽚针对盒⼦的原点向右、向下移动。负数：表⽰图⽚针对盒⼦的原点向左、向上移动。background‐position: ‐100px ‐50px;应⽤：⼩盒⼦⾥⾯放⼤图⽚的⼀部分可以利⽤属性值为负数，制作在⼩盒⼦中显⽰⼤的背景图的⼀部分。制作⽅法，需要使⽤ FW 软件量取尺⼨，读取数据。第⼀步：在设计图中，使⽤切⽚⼯具制作⼀个想要显⽰区域⼤⼩的切⽚，让切⽚左上顶点位于想要加载的背景部分。第⼆步：读取属性栏的切⽚数据，其中宽、⾼就是要加载的盒⼦的宽⾼，x 和 y 的数值表⽰移动的距离的绝对值，直接将数值加负号赋值给背景定位属性。.bird { width: 107px; height: 81px; border: 2px solid #000; background-image: url(images/); background-repeat: no-repeat; background-position: -206px -19px; }百分⽐表⽰法百分⽐表⽰法使⽤百分⽐数字作为属性值。100%代表的数值：⽔平⽅向，等价于盒⼦的border以内的背景区域宽度减去图⽚的宽度。垂直⽅向，等价于盒⼦的border以内的背景区域⾼度减去图⽚的⾼度。background‐position: 100% 100%;背景附着background-attachment属性名：background-attachment作⽤：设置的是背景图⽚是否要随着页⾯或者盒⼦的滚动⽽滚动。属性值scroll作⽤默认属性，表⽰背景图⽚与盒⼦保持相对位置不变，随着页⾯的滚动⽽滚⾛。fixed 固定的，属性值为 fixed 之后，背景图的定位的参考点就从盒⼦ border 以内的左上顶点变为了浏览器窗⼝的左上顶点，页⾯滚动时，浏览器窗⼝的左上顶点是不变的，导致背景图固定在浏览器窗⼝的某个位置，不会随着页⾯滚动⽽滚⾛。fixedbody{ background-image: url(images/); background-repeat: no-repeat; background-attachment: fixed; } .box { width: 300px; height: 300px; padding: 30px; border: 10px dashed #f00; margin: 20px; background-image: url(images/); background-repeat: no-repeat; background-color: rgba(255,0,0,0.4); background-position: left bottom; background-attachment: fixed;
}background-attachment: fixed;的参考点为浏览器窗⼝左上顶点，其被设置的图⽚的位置不会随浏览器窗⼝的拖动⽽改变。注意：两个box中的图⽚不是⼀个图⽚，⽽是两张图⽚在固定位置显⽰⽽产⽣的效果。综合写法background 属性可以将五个单⼀属性的值进⾏合写。属性值：可以有 1-5 个属性值，值之间⽤空格进⾏分隔，背景定位的两个属性值算⼀个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。background: url(images/) no‐repeat center top fixed #fff;如果属性值没有设置完全，其他没有设置的单⼀属性会按照默认值加载。background: pink;如果想去层叠综合属性中的⼀部分，其他的属性保持不变，最好(必须)使⽤单⼀属性写法进⾏层叠。background: url(images/) no‐repeat center top fixed #fff;
background‐attachment: scroll;背景应⽤场景⼀：替换插⼊图
标签是权重最⾼的标签，⼀般会在内部书写最重要的内容，⽐如 logo 图⽚。另外
内部的⽂字，可以帮助提⾼ SEO 搜索排名。如果使⽤插⼊图![]()
，就不能书写搜索关键字。
如果想解决 SEO 问题，可以将 HTML 结构中，插⼊图换成搜索关键字，然后使⽤ css 添加背景图给
标签。
下⼀步将⽂字进⾏隐藏设置：①将字号设置为 0。IE8 及以上或⾼版本浏览器可以隐藏⽂字，但是 IE7 及以下有兼容问题。font‐size: 0;②可以设置给
}图⽚定位到盒⼦的左中位置，padding-left推的是盒⼦中其他元素。精灵图技术当⽤户访问⼀个⽹站时，需要向服务器发送请求，⽹页上的每张图像都要经过⼀次请求才能展现给⽤户。然⽽，⼀个⽹页中往往会应⽤很多⼩的背景图像作为修饰，当⽹页中的图像过多时，服务器就会频繁地接受和发送请求，这将⼤⼤降低页⾯的加载速度。为了有效地减少服务器接受和发送请求的次数，提⾼页⾯的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。CSS 精灵是⼀种处理⽹页背景图像的⽅式。它将⼀个页⾯涉及到的所有零星背景图像都集中到⼀张⼤图中去，然后将⼤图应⽤于⽹页，这样，当⽤户访问该页⾯时，只需向服务发送⼀次请求，⽹页中的背景图像即可全部展⽰出来。通常情况下，这个由很多⼩的背景图像合成的⼤图被称为精灵图。技术依据：①将⽹页中需要⽤到的⼩尺⼨背景图制作成⼀张背景透明的 png 图⽚。②利⽤背景定位技术，将精灵图的每个⼩图⽚加载到对应的标签上。制作精灵图的注意事项：a. 精灵图上放的都是⼩的装饰性质的背景图⽚，插⼊图⽚不能往上放。b. 精灵图的宽度取决于最宽的那个背景图⽚的标签宽度。c. 精灵图可以横向摆放也可以纵向摆放，但是每个图⽚之间必须留够⾜够的空⽩，保证背景图⽚加载时不能出现多余内容。d. 在精灵图的最底端，尽量留⼀点空⽩，⽅便以后添加其他精灵图。可以⽤⼀些在线⼯具快速⽣成精灵图。CSS3新增背景属性背景半透明rgba，应⽤：背景颜⾊，同样可以给⽂字和边框半透明。background-color: rgba(0,0,0,0.4);color: rgba(0,0,0,0.4);border: 1px solid rgba(0,0,0,0.4);;背景缩放background-size通过background-size设置背景图⽚的尺⼨，就像我们设置img的尺⼨⼀样，在移动Web开发中做屏幕适配应⽤⾮常⼴泛。属性值px值百分⽐covercontain说明1-2个像素值，只设置1个值，垂直⽅向等⽐例拉伸；设置2个值，按照设置值加载。同像素值设置⽅法相同，设置百分⽐时，数值参照盒⼦的宽、⾼属性⾃动调整缩放⽐例，把背景图像扩展到⾜够⼤，以使背景图像完全覆盖背景区域。如有溢出部分则会隐藏。⾃动调整缩放⽐例，把图像扩展到最⼤尺⼨，保证图⽚始终完整显⽰在背景区域。多背景CSS3中规定，⼀个盒⼦上，可以添加多个背景图⽚。background-image的属性值书写时，以逗号分隔多背景的URL路径地址。background-image: url(images/in_),url(images/);background-repeat: no-repeat;注意：背景加载时，先写的背景压盖后写的背景图⽚。定位（元素定位）我们已经了解过布局相关的盒模型、浮动等属性，⽽定位是另⼀种布局的重要属性，常⽤于制作压盖或者位置相关的效果。定位属性名：position。属性值：relative 相对定位absolute 绝对定位fixed 固定定位作⽤：设置定位的元素，它需要根据某个参考元素发⽣位置的偏移。定位的元素要想发⽣位置的移动，必须搭配偏移量属性进⾏设置。⽔平⽅向：left、right。垂直⽅向：top、bottom。属性值：常⽤ px 为单位的数值，或者百分⽐。相对定位(不脱标)属性值：relative，相对的意思。参考元素：标签加载的原始位置。必须搭配偏移量属性才能发⽣位置移动。position: relative;
left: 100px;
top: 100px;相对定位的性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。标签显⽰效果上，原位留坑，形影分离。注意①：偏移量属性的值是区分正负的。正数：表⽰偏移⽅向与属性名⽅向相反。负数：表⽰偏移⽅向与属性名⽅向相同。left: ‐50px;top: ‐100px;注意②：同⼀个⽅向，不能设置两个偏移量属性，如果⽔平⽅向同时设置了 left 和 right 属性，只会加载 left 属性。垂直⽅向只加载 top属性。建议：书写时从⽔平⽅向和垂直⽅向各挑⼀个属性进⾏组合。注意③：由于相对定位的参考元素是⾃⾝，left 的正值等价于 right 的负值，top 的正值等价于 bottom 的负值。为了⽅便记忆，可以只使⽤ left、top 组合。right: ‐50px;
bottom: ‐50px;等价于：left: 50px;
top: 50px;实际应⽤：①由于相对定位元素⽐较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的⼦绝⽗相情况。②相对定位⽐较稳定，可以在占有原始位置的情况下，对加载效果区域进⾏位置调整，进⾏微调设置。或者对⽂字进⾏微调。绝对定位(脱标)属性值：absolute，绝对的意思。参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考
。必须搭配偏移量属性才会发⽣位置移动。position: absolute;left: 50px;
top: 50px;绝对定位的性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽⾼，也可以随时定义位置，绝对定位的元素不设置宽⾼只能被内容撑开。注意1：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。注意2：在绝对定位中，由于参考点不同，left正值不再等价于right的负值。
为参考元素的参考点以 为参考元素时，参考点的确定与偏移量⽅向有关。第⼀，如果有 top 参与的定位，参考点就是 页⾯的左上顶点和右上顶点。⾃⾝的对⽐点是盒⼦的所有盒模型属性最外⾯的左上⾓或右上⾓。right: 50px;top: 50px;第⼆，如果有 bottom 参与的绝对定位，参考点是
页⾯**⾸屏**的左下顶点或右下顶点。对⽐点是盒⼦的所有盒模型属性最外⾯的左下⾓或右下⾓。实际应⽤中，如果以 为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使⽤ 作为参考元素。祖先级为参考元素如果祖先级中有定位的元素，就不会去参考 。参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离⽬标最近的祖先。根据绝对定位的参考元素的定位类型不同，有三种定位组合⽅式：⼦绝⽗相、⼦绝⽗绝、⼦绝⽗固，由于相对定位的祖先级位置更稳定，⼤多使⽤⼦绝⽗相的情况。祖先元素参考点如果绝对定位的参考元素是某个祖先级，参考点是盒⼦ border 以内的四个顶点，组合⽅向决定了参考点。绝对定位的元素只关⼼对⽐点和参考点之间的距离，会忽视参考元素的 padding 区域。left、top：参考点是祖先的 border 以内的左上顶点，对⽐点是盒⼦⾃⾝的左上⾓。right、top：参考点是祖先的 border 以内的右上顶点，对⽐点是盒⼦⾃⾝的右上⾓。left、bottom：参考点是祖先的 border 以内的左下顶点，对⽐点是盒⼦⾃⾝的左下⾓。right、bottom：参考点是祖先的 border 以内的右下顶点，对⽐点是盒⼦⾃⾝的右下⾓。left: 50px;top: 50px;right: 50px;
top: 50px;left: 50px;
bottom: 50px;
2023年6月21日发(作者：)
CSS语法规则CSS语法规则概述发展历程随着 HTML 的成长，为了满⾜页⾯设计者的要求，HTML 添加了很多显⽰功能。但是随着这些功能的增加，HTML 变的越来越杂乱，⽽且HTML 页⾯也越来越臃肿。于是 CSS 便诞⽣了。CSS3 是 CSS 层叠样式表技术的升级版本，于1999年开始制订，2001年5⽉23⽇ W3C 完成了 CSS3 的⼯作草案，主要包括盒⼦模型、列表模块、超链接⽅式、语⾔模块、背景和边框、⽂字特效、多栏布局等模块 。到⽬前为⽌，CSS3 的内容仍在不断的更新升级中。CSS概念css 全称 cascading style sheets，层叠式样式表，是⼀种⽤来表现 HTML 的⽂件样式的计算机语⾔。作⽤：静态地修饰⽹页，并且可以配合各种脚本语⾔动态地对⽹页各元素进⾏格式化。前端三层：html 结构层 从语义的⾓度出发搭建⽹页结构css 样式层 从美观的⾓度出发描述页⾯样式JavaScript ⾏为层 从交互的⾓度出发描述页⾯⾏为CSS 的出现，实现了⽹页的结构和样式分离，拯救了混乱的 HTML，更加拯救了我们 web 开发者。CSS 可以说是⽹页的美容师， 让我们的⽹页更加美观。CSS组成：层叠式：CSS中贯穿始终的加载特性层叠性继承性样式：如何定义显⽰HTML元素⽂字⽂本背景盒模型浮动定位其他样式语法CSS 规则由两个主要的部分构成：选择器，以及⼀条或多条声明，例如：以上是⼀段使⽤ css 给
标签添加宽度和字号的样式设置效果。书写位置css 的代码根据书写位置不同分为四种书写⽅式：内联式、内嵌式、外联式、导⼊式。①内联式内联式，也被习惯叫做⾏内式。书写位置：在 HTML 标签之上的 style 属性中书写 css 样式。所有的 css 样式属性总体组成标签的 style 属性的属性值。
优点：实现了结构和样式的初步分离，css 只负责样式，HTML 负责结构。多个标签可以利⽤⼀段代码设置相同的样式，节省代码量。缺点：结构和样式并没有完全分离，代码依旧书写在 HTML ⽂件的导⼊式样式表的作⽤与外联式样式表基本相同，但是由于导⼊式在浏览器中加载时，会在 HTML 结构加载完毕后再进⾏编译，如果⽹速⽐较慢时，会导致⽹页出现没有 css 样式的效果，给⽤户的体验不好。实际⼯作中⼩型案例：可以使⽤内嵌式CSS.实际⼯作、⼤型⽹站项⽬：推荐使⽤外联式CSS。样式规则明确了样式表的⼏种书写⽅式，接下来以内嵌式样式表为例，学习样式的书写规则。（1）所有的 css 代码都必须书写在
标签内部的⼀对（5）给⼀个标签添加所需要的样式时，只需要将属性名和属性值直接⼀⼀罗列出来，css 每条属性都会加载到浏览器上。div {
width: 200px;
height: 200px;
background‐color: skyblue;
margin‐bottom: 10px;
}（6）分号必要性：每条属性后⾯的分号必须写，如果不写，会导致后⾯所有的代码加载错误。（7）css 中所有属性与属性之间对空格、换⾏、缩进不敏感。div{width:200px;height:200px;background‐color:skyblue;margin‐bottom:10px;}等价于：div {
width: 200px;
height: 200px;
background‐color: skyblue;
margin‐bottom: 10px;
}提⽰：书写代码时，最好进⾏换⾏、合理缩进，有利于读取代码。 上传代码时，为了减少代码量，可以压缩代码。注释前⾯已经了解过 HTML 中注释的写法与作⽤，在 CSS 中也可以使⽤注释。css中的注释写法：/*中间部分为注释内容*/例如：div {
width: 200px;
height: 200px;
background‐color: skyblue; /*设置标签的背景颜⾊*/
margin‐bottom: 10px;
}vs code快捷键：ctrl+/。建议：在 CSS 代码中合理书写注释内容。代码书写⽅式展开格式：开发过程中，代码展开：空⽩、换⾏、缩进。div { width: 100px; height: 100px; background-color:pink;}紧凑格式：上传服务器时，减少不必要的空格，压缩⽂件⼤⼩，利于传输。div{width:100px;height:100px;background-color:pink}英⽂⼤⼩写：css中的英⽂可以使⽤⼤写，也可以使⽤⼩写。空格规范：选择器后加⼀个空格属性冒号后加⼀个空格常⽤样式属性⽂字三属性颜⾊ color作⽤：给⽂字设置颜⾊。属性名 k ：color属性值 v ：颜⾊名、颜⾊值。（1）颜⾊名就是使⽤颜⾊的英⽂单词进⾏表⽰。
看⽂字颜⾊是什么？
看⽂字颜⾊是什么？
更多的颜⾊名可以通过查询⼿册得到：（2）颜⾊值指使⽤具体颜⾊的数值表⽰，包括 rgb 模式和⼗六进制模式写法。rgb 模式：是根据红绿蓝三原⾊进⾏混合⽽成的颜⾊模式，每个原⾊的取值范围是0-255，⼀共256个数值。书写⽅法：rgb(红,绿,蓝)需要记忆常⽤颜⾊⾊值：红⾊ rgb(255,0,0)绿⾊ rgb(0,255,0)蓝⾊ rgb(0,0,255)⿊⾊ rgb(0,0,0)⽩⾊ rgb(255,255,255)灰⾊ rgb(128,128,128)看⽂字颜⾊是什么？
**⼗六进制模式：**是 rgb 模式的⼀种简化写法，使⽤⼗六进制的数字字符去替换⼗进制的 0-255 的数字。⼗六进制：逢⼗六进⼀，每个数位上只能出现 0-9，a-f 之间的字符。书写为颜⾊值时，红、绿、蓝每个⾊值都要使⽤两位数的⼗六进制进⾏标签。0→00255→ff书写⽅式：使⽤ # 开头，后⾯连续书写红、绿、蓝三个颜⾊的⼗六进制的两位数值。红⾊ #ff0000绿⾊ #00ff00蓝⾊ #0000ff⿊⾊ #000000⽩⾊ #ffffff灰⾊ #808080看⽂字颜⾊是什么？
⼀部分⼗六进制颜⾊值可以进⾏简写，如果红、绿、蓝三个颜⾊的⾊值每⼀个都是由重叠的数字组成，可以将重叠的数字简化成⼀个进⾏书写。红⾊ #f00绿⾊ #0f0蓝⾊ #00f类似 #808080 是不能进⾏简化的。**应⽤：**实际⼯作中，颜⾊值需要根据设计图得到。字体 font-family作⽤：定义元素内⽂字的字体。属性名 k ：font-family，字体属于 font 综合属性的⼀个单⼀属性。属性值 v ：字体名称，必须包裹在⼀对引号中，属性值可以有多个，值之间⽤逗号分隔。常⽤的中⽂字体：宋体 SimSun微软雅⿊ Microsoft Yahei常⽤的英⽂字体：Arialconsolas如果不设置字体属性，不同的浏览器有⾃⼰的默认字体。注意1 ：font-family 可以设置多个字体名称，在实际加载时只会选择⼀种加载，选择的依据是按书写顺序进⾏，如果浏览器不⽀持第⼀个字体，则会尝试下⼀个，直到找到第⼀个⽀持的字体。注意2 ： 浏览器中加载的字体是⽤户机器中⾃带的，如果⽤户的电脑中没有设置的字体则加载失败，需要查找下⼀个，因此，必须在最后设置⼀个所有机器都具备的通⽤字体作为后路。注意3 ：中⽂字体中⼀般带有英⽂可以加载的字体效果，为了避免对英⽂字的字体影响，建议将英⽂字体写在属性值最前⾯。看⽂字字体是什么？abc
**应⽤：**⾸选字体需要根据设计图确定，最后需要设置备⽤字体。字号 font-size作⽤：设置⽂字的⼤⼩。属性名 k ：font-size，字号属于 font 综合属性的⼀个单⼀属性。属性值 v ：可以使⽤相对长度单位，也可以使⽤绝对长度单位。推荐使⽤相对长度单位。相对长度单位pxem%绝对长度单位incmmmpt说明像素值，最常使⽤的单位倍数，继承⾃祖先元素设置的字号的倍数百分⽐，继承⾃祖先元素设置的字号的百分⽐说明英⼨厘⽶毫⽶点如果 HTML 中不设置字号，不同的浏览器有⾃⼰默认的加载字号，⽐如 chrome、IE，默认显⽰字号为 16px。看⽂字字号是多少？
不同的浏览器也有⾃⼰最⼩加载显⽰字号，如果设置的字号低于最⼩字号，都以最⼩字号加载，0除外。chrome 浏览器最⼩加载显⽰字号为12px。IE 浏览器最⼩可以⽀持1px的字号。看⽂字字号是多少？
注意：⽹页中最⼩设置字号必须是12px，如果低于12px会出现兼容问题。现在⽹页中普遍使⽤14px+。尽量使⽤12px、14px、16px等偶数的数字字号，ie6 等⽼式浏览器⽀持奇数会有 bug。**应⽤：**实际⼯作中的字号，需要以设计图为准。盒⼦实体化样式三属性如果想在浏览器中具体看到⼀个盒⼦占有的实际位置，需要设置盒⼦可以实体化的三属性。宽度属性 k：width⾼度属性 k：height属性值 v：常⽤px为单位的数值，定义元素占有的宽度和⾼度。背景颜⾊ k：background-color，背景颜⾊是background综合属性的⼀个单⼀属性。属性值 v：颜⾊名或颜⾊值，与color的属性值是⼀样的。}#hl2 { color: red;
}缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。类选择器通过标签的 class 属性去选择标签。书写⽅式：.class属性值选择范围：是页⾯中所有 class 属性值相同的标签。class 命名规则：必须以字母开头，后⾯可以有字母、数字、下划线、横线，严格区分⼤⼩写。class 属性值可以与其他的class相同。特点 1：多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同⼀个类选择器选中。特点 2：⼀个标签的 class 属性可以有多个属性值，值之间⽤空格分隔，每个属性值组成的选择器，都可以选中这⼀个标签，每个选择器后⾯的样式都会添加给同⼀个标签。
这是⼀个普通段落
.demo {color: red;
}.para {
font‐size: 30px;}优点：①通过⼀个类选择器进⾏多选，选中多个标签，添加公共样式。②⼀个标签可以被多个类选择器选中，可以将所有样式进⾏分离，分别提取公共样式和单独样式，节省代码量。实际⼯作中，通常我们有⼀个使⽤规律：类上样式(CSS)，id 上⾏为(JavaScript)。标签的class上⽤于添加css样式，id上⽤于添加js⾏为通配符选择器通过⼀个特殊符号选择页⾯内所有的标签。书写⽅式：*选择范围：包含
标签在内的所有标签。* {
color: red;
}优点：可以实现全选，简化书写。缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使⽤通配符选择，会让不需要的标签也加载⼀次样式，导致浏览器多做⽆⽤的⼯作。注意：实际上线的⽹站不允许使⽤ * 去清除默认内外边距。不过普通的案例，代码量较少时，为了节省书写，可以使⽤通配符。⾼级选择器由于基础选择器不能实现所有选择情况，后期在基础选择器的基础上衍⽣出了⼏种⾼级选择器。⾼级选择器的组成部分是基础选择器。后代选择器通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器。后代选择器也叫包含选择器。书写⽅式：空格表⽰后代，基础选择器中间使⽤空格分隔，空格前⾯的选择器选中的标签必须是后⾯选择器选中标签的祖先级。选择范围：通过后代选择器中前⾯的⼀系列基础选择器缩⼩选择范围，最终由最后⼀个选择器确定选中的标签。后代选择器必须满⾜所有的后代关系才能够被选中（你是我后代你就能被选中），后代关系不⼀定只能是⽗⼦关系。优点：减少 class 属性的定义使⽤，选择效率更⾼。交集选择器通过⼀个标签之上满⾜所有的基础选择器的需求去选择标签。书写⽅式：基础选择器进⾏连续书写，如果有标签选择器参与交集，必须书写在开头。选择范围：选择的是满⾜所有基础选择器需求的标签，如果⼀个条件不满⾜都不能被选中。⽐较常见的是标签与类的交集。 {
color: red;
}表⽰：选择的是带有 demo 类名的所有的p标签。交集选择器可以进⾏多个类名的连续交集，需要满⾜更多的条件才能选中标签。 {
font‐size: 30px;
}表⽰：选择的标签必须是
标签，同时必须具备 demo 和 para 两个类名。IE6 不⽀持类名连续交集写法。交集选择器可以作为其他⾼级选择器的组成部分。.box1 {
font‐size: 30px;
}表⽰：选择的是类名为 box1 盒⼦的后代中的类名为 demo 的
标签。并集选择器不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前⾯六种选择器可以进⾏并集书写，相当于⼀种简化写法。书写⽅式：将多个选择器中间⽤逗号进⾏分隔，最后⼀个后⾯不能加逗号。选择范围：是所有的单独选择器选中的标签的并集集合。⽤途：①如果多个标签具有公共样式，但是不能⽤⼀个选择器选中，可以使⽤并集写法。②可以使⽤标签选择器的并集写法，进⾏默认样式的清除，替换通配符的功能。body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,th,td {
margin: 0;
padding: 0;
}层叠式CSS 的概念中，除了前⾯提到的样式外，还有⼀个重要的概念就是层叠式，层叠式是贯穿整个css的⼀个性质，包含继承性和层叠性。继承性如果⼀个标签没有设置过⼀些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承⽽来，这种现象就是继承性。总结：能够被继承的样式是所有的⽂字相关样式属性（字体和⽂本），其他的属性都不能被继承。浏览器控制⾯板：作⽤：继承性是⼀个很好的性质，可以将页⾯中出现最多的⽂字样式设置给⼀个较⼤的祖先级标签⽐如
，后期所有的后代标签都可以从 进⾏继承。body{font‐size: 14px; font‐family: "微软雅⿊"; color: red; }层叠性思考问题：同⼀个标签可以被多个选择器选中，如果选择器后⾯设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的⽂字样式，后代中该继承哪个祖先级的？解决⽅法：就是使⽤层叠性去解决冲突。多个选择器在进⾏对⽐的过程中，最终只有⼀个属性会成功加载，它会层叠、覆盖掉其他的属性。接下来我们分情况来分析层叠性如何发挥作⽤：（1）如果选择器都选中了标签⾃⾝。第⼀步：⽐较多个选择器的权重，权重⾼的层叠权重低的。基础选择器的权重：根据选择范围，范围越⼤权重越⼩，*** < **标签选择器 < 类选择器 < id 选择器。⾼级选择器权重⽐较⽅法：依次⽐较组成⾼级选择器的 id 的个数，类的个数，标签的个数，如果前⾯能够⽐较出⼤⼩就不再⽐较后⾯，如果前⾯相等就往后⽐较，直到⽐较出⼤⼩。⽐较顺序：( id 个数, 类的个数, 标签的个数 )第⼆步：如果选择器权重都相同，需要⽐较 CSS 中代码的书写顺序，后写的层叠先写的。(2) 如果选择器选中的是祖先元素，⽂字的样式可以被继承。第⼀步：⽐较==就近原则==，⽐较选择器选中的祖先级在HTML结构中距离⽬标标签的远近，近的层叠远的。（选中标签与⽬标标签的近远）第⼆步：如果选中的祖先级距离⽬标⼀样近（同⼀个祖先级），⽐较选择器权重，权重⼤的层叠⼩的。第三步：如果距离⼀样近，权重也相同，最后⽐较 CSS 中的书写顺序，后⾯的层叠前⾯的。(3) important 关键字如果在⽐较选择器权重的过程中，遇见⼀个 important 关键字，可以将某条 CSS 样式属性的权重提升到最⼤。书写位置：在某个css属性的属性值后⾯空格加 !important 。注意：① 就近原则中，不需要⽐较选择器权重，所有 important 会失效。② important 不能提升选择器的权重，只能提升某条属性的权重到最⼤。(4)⾏内式权重⾏内式样式与内嵌式或外联式样式⽐较权重时，⾏内式的权重最⾼。但是，与！important关键字相⽐权重要低。总结：CSS常⽤样式常⽤的 CSS 样式中，最主要的内容分为 5 个部分：页⾯修饰类：字体⽂本样式、背景样式；布局类：盒模型、浮动、定位。字体字体类样式我们已经学习过字号 font-size、字体 font-family 两个属性，接下来还有⼏个常⽤的字体属性。字体粗细 font-weight作⽤：设置⽂字是否加粗显⽰。属性名：font-weight，属于 font 属性的⼀个单⼀属性。属性值有两种⽅式：单词类型、数字类型。单词类型：属性值normalboldbolder说明默认值，定义标准的字体定义粗体字符，b、strong标签的默认值定义更粗的字体lighter属性值定义更细的字体说明案例：p {font‐weight: bold;
}数字类型：100-900 之间的整百数字。数字越⼤，⽂字显⽰越粗。其中 400 等价于 normal，700 等价于 bold。案例：p {
font‐weight: 700;
}字体风格 font-style作⽤：设置⽂字是否斜体显⽰。属性名：font-style，属于 font 属性的⼀个单⼀属性。属性值：属性值normalitalicoblique说明设置正规的字体，⼤多数标签的默认值设置斜体的⽂字，主要针对英⽂，要求英⽂以字体中的斜体样式显⽰设置倾斜的⽂字，只是将⽂字倾斜显⽰，与字体⽆关实际应⽤中，更多的斜体效果习惯使⽤italic属性值。⾏⾼ line-height作⽤：设置的是⼀⾏⽂字实际占有的⾼度，⽂字字号在⾏⾼中是垂直居中的。属性名：line-height，属于 font 属性的⼀个单⼀属性。属性值：属性值px像素值百分⽐数值说明设置的⾏⾼的具体像素值设置的本⾝字号像素值的百分⽐实际⼯作中，⾏⾼的数值通过设计图获取，量取数值时需要使⽤⼀些辅助软件⼯具。量取⼯具：可以使⽤Fireworks软件。字体综合 font字体、字号、⾏⾼、加粗、斜体都是font综合属性的单⼀属性。font属性五个单⼀属性的值可以进⾏合写，属性值可以有2到多个，值之间⽤空格进⾏分隔。font进⾏综合书写时，必须有字号和字体参与，⽽且必须字号在前，字体在后，不能颠倒顺序。font: 14px "consolas","arial","SimSun","Microsoft Yahei";font属性经常对字体、字号、⾏⾼进⾏合写，书写顺序必须是字号、⾏⾼、字体，字号和⾏⾼之间必须⽤/进⾏分隔。font: 14px/28px "consolas","arial","SimSun","Microsoft Yahei";如果font属性需要设置加粗和斜体，两个属性值只能写在最前⾯，两个值之间可以互换位置。后⾯的字号、⾏⾼、字体不能更改位置。font: italic bold 14px/28px "consolas","arial","SimSun","Microsoft Yahei";
font: bold italic 14px/28px "consolas","arial","SimSun","Microsoft Yahei";⽂本⽂本类样式我们已经学习过颜⾊ color 属性，严格来说⾏⾼ line-height 也是⽂本类属性，由于其可以合写在 font 属性中个，暂时先归类到字体中学习，接下来还有⼏个常⽤的⽂本属性。⽔平对齐 text-align作⽤：设置⽂本⽔平⽅向的对齐。属性值：三个⽅向的单词属性值leftcenterright作⽤居左对齐,⼤部分标签的默认值居中对齐居右对齐在盒⼦中，不论⽂本是单⾏还是多⾏，都会对应⽅向对齐。案例：p { text‐align: center;}⽂本修饰 text-decoration作⽤：设置⽂本整体是否有线条的修饰效果。属性值：属性值noneoverlineline-throughunderline说明没有修饰，⼤部分标签的默认值上划线中划线，删除线， 标签的默认值下划线， 标签的默认值⽂本缩进 text-indent作⽤：设置段落⾸⾏是否进⾏缩进。属性值:属性值px 单位em 单位百分⽐说明表⽰⾸⾏缩进多少像素⾸⾏缩进⼏个中⽂字符的位置表⽰缩进⽂字所在标签的⽗级标签的 width 属性值的百分⽐属性值区分正负，正数表⽰向右缩进，负数表⽰向左缩进。盒模型盒模型⼜叫框模型，包含了五个⽤来描述盒⼦位置、尺⼨的属性，分别是宽度 width、⾼度 height、内边距 padding、 边框 border、外边距 margin。通过⼀幅图，可以简单了解五个属性的功能：盒模型的属性中，根据不同属性的效果，可以划分区域：书写元素内容区域：width+height盒⼦可以实体化的区域：width+height+padding+border盒⼦实际占位的位置：width+height+padding+border+margin学习过程中，学会查看浏览器控制台中的盒模型图：宽度width作⽤：设置可以添加元素内容的区域的宽度。属性值：属性值autopx说明默认值。浏览器可计算出实际的宽度。像素值定义的宽度。定义参考⽗元素宽度 width 的百分⽐宽度。%如果⼀个元素不添加 width 属性，默认属性值为auto，不同的元素浏览器会根据其特点⾃动计算出实际宽度，例如
元素等不需要独占⼀⾏的，其 width 属性的值是内部元素内容⾃动撑开的宽度。 元素⽐较特殊，不需要设置 width 属性，宽度会⾃动适应浏览器窗⼝的宽度。⾼度height作⽤：设置可以添加元素内容的区域的⾼度。属性值：属性值autopx说明默认。浏览器会计算出实际的⾼度。像素值定义的⾼度。定义参考⽗元素⾼度 height 的百分⽐⾼度。%如果⼀个元素不添加 height 属性，默认属性值为auto，浏览器会⾃动计算出实际⾼度，也就是是内部元素内容⾃动撑开的⾼度。元素的⾼度⾃适应内部内容的⾼度。设置百分⽐：参考⽗级⾼度 height 的百分⽐。内边距padding作⽤：设置的是元素的边框内部到宽⾼区域之间的距离。特点：可以去加载背景，不能书写嵌套的内容。属性值：常⽤px为单位的数值。padding 是⼀个复合属性，可以根据内边距的⽅向不同划分为四个⽅向的单⼀属性。书写四个⽅向时，⼀般是按照顺时针规律书写：上、右、下、左。单⼀属性：p { padding‐top: 10px;
padding‐right: 20px;
padding‐bottom: 30px;
padding‐left: 40px;}有时为了化简书写，⼀般习惯将四个⽅向的单⼀属性进⾏合写成 padding 属性。padding 属性值：可以有 1-4 个值，值之间⽤空格进⾏分隔。根据四个⽅向属性值不同，padding 有多种值的书写表⽰⽅法。根据 padding 的属性值的个数不同，区分了四种表⽰法：①四值法：设置四个属性值，分配⽅向上、右、下、左。padding: 10px 20px 30px 40px;②三值法：三个值分配给上、左右、下。padding: 10px 20px 30px;③⼆值法：两个值分配给上下、左右。padding: 10px 20px;④单值法：属性值只有⼀个，分配⽅向上右下左，四边的值相同。padding: 10px;实际应⽤时，根据设计图需要选择不同的表⽰⽅法。案例：制作三边内边距相同，⼀边不同。①使⽤四值法、三值法，进⾏属性值设置。/*padding: 10px 10px 10px 20px;*/
padding: 10px 10px 20px;②利⽤综合属性和单⼀属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后⾯使⽤单⼀属性写法，再次定义某个⽅向的属性值不同，可以实现单⼀属性层叠综合属性的⼀部分。padding: 10px;padding‐top: 20px;其中第⼆种⽤法更加灵活，推荐使⽤，使⽤过程中注意书写顺序，单⼀属性必须书写在后，才能层叠掉综合属性中重复的部分。边框border作⽤：设置的是内边距外⾯的边界区域，作为盒⼦的实体化的最外层。属性值：由三个值组成，分为线的宽度、线的形状、线的颜⾊ 。border: 10px solid #f00;border 属性是⼀个复合属性，根据划分依据不同可以有两种单⼀属性的划分⽅式。①按照属性值的类型划分：线宽：border-width线型：border-style颜⾊：border-color线宽：border-width，设置边框线的宽度。属性值：常⽤px形式的数值，四个⽅向都有边框，属性值类似于 padding，也有四种值的写法。(单值法，⼆值法，三值法，四值法)border‐width: 10px 20px 30px 40px;线型：border-style，设置边框的线条形状。属性值：形状的单词，总体也是类似 padding 的综合属性写法。(单值法，⼆值法，三值法，四值法)属性值的单词可能性：属性值nonesoliddasheddotteddoublegrooveridgeinsetoutset说明定义⽆边框。定义实线。定义虚线。在⼤多数浏览器中呈现为实线。定义点状边框。在⼤多数浏览器中呈现为实线。定义双线。双线的宽度等于 border-width 的值。定义 3D 凹槽边框。其效果取决于 border-color 的值。定义 3D 垄状边框。其效果取决于 border-color 的值。定义 3D 内容凹陷效果。其效果取决于 border-color 的值。定义 3D 内容凸出效果。其效果取决于 border-color 的值。案例：border‐style: solid dashed dotted double;边框颜⾊： border-color,设置边框的颜⾊。属性值：颜⾊名或颜⾊值，整体类似 padding 综合属性写法。(单值法，⼆值法，三值法，四值法)border‐color: #f00 #0f0 #00f #ff0;②根据边框的⽅向划分：上边框：border-top右边框：border-right下边框：border-bottom左边框：border-left每个单⼀属性都必须与复合属性 border ⼀致，设置三个属性值。（width，style，color）border‐top: 10px solid #f00;
border‐right: 10px solid #0f0;③综合属性值⽅向和类型，进⼀步细分border属性：类似 border-top 的单⼀⽅向属性，也可以根据属性值类型继续进⾏单⼀属性划分。单⼀属性写法：border-⽅向-类型。注意：细分时必须先写⽅向划分再写类型划分，否则属性名错误。border‐right‐color: #0f0;实际应⽤中：若四个边都⼀样，完全可以⽤boder综合属性来设置。boder: px solid #f00;如果某⼀边有要求，按照boder单⼀属性来书写。boder-top: px solid #f00;如果还有其他要求按类型的单⼀属性来书写。boder-top-style: dashed;利⽤综合属性和单⼀属性之间的层叠，对综合属性设置单值法，将四边属性设置相同，在后⾯使⽤单⼀属性写法，再次定义某个⽅向的属性值不同，可以实现单⼀属性层叠综合属性的⼀部分。外边距margin作⽤：设置的是盒⼦与盒⼦之间的距离。特点：不能渲染背景。属性值：常⽤ px 为单位的数值。外边距的设置⽅式与内边距 padding ⼀模⼀样的。划分单⼀属性的⽅式，通过⽅向划分：margin‐top: 20px;margin‐right: 20px;
margin‐left: 20px;
margin‐bottom: 10px;
也可以使⽤ margin 复合属性的四种值的写法。margin: 10px 20px 30px 40px;
margin: 10px 20px 30px;margin: 10px 20px;
margin: 10px;盒模型扩展清除默认样式⼤部分标签都有⼀个浏览器加载的默认样式，会对布局造成⼀些影响。为了避免默认样式对整体布局效果造成影响，⼀定要清除默认样式。盒模型属性中内外边距：⼤部分容器级标签都有默认边距，要么⽤标签选择器的并集⽅式，要么通配符清除。
- 和
- 两种列表有默认的列表前缀：清除 list-style 属性。 标签的默认样式，顺带设置页⾯中常⽤的a的公共样式：设置 color 和 text-decoration。清除默认加粗效果：设置font-weight。还可以给 标签设置整体⽂字样式，让⼤部分后代标签全部去继承。 /* body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li { margin: 0; padding: 0; } */ * { margin: 0; padding: 0; } ul,ol { list-style: none; } a { color: red; text-decoration: none; } h1,h2,h3,h4,h5,h6,b,strong { font-weight: normal; } /* 设置初始化公共⽂字样式 */ body { color: black; font-size: 14px; font-family: Arial, "宋体"; }⾼度height应⽤根据不同的需求，⾼度属性可以设置也可以不设置。如果设置了⾼度：盒⼦占有的⾼度位置就确定死了，后⾯的同级元素会紧挨着加载。如果不设置⾼度：会根据标签内部内容⾼度⾃动撑开。以
}
margin塌陷现象margin 塌陷现象：在垂直⽅向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，⽽是两个边距中值较⼤的，边距值⼩的塌陷到了边距值⼤的值内部。同级元素塌陷：上⾯的元素有下边距，下⾯的元素有上边距，两个边距相遇，真正的盒⼦间距离是较⼤的那个值。⽗⼦元素塌陷：⽗⼦元素之间也会出现 margin 塌陷，⽗元素和⼦元素都设置了同⽅向的 margin-top 值，两个属性之间没有其他的内容进⾏隔离，导致两个属性相遇，发⽣ margin 塌陷。更特殊的：本⾝⽗元素与上⼀个元素的距离是0，⼦元素如果设置了垂直⽅向的上边距，会带着⽗级⼀起掉下来。解决margin塌陷问题的⽅法：(不要让margin直接相遇)①同级元素：如果两个元素垂直⽅向有间距，只需要设置给⼀个元素，不要进⾏拆分。.box1 { width: 100px; height: 100px; margin-bottom: 150px; background-color: pink; }.box2 { width: 100px; height: 100px; /* margin-top: 100px; */ background-color: pink;}②⽗⼦元素：让两个边距不要相遇，中间可以使⽤⽗元素 border 或 padding 将边距分隔开；更加常⽤的⽅法，⽗⼦盒模型之间的距离就不要⽤⼉⼦的 margin 去踹出来，⽽是⽗级的 padding 挤出来。.box3 { width: 100px; height: 80px; margin-top: 50px; padding-top: 20px; background-color: red; }.box3 .demo { width: 50px; height: 50px; margin-top: 30px; background-color: blue;}另外注意：⽔平⽅向的 margin 没有塌陷现象。标准⽂档流在我们遇到的 HTML 元素中，有的标签元素如
等在浏览器中加载时必须独⾃占满⼀⾏，有的标签元素如
等。⾏内元素：⼤部分的⽂本级标签，⽐如
、 等。各种等级的元素有⾃⼰的加载特点。块级元素a、块级元素可以设置宽⾼，在浏览器中正常加载。b、块级元素必须**独占⼀⾏**，不能与其他任何标签并排⼀⾏。c、块级元素如果不设置宽度，会⾃动撑满⽗级的 width 区域；⾼度不设置，会被内容⾃动撑开⾼度。⾏内元素a、⾏内元素不能正常加载宽度和⾼度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题（主要是垂直⽅向的问题）。b、⾏内元素可以与其他的⾏内或⾏内块元素并排⼀⾏显⽰。c、⾏内元素不论是否设置宽⾼，宽度和⾼度都只能被内容⾃动撑开。⾏内块元素a、⾏内块元素可以设置宽度和⾼度。b、⾏内块元素可以与其他的⾏内或⾏内块并排⼀⾏显⽰。c、⾏内块元素如果不设置宽⾼，要么以原始尺⼨（img图⽚⼤⼩）加载要么被（input中按钮的⼤⼩取决于value）内容⾃动撑开。d、⾏内块依旧具有标准流的微观性质，例如空⽩折叠现象。显⽰模型display标准流中的元素有⾃⼰默认的浏览器加载模式，但是加载模式不是⼀成不变的，后期可以通过 display 属性更改⼀个标签的显⽰模式。属性值：元素根据属性值不同，可以加载对应元素等级的显⽰模式的特点。属性值blockinlineinline-block作⽤表⽰元素要以块级元素模式加载，具备块级特点表⽰元素要以⾏内元素模式加载，具备⾏内特点表⽰标签要以⾏内块模式加载，具备⾏内块特点属性值none作⽤表⽰标签及内部内容直接隐藏，让出原有标准流的位置隐藏的元素要想再次显⽰，可以将 display 的属性值设置为 block。display 属性更改的显⽰模式并没有改变标准流本质性质，页⾯还是只能从上往下加载，存在空⽩折叠现象等微观性质。要想实现更多的界⾯布局效果需要脱离标准流的限制。标签元素脱离标准流的⽅法包括：浮动、绝对定位、固定定位。浮动浮动是我们学习的第⼀种脱离标准流的⽅式。定义浮动是⼀种⾮常重要的布局属性。属性名：float，漂流、浮动的意思。属性值：left 左浮动right 右浮动作⽤：让元素脱离标准流，同⼀级的浮动的元素可以并排在⼀排显⽰。float:left;margin-right: 10px;float:right;margin-right: 10px;float:right;/*margin-right: 10px;*/浮动的性质为了更好的利⽤浮动进⾏布局，我们需要了解浮动相关的性质。浮动的元素脱离标准流标准⽂档流特点：区分⾏块。 块级元素：可以设置宽⾼，必须独占⼀⾏。 ⾏内元素：不能设置宽⾼，可以并排⼀⾏。浮动的元素脱离了标准流的限制，具备⾏块⼆象性，浮动的元素可以设置宽⾼，还可以并排⼀⾏，⽽且不会有空⽩折叠现象，如果元素不设置宽⾼，可以被元素内容⾃动撑开。浮动的元素依次贴边浮动属性值：left、right。浮动⽅向设置不同，进⾏布局时，加载位置⽅向不同。以 left 为例：⽗元素宽度⾜够，所有⼦元素会按照HTML书写顺序，依次向左进⾏贴边，⽗元素左边←⼦元素1←⼦元素2← ⼦元素3←⼦元素4。浮动后：并排⼀排，⽗元素宽度⾜够。⽗元素宽度如果不够,类似于俄罗斯⽅框⼀样贴边，但不会出现钻空现象。如果⼦元素1后⾯的距离也放不下⼦元素4，⼦元素4最终会贴到⽗元素左边，如果⼦元素4的宽度超过了⽗元素，只会出现溢出现象。右浮动与左浮动贴边效果是⼀致的，只是贴边⽅向不同。按照 HTML 书写顺序依次向右向上⼀个元素贴边，第⼀个元素贴⽗元素的右边。应⽤：利⽤浮动依次贴边的性质，⽤列表结构模拟表格布局结构。注意：同⼀个盒⼦中，可以有左浮动和右浮动的⼦盒⼦并存，⼦盒⼦会根据浮动⽅向，向上⼀个同⽅向的⼦盒⼦进⾏贴边，如果空间不够，也会发⽣之前依次贴边的各种情况。利⽤浮动的这个依次贴边性质，可以完成多种⽹页布局效果。例如：①上述平均分布表格效果。②导航栏效果。③常见的电商或企业⽹站布局。浮动的元素没有margin塌陷margin 塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有 margin 塌陷现象。.ps1 { float: left;}浮动的元素让出标准流位置元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后⾯的⼀个同级元素。显⽰效果：浮动的盒⼦飘浮起来压盖住了后⾯的同级的元素。由于浏览器中有兼容性问题，不会使⽤这种属性制作压盖效果，真正的压盖效果使⽤后期学习的定位制作。如果没有特殊需求，不允许⼀个⽗元素中的⼦元素有的浮动有的不浮动，同级元素中有⼀个浮动其他的也要浮动。字围现象与前⾯压盖效果结构类似，同级元素中前⾯的元素浮动，后⾯的元素不浮动，不浮动的元素内部还有⼀些⽂字，浮动的蓝盒⼦会压盖住粉盒⼦的⼀部分，但是⽂字内容不会被盖住，粉盒⼦中的⽂字会让开蓝盒⼦位置，围绕它进⾏加载。这种效果称为字围现象。可以利⽤字围现象制作⼀些特殊的图⽂混排布局效果。浮动的问题标准流中的元素，不设置⾼度的情况下，都能被内部的标准流元素⾃动撑⾼。如果内部的⼦元素进⾏了浮动，浮动的⼦元素是撑不⾼标准流⽗亲的。另外，⽗元素没有⾼度，会影响后⾯元素的标准流位置，如果浮动的⼦元素⾜够⾼时，有可能影响到后⾯浮动元素的贴边。以上的问题需要被解决，解决⽅法是清除浮动带来的影响。清除浮动清除浮动的影响，有以下⼏种⽅法：清除浮动⼀：height给标准流的⽗元素强制给⼀个合适的⾼度：解决：⽗元素有了⾼度，前⾯的浮动不能影响后⾯元素的标准流位置和贴边。问题：⽗元素⾼度不是⾃适应，⼀旦⼦元素⾼度变化，问题可能再次出现。注意：这种height清除浮动的⽅法，只适合⽗盒⼦⾼度固定的情况。清除浮动⼆：clear属性clear，清除。作⽤：清除标签元素⾃⾝受到的前⾯的浮动元素的影响。属性值：left 清除前⾯左浮动带来的影响right 清除前⾯右浮动带来的影响both 清除前⾯所有浮动带来的影响给标准流⽗元素添加 clear 属性，⽗元素不受前⾯浮动影响，不会再占有浮动让出的位置。clear: both;解决：浮动元素影响后⾯元素标准流位置和贴边。问题：⽗元素不能⾼度⾃适应，两个⽗元素之间如果有 margin 效果不正确。清除浮动三：隔墙法清除**外墙法：**在两个⼤的⽗盒⼦之间，添加⼀个空的
clear: both;
height: 10px;}解决：浮动影响后⾯元素标准流位置和贴边，模拟⽗元素间的距离。问题：⽗元素没有⾼度⾃适应。**内墙法：**在⽗元素内部，所有的浮动⼦元素后⾯添加⼀个空的
height: 10px; clear: both;
}解决：⽗元素⾼度⾃适应，浮动影响后⾯的元素位置和贴边。缺点：浮动是 css 样式属性带来的问题，内墙法使⽤ HTML 结构去辅助解决问题，如果页⾯中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。浮动四：伪类清除本质是使⽤伪类⽅法利⽤css代码书写⼀堵内墙。伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。:after：这个伪类表⽰选中的是某个标签内部的最后的位置。书写⽅法：前⾯必须加普通的选择器，后⾯连续书写伪类名称。将伪类添加给⼀个选中⽗盒⼦的选择器后⾯，⼀般给需要清除浮动的⽗盒⼦设置⼀个clearfix的类名。.clearfix:after { content: "1"; /*添加⼀个⽂字内容 */ display: block; /*将⾏内元素转化为块级元素*/ height: 0; /*将盒⼦⾼度固定为0，避免影响⽗盒⼦的⾼度*/ clear: both; /*清除前⾯的浮动影响*/ visibility: hidden; /*将创建的元素所占位置隐藏*/
}
1
2
3
4
color: cyan;
}a:hover { /*⿏标悬浮状态*/
color: red;}a:active { /*⿏标点击状态*/
color: yellow;
}书写顺序标签上可能会同时触发 2 到 3 个状态，每个状态的属性都会进⾏加载，相同的属性之间会发⽣层叠。伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序⾮常重要。要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、⿏标移上hover、⿏标点击active。为了⽅便记忆，利⽤爱恨准则：love hate。实际应⽤⼀般会将访问前和访问后状态设置为⼀样的效果，保证了页⾯的统⼀性，可以选择性的设置⿏标移上和⿏标点击状态。a:link,a:visited {
color: #666;
}a:hover {
color: #f00;
}更加常⽤的⼀种设置⽅式如下：标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的 默认显⽰样式的属性，包括盒模型、⽂字等。a:hover 伪类选择器：设置⿏标移上时不⼀样的样式属性。a { display: block; /*a为⾏内元素想要设置宽⾼需要变成块级元素*/ width: 150px;
height: 50px;
background‐color: skyblue; font: bold 20px/50px "微软雅⿊"; text‐align: center;
color: snow; /*#fff⽩⾊*/ text‐decoration: none;
}a:hover {
background‐color: red;
}注意：其他标签也可以设置 :hover 伪类状态。背景CSS 中除了布局类属性，还需要添加⼀些背景类的内容进⾏页⾯的修饰，从⽽让⽹页变得更加的美观。CSS 中通过 background 属性来设置背景，它是⼀个综合属性，可以拆分成多个单⼀属性。背景颜⾊background-color属性名：background-color作⽤：在盒⼦区域添加背景颜⾊的修饰。加载区域：在 border 及以内加载背景颜⾊。属性值：颜⾊名、颜⾊值。颜⾊值：rgb 模式、⼗六进制模式、rgba 模式。rgba 模式：在 rgb 基础上增加了⼀个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表⽰完全透明，1 表⽰完全不透明，0.5表⽰半透明。书写⽅式：rgba(红⾊，绿⾊，蓝⾊，不透明度)注意：背景颜⾊半透明，不影响内容。background‐color: rgba(255,0,0,0.4);背景图⽚background-image属性名：background-image作⽤：给盒⼦添加图⽚的背景修饰。加载范围：默认的加载到边框及以内部分。background-repeat: no-repeat;后期如果图⽚不重复加载，加载从 border 以内开始。属性值：url(图⽚路径)url：uniform resource locator，统⼀资源定位符，⼩括号内部书写查找图⽚的路径。背景图和背景颜⾊可以同时设置，背景图会压盖背景颜⾊，没有背景图的区域会显⽰背景颜⾊。背景重复background-repeat属性名：background-repeat作⽤：设置添加的背景图是否要在盒⼦中重复进⾏加载。根据属性值不同，有四种重复加载⽅式：属性值repeatno-repeatrepeat–xrepeat–y作⽤重复，默认属性值，表⽰会使⽤背景图⽚重复加载填满整个盒⼦背景区域不重复，不论背景图是否⼤于盒⼦范围，都只加载⼀次图⽚⽔平重复，使⽤背景图⽚⽔平重复加载铺满第⼀⾏，垂直⽅向不重复垂直重复，使⽤背景图⽚垂直重复加载铺满第⼀列，⽔平⽅向不重复背景定位background-position属性名：background-position作⽤：主要⽤于设置不重复的图⽚在背景区域的加载开始位置。属性值：分为三种写法，单词表⽰法、像素表⽰法、百分⽐表⽰法。不论哪种写法，属性值都有两个，值之间⽤空格分隔。第⼀个属性值：表⽰背景图⽚在⽔平⽅向的位置。第⼆个属性值：表⽰背景图⽚在垂直⽅向的位置。单词表⽰法属性值都是使⽤代表⽅向的单词进⾏书写。⽔平⽅向可选单词：left、center、right垂直⽅向可选单词：top、center、bottom单词表⽰图⽚与盒⼦背景区域进⾏对应⽅向的对齐。background-position: left bottom;像素表⽰法使⽤像素值作为背景定位的属性值。第⼀个属性值：像素是⼏，表⽰背景图⽚左上⾓针对 border 以内的左上顶点⽔平⽅向位移的距离。第⼆个属性值：像素是⼏，表⽰背景图⽚左上⾓针对 border 以内的左上顶点垂直⽅向位移的距离。background‐position: 100px 50px;像素值区分正负，正负代表位移⽅向不同：正数：表⽰图⽚针对盒⼦的原点向右、向下移动。负数：表⽰图⽚针对盒⼦的原点向左、向上移动。background‐position: ‐100px ‐50px;应⽤：⼩盒⼦⾥⾯放⼤图⽚的⼀部分可以利⽤属性值为负数，制作在⼩盒⼦中显⽰⼤的背景图的⼀部分。制作⽅法，需要使⽤ FW 软件量取尺⼨，读取数据。第⼀步：在设计图中，使⽤切⽚⼯具制作⼀个想要显⽰区域⼤⼩的切⽚，让切⽚左上顶点位于想要加载的背景部分。第⼆步：读取属性栏的切⽚数据，其中宽、⾼就是要加载的盒⼦的宽⾼，x 和 y 的数值表⽰移动的距离的绝对值，直接将数值加负号赋值给背景定位属性。.bird { width: 107px; height: 81px; border: 2px solid #000; background-image: url(images/); background-repeat: no-repeat; background-position: -206px -19px; }百分⽐表⽰法百分⽐表⽰法使⽤百分⽐数字作为属性值。100%代表的数值：⽔平⽅向，等价于盒⼦的border以内的背景区域宽度减去图⽚的宽度。垂直⽅向，等价于盒⼦的border以内的背景区域⾼度减去图⽚的⾼度。background‐position: 100% 100%;背景附着background-attachment属性名：background-attachment作⽤：设置的是背景图⽚是否要随着页⾯或者盒⼦的滚动⽽滚动。属性值scroll作⽤默认属性，表⽰背景图⽚与盒⼦保持相对位置不变，随着页⾯的滚动⽽滚⾛。fixed 固定的，属性值为 fixed 之后，背景图的定位的参考点就从盒⼦ border 以内的左上顶点变为了浏览器窗⼝的左上顶点，页⾯滚动时，浏览器窗⼝的左上顶点是不变的，导致背景图固定在浏览器窗⼝的某个位置，不会随着页⾯滚动⽽滚⾛。fixedbody{ background-image: url(images/); background-repeat: no-repeat; background-attachment: fixed; } .box { width: 300px; height: 300px; padding: 30px; border: 10px dashed #f00; margin: 20px; background-image: url(images/); background-repeat: no-repeat; background-color: rgba(255,0,0,0.4); background-position: left bottom; background-attachment: fixed;
}background-attachment: fixed;的参考点为浏览器窗⼝左上顶点，其被设置的图⽚的位置不会随浏览器窗⼝的拖动⽽改变。注意：两个box中的图⽚不是⼀个图⽚，⽽是两张图⽚在固定位置显⽰⽽产⽣的效果。综合写法background 属性可以将五个单⼀属性的值进⾏合写。属性值：可以有 1-5 个属性值，值之间⽤空格进⾏分隔，背景定位的两个属性值算⼀个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。background: url(images/) no‐repeat center top fixed #fff;如果属性值没有设置完全，其他没有设置的单⼀属性会按照默认值加载。background: pink;如果想去层叠综合属性中的⼀部分，其他的属性保持不变，最好(必须)使⽤单⼀属性写法进⾏层叠。background: url(images/) no‐repeat center top fixed #fff;
background‐attachment: scroll;背景应⽤场景⼀：替换插⼊图
标签是权重最⾼的标签，⼀般会在内部书写最重要的内容，⽐如 logo 图⽚。另外
内部的⽂字，可以帮助提⾼ SEO 搜索排名。如果使⽤插⼊图![]()
，就不能书写搜索关键字。
如果想解决 SEO 问题，可以将 HTML 结构中，插⼊图换成搜索关键字，然后使⽤ css 添加背景图给
标签。
下⼀步将⽂字进⾏隐藏设置：①将字号设置为 0。IE8 及以上或⾼版本浏览器可以隐藏⽂字，但是 IE7 及以下有兼容问题。font‐size: 0;②可以设置给
}图⽚定位到盒⼦的左中位置，padding-left推的是盒⼦中其他元素。精灵图技术当⽤户访问⼀个⽹站时，需要向服务器发送请求，⽹页上的每张图像都要经过⼀次请求才能展现给⽤户。然⽽，⼀个⽹页中往往会应⽤很多⼩的背景图像作为修饰，当⽹页中的图像过多时，服务器就会频繁地接受和发送请求，这将⼤⼤降低页⾯的加载速度。为了有效地减少服务器接受和发送请求的次数，提⾼页⾯的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。CSS 精灵是⼀种处理⽹页背景图像的⽅式。它将⼀个页⾯涉及到的所有零星背景图像都集中到⼀张⼤图中去，然后将⼤图应⽤于⽹页，这样，当⽤户访问该页⾯时，只需向服务发送⼀次请求，⽹页中的背景图像即可全部展⽰出来。通常情况下，这个由很多⼩的背景图像合成的⼤图被称为精灵图。技术依据：①将⽹页中需要⽤到的⼩尺⼨背景图制作成⼀张背景透明的 png 图⽚。②利⽤背景定位技术，将精灵图的每个⼩图⽚加载到对应的标签上。制作精灵图的注意事项：a. 精灵图上放的都是⼩的装饰性质的背景图⽚，插⼊图⽚不能往上放。b. 精灵图的宽度取决于最宽的那个背景图⽚的标签宽度。c. 精灵图可以横向摆放也可以纵向摆放，但是每个图⽚之间必须留够⾜够的空⽩，保证背景图⽚加载时不能出现多余内容。d. 在精灵图的最底端，尽量留⼀点空⽩，⽅便以后添加其他精灵图。可以⽤⼀些在线⼯具快速⽣成精灵图。CSS3新增背景属性背景半透明rgba，应⽤：背景颜⾊，同样可以给⽂字和边框半透明。background-color: rgba(0,0,0,0.4);color: rgba(0,0,0,0.4);border: 1px solid rgba(0,0,0,0.4);;背景缩放background-size通过background-size设置背景图⽚的尺⼨，就像我们设置img的尺⼨⼀样，在移动Web开发中做屏幕适配应⽤⾮常⼴泛。属性值px值百分⽐covercontain说明1-2个像素值，只设置1个值，垂直⽅向等⽐例拉伸；设置2个值，按照设置值加载。同像素值设置⽅法相同，设置百分⽐时，数值参照盒⼦的宽、⾼属性⾃动调整缩放⽐例，把背景图像扩展到⾜够⼤，以使背景图像完全覆盖背景区域。如有溢出部分则会隐藏。⾃动调整缩放⽐例，把图像扩展到最⼤尺⼨，保证图⽚始终完整显⽰在背景区域。多背景CSS3中规定，⼀个盒⼦上，可以添加多个背景图⽚。background-image的属性值书写时，以逗号分隔多背景的URL路径地址。background-image: url(images/in_),url(images/);background-repeat: no-repeat;注意：背景加载时，先写的背景压盖后写的背景图⽚。定位（元素定位）我们已经了解过布局相关的盒模型、浮动等属性，⽽定位是另⼀种布局的重要属性，常⽤于制作压盖或者位置相关的效果。定位属性名：position。属性值：relative 相对定位absolute 绝对定位fixed 固定定位作⽤：设置定位的元素，它需要根据某个参考元素发⽣位置的偏移。定位的元素要想发⽣位置的移动，必须搭配偏移量属性进⾏设置。⽔平⽅向：left、right。垂直⽅向：top、bottom。属性值：常⽤ px 为单位的数值，或者百分⽐。相对定位(不脱标)属性值：relative，相对的意思。参考元素：标签加载的原始位置。必须搭配偏移量属性才能发⽣位置移动。position: relative;
left: 100px;
top: 100px;相对定位的性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。标签显⽰效果上，原位留坑，形影分离。注意①：偏移量属性的值是区分正负的。正数：表⽰偏移⽅向与属性名⽅向相反。负数：表⽰偏移⽅向与属性名⽅向相同。left: ‐50px;top: ‐100px;注意②：同⼀个⽅向，不能设置两个偏移量属性，如果⽔平⽅向同时设置了 left 和 right 属性，只会加载 left 属性。垂直⽅向只加载 top属性。建议：书写时从⽔平⽅向和垂直⽅向各挑⼀个属性进⾏组合。注意③：由于相对定位的参考元素是⾃⾝，left 的正值等价于 right 的负值，top 的正值等价于 bottom 的负值。为了⽅便记忆，可以只使⽤ left、top 组合。right: ‐50px;
bottom: ‐50px;等价于：left: 50px;
top: 50px;实际应⽤：①由于相对定位元素⽐较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的⼦绝⽗相情况。②相对定位⽐较稳定，可以在占有原始位置的情况下，对加载效果区域进⾏位置调整，进⾏微调设置。或者对⽂字进⾏微调。绝对定位(脱标)属性值：absolute，绝对的意思。参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考
。必须搭配偏移量属性才会发⽣位置移动。position: absolute;left: 50px;
top: 50px;绝对定位的性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽⾼，也可以随时定义位置，绝对定位的元素不设置宽⾼只能被内容撑开。注意1：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。注意2：在绝对定位中，由于参考点不同，left正值不再等价于right的负值。
为参考元素的参考点以 为参考元素时，参考点的确定与偏移量⽅向有关。第⼀，如果有 top 参与的定位，参考点就是 页⾯的左上顶点和右上顶点。⾃⾝的对⽐点是盒⼦的所有盒模型属性最外⾯的左上⾓或右上⾓。right: 50px;top: 50px;第⼆，如果有 bottom 参与的绝对定位，参考点是
页⾯**⾸屏**的左下顶点或右下顶点。对⽐点是盒⼦的所有盒模型属性最外⾯的左下⾓或右下⾓。实际应⽤中，如果以 为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使⽤ 作为参考元素。祖先级为参考元素如果祖先级中有定位的元素，就不会去参考 。参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离⽬标最近的祖先。根据绝对定位的参考元素的定位类型不同，有三种定位组合⽅式：⼦绝⽗相、⼦绝⽗绝、⼦绝⽗固，由于相对定位的祖先级位置更稳定，⼤多使⽤⼦绝⽗相的情况。祖先元素参考点如果绝对定位的参考元素是某个祖先级，参考点是盒⼦ border 以内的四个顶点，组合⽅向决定了参考点。绝对定位的元素只关⼼对⽐点和参考点之间的距离，会忽视参考元素的 padding 区域。left、top：参考点是祖先的 border 以内的左上顶点，对⽐点是盒⼦⾃⾝的左上⾓。right、top：参考点是祖先的 border 以内的右上顶点，对⽐点是盒⼦⾃⾝的右上⾓。left、bottom：参考点是祖先的 border 以内的左下顶点，对⽐点是盒⼦⾃⾝的左下⾓。right、bottom：参考点是祖先的 border 以内的右下顶点，对⽐点是盒⼦⾃⾝的右下⾓。left: 50px;top: 50px;right: 50px;
top: 50px;left: 50px;
bottom: 50px;
拓祥电子编程网
拓祥电子编程提供编程程序员技术分享技术，经验代码。
发布评论