2020-12-25

文章内容输出来源：拉勾教育-前端就业

# CSS核心样式
字体类样式已尽学习过字号`font-size`、字体`font-family`两个属性
### 常用的字体属性
#### 粗细`font-weight`
作用：设置文字是否加粗显示
属性名：`font-weight`，属于`font`属性的一个单一属性
属性值有两种方式：单词类型、数字类型
######单词类型
```font-weight="normal";```
1. normal：默认值，定义标准的字体
2. bold：定义粗体字符，b、strong标签的默认值，b标签是加粗标签，需要加粗的文字写在b标签内
3. bolder：定义更粗的字体
4. lighter：定义更细的字体
######数字类型
```font-weight="400";```
100-900之间的整百数字，数字越大，文字显示越粗，其中400等价于normal，700等价于bold
#### 粗细`font-style`
作用：设置文字是否斜体显示
属性名：`font-style`，属于`font`属性的一个单一属性
属性值：单词
常用的属性值：
1. normal：设置正规的字体，大多数标签的默认值
2. italic：设置斜体的文字，主要针对英文，要求英文以字体中的斜体样式显示
3. oblique：设置倾斜的文字，只是将文字倾斜显示，与字体无关
tips：italic的斜体是一种倾斜的字体，如果浏览器无法加载这种字体，那么会按照oblique加载，oblique和字体没有关系，只是将文字倾斜
#### 行高`line-height`
作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的
属性名：`line-height`，属于`font`属性的一个单一属性
属性值：
1. px像素值：设置的行高的具体像素值
2. 百分比数值：设置的本身字号像素值的百分比（字号是14像素，百分百就是显示14像素，百分之两百就是28像素)
#### 字体`font`
字体、字号、行高、加粗、斜体都是font综合属性的单一属性
font属性五个单一属性的值可以进行合写，属性值可以有两个到多个，值之间用空格进行分隔
写法一：font进行综合书写时，**必须有字号和字体参加**，而且必须字号在前，字体在后，不能颠倒顺序
写法二：font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，**字号和行高之间必须用/进行分隔**
写法三：如果font属性需要设置加粗和倾斜，两个属性值只能写在最前面（写其中一个也是一样的），**两个值之间可以互相换位置，后面的字号/行高、字体不能更改位置**
#### fireworks软件
当设计师给出的图没有标注字号和行高时，我们可以使用工具量取（fireworks软件）
fireworks软件初始设置：选中文字工具，在属性栏中将平滑消除锯齿更改为不消除锯齿，方便文字的像素点倾斜显示
量取行高的步骤：
第一步：确定文字字号和字体，使用文字工具，书写两个与内容相同的文字，调整字号和字体，知道两个文字都完全重合，就是我们需要的字号和字体，制作时，设置一个与文字颜色差异较大的字体颜色（常用的微软雅黑和宋体）
第二步：根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是我们需要的行高值

### 常用的文本属性
文本类样式已经见过的color属性，严格来说行高line-height也是文本类属性，由于其可以写在font属性中，暂时先归类到字体中，文本属性是可以继承给后代的属性
#### 水平对齐`text-align`
作用：设置文本水平方向的对齐
在盒子中，不论文本是单行还是多行，都会对应方向对齐
属性值：三个方向的单词
1. left：居左对齐，大部分标签的默认值
2. center：居中对齐
3. right：居右对齐
#### 水平修饰`text-decoration`
作用：设置文本整体是否有线条的修饰效果（常见的给文字添加下划线、删除线等）
属性值：
1. none：没有修饰，大部分标签的默认值
2. overline：上划线
3. line-through：中划线，删除线，del<del>标签的默认值
4. underline:下划线，a标签的默认值

#### 缩进`text-indent`
作用：设置段落首行是否进行缩进。
属性值：
1. px单位：表示首行缩进多少像素
2. em单位：首行缩进几个中文字符的位置(工作中最长使用的单位)
3. 百分比：表示缩进文字所在标签的父级标签的width属性值的百分比
**tips:属性值区分正负，正数表示向右缩进，负数表示向左缩进**

