Web前端学习笔记——CSS部分

关于CSS

1. CSS： 用于描述页面展示的语言。

2. CSS规则=选择器+声明块
   例如：

3. 选择器： 选中元素，确定样式范围。

4. 选择器类型：
   基础选择器：
   

   复杂选择器：
   

5. 选择器权重值：
   

6. 声明冲突： 同一样式（同一属性不同值）多次应用到同一元素。

7. 层叠： 解决声明冲突的过程，即浏览器自动处理（权重计算）。

• 比较重要性（由高到低）：
  作者样式表中的！important样式 > 作者样式表的普通样式 > 浏览器默认样式表中的样式 （作者样式表：开发者书写的样式）

• 比较特殊性：
  总体规则：取决于选择器，选择器选中的范围越窄，越特殊。
  具体规则：通过选择器计算出一个4位数（xxxx）。
  

• 比较源次序：代码写的靠后的，越重要。

层叠的应用场景：

• 重置样式表：书写一些作者样式，覆盖浏览器的默认样式。（先引用重置样式表，再引用作者样式表。）常见的重置样式表有：normalize.css、reset.css、meyer.css。
• 爱恨法则：link > visited > hover > active

8. 继承：子元素会继承父元素的某些CSS属性（ 一般与文字内容相关的属性都能被继承。）
9. CSS属性值的计算过程：一个元素从所有属性都没有值到所有的属性都有值的计算过程。
   一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行。
   渲染每个元素的前提条件：该元素的所有CSS属性必须有值。

• 确定声明值：参考（作者或者浏览器）样式表中没有冲突的声明，作为CSS属性值。
• 层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值。
• 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值。（inherit：强制继承，即将父元素的值取出并应用到子元素上；initial：初始值，将该属性设置为默认值。）
• 使用默认值：对仍然没有值的属性，使用默认值。

10. 盒模型： 规定单个盒子的规则。
    box：盒子，每个元素在页面中都会生成一个矩形区域。
    浏览器默认样式表设置的块盒：容器元素、h1~h6、p；
    常见的行盒：span、a、img、video、audio；
    盒子类型：

    • 行盒（inline-box）：display：inline的元素。
    • 块盒（block-box）：display：block的元素。
      行盒在页面中不换行，块盒在页面中独占一行。
      （display的默认值为inline）

    盒子的组成部分：
    
    内容（content）:内容部分通常称为内容盒（content-box），通过width、height设置盒子内容的宽高。
    填充/内边距（padding）：盒子边框到盒子内容的距离。
    填充区+内容区=填充盒（padding-box）
    （padding-top：上内边距；；padding-right：右内边距；padding-bottom：下内边距；padding-left：左内边距）
    边框（border）：通过border-width、border-style、border-color设置边框宽度、边框样式、边框颜色。
    边框+填充区+内容区=边框盒（border-box）
    外边距（margin）：边框到其它盒子的距离。

11. 盒模型的应用：

• 改变宽高范围：
  默认情况下，width、height设置的是内容盒宽高。
  而衡量设计稿尺寸时，往往使用的是边框盒，故需要通过以下其中一种方式进行设置：
  方式一：精确计算出内容盒的实际宽高进行设置；
  方式二：通过CSS3的box-sizing属性进行设置；
• 改变背景覆盖范围：
  默认情况下，背景覆盖边框盒，可通过background-clip进行修改覆盖范围。
• 溢出处理：
  overflow：控制内容溢出边框盒后的处理方式。
• 断词规则：
  word-break：影响文字在什么位置被截断换行。（可取的属性值有normal：普通，对于CJK字符，在文字位置截断，非CJK字符，在单词位置截断；break-all：截断所有，在所有位置截断；keep-all：保持所有，所有文本均在单词位置截断。）
• 空白处理：
  white-space：nowrap（该种情况下元素会进行空白折叠但不会换行）
  white-space：normal（该种情况下元素会进行空白折叠）
  white-space：pre（该种情况下元素不会进行空白折叠）
  单行文本显示不完自动换行的处理方法：white-space：nowrap；overflow：hidden；text-overflow：ellipsis；

