橙黄橘绿

深浅模式

为网页添加样式 ​

术语解释 ​

css
    <style>
        h1 {
            color: red;
            background-color: lightblue;
            text-align: center;
        }
    </style>

CSS 规则 = 选择器 + 声明块

简单选择器： ​

  1. 元素选择器
  2. 类选择器
  3. ID 选择器 #
  4. 通配符选择器 *
  5. 属性选择器
    • [属性名] （[href]）
    • [属性名=属性值] （[href="https://www.baidu.com"]）
    • [属性名^=属性值] 以属性值开头
    • [属性名$=属性值] 以属性值结尾
    • [属性名*=属性值] 包含属性值
    • [属性名~=属性值] 包含属性值，以空格分隔 ([class~="b"])
    • [属性名|=属性值] 包含属性值，以-分隔
    • [属性名^=属性值] 以属性值开头
  6. 伪类选择器
    • :hover 鼠标悬停 (a:hover{color: red;})
    • :active 鼠标点击
    • :link 超链接未访问的状态
    • :visited 超链接已访问的状态
    • :focus 元素获得焦点
    • :first-child 第一个子元素
    • :last-child 最后一个子元素
    • :nth-child(n) 第 n 个子元素
    • :nth-last-child(n) 倒数第 n 个子元素
    • :nth-of-type(n) 第 n 个类型元素
    • :nth-last-of-type(n) 倒数第 n 个类型元素
    • :only-child 只有一个子元素
    • :only-of-type 只有一个类型元素
    • :empty 没有子元素
  7. 伪元素选择器
    • ::first-letter 第一个字母
    • ::first-line 第一行
    • ::before 元素之前 （span::before{content: "《";}）
    • ::after 元素之后（span::after{content: "》";}）

组合选择器 ​

  1. 并且
  2. 后代元素（空格）
  3. 子元素（>）
  4. 相邻兄弟元素（+）(当前元素的下一个)
  5. 通用兄弟元素（~）(当前元素后面的所有)

并列选择器 ​

多个选择器之间用逗号隔开 语法糖：多个选择器共享同一个声明块

声明块 ​

出现在大括号中，包含一个或多个声明。 每个声明由属性和值组成，用冒号分隔，用分号结束。

CSS 代码书写位置 ​

  1. 内部样式表 （在 head 标签中）
  2. 外部样式表 （在外部的 css 文件中）[推荐]
    • 外部样式可以解决多个页面共享样式的问题
    • 有利于游览器缓存，提高页面加载速度
    • 有利于代码分离，使代码更易于维护和阅读
  3. 内联样式 （在标签的 style 属性中）

常见样式声明 ​

  1. color (元素内部的文字颜色)
  • 预设值：定义好的单词
  • 三原色，色值：每个颜色可以使用0-255之间的数字表示
  • rgb()：红绿蓝
  • rgba()：红绿蓝加透明度
  • hex：十六进制（#红绿蓝）#008c8c、#000、#f40（两位相同就可以简写）

  1. background-color (元素的背景颜色)

  2. font-size (元素内部字体大小)

    • 单位：px（像素），简单理解为文字的高度占多少个像素
    • em： 相对单位，相对于父元素的字体大小，每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html）那么使用基准大小
    • 大小：12px、14px、16px
    • 继承：子元素会继承父元素的字体大小

  3. font-weight (元素内部字体粗细)

    • bold = 700
    • normal = 400

  4. font-family（文字类型）

    • 字体：宋体、微软雅黑、黑体、楷体等
    • 继承：子元素会继承父元素的字体
    • 字体类型：
      • 衬线字体（serif）：有笔画的字体，如宋体、楷体等，多用于印刷，打印
      • 非衬线字体（sans-serif）：没有笔画的字体，如微软雅黑、黑体等，多用于网页
      • 等宽字体：每个字符的宽度相等，如Courier New等
    • 可以写多个比如 font-faily： 宋体，黑体，sans-serif。当没有时会选择下一个

  5. font-style（文字样式）通常用它设置斜体

    • italic：斜体
    • normal：正常

