CSS（层叠样式表，Cascading Style Sheet）

1. 浏览器

2. CSS 插入方式

1. 内联款式 / 行内款式：在标签外部通过 style 属性设置元素款式

   问题 ：款式只对一个标签失效，不不便保护（ 开发时相对不要应用）

2. 内联样式表：在 head 标签中的 style 标签中编写款式，通过 CSS 选择器选中元素并为其设置各种款式

   问题：外部样式表只用于以后页面

3. 内部样式表：在内部 CSS 文件中编写款式，通过 link 标签引入内部 CSS 文件（最佳实际）

   劣势：内部 CSS 文件中的款式能够在多个页面中复用，同时能够利用浏览器的缓存机制，进步加载速度

3. CSS 根本语法：选择器、申明块

• 选择器：通过选择器选中页面中的指定元素
• 申明块：通过申明块指定元素的款式，由多个申明组成，一个申明就是一个名值对（款式名: 款式值;）

3.1 选择器

1. 元素选择器：依据标签名选中相应的元素

   标签名 {申明块}

2. id选择器 ：依据元素的id 属性值选中相应的元素（id属性值不能反复）

   #id 属性值 {申明块}

3. 类选择器 ：依据元素的class 属性值选中相应的元素（class属性值能够反复，一个元素能够设置多个 class 属性，应用空格隔开）

   .class 属性值 {申明块}

4. 通配选择器：选中页面中的所有元素

   * {申明块}

5. 复合选择器

   • 交加选择器：选中同时合乎多个条件的元素

     选择器 1 选择器 2···选择器 n {申明块}

   • 并集选择器：同时选中多个选择器对应的元素

     选择器 1, 选择器 2, ···, 选择器 n {申明块}

6. 关系选择器

   • 父元素：间接蕴含子元素的元素
   • 子元素：间接被父元素蕴含的元素
   • 先人元素：间接或间接蕴含后辈元素的元素
   • 后辈元素：间接或间接被先人元素蕴含的元素
   • 兄弟元素：被雷同父元素蕴含的元素

   • 子元素选择器：选中父元素内所有符合条件的子元素

     父元素 > 子元素 {申明块}

   • 后辈元素选择器 ：选中元素内所有符合条件的后辈元素（ 留神：交加选择器和后辈元素选择器的区别）

     先人元素 后辈元素 {申明块}

   • 兄弟元素选择器：

     • 选中元素之后第一个符合条件的兄弟元素

       选择器 1 + 选择器 2 {申明块}

     • 选中元素之后所有符合条件的兄弟元素

       选择器 1 ~ 选择器 2 {申明块}

7. 属性选择器

   • [属性名]：抉择带有指定属性的所有元素

     /* 抉择带有 target 属性的所有元素 */
     [target] {申明块}

   • [属性名 = 属性值]：抉择带有指定属性且属性值等于指定值的所有元素（属性值可不加引号，只在其中蕴含符号或者空格时必须加引号）

     /* 抉择带有 target 属性且 target 属性等于 _blank 的所有元素 */
     [target=_blank] {申明块}

   • [属性名~= 属性值]：抉择带有指定属性和且属性值蕴含指定值这一单词的所有元素

     /* 抉择带有 title 属性且 title 属性蕴含 title 这一单词的所有元素
        抉择 title="article title"，不抉择 title="article-title" 和 title="articletitle" */
     [title~=title] {申明块}

   • [属性名 |= 属性值]：抉择带有指定属性且属性值等于指定值或以指定值结尾并与短横线相连的所有元素

     /* 抉择带有 title 属性且 title 属性等于 article 或以 article 结尾并与短横线相连的所有元素
        抉择 title="article"、title="article-" 和 title="article-title"
        不抉择 title="articletitle" 和 title="article title" */
     [title|=article] {申明块}

   • [属性名 ^= 属性值]：抉择带有指定属性且属性值以指定值结尾的所有元素

     /* 抉择带有 title 属性且 title 属性以 article 结尾的所有元素
        抉择 title="article title"、title="article-title" 和 title="articletitle" */
     [title^=article] {申明块}

   • [属性名 $= 属性值]：抉择带有指定属性且属性值以指定值结尾的所有元素

     /* 抉择带有 src 属性且属性值以 .jpeg 结尾的所有元素 */
     [src$=".jpeg"] {申明块}

   • [属性名 *= 属性值]：抉择带有指定属性且属性值中呈现指定值的所有元素

     /* 抉择带有 title 属性且 title 属性值中呈现 ticle 的所有元素 */
     [title*=ticle] {申明块}