### 盒模型常用属性
盒模型又叫做框模型，包含了五个用来描述盒子位置，尺寸的属性，分别是宽度width、高度height、内边距padding、边框border、外边距margin
#### 常见盒模型区域
盒模型的属性中，根据不同属性的效果，可以划分区域：
书写元素内容区域：width+height
盒子可以实体化的区域：width+height+padding+border
盒子实际占位的位置：width+height+padding+border+margin
#### 宽度`width`
作用：设置可以添加元素内容的区域的宽度
属性值：
1. auto：默认值，浏览器可计算出实际的宽度
2. px：像素值定义的宽度
3. %：定义参考父元素宽度width的百分比宽度

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

#### 宽度`height`
作用：设置可以添加元素内容的区域的高度
属性值：
1. auto：默认值，浏览器可计算出实际的宽度
2. px：像素值定义的宽度
3. %：定义参考父元素高度height的百分比宽度
   
特殊应用：
1. 如果一个元素不添加height属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是内部元素自动撑开的高度，元素的高度自适应内部内容的高度

#### 内边距`padding`
作用：设置的是元素的边框内部到宽高区域之间的距离
特点：可以去加载背景，不能书写嵌套的内容
属性值：常用px为单位的数值
padding是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性(padding-top,padding-right,padding-bottom,padding-left)
简写：有时为了化简书写，一般习惯将四个方向的单一属性进行合成写出padding属性，
padding属性值：可以有一个1-4值，值之间用空格进行分隔
根据四个方向属性值不同，padding有多种值的书写表示方法
根据padding的属性值的个数不同，区分了四种表示法：
1. 四值法：设置四个值分配给上、右、下、左
2. 三值法：设置三个值分配给上、左右、下
3. 二值法：上下、左右
4. 单值法：同时分配给四个方法

案例
制作三边内边距相同，一边不同
1. 方法一：使用四值法、三值法，进行属性值设置
2. 方法二：利用综合属性和单一属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后面使用单一属性写法，再次定义某个方向的属性值不同，可以实现单一属性层叠综合属性的一部分

#### 边框`border`
作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层
属性值：由三个值组成，分为线的宽度、线的形状、线的颜色 (用空格分隔)
border属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式：
1. border-width:线宽
   作用：设置边框线的宽度
   属性值：常用px形式的数值，四个方向都有边框，属性值类似于padding，也有四种值的写法
2. border-style：线的形状
   作用：设置边框的线条形状
   属性值：形状的单词，总体也是类似padding的综合属性写法：
   1. none：定义无边框
   2. solid：定义实线
   3. dashed：定义虚线，在大多数浏览器中呈现为实线
   4. dotted：定义点状边框，在大多数浏览器中呈现为实线
   5. double：定义双线，双线的宽度等于border-width的值
   6. groove：定义3D凹槽边框，其效果取决于border-color的值
   7. ridge：定义3D垄状边框，其效果取决于border-color的值
   8. inset：定义3D内容凹陷效果，效果取决于border-color的值
   9. outset：定义3D内容突出效果，效果取决于border-color的值
3. border-color：线的颜色
   作用：设置边框的颜色
   属性值：颜色名或颜色值，整体类似padding综合属性写法

根据边框的方向划分
1. 上边框：border-top
2. 右边框：border-right
3. 下边框：border-bottom
4. 左边框：border-left
每一个单一属性都必须与复合属性border一致，设置三个属性值
根据方向和类型，进一步细分
类似border-top的单一方向属性，也可以根据属性类型继续进行单一属性划分
单一属性写法：border-方向-类型
注意：细分时必须先写方向划分再写类型划分，否则属性名错误
#### 外边距`margin`
作用：设置的是盒子与盒子之间的距离
特点：不能渲染背景
属性值：常用px为单位的数值
外边距的设置与内边距padding一模一样的
单一属性：
1. ` margin-top：20px`
2. ` margin-right：20px`
3. ` margin-bottom：20px`
4. ` margin-left：20px`
复合属性的四种值的写法
1. `margin：10px 20px 30px 40px;`
2. `margin：10px 20px 30px;`
3. `margin：10px 20px;`
4. `margin：10px;`
   
