三.CSS3核心样式1. font-weight 作用：设置文字是否加粗显示。属性名：font-weight，属于 f

一.字体属性

font-size

font-family

1. font-weight

作用：设置文字是否加粗显示。
属性名：font-weight，属于 font 属性的一个单一属性。
属性值有两种方式：单词类型、数字类型。
100-900 之间的整百数字。数字越大，文字显示越粗。其中 400 等价于 normal，700 等价于 bold。

属性值	说明
normal	默认值，定义标准的字体
bold	定义粗体字符，b、strong标签的默认值
bolder	定义更粗的字体
lighter	定义更细的字体

2.font-style字体风格

作用：设置文字是否斜体显示。
属性名：font-style，属于 font 属性的一个单一属性。
属性值：单词。

属性值	说明
normal	设置正规的字体，大多数标签的默认值
italics	设置斜体的文字，主要针对英文，要求英文以字体钟的斜体样式显示
oblique	设置倾斜的文字，只是将文字倾斜显示，与字体无关

实际应用中，更多的斜体效果习惯使用italic属性值。

3.line-height行高

作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的

属性值	说明
px像素值	设置行高的具体像素值
百分比数值	设置本身字号像素值的百分比

4.fireworks软件取行高

Fireworks软件初始设置：选中文字工具，在属性栏中将平滑消除锯齿，更改为不消除锯齿，方便文字的像素点清晰显示。

第一步：确定文字字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合，就是我们需要的字号和字体。制作时，设置一个与内容文字颜色差异较大的字体颜色。
第二步：根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是我们需要的行高值。

5.字体综合font

写法一

font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序

写法二

font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔。

写法三

如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互换位置。后面的字号、行高、字体不能更改位置。

<style>
    p {
      /* font-size: 14px;
      font-family: "宋体";
      line-height: 28px; */
      /* font: 14px "宋体"; */
      /* font: 14px/28px "宋体"; */
      font: bold italic 14px/28px "宋体";

    }
  </style>

二.文本属性

1. 水平对齐text-align

作用：设置文本水平方向的对齐。
在盒子中，不论文本是单行还是多行，都会对应方向对齐。
属性值：三个方向的单词

属性值	说明
left	居左对齐，大部分标签的默认值
center	居中对齐
right	居右对齐

2.文本修饰 text-decoration

属性值	说明
none	没有修饰
overline	上划线
line-through	删除线 ~~标签的默认值~~
underline	下划线

3.缩进 text-indent

属性值	说明
px 单位	表示首行缩进多少像素
em单位	首行缩进几个中文字符的位置
百分比	表示缩进文字所在标签的父级标签的width属性值的百分比

实际工作中，最常使用 em 为单位的属性值。
属性值区分正负，正数表示向右缩进，负数表示向左缩进。

二.盒模型属性

1.盒模型概述

又叫框模型，五个属性来描述盒子位置、尺寸

width
height
padding
border
margin

2.常见盒模型区域

盒模型属性中，根据不同属性效果，划分区域：

书写元素内容区域：width+height
盒子可以实体化区域：width+height+padding+border
盒子实际占位：width+height+padding+border+margin

3.宽度width

属性值	说明
auto	默认值，浏览器自动计算实际宽度
px	像素值定义的宽度
%	定义参考父元素宽度width的百分比宽度

特殊应用
- 如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度，例如元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 区域，如果是元素等不需要独占一行的，其 width 属性的值是内部元素内容自动撑开的宽度。
- 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度。

4.高度height

属性值	说明
auto	默认值，浏览器自动计算实际高度
px	像素值定义的度
%	定义参考父元素度height的百分比宽度

特殊应用
- 如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。

与宽度的auto不同，宽度auto是浏览器自动计算，二高度是根据内容撑开

5.内边距padding

作用	设置元素的边框内部到宽高区域之间的距离
特点	可以加载背景，不能书写嵌套的内容

利用层叠性：

padding：10px

padding-right：15px

上面按照顺序写，后者会层叠掉前者的padding-right 10px的属性

6.边框border

线宽 border-width
线型 border-style

属性值	说明
none	无边框
solid	实线
dotted	虚线。大都数浏览器呈现为实线
dashed	点状边框。大都数浏览器呈现为实线
double	双线。双线的宽度等于border-width的值
groove	3D凹槽边框，效果取决于border-color的值
ridge	3D垄状边框，效果取决于border-color的值
inset	3D内容凹陷效果，效果取决于border-color的值
outset	3D内容突出效果，效果取决于border-color的值

边框颜色 border-color
边框方向
- border-top
- border-right
- border-bottom
- border-left

写法整合 border-方向-类型