8. 伪类选择器：伪类用于形容一个元素的非凡状态

   • :first-child -> 抉择属于父元素第一个子元素的所有元素
   • :last-child -> 抉择属于父元素最初一个子元素的所有元素
   • :nth-child(n) -> 抉择属于父元素第 n 个子元素的所有元素
   • :nth-last-child(n) -> 抉择属于父元素倒数第 n 个子元素的所有元素
   • :nth-child(2n)/:nth-child(even) -> 抉择属于父元素偶数位子元素的所有元素
   • :nth-child(2n+1)/:nth-child(odd) -> 抉择属于父元素奇数位子元素的所有元素
   • :only-child -> 抉择属于父元素惟一子元素的所有元素
   • :first-of-type -> 抉择其父元素第一个指定子元素
   • :last-of-type -> 抉择其父元素最初一个指定子元素
   • :nth-of-type(n) -> 抉择其父元素第 n 个指定子元素
   • :nth-last-of-type(n) -> 抉择其父元素倒数第 n 个指定子元素
   • :only-of-type -> 抉择属于父元素惟一指定子元素的所有元素
   • :not(选择器) -> 抉择不符合条件的所有元素
   • a:link -> 失常的链接（未拜访的链接）
   • a:visited -> 已拜访的链接（只能批改链接色彩，个别不必）
   • :hover -> 抉择鼠标移入的元素，用于设置鼠标移入后的成果
   • :active -> 抉择鼠标点击的元素，用于设置鼠标点击后的成果
   • :focus -> 抉择获取焦点的元素
   • :root -> 抉择文档的根元素，即 html 元素
   • :empty -> 抉择没有子元素的所有元素
9. 伪元素选择器 ：伪元素用于形容非凡的并不实在存在于DOM 树中的元素（非凡的地位）

• ::first-letter -> 第一个字母
• ::first-line -> 第一行
• ::selection -> 选中的内容
• ::before -> 在元素的内容前增加
• ::after -> 在元素的内容后增加
  留神 ：::before 和::after须要联合 CSS 的content属性应用（CSS3规定伪元素选择器应用双冒号，只需兼容 Webkit、Firefox 和 Opera 等浏览器时应用双冒号，要兼容 IE 时，倡议应用 CSS2 的单冒号写法）

3.2 申明块

• 申明块放在大括号内
• 款式名和款式值通过冒号对应
• 每一个款式之后必须应用分号进行完结，否则回影响之后的款式
• 应用谬误的款式名或款式值不会影响其余款式
• 能够随便增加空格，空格不影响款式，但会占用空间

4. 款式的继承和抵触

4.1 款式的继承

• 子元素将会继承父元素的款式
• 继承的款式没有权重

4.2 款式的抵触

通过不同的设置形式或选择器对同一元素的同一款式设置了不同的值就会产生优先级权重问题。

1. 发生冲突时款式由优先级权重决定
   内联款式 1,0,0,0 > id 选择器0,1,0,0 > 属性、类和伪类选择器0,0,1,0 > 元素和伪元素选择器0,0,0,1 > 通配选择器0,0,0,0 > 继承的款式（没有权重）
2. 比拟权重时须要将所有的选择器权重相加后进行比拟（多个选择器权重相加和不会超过其中的最大数量级）
3. 选择器权重相加后果雷同时，优先应用样式表中最初呈现的款式
4. 能够在款式之后增加 !important，将该款式设为最高优先级，且无奈进行批改（ 慎用）

5. 元素的长度

1. 像素（px）
2. 百分比（子元素大小会随父元素大小扭转）
3. em：绝对于以后元素字体尺寸的长度单位 -> 1 em = 1 font-size，font-size 默认为16px
4. rem：绝对于根元素字体尺寸的长度单位

6. 盒子模型（Box Model）

CSS 将页面中的元素都设置为矩形的盒子，对页面的布局变成将不同的盒子摆放到不同的地位。