#### 盒模型扩展
前面了解了盒模型的五个属性的基本语法，但是在实际工作中还有更多的方法和技巧需要掌握，因此我们需要扩展对盒模型的应用知识
##### 清除默认样式
1. 大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响，为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。
2. 盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。
3. ul和ol两种列表有默认的列表前缀：清除list-style属性
4. a标签的默认样式，顺带设置页面中常用的a的公共样式：设置color和text-decoration（颜色和下划线）
5. 清除默认加粗效果：设置font-weight（比如h类标签有加粗效果）
6. 还可以给body标签设置整体文字样式，让大部分后代标签全部去继承
```/* 设置初始公共样式 */
        body {
            color: #666;
            font-size: 14px;
            font-family: "Arial","consolas","Microsoft Yahei","SimSun";
        }
```
##### height应用
1. 根据不同的需求，高度属性可以设置也可以不设置
2. 如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载
3. 如果不设置高度：会根据标签内容高度自动撑开
4. 以div标签为例，根据情况不同选中是否设置高度：
   1. 必须舍高度：
        1. 设计图中盒子高度占位是固定的，后面同级元素在高度下面加载
        2. 自身盒子内部内容过多会溢出盒子区域
        3. overflow属性：设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出现象，可以通过一个溢出的属性overflow，进行溢出部分内容的显示效果设置
            1. visible：默认值，可见的可视的，溢出部分显示的
            2. hidden：溢出部分直接隐藏，隐藏超过**边框范围的内容**
            3. scroll：溢出的部分出现滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条
            4. auto：自动的，如果没有溢出就正常显示，如果溢出，溢出的方向自动出现滚动条
   2. 必须不设置高度：
      1. 要求盒子高度必须自适应内部内容的高度
      2. 或者设置height的属性值是自动的（或者不设置高度因为默认值就是auto）
##### 居中
在网页中经常见到元素或者文字居中的效果

文本水平居中：
1. 水平居中：text-align属性，不论单行还是多行都可以设置
2. 垂直居中：
    1. 单行文本垂直居中：让文字行高line-height等于盒子高度height
    2. 多行文本垂直居中：让元素告诉自适应或者正好等于多行文字的高度，设置元素内边距距上下值相同
元素水平居中：
针对类似div样式上必须独占一行的盒子，如果**子盒子宽度低于父盒子宽度**(如果子盒子宽度大于父盒子的宽度则此方法没有效果)，可以设置子盒子的margin值，水平方向的值都设置为auto，原因：auto只有在水平方向有作用，水平方向的margin如果设置为auto，边距会自动无限增大，直到撑满整个父元素除了自元素之外剩余的区域，如果两个水平方向都是auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中
##### 父子盒模型
一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一排显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度width
父元素的width>=所有子元素width+padding+border+margin
如果不满足上述条件：要么多余的子元素掉下来不能在一排，要么溢出父元素
特殊情况：盒模型自动内减
父盒子中，只有一个子元素，且子元素是类似div标签必须占一行的
不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width
如果同时设置了子元素水平方向的padding和border、margin，不需要手动去进行内减，子元素的width会自动收缩尺寸
子元素所有的水平方向的位置所有属性的加和等于父元素的width
##### margin塌陷现象
在垂直方向如果有两个元素的边边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部(同级元素margin塌陷现象)
父子元素之间也会出现margin塌陷，父元素和子元素都设置了同方向的margin值，两个属性之间没有其他的内容进行隔离（没有padding和border隔开），导致两个属性相遇，发生了margin塌陷,并且父元素的margin值会增加成60px（取大值）
```
      .box3 {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 50px;
        }
        .box3 p {
            width: 50px;
            height: 50px;
            background-color: yellow;
            margin-top: 60px;
        }
```
解决margin塌陷问题的方法
   1. 同级元素：如果两个元素垂直方向有间距，只要设置个一个元素，不要进行拆分
   2. 父子元素：让两个边距不要相遇，中间可以使用父元素border或者padding将边距分隔开；更加常用的放过，父子盒模型之间的距离就不要用儿子的margin去设置，而是父级的padding设置