i 元素默认是斜体，通常用它表示一个图标（icon）

  1. text-decoration（文字装饰）
    • underline：下划线
    • line-through：删除线
    • overline：上划线
    • none：没有装饰

del 已删除的文字 s 过期的文字

  1. text-indent（文字缩进）
    • 单位：px（像素）
    • 缩进：2em（缩进2个文字的宽度）
  2. line-height（每行文本的高度，这个值越大，每行文本的间距越大）
    • 用法1:设置行高为容器的高度，可以让单行文本垂直居中
    • 用法2:行高可以设置为纯数字，表示相对当前元素的字体大小
  3. width
  4. height
  5. letter-spacing（文字间距）
  6. text-align（文字对齐）
    • left：左对齐
    • right：右对齐
    • center：居中对齐
    • justify：两端对齐

层叠 ​

声明冲突：同一个样式，多次应用到同一个元素上

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

1. 比较重要性 ​

重要性从高到底：

  1. 作者样式表中的！important样式
  2. 作者样式表的普通样式
  3. 浏览器默认样式

2. 比较特殊性 ​

看选择器，总体规则：选择器选中的范围越窄，特殊性越高 具体规则：通过选择器计算出一个4位数 (x x x x)

  1. 千位：如果是内联样式，千位为1，否则为0
  2. 百位：等于选择器中的id选择器的数量
  3. 十位：等于类选择器、属性选择器、伪类选择器的数量
  4. 个位：元素选择器、伪元素选择器的数量

特殊性从高到底：

  1. 内联样式
  2. id选择器
  3. 类选择器、属性选择器、伪类选择器
  4. 元素选择器、伪元素选择器

3. 比较源次序 ​

代码书写顺序：后面的样式会覆盖前面的样式

应用 ​

  1. 重置样式表 （书写一些作者样式，覆盖游览器的默认样式） 重置样式表 -> 游览器的默认样式 常见的重置样式表：
    • normalize.css
    • reset.css
    • meyer.css
  2. 爱恨法则
    • L：link
    • V：visited
    • H：hover
    • A：active

继承 ​

子元素会继承父元素的某些CSS属性 通常：跟文字内容相关的属性都会被继承

属性值的计算过程 ​

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有值

一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程

属性值计算过程简介：

  1. 确定声明值，参考样式表中没有冲突的声明，作为CSS属性
  2. 层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值
  3. 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
  4. 使用默认值：对没有值的属性，使用默认值

特殊的两个CSS取值

  • inherit：手动（强制）继承父元素的值
  • initial：使用默认值

盒模型 ​

box: 盒子，每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型：

  1. 行盒，display等于inline的元素
  2. 块盒，display等于block的元素

行盒在页面中不换行，块盒独占一行

游览器默认样式表设置的块盒： 容器元素、h1-h6、p 常见的行盒：span a img video audio

盒子的组成部分 ​

无论是行盒还是块盒，每个盒子都由以下几个部分组成：

  1. 内容区域（content）
    • width、height 设置的是盒子内容的宽高
  2. 内边距区域（padding）
    • 盒子边框到盒子内容的距离
    • padding 简写属性： 上 右 下 左
    • 填充盒： 内容区域 + 内边距区域
  3. 边框区域（border）
    • 边框 = 边框样式 + 边框宽度 + 边框颜色
    • 边框样式： border-style
    • 边框宽度： border-width
    • 边框颜色： border-color
    • 边框 + 填充 + 内容 = 边框盒
  4. 外边距区域（margin）
    • 边框到其他盒子的距离

盒模型的应用 ​

改变宽高范围 ​

默认情况下，width 和 height 设置的是内容盒宽高

页面重构师：将 psd 文件（设计搞）制作为静态页面 衡量设计稿尺寸的时候，往往使用的是边框盒，但设置 width 和 height，则设置的是内容盒

html
<style>
  div {
    width: 256px;
    height: 200px;
    background-color: pink;
    border: 1px solid red;
    padding: 10px;
    /* 改变宽高的影响范围 */
    box-sizing: border-box;
  }
