CSS 学习笔记 - 基础篇

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

1. 浏览器

Browser	Rendering Engine
Chrome	Webkit / Blink
Safari	Webkit
Firefox	Gecko
IE	Trident
Opera	Presto / Webkit / Blink

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. 子元素的上外边距会传递给父元素（影响开发，需要进行处理）

   .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. 粘滞定位：在到达包含块指定位置前随浏览器滚动条滚动，达到之后不再随滚动条滚动（兼容性较差，一般不用）

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

     
     
       
     
       
     第一节
       
     
       
     第二节
       
     
     

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

     
     
       
     
         
     第一节
         
     段落二
         
       
       
     
         
     第二节
         
     段落一
         
       
     

   • z-index属性 -> 整数值，用于设置元素的层级，数值越大层级越高（注意：祖先元素不会覆盖后代元素）

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;

注意：没有顺序要求，但是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发生重叠。

   
     
   margin 重叠
     
   看看我的 margin 是多少
     
   看看我的 margin 又是多少
   
   
     
   解决方案
     
   看看我的 margin 是多少
     
   
       
   看看我的 margin 又是多少
     
   

   .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，可以避免覆盖，实现自适应两栏布局。

   
     
   LEFT
     
   RIGHT
   
   
     
   LEFT
     
   RIGHT
   

   .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清除浮动，避免高度塌陷。

.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;
}