tips：水平方向的margin没有塌陷现象（left和right）

#### 标准文档流
在我们遇到的html元素中，有的标签元素如div、p等在浏览器中加载时必须独自占满一行，有的标签元素如a、span等则不会独占一行，原因是什么？
   1. 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式，前面内容发生了变化，后面的内容位置也会随之发生变化
   2. html就是一种标准文档流文件，常见的还有world文档
   3. html中的标准文档流特点通过两种方式体现：微观现象和元素等级
微观现象：
   1. 空白折叠现象
   2. 文字类的元素如果排在一行会出现高低不齐，底边对齐效果
   3. 自动换行，元素内一行内容写满元素的width时会自动换行
元素等级：
1. 在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等
   1. 块级元素：大部分容器级标签包括p标签都是块级元素，比如div、h1等
   2. 行内元素：大部分的文本级标签，比如span、a、b，等
   3. 行内块元素：比如img、input等
块级元素：
   1. 块级元素可以设置宽高，在浏览器中正常加载
   2. 块级元素必须独占一行，不能与其他任何标签并排一行
   3. 块级元素如果不设置宽度，会自动撑满父级的width区域；高度不设置，会被内容走动撑开高度
行内元素：
   1. 行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题
   2. 行内元素可以与其他的行内或行内块元素并排一行显示
   3. 行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开
行内块元素：
   1. 行内块元素可以设置宽度和高度
   2. 行内块元素可以与其他的行内或者行内块元素并排一行显示
   3. 行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开
   4. 行内块元素依旧具有标准流的微观性质，例如空白折叠现象
##### 显示模式display
标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是以一成不变的，后期可以通过display属性更改一个标签的显示模式
数值：元素根据数值不同，可以加载对应元素等级的显示模式的特点
1. block：表示元素要以块级元素模式加载，具备块级特点
2. inline：表示元素要以行内元素模式加载，具备行内特点
3. inline-block：表示标签要以行内块模式加载，具备行内块特点
4. none：表示标签及内部内容直接隐藏，让出原有标准流的位置
##### 脱离标准流
display属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质，要想实现更多的界面布局效果需要脱离标准流的限制
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位

###### css常用样式-浮动属性
1. 浮动是一种非常重要的布局属性
2. 属性名：float，漂流、浮动的：右浮动
3. 作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示(还是要看父级的width，否则还是会换行显示)
浮动的元素脱离标准流
标准文档流特点：区分行块
块级元素：可以设置宽高，独占一行
行内元素：不能设置宽高，可以并排一行
浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开

浮动的元素依次贴边
浮动属性值：left、right
浮动方向设置不同，进行布局时，加载位置方向不同

浮动的应用
制作一个表格利用浮动的属性
制作方法：ul内部嵌套li标签全部浮动，宽高设置相同，边框可以利用标签之间的间距和背景颜色的差异进行制作
注意：同一个盒子中，可以有左浮动和右浮动的子盒子并存，子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边，如果空间不够，也会发生之前依次贴边的各种情况
利用浮动的这个依次贴边性质，可以完成多种网页布局效果，例如：平均分布表格效果，导航栏效果，常见的电商或企业网站布局

浮动的元素没有margin塌陷
1. margin塌陷现象出现在标准流中，浮动元素已经脱离标准流，不再具有margin塌陷现象

浮动元素会将原来占有的标准流位置让给后面的一个同级元素（在IE6、7浏览器中，有兼容问题）
由于浏览器中有兼容问题，不会使用这种属性制作压盖效果，真正的压盖效果使用后期学习的定位制作
如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动

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

浮动的问题
1. 标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行流浮动，浮动的子元素是撑不高标准流父亲的
2. 父元素没有高度，会影响后面元素(父元素的同级元素)的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边
以上的问题需要被解决，解决方法是清除浮动带来的影响
1. 方法一：height，给标准流的父元素强制给一个合适的高度
   1. 解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边
   2. 问题：父元素高度不是自适应，一旦子元素告诉变化，问题可能再次出现
