later-zc notes

Appearance

一. CSS 的属性继承 ​

  • CSS 的某些属性具有继承性（inherited）

    • 如果一个属性具有继承性，那么在某元素上设置后，它的后代元素都可以继承这个属性
    • 如果后代元素自身设置该属性，那么优先使用其自身的设置的属性（不管继承过来的属性权重有多高）

  • 如何知道一个属性是否具有继承性呢？

    • 常见的跟字体文本相关的属性一般都具有继承性，如：font-size、font-family、color、line-height、text-align等

    • 这些不用刻意去记，用的多自然就记住了

    • 另外多学会查阅文档，文档中每个属性都有标明其继承性的

      image-20220401180130491

注意：

  • 继承过来的是计算值，而不是设置值
  • 如：a 元素 font-size 设置的 2em，其 1em 等同于 a 元素父代元素的 font-size 的大小，而如果这时 a 元素自身有个 b 元素，b 元素的 font-size 会从 a 元素继承过来，但继承的不是设置值 2em，而是 a 元素 font-size 的计算值，即计算之后的结果，比如计算出来的结果是 28px，那么 b 元素继承的也就是 28px，而不是设置的 2em

二. CSS属性的层叠 ​

  • CSS的翻译是层叠样式表，什么是层叠呢？
    • 对于一个元素来说，相同一个属性可以通过不同的选择器给它进行多次设置
    • 那么属性会被一层层覆盖上去，但是最终只有一个会生效
  • 那么多个样式覆盖上去，哪一个会生效呢？
    • 先判断选择器的权重，权重大的生效
    • 权重相同时，后设置的生效
    • 对于继承过来的属性，无论继承过来的属性所使用的权重多大，如果元素自身有设置该属性，一律使用自身设置的属性
  • 那么如何知道元素的权重呢？

三. 选择器的权重 ​

  • 按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）

    环境权重
    !important10000
    内联样式1000
    id选择器100
    类选择器、属性选择器、伪类10
    元素选择器、伪元素1
    通配符0
    选择器千位百位十位个位优先级
    h100010001
    h1 + p::first-letter00030003
    li > a[href*="en-US"] > .inline-warning 00220022
    #identifier01000100
    内联样式10001000

四. HTML元素的类型 ​

  • 在前面我们会经常提到div是块级元素会独占一行**, **span是行内级元素会在同一行显示
    • 到底什么是块级元素, 什么是行内级元素呢?
  • HTML定义元素类型的思路:
    • HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等
    • 当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢?
      • 为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的
    • 比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起
    • 比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起
    • 而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行
  • 所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:
    • 块级元素（block-level elements）：独占父元素的一行
    • 行内级元素（inline-level elements）：多个行内级元素可以在父元素的同一行中显示
      • 行内级非替换元素span
      • 行内级替换元素img /video
      • 行内块级元素inline-block

五. 通过CSS修改元素类型 ​

  • 前面我们说过，事实上元素没有本质的区别：

    • div是块级元素，span是行内级元素

    • div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已

      image-20220402213326822

    • 那么我们是否可以通过display来改变元素的特性呢?

    • 当然可以!

六. CSS属性display ​

  • CSS中有个display属性，能修改元素的显示类型，有4个常用值
    • block：让元素显示为块级元素
    • inline：让元素显示为行内级元素
    • inline-block：让元素同时具备行内级、块级元素的特征
    • none：隐藏元素，不会出现在渲染树上
  • 事实上display还有其他的值，比如flex，后续会专门学习
  • display不支持动画

七. display值的特性 ​

  • block元素：
    • 独占父元素的一行
    • 可设置宽高（设置宽后依然占父元素的一行，因为浏览器会自带把一行所剩下的距离会分配给该元素的margin）
    • 默认宽度是auto(父元素的一行)，默认高度是由内容决定的
    • 注意：当块级元素宽度是auto的时候（独占浏览器视图窗口一行），如果内容很多，且内容是不会自动换行的情况下，会将网页的内容撑开，导致浏览器水平方向出现滚动条
    • 为什么块级元素默认情况下独占一行呢？
    • https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
  • inline元素：
    • 跟同一父元素下的其他行内级元素在同一行显示
    • 不可设置宽高（img除外）
    • 宽高由其内容决定
  • inline-block元素：
    • 跟同一父元素下的其他行内级元素在同一行显示
    • 可设置宽高
    • 默认宽高由其内容决定

注意：

  • img属于inline元素，但是可以设置宽高
  • img是一个可替换元素，display默认inline
  • 但是img的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它像inline-block元素一样，可以设置margin、padding、border、width、height等CSS属性

八. 编写HTML时的注意事项 ​

  • 块级元素、inline-block元素
    • 一般情况下，可以包含其他任何元素（比如块级元素，行内级元素，inline-block元素）
    • 特殊情况，p元素不能包含其他块级元素（浏览器解析跟我们实际写的不一致）
    • a元素包含块级元素，设置背景色无效等，浏览器控制台调试看着a元素像是有宽高，实际是内部块级元素穿透出去的（解决办法，修改特性为块级元素或行内块级元素）
  • 行内级元素（比如a、span、strong等）
    • 一般情况下，只能包含行内级元素