7.外边距margin

特点：不能渲染背景。因为设置的是盒子与盒子之间的距离，背景指的是盒子内部
外边距的设置方式与内边距 padding 一模一样的

三.盒模型常见应用

1.清楚默认样式

大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。
盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。
<ul> 和
1. <a>标签的默认样式，顺带设置页面中常用的a的公共样式：设置 color 和 text- decoration。
2. 清除默认加粗效果：设置font-weight。

2.height应用

必须设置高度

设计图中盒子高度占位固定，后面同级元素在高度下面紧挨着加载
自身盒子内部内容过多会溢出盒子区域

设置overflow：hidden

属性值	说明
visible	默认值，可见的可视的，溢出部分显示的。
hidden	溢出部分直接隐藏，隐藏超过边框范围的内容
scroll	溢出部分出现滚动条，可以拖动滚动条看到隐藏的部分。多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条
auto	自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条

不用设置高度
- 要求盒子必须自适应内部内容的高度
- 设置height的属性值是自动的

3.居中

文本水平居中 text-align
文本垂直居中
- 单行：让文字行高 line-height 等于盒子高度 height。
- 多行：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。
  
  padding：10px 0；
  
  height：不设置

元素垂直居中

box{
	weight: 800px;
	background-color: red;
	padding: 10px 0;
	height: 不设置
}
box1 {
	weight: 300px;
	height: 300px'
	background-color: blue;
	
}
一个元素内部嵌套的子元素，在父元素中居中。
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高
度，再给父元素设置相同的上下边距

元素水平居中
- 样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。
原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。

4.父子盒模型

父级width ≥ 子级width之和

如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素

特殊情况：盒模型自动内减

父子盒模型中，只有一个子元素，且子元素是类似

标签必须占一行的。不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。

只要子级不设置宽度，子级的宽度会自动加载父级的宽度，

如果子级设置了水平的padding、border、margin，会自动内减，永远保证子级在父级里

不需要手动去减宽度（设置了子级的宽度，就需要去自动减多余宽度）

5.margin塌陷现象

margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。

同级元素塌陷

上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值
父子元素塌陷
- 父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的 margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。
- 本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。

不管父盒子有没有设置跟子级一样的margin属性，都会出现塌陷现象

解决方法
- 同级元素：
  
  如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
- 父子级元素
  
  让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。

注意：==水平方向没有塌陷现象==

四.标准文档流

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
HTML就是一种标准文档流文件。
HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。

1.微观现象

空白折叠现象
文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
自动换行，元素内一行内容写满元素的 width 时会自动进行换行。

2.元素等级

在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等。 •
块级元素：大部分容器级标签包括p标签都是块级元素，比如 <div>、<h1>等
行内元素：大部分的文本级标签，比如 <span>、<a>、<b>等
行内块元素：比如 <img>、<input>等
各种等级的元素有自己的加载特点。

（1）块级元素

块级元素可以设置宽高，在浏览器中正常加载。
块级元素必须独占一行，不能与其他任何标签并排一行。
块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内容自动撑开高度。

（2）行内元素

行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题。
行内元素可以与其他的行内或行内块元素并排一行显示。
行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。

（3）行内块元素

行内块元素可以设置宽度和高度。
行内块元素可以与其他的行内或行内块并排一行显示。
行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
行内块依旧具有标准流的微观性质，例如空白折叠现象。

五.显示模式

标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过 display 属性更改一个标签的显示模式。
属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点。

属性值	作用
block	元素以块级元素模式加载，具备块级特点
inline	元素以行内元素模式加载，具备行内特点
inline-block	标签以行内元素模式加载，具备行内特点
none	标签及内部内容直接隐藏，让出原有标准流的位置

脱离标准流

display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。

标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。

六.浮动

1.浮动定义

浮动是非常重要的一种常见的布局属性

属性名：float，漂流、浮动的意思。
属性值： left 左浮动 right 右浮动
作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。

2.浮动性质-脱离标准流

标准文档流特点：区分行块。
- 块级元素：可以设置宽高，必须独占一行。
- 行内元素：不能设置宽高，可以并排一行。
浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。

3.浮动性质-浮动元素依次贴边

浮动属性值：left、right。
浮动方向设置不同，进行布局时，加载位置方向不同。
以 left 为例：

父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边←子元素1←子元素2← 子元素3←子元素4。
父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边
如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。
如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象。
如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象。
右浮动与左浮动贴边效果是一致的，只是贴边方向不同。按照 HTML 书写顺序依次向右向上一个元素贴边，第一个元素贴父元素的右边。

贴边性质应用

利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如：

①上述平均分布表格效果。

②导航栏效果。