2. 方法二：clear属性
   1. clear：清除
   2. 作用：清除标签元素自身受到的前面的浮动元素的影响
   3. 属性值：left：清除前面左浮动带来的影响；right：清除前面右浮动带来的影响；both：清除前面所有浮动带来的影响
   4. 给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置
   5. 解决：浮动元素影响后面元素标准流位置和贴边
   6. 问题：父元素不能高度自适应，两个父元素之间如果有margin效果不正确
3. 方法三：隔墙法
   1. 外墙法：在两个大的父盒子之间，添加一个空的div标签，标签上带有clear：both属性
        1. 解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离（给空div设置高度）
        2. 问题：父元素没有告诉自适应
   2. 内墙法：在父元素内部，所有的浮动子元素后面添加一个空的div元素，标签高度为0，添加clear属性
        1. 解决：父元素高度自适应，浮动影响后面的元素位置和贴边
        2. 缺点：浮动是css掩饰属性带来的问题，内墙法使用html结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成html结构的冗余
4. 方法四：伪类
   本质是使用伪类方法利用css代码书写一堵内墙
   伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置
   ：after：这个伪类表示选中的是某个标签内部的最后的位置
   书写方法：前面必须加普通的选择器，后面连续书写伪类名称
   将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名
   1. 解决：父元素高度自适应，浮动影响后面的元素位置和贴边
5. 方法五：溢出隐藏
   小偏方：给内部有浮动子元素的父元素添加溢出隐藏overflow：hidden；属性，可以解决浮动的所有问题
   1. 补充：overflow属性：元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏
   2. 高度自适应原有：一个元素没有设置高度，同时设置了溢出隐藏，浏览器会在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载
   3. 浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边
6. 总结：
   1，如果父元素高度是固定的，建议使用height属性解决
   如果父元素高度需要自适应，建议使用overflow属性解决浮动问题

###### 伪类
伪类和类之间有一定的相似之处，也存在明显的区别
普通的类：必须给标签设置对应的class属性，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上
伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载
伪类选择器的权重与普通的类选择器相同
伪类选择器书写：前面是普通的选择器，后面紧跟：伪类名。
###### a标签的伪类
a标签可以根据用户行为不同，划分为四种状态，通过a标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式
1. ：link  访问前状态（超级链接加载前）ps:有时候浏览器有缓存，访问前状态可能不显示，直接是被访问过的状态了，如果想要link起作用，就要将浏览器缓存清除
2. ：visited  访问后状态（超级链接加载后）
3. ：hover  鼠标悬浮状态
4. ：active  鼠标点击状态

a标签的伪类实际应用
1. 一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态
2. a标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的a默认显示样式的属性，包括盒模型，文字等（然后再单独设置某一种状态的值）。
3. a：hover伪类选择器：设置鼠标移上时不一样的样式属性

###### css常用属性-背景属性
css中除了布局类属性，还需要添加一些背景类的内容进行页面的修饰，从而让网页变得更加的美观
css中通过background属性来设置背景，它是一个综合属性，可以拆分成多个单一属性
**注意：没有宽高的标签，即便设置背景也无法显示。(即该标签需为块级标签)**
###### 背景颜色 background-color
属性名：background-color
作用：在盒子区域添加背景颜色的修饰
加载区域：在border及以内加载背景颜色
属性值：颜色名、颜色值
###### 背景图片 background-image
属性名：background-image
作用：给盒子添加图片的背景修饰
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从**border以内**开始
属性值：url（图片路径）
###### 背景重复 background-repeat
属性名：background-repeat
作用：设置添加的背景图是否要在盒子中重复进行加载
根据属性值不同，有四种重复加载方式
1. repeat：重复。默认属性，表示会使用背景图片重复加载填满整个盒子背景区域
2. no-repeat：不重复，不论背景图是否大于盒子范围，都只加载一次图片
3. repeat--x：水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
4. repeat--y：垂直重复，使用背景图片垂直吃重复加载铺满第一列，水平方向不重复
###### 背景定位 background-position
属性名：background-position
作用：主要用于**设置不重复的图片**在背景区域的加载开始位置
属性值：分为三种写法，单词表示法，像素表示法，百分比表示法。不论哪种写法，属性值都有两个，值之间用空格分隔
第一个属性值：表示背景图片在水平方向的位置
第二个属性值：表示背景图片在垂直方向的位置
1. 单词表示法：
    属性值都是使用代表方向的单词进行书写，水平方向可选单词：left、center、right；垂直方向可选单词：top、center、bottom
    单词表示图片与盒子背景区域进行对应方向的对齐