九. 元素隐藏方法 ​

  • 方法一：

    • display：none
    • 元素不显示出来，也不占据位置（浏览器不会渲染出来），但是在html结构中是存在的

  • 方法二：

    • visibility：hidden
    • hidden：元素不可见，会挂载在渲染树上，因为会占据元素应该占据的位置
    • 默认值visible，元素是可见的

  • 方法三：

    • rgba设置颜色，将a的值设置为0
    • rgba的a设置的是alpha值，可以设置颜色透明度，不影响子元素
      • transparent关键字是rgba(0, 0, 0, 0)的简写

  • 方法四：

    • opactity：0
    • 设置整个元素的透明度，会影响所有子元素，仍然占据位置

十. CSS属性 - overflow ​

  • 用于控制内容溢出时的行为

    属性值作用
    visible(默认值)溢出的内容照样可见
    hidden溢出的内容裁剪掉
    scroll溢出的内容被裁剪，可以通过滚动条查看
    会一直显示滚动条，滚动条区域占用的空间属于width、height
    auto自动根据内容是否溢出来决定是否显示滚动条

十一. CSS样式不生效技巧 ​

  • 为何有时候编写的CSS属性不好使，有可能是因为
    • 选择器的优先级太低
    • 选择器没选中对应的元素
    • CSS属性的使用形式不对
      • 元素不支持此CSS属性，比如span行内级元素默认是不支持width和height的
      • 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
      • 被同类型的CSS属性覆盖，比如font覆盖font-size
  • 建议：
    • 充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

十二. CSS属性的计算过程 ​

案例：

html
<div>
  <h1 class="red"></h1>
</div>
css
<!-- 作者样式表 -->
.red {
  color: red;
  font-size: 40px;
}
h1 {
  font-size: 26px;
}
div h1.red {
  font-size: 3em;
  font-size: 30px;
}
css
<!-- 浏览器默认样式表 -->
h1 {
	display: block;
  font-size: 2em;
  font-weight: bold;
}

  1. 确定声明值

    • 找到没有冲突的样式，直接作为计算后的样式

    • 由此得出如下：

      属性计算值
      colorrgb(255,0,0)
      text-align?
      font-size?
      background-color?
      font-weight700
      displayblock
      其他CSS属性？

  2. 层叠

    1. 比较重要性
      • 重要性从高到底
        1. 带有!import的作者样式
        2. 带有!import的默认样式
        3. 作者样式
        4. 默认样式
    2. 比较特殊性
      • 即比较样式的权重
    3. 比较源码中的顺序
      • 后面的覆盖前面的

    • 由此得出如下：

      属性计算值
      colorrgb(255,0,0)
      text-align?
      font-size30px
      background-color?
      font-weight700
      displayblock
      其他CSS属性？

  3. 继承

    • 前面步骤走完，仍然没有值的属性，若这个属性默认可以继承，且父级有定义，则使用从父级继承的值

  4. 使用默认值

    • 如果属性既没有明确设置（作者+浏览器默认），也没有可以继承的，则使用属性的默认值

十三. inherit、initial、unset、revert、all ​

关键字作用
inherit使得元素获取其父元素该属性的计算值。它可以应用于任何 CSS属性
initial将属性的初始（或默认）值应用于元素。不应将初始值与浏览器样式表指定的值混淆
unset可以分为两种情况，
如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），
则将该属性重新设置为继承的值，
如果没有继承父级样式，则将该属性重新设置为初始值。
换句话说，在第一种情况下（继承属性）它的行为类似于inherit，
在第二种情况下（非继承属性）类似于initial。
它可以应用于任何CSS属性，包括CSS简写属性 all
revert将属性的级联值从其当前值还原为如果当前**样式源**未对当前元素进行任何更改，
该属性将具有的值。因此，如果属性从其父级继承，它会将属性重置为其继承值，
或者重置为由用户代理的样式表（或用户样式，如果存在）建立的默认值。
它可以应用于任何CSS属性，包括CSS简写属性 all

十四. CSS属性的计算值 ​

  • 指这个属性在由父类转向子类的继承中的值
  • 计算值所需要的计算通常包括将相对值转换成绝对值 (如em单位或百分比)。例如，如一个元素的属性值为 font-size:16px 和 padding-top:2em, 则 padding-top 的计算值为 32px (字体大小的 2 倍)
  • 然而，对于有些属性 (这些元素的百分比与需要布局确定后才能知道的值有关，如 width, margin-right, text-indent, 和 top)，它们的“百分比值”会转换成“百分比的计算值”。另外，line-height 属性值如果是没有单位的数字，则该值就是其计算值。这些计算值中的相对值会在 应用值 确定后转换成绝对值
  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value

十五. 应用值 ​

Released under the MIT License.

Copyright © 2024-present later-zc