6.1 盒子的组成

1. 外边距（margin）：盒子和其它元素之间的间隔

   margin能够为负值，示意向相同方向挪动

   默认状况下设置 margin-right 不会产生成果

2. 边框（border）（边框属于盒子边缘，边框会影响整个盒子大小）

   • 边框宽度border-width（默认为3px）

     四个值（上 右 下 左）、三个值（上 左右 下）、两个值（高低 左右）、一个值（上下左右）或者独自指定某个边的宽度border-top-width/border-bottom-width/border-left-width/border-right-width

   • 边框色彩border-color（默认为彩色）
   • 边框款式border-style（默认为none，可选值包含dotted/dashed/solid/double/groove/ridge/inset/outset）
   • 简写：border: width color style;或者border-top/border-bottom/border-left/border-right: width color style（空格隔开，没有程序要求）
3. 内边距（padding）：内容区和边框之间的间隔（内边距会影响整个盒子大小）
4. 内容区（content）：元素中的子元素和文本内容都在内容区中排列，大小由 width 和height两个属性或者子元素和文本内容的大小决定

留神 ： 盒子的大小 或盒子可见框的大小 由边框 、 内边距 和内容区 决定，盒子占用空间大小 由外边距 、 边框 、 内边距 和内容区 决定

6.2 元素的程度地位

一个元素在其父元素中的程度方向地位由 margin-left、border-left、padding-left、width、padding-right、border-right 和margin-right独特决定

一个元素在其父元素中的 程度布局 满足以下等式：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区宽度

• 若相加后果不满足，称为 适度束缚
• 若所有值均不为 auto，则主动调整margin-right 的值（能够为负值）
• 若 margin-left、width 和margin-right中的某个值为 auto，则主动调整为auto 的值
• 若 width 的值为 auto 时，margin-left和 margin-right 中存在值为 auto，则width 的值设置为最大，另外的值为 auto 的属性值设置为0
• 若 margin-left 和margin-right的值均为 auto，则将margin-left 和margin-right设置为雷同的值（用于设置 一个元素在其父元素中居中）

留神 ：width 默认为auto

6.3 盒子的尺寸

box-sizing属性 ：用于设置盒子大小的计算形式（width 和height的作用）：

• content-box -> 默认值，width和 height 别离示意内容区的宽和高
• border-box -> width和 height 别离示意盒子可见框的宽和高（边框、内边距和内容区总的宽和高）

留神 ：IE 盒子模型和 W3C 规范盒子模型的区别在于，IE 盒子模型的width 和height别离示意盒子可见框的宽和高（box-sizing属性默认为 border-box），W3C 规范盒子模型的width 和height别离示意内容区的宽和高（box-sizing属性默认为content-box）。

6.4 内容溢出

overflow属性：用于设置内容超出内容区所占地位时溢出内容的解决形式

• visible -> 溢出
• hidden -> 暗藏
• scroll -> 生成横向纵向滚动条
• auto -> 主动生成所需方向滚动条

6.5 垂直外边距的重叠

相邻元素的垂直方向外边距会产生重叠

1. 兄弟元素间的垂直外边距取较大值（非凡状况：一正一负则取和，两个负值则取绝对值较大值）

2. 子元素的上外边距会传递给父元素（影响开发，须要进行解决）

   <div class="top"></div>
   <div class="outer">
     <div class="inner"></div>
   </div>

   .top {
     height: 100px;
     background: lightgreen;
   }
   .outer {
     width: 200px;
     height: 200px;
     background: skyblue;
   
     /* 父元素 margin-top 较小 */
     margin-top: 20px;
   }
   
   .inner {
     width: 100px;
     height: 100px;
     background: lightpink;
   
     /* 子元素 margin-top j */
     margin-top: 50px;
   }

6.6 行内元素的盒子模型

• 行内元素不反对设置宽度和高度
• 行内元素反对设置 padding、border 和margin，但不会影响垂直方向布局

6.7 盒子的显示

display属性：用于设置元素显示方式

• inline -> 将元素设置为行内元素
• block -> 将元素设置为块元素
• inline-block -> 将元素设置为行内块元素（能够设置宽高但不会独占一行，慎用）
• table -> 将元素设置为表格
• none -> 暗藏元素，不占用地位