2. 像素表示法：
    使用像素值作为背景定位的属性值
    第一个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点水平方向位移的距离
    第一个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点垂直方向位移的距离
    像素值区分正负，正负代表位移方向不同：
    正数：表示图片针对盒子的原点向右、向下移动
    负数：表示图片针对盒子的原点向左、向上移动
    可以利用属性值为负数，制作在小盒子中显示大的背景图的一部分
    制作方法，需要使用FW软件量取尺寸，读取数据
    1. 在设计图中，使用切片工具制作一个想要显示区域大小的切片，让切片左上顶点位于想要加载的背景部分
    2. 读取属性栏的切片数据，其中宽、高就是要加载的盒子的宽高，x和y的数值表示移动的距离的绝对值，直接将数值加负号赋值给背景定位属性
3. 白分布表示法：
   百分比表示法使用百分比数字作为属性值
   100%代表的数值：水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度的值的百分比（相当于单词表示法中的right）；垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度的值的白分布（相当于单词表示法中的bottom）

###### 背景附着 background-attachment
属性名：background-attachment
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动
属性值：
    1. scroll：滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走
    2. fixed：固定的，背景图片的定位的参考点从盒子border以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走
###### 背景属性综合写法
background属性可以将五个单一属性的值进行合写
属性值：可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个的属性值算作一个属性值，不能被分开也不能颠倒顺序，五个属性值之间可以互换位置
`background：url（image/image2.jpg） no-repeat center top fixed #fff`
注意：如果属性值没有设置完全，其中没有设置的单一属性会按照默认值加载；如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠
###### 背景属性应用
1. 替换插入图
   h1标签是权重最高的标签，一般会在内部书写最重要的内容，比如logo图片，最大的标题等，
   另外h1内部的文字，可以帮助提高SEO搜索排名
   在设置的是logo图片时，如果使用插入图，就不能书写搜索关键字
   使用背景图替换插入图方法
   如果想解决SEO问题，可以将html结构中，插入图换成搜索关键词，然后使用css添加背景图给a标签或者h1标签
   位子隐藏方法
   1. 将字号设置为0，IE8及以上或高版本浏览器可以隐藏文字，但是IE7及以下有兼容问题（会显示一条小横线）
   2. 可以设置给a标签一个text-indent属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏
2. padding区域背景图
   在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用padding挤出位置
   四个方向的padding都可能用于添加背景图
3. 精灵图技术
   当用户访问一个网站时，需要向服务器发送请求，网页上的每张图片都要经过一次请求才能展现给用户。
   然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁的接受和发送请求，这将大大降低页面的加载速度
   为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度，出现了css精灵技术（也称css sprites、css雪碧）。
   css精灵：
   css精灵是一种处理网页背景图像的方式。
   他将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部展示出来
   css精灵的技术依据：
   1. 将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片。
   2. 利用背景定位技术，将精灵图的每个小图片加载到对应的标签上
   制作精灵图的注意事项
   1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
   2. 精灵图的宽度取决于最宽的那个背景图片的标签宽度
   3. 精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容
   4. 在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图

###### css3新增背景属性

**css3支持背景半透明的写法，颜色值增加了一种rgba模式**
rgba模式：在rgb基础上增加了一个不透明的效果，不透明alpha取值范围在0-1之间，0表示完全透明，1表示完全不透明，0.5表示半透明
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
半透明的其他应用：
同样，可以给文字和边框透明，都是rgba的格式来写

**背景缩放background-size**
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动web开发中做屏幕适配应用非常广泛。
属性值：
1. px值：1-2个像素值，只设置一个值，垂直方向等比例拉伸；设置两个值，按照设置值加载
2. 百分比：同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
3. cover：自动调整缩放比例，把背景图像扩展至足够大，**以使背景图像完全覆盖背景区域，如有溢出部分则会被隐藏**
4. contain：自动调整缩放比例，把图像扩展至最大尺寸，**保证图片始终完整显示在背景区域**

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