</style>
<div>我是div</div>

改变这种情况的方法

  1. 精确计算
  2. CSS3: box-sizing(默认值：content-box)

改变背景覆盖的范围 ​

默认情况下，背景覆盖边框盒 可以通过 background-clip: border-box;

溢出处理 ​

html
<style>
  div {
    border: 1px solid red;
    padding: 20px;
    width: 200px;
    height: 200px;
    overflow: hidden;
  }
</style>
<div>我是div</div>

overflow: 控制内容溢出边框盒后的处理方式

断词规则 ​

word-break:会影响文字在什么位置被截断换行

  • normal，普通。CJK 字符（文字位置截断），非 CJK 字符（单词位置截断）
  • break-all：截断所有，所有字符都可能被截断
  • keep-all：保持所有，所有字符都不会被截断，只能在单词之间截断

空白处理 ​

单行文本的处理

html
<style>
  li {
    border: 1px solid red;
    line-height: 2px;
    padding-left: 10px;
    margin: 1em 0;
    width: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<ul>
  <li>lsdadsadssdasdafjgiaghadjwaopd</li>
</ul>

white-space: nowrap;

行盒的盒模型 ​

常见的行盒：包含具体内容的元素 span、a、strong、em 等

显著特点 ​

  1. 盒子沿着内容延伸
  2. 宽度和高度由内容决定(不能设置宽高) ，调整行盒的宽高，应该使用字体大小、行高、字体类型间接调整
  3. 内边距（填充区） 水平方向有效，垂直方向尽会影响背景，不会实际占据空间
  4. 边框：水平方向有效，垂直方向不会实际占据空间
  5. 外边距（margin）：水平方向有效，垂直方向不会实际占据空间

行块盒 ​

display：inline-block 的盒子

  1. 不独占一行
  2. 但盒模型中所有尺寸都有效

经常用于做分页

空白折叠 ​

空白折叠发生在行盒（行块盒）内部 或 行盒（行块盒）之间

可替换元素 和 非可替换元素 ​

大部分元素，页面上显示的结果，取决于元素的内容 成为非可替换元素 少部分元素，页面上显示的结果，取决于元素的属性 成为可替换元素

可替换元素： img（object-fit：fill）、video、audio 等 绝大部分可替换元素为行盒
可替换元素类似于行块盒，盒模型中所有尺寸都有效

常规流 ​

盒模型：规定单个盒子的规则

视觉格式化模型：页面中的多个盒子排列规则

视觉格式化模型，大体上将页面中的盒子排列分为三种方式：

  1. 常规流
  2. 浮动
  3. 定位

常规流布局 ​

常规流、文档流、普通文档流、常规文档流

所有元素，默认情况下，都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子排列区域

绝大部分情况下：盒子的包含块，为其父元素的内容盒

块盒

  1. 每个块盒的总宽度，必须刚好等于包含块的宽度 （宽度的默认值是auto：将剩余空间吸收掉） margin 的取值也可以是auto，将剩余的空间吸收掉 wigth 吸收能力强于margin （ 当width和margin都为auto时）

若宽度、边框、内边距、外边距计算后，改剩余空间被margin-right全部吸收

在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin设置为auto（margin：0 auto） 2. 每个块盒垂直方向上的auto值 height 的默认值是auto，适应内容的高度 margin：auto 表示0

  1. 百分比取值 padding、宽高、margin 都可以使用百分比取值 以上所有百分比相对于包含块的宽度。 高度的百分比：
  • 包含块的高度是否取决于子元素，设置百分比无效
  • 包含块的高度不取决于子元素的高度，百分比相对于父元素高度
  1. 上下外边距的合并 两个常规流块盒，上下外边距会合并，合并后的外边距为较大的那个值 （父子元素也会合并）

浮动 ​

视觉格式化模型，大体将文档分为以下三个方式：1.常规流 2.浮动 3.定位

应用场景 ​

  1. 文字环绕
  2. 横向排列 （兼容性好）

浮动的基本特点 ​

修改 float 的属性为：

  • left：左浮动，元素靠上靠左
  • right：右浮动，元素靠上靠右
  • 默认值为 none
  1. 当一个元素浮动后，会强制为块盒（更改为 block）
  2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸 ​

  1. 宽度为 auto 时，适应内容宽度
  2. 高度为 auto 时，与常规流一致，适应内容高度
  3. margin 为 auto 时为 0
  4. 边框、内边距、百分比设置与常规流一致

盒子排列 ​

  1. 左浮动的盒子会靠上靠左
  2. 右浮动的盒子会靠上靠右
  3. 浮动盒子在包含块中排列时会避开常规流盒子
  4. 常规流块盒在排列时会无视浮动盒子（常规流盒子在后面时）
  5. 行盒在排列时会避开浮动盒子 （做文字环绕效果 将图片的 float 设置为 left 或 right）

    如果文字在行盒中，游览器会自动生成一个匿名行盒，将文字包裹起来

  6. 外边距合并不会发生

高度坍塌 ​

高度坍塌的根源：常规流的盒子的自动高度，不考虑浮动盒子的高度 解决方法：清除浮动，css 属性 clear

  • 默认值 none
  • left：清除左浮动，改元素必须出现在前面所有左浮动盒子的下方
  • right：清除右浮动，改元素必须出现在前面所有右浮动盒子的下方
  • both：清除左右浮动，改元素必须出现在前面所有浮动盒子的下方

定位 ​

视觉格式化模型，大体上将页面中的盒子排列分为三种方式：

  1. 常规流
  2. 浮动
  3. 定位

定位： 手动控制元素在包含块中的精准位置

涉及的 CSS 属性：position

position 属性 ​

  • 默认值：static 静态定位（不定位）
  • relative 相对定位
  • absolute 绝对定位
  • fixed 固定定位

一个元素，只要 position 取值不是 static，就认为该元素是一个定位元素 定位元素会脱离文档流（相对定位除外）

一个脱离了文档流的元素：

  1. 文档流中的元素摆放时，会忽略脱离了文档流的元素
  2. 文档流中元素计算自动高度时，会忽略脱离了文档流的元素

相对定位 ​

不会导致元素脱离文档流，只是让元素在原来位置上进行偏离

可以通过四个 CSS 属性对设置相对定位的元素进行偏移

  • top
  • bottom
  • left
  • right

盒子的偏移不会影响到其他盒子的位置

绝对定位 ​

  1. 宽高为 auto，适应内容
  2. 包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）

固定定位 ​

其他情况盒绝对定位完全相同

包含块不同：固定为视口（viewport）

定位下的居中 ​

某个方向居中：

  1. 定宽（高）
  2. 将左右（上下）距离设置为 0
  3. 将左右（上下）margin 设置为 auto 绝对定位和固定定位中当 margin 设置为 auto 时，会自动吸收剩余空间

多个定位元素重叠时 ​

堆叠上下文（stacking context） 设置 z-index ，该值越大通常情况下越靠近用户 只有定位元素设置 z-index 才有效 z-index 可以是负数，如果是负数，则遇到常规流，浮动元素，则会被覆盖

补充 ​

  • 绝对定位、固定定位一定是块盒
  • 绝对定位、固定定位元素一定不是浮动元素
  • 没有外边距合并

更多的选择器 ​

更多的伪元素选择器 ​

  1. first-child (选中第一个子元素) 例如 a:first-child 选中的是a元素，并且a元素是第一个子元素
  2. first-of-type
  3. last-child (选中最后一个子元素)
  4. nth-child (选中指定第 n 个子元素) 例如 a:nth-child(5) ; even(关键字)等同于2n；odd 等同于2n+1
  5. nth-of-type (选中第几个某类元素) 例如 a:nth-of-type(2) 选中的是a元素，并且a元素是第二个a元素

更多的伪元素选择器 ​

  1. first-letter (选中元素中的第一个字母)
  2. first-line (选中元素中第一行的文字)
  3. selection (选中被用户选中的文字) p::selection

Released under the MIT License.

Copyright © 2019-2026 present xia