visibility属性：用于设置元素可见性

• visible -> 默认值，元素失常显示
• hidden -> 暗藏元素，但仍然占用地位

6.8 元素的轮廓、暗影和圆角

outline属性 ：用于设置元素的轮廓线，用法同border 属性，区别在于轮廓不会影响可见框的大小和页面的布局

box-shadow属性：用于设置元素的暗影成果（不影响页面的布局）

box-shadow: 程度偏移量 垂直偏移量 暗影含糊半径（可选）暗影色彩

border-radius属性：用于设置元素圆角

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-right -> 一个值 - 圆角半径；两个值 - 椭圆长半径和短半径
• border-radius -> 一个值：四个圆角半径；四个值：左上、右上、右下和左下圆角半径；两个值以 ”/” 分隔 - 椭圆长半径 / 短半径
• border-radius: 50%;：将元素设置为圆形

7. 浏览器默认款式

浏览器会为元素设置一些默认款式，默认款式的存在会影响页面的布局，在开发时须要先去除默认款式

去除默认款式的办法：引入重置样式表

• reset.css -> 间接去除浏览器的默认款式
• normalize.css -> 对默认款式进行对立

8. 布局

8.1 浮动布局

float属性：用于设置元素的浮动，使元素向其父元素的某一侧浮动

• none -> 默认值，元素不挪动
• left -> 元素向左浮动
• right -> 元素向右挪动

浮动的特点

1. 文档流：网页是多层构造，用户只能看到最顶上的一层，最底下的一层称为文档流，文档流是网页的根底，所创立的元素默认都在文档流中排列

2. 元素的两个状态：

   1. 在文档流中

      • 块元素在页面中独占一行，默认宽度是父元素的100%，默认高度由内容决定
      • 行内元素只占本身大小，在页面中程度排列并主动换行，默认宽度和高度有内容决定
   2. 不在文档流中（脱离文档流）

3. 浮动的特点：

   1. 浮动元素会齐全脱离文档流，不再占用文档流中的地位，其后的元素会主动上移，可能被浮动元素笼罩
   2. 浮动元素会向父元素的某一侧挪动
   3. 浮动元素在父元素的 content-box 内
   4. 浮动元素向父元素的某一侧挪动时，不会超过之前的浮动元素
   5. 浮动元素不会超过其之前的浮动的兄弟元素
   6. 浮动元素不会盖住文字，文字会主动盘绕在浮动元素四周

从文档流中脱离之后，元素的某些性质会产生扭转

1. 块元素不再独占一行
2. 块元素的默认宽度和高度由内容决定
3. 行内元素变成块元素，特点和块元素雷同

简而言之，不再辨别行内元素和块元素

浮动的问题：高度塌陷

1. 高度塌陷 ：父元素的高度设置为auto 时，其高度由子元素决定，子元素设置 float 属性后将会脱离文档流，导致父元素高度失落

2. 解决方案：

   • BFC（Block Formatting Context，块级格式化上下文）

   • clear属性：使以后元素的左侧 / 右侧 / 两侧不容许呈现浮动元素（挪动以后元素以达到成果）

     可选值：left/right/both -> 革除左侧 / 右侧 / 两侧中较大一侧元素浮动对以后元素产生的影响

     解决方案 ：利用伪元素在以后元素下加一个没有内容但设置了clear 属性的块元素（该伪元素地位会随子元素高度变动，父元素须要包含该伪元素，故父元素高度会随子元素高度变动）

完满解决外边距重叠和高度塌陷的计划：clear-fix类

.clear-fix::before,
.clear-fix::after{
   content: '';
   /* table 元素没有内容时不显示，且不占用布局 */
   display: table;
}

.clear-fix::after {clear: both;}

或者

.clear-fix::after {
  content: '';
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
  clear: both;
}

8.2 定位布局

position属性 ；利用position 属性能够将元素放到页面的任意地位

• static -> 默认值，不开启定位，元素静止
• relative -> 开启元素绝对定位
• absolute -> 开启元素相对定位
• fixed -> 开启元素固定定位
• sticky -> 开启元素粘滞定位

绝对定位

1. 绝对定位：参照元素在文档流中的地位进行定位