③常见的电商或企业网站布局。

4.浮动性质-没有margin塌陷

margin 塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有 margin 塌陷现象。
元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。
- 在 IE6 、 7浏览器中，有兼容问题：
- 由于浏览器中有兼容性问题，不会使用这种属性制作压盖效果，真正的压盖效果使用后期学习的定位制作。
- 如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。

5.浮动性质-字围现象

与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载。
这种效果称为字围现象。
可以利用字围现象制作一些特殊的图文混排布局效果

6.浮动存在的问题

（1）问题1

标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。

（2）问题2

父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

以上的问题需要被解决，解决方法是清除浮动带来的影响。

7.清除浮动方法

清除浮动一：height

给标准流的父元素强制给一个合适的高度：
解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。
问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。

清除浮动二：clear属性

clear，清除。
作用：清除标签元素自身受到的前面的浮动元素的影响。
属性值： left 清除前面左浮动带来的影响

right 清除前面右浮动带来的影响

both 清除前面所有浮动带来的影响

给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。

clear: both;

解决：浮动元素影响后面元素标准流位置和贴边。

问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确。

清除浮动三：隔墙法

外墙法：在两个大的父盒子之间，添加一个空的标签，标签上带有 clear： both 属性。

解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。

问题：父元素没有高度自适应。
内墙法：在父元素内部，所有的浮动子元素后面添加一个空的元素，标签高度为 0，添加 clear 属性。

解决：父元素高度自适应，浮动影响后面的元素位置和贴边。

缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。

清除浮动四：伪类

本质是使用伪类方法利用css代码书写一堵内墙。

伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。

:after：这个伪类表示选中的是某个标签内部的最后的位置。

书写方法：前面必须加普通的选择器，后面连续书写伪类名称。

将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。

解决：父元素高度自适应，浮动影响后面的元素位置和贴边。

清除浮动五：溢出隐藏

小偏方：给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以解决浮动的所有问题。

元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。
元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。
高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。 •
浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

补充：overflow 属性

元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。

总结

如果父元素高度是固定的，建议使用 height 属性解决。

-如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。

七.a标签的伪类

伪类和类之间有一定的相似之处，也存在明显的区别。
普通的类：必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
伪类选择器的权重与普通的类选择器相同。
伪类选择器写法：前面是普通的选择器，后面紧跟:伪类名。

标签的伪类书写顺序

标签上可能会同时触发 2 到 3 个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。
伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。
要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、鼠标移上hover、鼠标点击active。
为了方便记忆，利用爱恨准则：love hate。

标签的伪类实际应用

一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。

更加常用的一种设置方式如下：

标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的默认显示样式的属性，包括盒模型、文字等。
a:hover 伪类选择器：设置鼠标移上时不一样的样式属性。
注意：其他标签也可以设置 :hover 伪类状态。

八.CSS常用样式-背景属性

1.背景颜色 background-color

2.背景图片 background-image

3.背景重复 background-repeat

属性值	作用
repeat	重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域
norepeat	不重复，不论背景图是否大于盒子范围，都只加载一次图片
repeat-x	水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
repeat-y	垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复

4.背景定位 background-position

作用：主要用于设置不重复的图片在背景区域的加载开始位置。
属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法，属性值都有两个，值之间用空格分隔。
第一个属性值：表示背景图片在水平方向的位置。
第二个属性值：表示背景图片在垂直方向的位置。

单词表示法

属性值都是使用代表方向的单词进行书写。

水平方向可选单词：left、center、right

垂直方向可选单词：top、center、bottom

单词表示图片与盒子背景区域进行对应方向的对齐。

像素表示法

使用像素值作为背景定位的属性值。

第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。

第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离。

像素值区分正负，正负代表位移方向不同：

正数：表示图片针对盒子的原点向右、向下移动。

负数：表示图片针对盒子的原点向左、向上移动。

百分比表示法

百分比表示法使用百分比数字作为属性值。

100%代表的数值：

水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。

垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。

5.背景附着 background-attachment

作用：设置的是背景图片是否随着页面或者盒子的滚动而滚动

属性值	说明
scroll	滚动，表示背景图片与盒子保持相对位置不变，随页面的滚动而滚动
fixed	固定的，背景图的定位的参考点从盒子 border 以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走。

6.综合写法

注意1：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。
注意2：如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠。

7.背景应用

（1）替换插入图

<h1>标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片、最大的标题等

另外<h1>> 内部的文字，可以帮助提高 SEO 搜索排名。在设置的是 logo 图片时，如果使用插入图，就不能书写搜索关键字。

背景图替换插入图方法

如果想解决 SEO 问题，可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css 添加背景图给标签或标签。

