理解CSS | 青训营笔记

江漓Jeffrey
109 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

本堂课重点内容

* CSS 代码构成

* CSS 使用方法
* CSS 流程之选择器组、文本渲染
* 调试 CSS

2.

* CSS 选择器的特异度
* CSS 继承
* CSS 求值过程解析
* CSS 布局方式及相关技术

3.

* CSS 盒模型 - 行级
* CSS 盒模型 - 块级

详细知识点

01CSS的使用

  1. 外链：引入外部样式表，方便维护，推荐
  2. 嵌入：style标签内
  3. 内联：不方便维护，但也用使用的情况

02工作原理

从HTML构建出来的DOM树与从CSS构建出来CSSOM相结合形成渲染树，在渲染引擎的作用下绘制出页面。

image.png

03选择器

id/类/标签/通配选择器都比较常见，而以下是几种不常见的选择器：

  • 属性选择器 属性选择器用于为带有特定属性的 HTML 元素设置样式，比如我们给一个带有disabled属性的元素设置样式：

    <style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

    更多：

    [attribute="value"] 选择器用于选取带有指定属性和值的元素

    [attribute~="value"] 选择器选取属性值包含指定词的元素

    [attribute|="value"] 选择器用于选取指定属性以指定值开头的元素

    [attribute^="value"] 选择器用于选取指定属性以指定值开头的元素

    [attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素

    [attribute*="value"] 选择器选取属性值包含指定词的元素

  • 伪类

    不基于标签和属性定位元素

    1. 状态伪类：元素处于某种特定状态才会被选择到，如 a:link选择所有未访问链接

      a:visited选择所有访问过的链接

    2. 结构性伪类：根据DOM节点在DOM树的位置进行选择，如 p:last-child选择所有p元素的最后一个子元素

      p:nth-last-of-type(2)选择所有p元素倒数的第二个子元素

      p:nth-child(2)选择所有 p 元素的父元素的第二个子元素

  • 选择器组合image.png

  • 选择器组

    body,h1,h2,ul,il{}
[type="checkbox"],[type="radio"]{}

04颜色

  • RGB:
    （红，绿，蓝）三种颜色的集合，最低值是0（十六进制00）到最高值255（十六进制FF）
  • HSL:
    H色相（0-360），S饱和度（百分比），L亮度（百分比）
  • （不）透明度 :
    rgba、hsla （新版浏览器可不写a，直接写4个值）

05字体

字体族font-family：由于不同设备的字体安装情况不一样，font-family 属性应该设置几个字体名称作为一种"后备"机制，如果 浏览器不支持第一种字体，他将尝试下一种字体。

font-family使用建议：1.字体列表最后写上通用字体族 2.英文字体放在中文字体前面

Web Fonts ：浏览器下载相应字体再去渲染（带来性能开销）
font-size/style/weight：字体样式

06line-height

行间距（letter-spacing字母间间距，word-spacing 单词间距 ）

值描述
normal默认。设置合理的行间距。
number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length设置固定的行间距。
%基于当前字体尺寸的百分比行间距。
inherit规定应该从父元素继承 line-height 属性的值。

07选择器的特异度

越特殊的的选择器优先级越高，大聪明做法：122>22

image.png

开发中的故意覆盖：

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>

<style>
.btn {
	//一些基础样式
  }
  .btn.primary {
    //特殊样式
  }
</style>

08继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

显性继承：强行继承，比如*{box-sizing:inherit}

CSS中每个属性都有一个初始值，initial关键字显式重置初始值

09CSS求值过程

image-20230116142355-bi3ol7z.png

10布局Layout

常规流：行级、块级、表格布局、FlexBox、Grid布局

浮动

绝对定位

10IFC与BFC

  1. Inline Formatting Context (IFC) 只包含行级盒子的容器会创建一个IFC IFC 内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素

  2. Block Formatting Context (BFC)

    某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;

    BFC 内的排版规则

    • 盒子从上到下摆放
    • 垂直 margin 合并
    • BFC 内盒子的 margin 不会与外面的合并
    • BFC 不会和浮动元素重叠

课后个人总结

通过这堂课，我学习到很多CSS知识，特别是盒模型这样核心的东西。在我看来，HTML只是一个干枯是支架，唯有在CSS的装饰下才可以焕发光彩。希望自己以后能在CSS世界里探索出更多有趣的东西！

参考

CSS教程|菜鸟教程

avatar
文章
阅读
粉丝