2. 特点：

   • 开启绝对定位后，若未设置偏移量则元素不会产生任何变动
   • 开启绝对定位后会晋升元素层级（将笼罩文档流中的其余元素）
   • 开启绝对定位的元素不会脱离文档流（元素仍然占据文档流中的地位）

   • 开启绝对定位不会扭转元素的性质（不会扭转行内元素或块元素）

     • 偏移量 （offset）：定位元素与定位地位间的间隔，可通过top/bottom/left/right 四个属性进行设置

       • top/bottom属性 -> 用于设置定位元素上边 / 下边和定位地位间的间隔，管制定位元素垂直方向的地位（只用一个）
       • left/right属性 -> 用于设置定位元素右边 / 左边和定位地位间的间隔，管制定位元素程度方向的间隔（只用一个）

相对定位

1. 相对定位：参照元素蕴含块进行定位

   • 蕴含块 ：个别状况下是指元素最近的先人块元素；对于开启了相对定位的元素，蕴含块指其最近的开启了定位（非static）的先人块元素（html 元素，又称为初始蕴含块）

2. 特点：

   • 开启相对定位后，若未设置偏移量则元素地位不会发生变化
   • 开启相对定位后，元素脱离文档流
   • 开启相对定位后，行内元素变成块元素，高度和宽度由内容决定
   • 开启相对定位会晋升元素层级（会笼罩文档流中的其余元素）

   • 开启相对定位的元素在其蕴含块中的程度布局满足等式：

     left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 蕴含块的内容区宽度

     若适度束缚:

     • 若所有值均不为 auto，则主动调整margin-right 的值（能够为负值）
     • 若 left、margin-left、width、margin-right 和right中的某个值为 auto，则主动调整设置为auto 的属性的值
     • 若 margin-left 和margin-right中的某个值和 width 的值为 auto，则width 设置为最大，设置为 auto 的属性设置为0
     • 若 left 和right中的某个值和 width 的值为 auto，则width 由内容决定，主动调整设置为 auto 的属性
     • 若 left 和right的值均为 auto，则将left 和right设置为0
     • 若五个值均为 auto，则width 由内容决定，其余四个值都设置为0

   • 开启相对定位的元素在其蕴含块中的垂直布局满足等式：

     top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 蕴含块的内容区高度

     若适度束缚：调整相似程度布局

固定定位

1. 固定定位：参照浏览器的视口进行定位（浏览器视口 - 浏览器的可视区域），固定定位属于相对定位，大部分性质同相对定位
2. 特点：开启固定定位的元素不会随浏览器滚动条滚动

粘滞定位

1. 粘滞定位：在达到蕴含块指定地位前随浏览器滚动条滚动，达到之后不再随滚动条滚动（兼容性较差，个别不必）

   • 对同级元素设置粘性定位，则之后的元素会笼罩之前的元素

     <!-- 对 h2 设置粘性定位，则第二个 h2 会笼罩第一个 h2 -->
     <article>
       <section></section>
       <h2> 第一节 </h2>
       <section></section>
       <h2> 第二节 </h2>
       <section></section>
     </article>

   • 对非同级元素设置粘性定位，则之后的元素会挤掉之前的元素

     <!-- 对 h2 设置粘性定位，则第二个 h2 会挤掉第一个 h2 -->
     <article>
       <section>
         <h2> 第一节 </h2>
         <p> 段落二
         </p>
       </section>
       <section>
         <h2> 第二节 </h2>
         <p> 段落一
         </p>
       </section>
     </article>

   • z-index属性 -> 整数值，用于设置元素的层级，数值越大层级越高（<font color=”red”> 留神 </font>：先人元素不会笼罩后辈元素）

9. 文本

9.1 字体

字体设置

font-family属性 ：能够间接指定多个字体款式或字体族，用逗号分隔，浏览器按先后顺序抉择可用的字体款式或字体族（必须应用通用字体，避免出现电脑中没有指定字体的状况）
字体族（字体款式的类别，不是具体的款式）：

• serif -> 衬线字体
• sans-serif -> 非衬线字体
• monospace -> 等宽字体

@font-face款式：用于下载并引入内部的字体（会影响加载速度）

@font-face{
   /* 指定字体名称 */
   font-family: '';
   /* 字体的门路 */
   src: url('');
}