**定位**
定位是一种布局的重要属性，常用于制作压盖或者位置相关的效果
属性名：position
属性值：
1. relative：相对定位
2. absolute：绝对定位
3. fixed：固定定位
作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移
偏移量属性：
定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置
属性名：
1. 水平方向：left、right
2. 垂直方向：top、bottom
属性值：常用px为单位的数值，或者百分比

**相对定位**
属性值：relative，相对的意思
参考元素：标签加载的原始位置
必须要搭配偏移量属性才能发生位置移动
性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置
元素显示效果：原位留坑，形影分离
注意事项：
1. 偏移量属性的值是区分正负的
   1. 正数：表示偏移方向与属性名方向相反
   2. 负数：表示偏移方向与属性名方向相同
2. 同一方向，不能设置两个偏移量属性，如果水平方向同时设置了left和right属性，只会加载left属性，垂直方向只加载top属性,建议书写时从水平方向和垂直方向各挑一个属性进行组合
3. 由于相对定位的参考元素是自身，left的正值等价于right的负值，top的正值等价于Botton的负值，为了方便记忆，可以选择只使用left、top组合
4. 实际应用：
   1. 由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况
   2. 相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置，或者对文字进行微调

**绝对定位**
属性值：absolute，绝对的意思
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考body
必须搭配偏移量属性才会发生位置移动
绝对定位的性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开
注意：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同
**body为参考元素的参考点：**
以body为参考元素时，参考点的确定与偏移量方向有关
1. 如果有top参与的定位，参考点就是body页面的左上顶点和右上顶点，自身的对比是盒子的所有盒模型属性最外面的左上角或右上角
2. 如果有bottom参与的绝对定位，参考点是body页面**首屏（如果有滑动的第一屏，不算滑动后）**的左下顶点或右下顶点，对比点是盒子的所有盒模型属性最外面的左下角或右下角。
3. 实际应用中，如果以body为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用body作为参考元素
   
**祖先级为参考元素：**
如果祖先级中有定位的元素，就不会去参考body。
参考元素：参考的是祖先元素中有任意定位的，在html结构中距离目标最近的祖先
根据绝对定位的参考元素的定位类型不同，有三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况
祖先元素参考点：
如果绝对定位的参考元素是某个祖先级，参考点是盒子border以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点的距离，会忽视参考元素的padding区域(目标元素的顶点包含padding)
left、top：参考点是祖先的border以内的左上顶点，对比点是盒子自身的左上角

**固定定位**
属性值：fixed，固定的意思
参考元素：浏览器窗口
参考点：浏览器窗口的四个顶点，跟偏移量组合方向有关
由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置
性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置，固定定位的元素会始终显示在浏览器窗口上

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

**压盖效果**
所有的定位类型都可以实线压盖效果
由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖
**居中效果**
定位的元素，如果想在参考元素中居中显示，有自己的居中方法：
1. 在居中的方向使用一个偏移量属性，例如left，属性值设置为50%，导致图片的左顶点移动到参考元素的中心位置
2. 给绝对定位的子盒子设置一个同方向的margin，例如margin-left，属性值为负的自身宽度的一半
注意：不论子盒子的宽度是否比参考元素更宽，都能使用这个方法进行居中设置
扩展应用：
1. 解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位橘棕的方法进行居中
2. 浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法
   
**定位压盖顺序**
实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的
定位的元素不区分定位类型，都会去压盖标准流或浮动的元素
如果都是定位的元素，在html中后写的定位压盖先写的定位
因此，书写代码时，需要注意压盖效果，必须合理设置html元素的书写顺序
自定义压盖顺序
如果想要更改定位的元素的压盖顺序，可以设置一个z-index属性
属性值：数字
属性值大的会压盖属猪小的，设置z-index属性的会压盖没有设置的
如果属性值相同，比较html书写顺序，后写的压盖先写的
z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效
父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：
父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的
子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”

综合案例
轮播图静态结构布局