12. 行盒的盒模型：
    特点：
    盒子沿着内容延申；
    行盒不能设置宽高（故若需要调整行盒的大小，应该使用字体大小、字体类型、行高）；
    内边距（填充区）：水平方向有效，垂直方向仅会影响背景，并不实际占据空间；
    边框：水平方向有效，垂直方向仅会影响背景，并不实际占据空间；
    外边距：水平方向有效，垂直方向仅会影响背景，并不实际占据空间；

13. 行块盒的盒模型： display：inline-block的盒子
    特点：
    不独占一行；
    盒模型中所有尺寸都有效；

14. 可替换元素： 少部分元素，页面上显示的结果取决于元素属性，CSS不能完全控制其样式。
    绝大部分可替换元素均为行盒；可替换元素类似于行块盒，盒模型中所有尺寸都有效。（object-fit：表示图片/音频/视频的适应方式）

15. 非可替换元素： 大部分元素，页面上显示的结果取决于元素内容。

16. 包含块（containing block）： 每个盒子都有它的包含块，包含块决定了盒子的排列区域。（绝大部分情况下，盒子包含块为其父元素的内容盒。）

17. 视觉格式化模型（布局规则）： 该模型将页面中盒子的排列大致分为了三种方式：常规流、浮动、定位。

18. 常规流布局：
    常规流，文档流、普通文档流、常规文档流。
    所有元素默认情况下都属于常规流布局。
    总体规则： 块盒独占一行，行盒水平依次排列。
    每个块盒的总宽度，必须刚好等于包含块的宽度。宽度的默认值为auto，margin的取值也可以为auto，默认值为0。
    width吸收能力强于margin，故width、margin同时设为auto时，剩余空间将被width所吸收。
    若宽度、边框、内边距、外边距计算之后，仍然有剩余空间，则该剩余空间被margin-right全部吸收。
    在常规流中，块盒在其包含块中水平居中，可以设置width、margin：0 auto；使文本水平居中，可以设置text-align：center；使文本垂直居中，可以将height、line-height设置为相同值。
    每个块盒垂直方向上的auto值：
    height：auto，适应内容的高度；
    margin：auto，等价于0 。
    百分比设置：
    padding、width、margin均可以取值为百分比。（这里的百分比是相对于包含块的宽度）
    高度的百分比：
    情况一：包含块的高度取决于子元素的高度即父元素的高度未设置时，设置百分比无效。
    情况二：包含块的高度不取决于子元素的高度即父元素高度已设置，设置百分比时是相对于父元素高度。

• 上下外边距的合并：两个常规流块盒，上下外边距相邻时，会进行合并。（不一定为兄弟元素，也有可能为父子元素；两个外边距中取最大值；可以通过设置padding或者border解决合并问题）
  auto：将剩余空间吸收掉。

19. 浮动
    特点：
    当一个元素设置浮动属性后，元素的display属性值会被自动更改为block，元素变为块盒；浮动元素的包含块为父元素的内容盒 。
    float的属性可取值有：
    left：左浮动，元素靠上靠左排列。
    right： 右浮动，元素靠上靠右排列。
    none：默认值，不浮动。
    盒子尺寸：
    宽度为auto时，适应内容的宽度；
    高度为auto时，适应内容的高度；
    在水平或者垂直方向上，当margin设为auto时，即相当于0；
    边框、内边距百分比设置同常规流一样。
    盒子排列：
    浮动盒子在包含块中排列时，会避开常规流块盒；
    常规流块盒在排列时，会忽略浮动盒子；
    行盒在排列时，会避开浮动盒子；
    如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒被称为匿名行盒。
    高度坍塌：