图标字体 ：通过图片引入图标非常不灵便，因而能够将图标设置为字体，通过@font-face 款式进行引入

色彩

color属性：前景色（通常用于设置字体色彩）

字号

font-size属性：字体大小

• xx-small|x-small|small|medium|large|x-large|xx-large
• 像素值（px）
• 百分数（以后元素字体大小绝对于其父元素字体大小）
• em（等同于应用百分数）

行高

line-height属性：行高，即文字占据的理论高度

• 行高能够指定大小（单位 px 或em），也能够指定一个整数，示意字体大小的倍数（行高默认为字体大小的 1.33 倍）
• 行高会在字体框的高低平均分配（字体框：字体存在的格子）
• 行间距 = 行高 – 字体大小

字重

font-weight属性：用于设置字重（加粗）

• normal -> 默认值，不加粗
• bold -> 加粗
• bolder -> 比加粗更粗
• lighter -> 比默认值更细
• 100~900 -> 九个级别，400 对应normal，700 对应bold（个别不必）

字体格调

font-style属性：用于设置字体格调

• normal -> 默认值，失常
• italic -> 斜体

组合设置

font属性：用于设置字体的相干属性（字体设置和字体大小是必选值）

font: 字重 字体格调 字体大小 / 行高 字体族

9.2 文本

font-variant属性：用于设置小型大写字母

text-transform属性：用于设置文本大小写

• none -> 默认值，不批改大小写
• capitalize -> 首字母大写
• uppercase -> 全副大写
• lowercase -> 全副小写

text-decoration属性：用于设置下划线、删除线和上划线

• none -> 默认值，不增加
• underline -> 增加下划线
• line-through -> 增加删除线
• overline -> 增加上划线

text-shadow属性：用于设置文本暗影

text-shadow: 色彩 程度偏移 垂直偏移 含糊度

white-space属性：用于设置文本中的空白

• normal -> 默认值，疏忽空白
• pre -> 保留文本中的所有空白，不主动换行（相似于 pre 标签
• nowrap -> 文本不主动换行
• pre-wrap -> 保留文本中的所有空白，主动换行
• pre-line -> 只保留文本中的换行符，疏忽其余空白

overflow-wrap属性：用于设置文本溢出时的换行准则

• normal：默认值，单词两头一直开
• break-word：文本溢出时单词两头可断开

text-overflow属性：用于设置文本溢出时的暗藏准则

• clip -> 暗藏超出局部
• ellipsis -> 超出局部用省略号示意
• 自定义字符串 -> 超出局部用自定义字符串示意

9.3 段落

text-indent属性：用于设置段落首行缩进，可选值为长度值或百分比

text-align属性：用于设置文本的程度对齐

• left -> 左对齐
• right -> 右对齐
• center -> 居中
• justify -> / 两端对齐

vertical-align属性：用于设置文本的垂直对齐

• baseline -> 默认值，基线对齐
• sub -> 垂直对齐文本的下标
• super -> 垂直对齐文本的上标
• top -> 元素顶端与行中最高元素顶端对齐
• text-top -> 元素顶端与父元素字体顶端对齐
• bottom -> 元素顶端与行中最低元素顶端对齐
• text-bottom -> 元素底端与父元素字体底端对齐
• middle -> 居中（子元素中线和父元素中线对齐，并不是严格的居中）
• 长度值或百分比 -> 设置对齐的地位
  留神：图片默认是基线对齐的，与外边框间有空白，布局时须要进行批改

word-spacing属性：用于设置单词间距

letter-spacing属性：用于设置字符间距

writing-mode属性：用于设置排版模式

• horizontal-tb -> 左对齐则内容自左向右，右对齐则相同，下一行位于上一行下方
• vertical-rl -> 左对齐则内容自上而下，下一行位于上一行左侧，右对齐则相同
• vertical-lr -> 左对齐则内容自上而下，下一行位于上一行右侧，右对齐则相同

10. 背景

10.1 背景

背景色彩

background-color属性：用于设置背景色彩

背景图片

background-image属性：用于设置背景图片

• 同时设置背景图片和背景色彩，则背景色彩会变成图片背景色
• 背景图片小于元素，则主动平铺显示；背景图片大于元素，则无奈齐全显示

背景裁切