文字隐藏方法

一：将字号设置为 0。IE8 及以上或高版本浏览器可以隐藏文字，但是 IE7 及以下有兼容问题。
二：可以设置给标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏。

（2）padding区域背景图

在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用 padding 挤出位置。

四个方向的 padding 都可能用于添加背景图。

例如 padding-left 区域背景：

（3）精灵图

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）

8.CSS3新增背景属性

（1）背景半透明

CSS3 支持背景半透明的写法，颜色值增加了一种 rgba 模式。 rgba 模式：在 rgb 基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。书写方式：rgba(红色，绿色，蓝色，不透明度)
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
同样，可以给文字和边框透明，都是 rgba 的格式来写。

（2）背景缩放 background-size

过 background-size 设置背景图片的尺寸，就像我们设置<img> 的尺寸一样，在移动 Web 开发中做屏幕适配应用非常广泛。

属性值	说明
px 值	1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值加载。
百分比	同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
cover	自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。
contain	自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背景区域。

（3）多背景

CSS3 中规定，一个盒子上，可以添加多个背景图片。
background-image 的属性值书写时，以逗号分隔多背景的 URL路径地址。
注意：背景加载时，先写的背景压盖后写的背景图片。

9.定位-相对定位

性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。
元素显示效果上，原位留坑，形影分离

注意事项

注意①：偏移量属性的值是区分正负的。

正数：表示偏移方向与属性名方向相反。

负数：表示偏移方向与属性名方向相同。

position: relative;
left: ‐50px;
top: ‐100px;

注意②：同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性。

建议：书写时从水平方向和垂直方向各挑一个属性进行组合。

position: relative;
left: ‐50px;
top: ‐100px;
right: ‐50px;
bottom: ‐50px;

注意③：由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的正值等价于 bottom 的负值。

为了方便记忆，可以选择只使用 left、top 组合。

position: relative;
right: ‐50px;
bottom: ‐50px;

position: relative;
left: 50px;
top: 50px;

实际应用

由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。
相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。

10.定位-绝对定位

属性值：absolute，绝对的意思。

参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考。

必须搭配偏移量属性才会发生位置移动。

（1）绝对定位的性质

性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
注意1：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。
注意2：在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值。

（2）为参考元素的参考点

第一，如果有 top 参与的定位，参考点就是页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
第二，如果有 bottom 参与的绝对定位，参考点是页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。
实际应用中，如果以为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用作为参考元素。

（3）祖先级为参考元素

如果祖先级中有定位的元素，就不会去参考。参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离目标最近的祖先。

如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组合方向决定了参考点。

绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域。

left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上
right、top：参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角
left、bottom：参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下角。
right、bottom：参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右下角。

11. 定位-固定定位

（1）固定定位的性质

固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。

固定定位的元素会始终显示在浏览器窗口上。

12.定位应用

定位 position 根据属性值不同有三种类型的定位效果，其中绝对定位和固定定位的元素会脱离标准流。三种定位在页面中有各自的使用场景。

（1）压盖效果

所有的定位类型都可以实现压盖效果。

由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖。

（2）居中

定位的元素，如果想在参考元素中居中显示，有自己的居中方法：

第一步：在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。

百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度、高度。

position: absolute;
left: 50%;

第二步：给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值为负的自身宽度的一半。

position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;

注意：不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置。

（3）扩展应用

①解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。

②浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。

13.压盖顺序

实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的。

（1）默认压盖顺序

定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位。

因此，书写代码时，需要注意压盖效果，必须合理设置 HTML 元素的书写顺序。

浮动脱离标准流（让出位置）、标准流（占据位置），都会被定位压盖,不管定位类型

标准流/浮动脱离标准流box1会被

相对定位box2、

绝对定位box3、

固定定位box4压盖住

.box1 {
            /* float: left; */
            width: 200px;
            height: 200px;
            background-color: pink;
        }
.box2 {
            position: relative;
            /* top:-200px; */
            width: 150px;
            height: 150px;
            background-color: skyblue;
        }
.box3 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
.box4 {
            position: fixed;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: burlywood;
        }

如果都是定位元素，HTML中后写的定位压盖先写的定位

固定定位box4 压盖 绝对定位box3

绝对定位box3 压盖 相对定位box2

（2）自定义压盖顺序

z-index 属性

注意事项

①属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。

②如果属性值相同，比较HTML书写顺序，后写的压盖先写的。

③z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。

④父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：父级盒子：如果不设置z-index，后写的压盖先写的；

如果设置了z-index，值大的压盖值小的。子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；

如果父级设置了 z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应” 。

三.CSS3核心样式

一.字体 属性