• 形成原因：常规流盒子的高度，若为适应内容的高度时，则其在计算时会忽略浮动盒子。（浮动盒子脱离了常规流）
• 解决办法：
  方法一：将浮动元素的父级元素高度设置为固定值；
  方法二：清除浮动。（给浮动元素的父级元素添加一个::after伪类，该伪类的CSS样式可写为：content：“ ”；display：block；clear：both；）
  clear：left ，清除左浮动，即该元素必须出现在前面所有左浮动盒子的下方。
  clear：right，清除右浮动，即该元素必须出现在前面所有右浮动盒子的下方。
  clear：both，清除左右浮动，即该元素必须出现在前面所有浮动盒子的下方。
  应用场景：
  文字环绕
  横向排列

20. 定位： 手动控制元素在包含块中的精准位置。
    position属性：
    默认值为static，静态定位（不定位）；
    relative：相对定位；
    absolute：绝对定位；
    fixed：固定定位。
    一个元素，只要position取值不是static，则认为该元素是一个定位元素。
    定位元素会脱离文档流（相对定位除外）。
    脱离文档流的元素：
    文档流中的元素摆放时，会忽略该元素；
    文档流中的元素计算自动高度时，会忽略该元素。
    可通过以下属性设置元素位置：
    top、right、bottom、left；（属性值起冲突时，以左或上为准）
    相对定位（relative）：
    不会导致元素脱离文档流，只是让元素在原来位置上进行偏移；
    元素仅仅发生位置偏移，不会对其它元素位置产生影响。
    绝对定位（absolute）：
    宽高为auto时，适应内容；
    确定其包含块范围：找祖先中第一个定位元素，该元素的填充盒为其包含块，若找不到，则它的包含块为整个网页（初始化包含块）。
    一般元素发生重叠即需要精准定位时使用绝对定位。
    固定定位（fixed）：
    宽高为auto时，适应内容；
    确定其包含块范围：固定为视口即浏览器的可视窗口。
    固定定位是绝对定位的特殊情况。
    定位下的居中：
    在水平（垂直）方向上居中：

• 定宽（高）；
• 将左右（上下）距离设为0；
• 将左右（上下）margin设为auto；
  在绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间。
  关于文档流

此链接为作者“清风柠檬”的博客园笔记

多个定位元素重叠时：
堆叠上下文：设置z-index（其值可以为正，可以为负，为负数遇到常规流、浮动元素时，该元素会被其覆盖，一般情况下，值越大，越接近用户）
只有定位元素设置z-index有效。
绝对定位、固定定位元素一定不为浮动盒，一定是块盒。
定位中无外边距合并。
使用定位时，应首先确定其包含块范围。
21. 透明度：

• 在颜色位置设置alpha通道（局部设置）：
  rgba（red，green，blue，alpha）
  hex：#red green blue alpha
  每个颜色都具有透明通道，0~1 。
• opacity：设置整个元素的透明度，取值范围为0~1。（整体设置）

22. 伪l类选择器和伪元素选择器补充：
    伪类选择器：
    first-child：选择第一个子元素；
    last-child：选择最后一个子元素；
    nth-child：选择指定的第几个子元素（even：等同于2n；odd：等同于2n+1）；
    first-of-type：选中子元素中第一个指定类型的元素；
    nth-of-type：选中指定的子元素中第几个某类型的元素。
    伪元素选择器：
    first-letter：选中元素中第一个字母；
    first-line：选中元素中第一行的文字；
    selection：选中被用户框选的文字。

23. 盒子隐藏：
    不生成盒子：display：none
    生成盒子，虽然不可视，但仍然占据空间：visibility：hidden

24. 背景图：
    img元素是属于html的概念，而背景图属于css的概念。
    当图片属于网页内容时，必须使用img元素；
    当图片仅用于美化图片时，必须使用背景图。
    background-image、background-color、background-repeat（设置背景图是否重复）、background-size（设置背景图的大小）、background-position（设置背景图的位置）、background-attachment（用于控制背景图是否固定）
    默认情况下，背景图会在横坐标和纵坐标中进行重复。
    雪碧图（精灵图）：一张拥有网页中所有的图标的图。