background-clip属性：用于设置背景范畴

• border-box -> 默认值，背景显示范畴包含边框、内边距和内容区
• padding-box -> 背景显示范畴包含内边距和内容区
• content-box -> 背景显示范畴只包含内容区
• text -> 背景裁剪成文字前景色

背景反复

background-repeat属性：用于设置背景图片反复形式

• repeat -> 默认值，背景图片反复显示
• repeat-x -> 仅沿 x 轴方向反复显示
• repeat-y -> 仅沿 y 轴方向反复显示
• no-repeat -> 不反复显示

背景地位

background-position属性：用于设置背景图片显示地位

• 通过 top/bottom/left/right/center 几个地位的组合设置背景图片的地位（只写一个则默认第二个为center）
• 或者通过垂直偏移量和程度偏移量设置背景图片的地位

background-origin属性 ：用于设置背景图片显示地位偏移量的原点（留神：若background-attachment 属性设置为fixed，则这一属性不失效）

• border-box -> 偏移量从边框开始计算
• padding-box -> 默认值，偏移量从内边距开始计算
• content-box -> 偏移量从内容区开始计算

背景尺寸

background-size属性：用于设置背景图片的尺寸

• 两个值 -> 宽度和高度（其中一个为 auto 则放弃图片比例不变，只写一个则第二个默认为auto）
• cover -> 图片比例不变，背景图片铺满元素
• contain -> 图片比例不变，在元素中残缺显示背景图片

背景滚动

background-attachment属性：用于设置背景图片是否随元素挪动

• scroll -> 默认值，背景图片随元素挪动
• fixed -> 背景图片固定，不随元素挪动

多个背景

留神：后设置的背景置于底层

background-image: url(image1.png), url(image2.png);

或者

background: url(image1.png) left 50% no-repeat,
            url(image2.png) right 100% no-repeat red;

组合设置

background属性：用于设置背景图片的所有属性

background: red url(image.png) no-repeat right 50% fixed;

<font color=”red”> 留神 </font>：没有程序要求，然而 background-size 属性必须写在 background-position 属性之后，并用 ”/” 隔开，background-clip属性必须写在 background-origin 属性之后

10.2 突变

线性突变（linear-gradient属性）：色彩沿一条直线发生变化

linear-gradient(方向, 色彩)

方向：to top/to bottom/to left/to right；整数deg（度数）；小数（圈）
色彩：能够指定多个，以逗号隔开；默认状况下多个色彩均匀散布，能够指定色彩和占比，以空格隔开，指定色彩开始色彩开始突变的地位
repeat-linear-gradient（反复显示的线性突变）

径向突变（radial-gradient属性）：色彩沿核心向周围发生变化

radial-gradient(尺寸 at 地位, 色彩)

尺寸：默认由元素形态决定；circle/ellipse -> 圆形 / 椭圆；closest-side/farthest-side/closest-circle/farthest-circle -> 近边 / 远边 / 近角 / 远角
地位：top/bottom/left/right/center

10.3 技巧：CSS-Sprite（雪碧图）

将页面中的多个图标放在一张图中，为 background-position 属性设置不同的值以显示不同的图标

• 问题：对于按钮点击成果，初始、鼠标移入和鼠标点击时对应着多张不同的图片，多别离加载则会呈现闪动影像显示成果
• 解决方案 ：将多张小图片合并成一张大图片，在初始、鼠标移入和点击时别离为background-position 属性设置不同的值，以显示每个小图片
• 长处：节俭空间，只需一次加载，同时能够防止出现闪动

11. BFC（Block Formatting Context，块级格式化上下文）

BFC（Block Formatting Context）直译为块级格式化上下文，是一个只有 Block-level Box 参加的独立渲染区域，规定了外部的元素的布局形式，同时，BFC 外部的元素与内部元素不会相互影响。

Box是 CSS 布局的对象和根本单位。一个页面是由多个 Box 组成的，元素的类型和 display 属性决定了其 Box 类型，不同类型的 Box 会参加不同的格式化上下文（Formatting Context），而不同格式化上下文中的 Box 内的元素也会以不同的形式渲染。

• Block-level Box：display属性为 block、list-item 或者 table 的元素，会生成Block-level Box，并参加 Block Formatting Context。
• Inline-level Box：display属性为 inline、inline-block 或者 inline-table 的元素，会生成Inline-level Box，并参加 Inline Formatting Context。

Formatting Context 是 CSS2.1 标准中的概念，是页面中的一块渲染区域，并且有一套渲染规定，决定了其中子元素如何定位以及和其余元素关系和相互作用

11.1 BFC 的布局规定

1. BFC 外部的 Box 会在垂直方向顺次搁置；Box垂直方向的间隔由 margin 决定。同一个 BFC 内的两个相邻 Box 的垂直方向 margin 会产生重叠；
2. 每个 Box 的margin box的右边，与蕴含块的 border box 的右边接触（即便存在浮动）；
3. BFC 在页面上是一个独立的区域，它外部的元素的布局不会和内部元素的布局产生相互影响；
4. 开启 BFC 的元素不会与 float box 重叠；
5. 开启 BFC 的元素，能够蕴含浮动的子元素，计算高度时，浮动元素也参加计算。

11.2 产生 BFC

• 根元素或其余蕴含它的元素
• overflow属性设置为不是 visible 的元素
• 浮动元素，元素的 float 属性不是none
• 相对定位元素，元素的 position 属性不是 static 或者relative
• 内联块元素，元素的 display 属性为inline-block；
• 弹性元素，元素的 display 属性为 flex 或者inline-flex；
• 网格元素，元素的 display 属性为 grid 或者inline-grid；
• 流式布局根元素，元素的 display 属性为flow-root；
• HTML 默认的某些表格元素。

11.3 BFC 的利用场景

1. 防止 margin 重叠

   依据布局规定第二点，两个 p 元素垂直方向 margin 会产生重叠，将第二个 p 元素搁置于一个新的 BFC 中，能够防止 margin 产生重叠。

   <div class="problem">
     <h3>margin 重叠 </h3>
     <p> 看看我的 margin 是多少 </p>
     <p> 看看我的 margin 又是多少 </p>
   </div>
   <div class="solution">
     <h3> 解决方案 </h3>
     <p> 看看我的 margin 是多少 </p>
     <div>
       <p> 看看我的 margin 又是多少 </p>
     </div>
   </div>

   .problem p {
     width: 200px;
     color: deeppink;
     background-color: skyblue;
     line-height: 100px;
     text-align: center;
     margin: 30px;
   }
   
   .solution p {
     width: 200px;
     color: deeppink;
     background-color: skyblue;
     line-height: 100px;
     text-align: center;
     margin: 30px;
   }
   
   .solution div {overflow: hidden;}

2. 自适应两栏布局

   依据布局规定的第三点和第四点，应用浮动的两栏布局会产生笼罩，将右侧 div 成为独自的 BFC，能够防止笼罩，实现自适应两栏布局。

   <div class="box">
     <div class="problem-left">LEFT</div>
     <div class="problem-right">RIGHT</div>
   </div>
   <div class="box">
     <div class="solution-left">LEFT</div>
     <div class="solution-right">RIGHT</div>
   </div>

   .box {margin: 20px;}
   
   .problem-left {
     width: 100px;
     height: 150px;
     float: left;
     background: pink;
     text-align: center;
     line-height: 150px;
     font-size: 20px;
   }
   
   .problem-right {
     height: 300px;
     background: skyblue;
     text-align: center;
     line-height: 300px;
     font-size: 40px;
   }
   
   .solution-left {
     width: 100px;
     height: 150px;
     float: left;
     background: pink;
     text-align: center;
     line-height: 150px;
     font-size: 20px;
   }
   
   .solution-right {
     height: 300px;
     background: skyblue;
     text-align: center;
     line-height: 300px;
     font-size: 40px;
     overflow: hidden;
   }

3. 防止高度塌陷
   在没有给父元素设置高度同时将子元素设置为浮动时，会呈现 高度塌陷。依据布局规定第六点能够利用 BFC 革除浮动，防止高度塌陷。

<div class="parent problem">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent solution">
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent {border: 5px solid rgb(91, 243, 30);
  width: 300px;
}

.problem {margin-bottom: 200px;}

.solution {overflow: hidden;}

.child {border: 5px solid rgb(233, 250, 84);
  width: 100px;
  height: 100px;
  float: left;
}