给 21FEer 准备例会时拟的大纲，感觉也算是 CSS 入门笔记了。于是抄送一份到博客。

Emmet 语法

一些缩写的快捷键，输入完需要按 tab。不需要死记硬背，输入你需要的属性的开头字母就好了
以下仅为一些示例，可以自己探索其他缩写及其组合

html

以 div 为例，其他元素同理

  • div -> <div></div>
  • div+p -> <div></div><p></p>
  • div.app -> <div class="app"></div>
  • div#app -> <div id="app></div>
  • img[src=”./images/drop.jpg”] -> <img src="./images/drop.jpg" alt="">
  • div*8 ->生成 8 个 div
  • div*8{文字} -> 生成 8 个内容为’文字’的 div
  • div*8{$} -> 生成8个div，内容依次从1到8($是自增符号)
  • div>li -> <div><li></li></div>

css

  • bgc -> background-color:
  • ti -> text-indent:
  • w100p -> width:100%
  • w100p+h100p -> width:100%;height:100%;
  • jcc -> justify-content: center;
  • aic -> align-items: center;
  • df -> display: flex;
  • poa -> position: absolute;

标签语义化

  • https://www.jianshu.com/p/8ffb01ce77e4
    代码结构清晰，方便阅读，有利于团队合作开发；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

css 选择器

常见选择器

  • class 选择器
    由于 class 可以同时为多个元素命名，因此常用于设置重复样式
<style>
  .demo {
    /* css */
  }
</style>
<div class="demo"></div>
  • id 选择器
id仅能为一个元素命名。可以使用id来特殊标识某个模块，然后定位其后代元素来为其后代设置特别的样式
<style>
  #demo div {
    /* css */
  }
</style>
<div id="demo">
  <div></div>
</div>
  • 通配符选择器*
    通配符选择器用于选中所有元素，为之设置初始样式
    因为不同浏览器对元素的默认样式设置有差别，所以会用*来重置元素的默认样式
<style>
  * {
    /* css */
  }
</style>
<div class="demo"></div>
  • 子元素选择器>
    仅作用于最近一层的后代元素
<style>
  .demo > div {
    color: black;
  }
</style>
<div class="demo">
  <div>
    color会作用在这一层
    <div>样式不会在这层生效</div>
  </div>
</div>
  • 后代元素选择器
    选中所有内层嵌套的元素
<style>
  .demo div {
    color: black;
  }
</style>
<div class="demo">
  <div>
    color会作用在这一层
    <div>样式在这层也生效</div>
  </div>
</div>

伪类

锚伪类

  1. a:link 未访问的链接样式选择器
  2. a:visited 已访问的连接样式选择器
  3. a:hover 鼠标移动到链接时的样式选择器
  4. a:active 选定的链接的样式选择器

focus

:focus 用于选中获取焦点的表单元素

input:focus {
  background-color: yellow;
}

结构伪类

结构伪类选择器主要根据文档结构来选择特定序号的子元素

  • 常见结构伪类
    选择符
    E:first-child 若父元素中第一个子元素为类型 E，则匹配
    E:last-child 若父元素中最后一个子元素为类型 E，则匹配
    E:nth-child(n) 若父元素中第 n 个子元素为类型 E，则匹配
    E:first-of-type 匹配父元素第一个类型为 E 的元素
    E:last-of-type 匹配父元素最后一个类型为 E 的元素
    E:nth-of-type(n) 匹配父元素第 n 个类型为 E 的元素

特别地，当n为odd时，选中排序为奇数的元素；当n为even时，选中排序为偶数的元素

  • nth-of-type(n)和 nth-child(n)的区别
    nth-of-type(n)是将所有符合指定元素类别的子元素选出来，并选中其中的第 n 个
    nth-child(n)是将所有子元素选出来并选中其中第 n 个子元素。若此子元素与指定元素类别不同，则不会选中该元素
<style>
  #app div:nth-of-type(1) {
    /* 会作用在第一个子代div上 */
    color: red;
  }
  #app div:nth-child(1) {
    /* 由于#app第一个子元素是p，所以该样式不生效 */
    color: blue;
  }
</style>
<div id="app">
  <p>1</p>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

伪元素(::before/::after)

伪元素选择器可以用 css 创建新标签元素，而不需要在 html 中额外添加标签，从而简化 html 结构；新创建的元素在文档树中找不到
::before 是在选中元素内容的前面插入内容
::after 是在选中元素内容的后面插入内容
需要注意的是，::before 和::after 必须添加 content 属性。如果不需要文字内容，可以直接content:''

<style>
  div::before {
    content: 'before';
  }
  div::after {
    content: 'after';
  }
</style>
<div>main</div>
<!-- 显示效果等同于<div>before main after</div> -->

css 三大特性

层叠性

当选择器相同时，两个选择器均设置同一样式，此时遵循后来居上的原则，靠后的样式覆盖靠前的样式

<style>
  .app {
    background-color: #fff;
  }
  .app {
    /* 优先显示该样式 */
    background-color: red;
  }
</style>
<div class="app"></div>

继承性

子标签会继承父标签的某些样式，比如 text-/font-/line-开头的属性

<style>
  .app {
    font-size: 1.5rem;
  }
</style>
<div class="app">
  <!-- demo会继承1.5rem的字号 -->
  <div class="demo"></div>
</div>

优先级

当同一文档元素被多个选择器指定，其中部分样式产生冲突，则由选择器优先级决定哪个样式生效
选择器权重相同，执行层叠性；选择器权重不同，权重高的选择器样式先生效
ps. vscode 里，鼠标悬停在 css 选择器上的时候会显示该选择器的 Selector Specificity，暂时记不住怎么算可以直接看那个

选择器 权重
继承 (0, 0, 0, 0)
元素选择器 (0, 0, 0, 1)
类选择器/伪类选择器 (0, 0, 1, 0)
ID 选择器 (0, 1, 0, 0)
行内样式 (1, 0, 0, 0)
!important ≈∞

Tips

  1. 继承的权重是 0。如果该元素没被直接选中，不管父元素选择器作用到父元素的权重多高，子元素继承的样式权重永远是(0, 0, 0, 0）
<style>
  #father {
    color: red !important;
  }
  p {
    color: blue;
  }
</style>
<div id="father">
  <p>这里的颜色会显示blue而不是red</p>
</div>
  1. 复合选择器会有权重叠加，但不会进位
<style>
  /* 11个class选择器叠加，权重为(0,0,11,0)，不会进位为(0,1,1,0) */
  .a.b.c.d.e.f.g.h.i.j.k {
    color: red;
  }
  /* 1个id选择器，权重为(0,1,0,0) */
  #app {
    color: black;
  }
</style>
<div class="a b c d e f g h i j k" id="app">
  这里是id选择器指定的样式生效，显示的字体颜色为black
</div>

元素的显示模式

可以对元素设置display属性值改变其显示模式

块级元素

对应 css 的display属性值为block

  • 特点
  1. 独占一行，宽度默认为父级元素宽度的 100%
  2. 可以控制height/width/margin/padding
  • 部分块级元素列举
    <h1>-<h6>/<p>/<div>/<ul>/<ol>/<li>

行内元素

对应 css 的display属性值为inline

  • 特点
  1. 相邻行内/行内块元素排列在一行上，并不会独占一行，默认宽高按元素内容
  2. 不可以直接设置height/width，除非将其display属性设置为inline-block或block
  • 部分行内元素列举
    <a>/<strong>/<b>/<em>/<i>/<del>/<s>/<ins>/<u>/<span>

行内块元素

对应 css 的display属性值为inline-block

  • 特点
  1. 相邻行内/行内块元素排列在一行上，并不会独占一行，默认宽高按元素内容
  2. 可以控制height/width/margin/padding
  • 部分行内块元素列举
    <img/>/<input/>/<td>

盒子模型

content

为文字主体内容的空间大小
默认情况(即box-sizing:content-box;)下，width和height均作用于content

padding

为文字主体内容与边框的间距，也称内间距
默认情况(即box-sizing:content-box;)下，width和height不会将padding的宽度算入
如果需要把padding的宽度值计算入width和height，需要将该元素的box-sizing的属性值变更为border-box

border

设置边框的样式
直接设置border属性时，需要同时指定宽度、样式和颜色，比如1px solid #000，否则边框样式不生效
默认情况(即box-sizing:content-box;)下，width和height不会包括border的宽度
如果需要把border的宽度值计算入width和height，需要将该元素的box-sizing的属性值变更为border-box

margin

设置元素边框外的部分与其他元素的间距，也称外间距，用于调整相邻元素之间的间距，也可以通过调整特定方向的外间距进行元素定位

定位

absolute

position属性值为absolute属性的元素会脱离文档流，覆盖其他元素或被其他元素覆盖

  1. 元素具有top/left/right/bottom属性
    该元素会以最近一级设置了定位的父元素为基准，设置其边界与定位父元素边界的距离
  2. 元素没有top/left/right/bottom属性
    该元素在文档中所处的位置，与原来没有设置absolute属性时的文档位置相同。
    此时如果想对元素位置进行偏移，可以利用margin-left和margin-top模拟left和top的偏移量

relative

通常与定位为absolute的元素一起出现。一般会给设置了top/bottom/right/left的absolute元素外面套一个定位属性为relative的父元素，方便对absolute元素进行定位

fixed

可以理解为父元素永远为根元素的absolute元素，性质与absolute相似，可以用于返回顶部等需要将元素固定在页面某一处的场景

布局

现阶段需要会使用 flex 布局，并且建议更多地使用 rem/em/vh/vw/%作为单位。grid 和 float 布局可以作为了解

float

float属性会使元素脱离文档流。常见用法是作用在img上，使p元素里的文字围绕图片进行摆放，形成文字环绕图片效果
因为float会影响其他元素的布局，常在 float 布局区后添加一个属性值带有clear:both的块级元素，用于清除float带来的影响

rem / em / vh / vw / %单位的使用

  • rem
    rem 是相对于根元素字体大小的单位
  • em
    em 是相对于当前对象内文本的字体尺寸
  • vh
    1vh 指屏幕高度的百分之一
  • vw
    1vw 指屏幕宽度的百分之一

flex

flex 布局也称弹性布局，是当前比较主流的布局方式

<style>
  /* 作用在父元素上的属性 */
  #app {
    /* 声明该容器布局为flex */
    display: flex;
    /* 进行一个布局方向的定义。默认值为row。row为按列正序排布，column为按行正序排布；row-reverse为按列逆序排布 */
    flex-direction: column;
    /* #app子元素整体在水平方向上的排布位置 */
    justify-content: space-between;
    /* #app所有子元素在各自空间范围内竖直方向上的排布方式 */
    align-items: center;
  }
  /* 作用在子元素上的属性 */
  #app > div:first-child {
    /* 单独设置该元素在水平方向上的排布方式 */
    justify-self: center;
    /* 单独设置该元素在竖直方向上的排布方式 */
    align-self: center;
  }
</style>
<div id="app">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

grid

grid 布局也称栅格布局，对 IE 的兼容不友好
主要思想是把父元素分成 mxn 的栅格，将子元素填入栅格进行布局

<style>
  #app {
    /* 声明该容器的布局方式为grid */
    display: grid;
    /* 设置该容器水平方向上的格子数，并且同时设置了每行格子的宽度 */
    grid-template-columns: repeat(3, 100px);
    /* 设置该容器竖直方向上的格子数，并且同时设置了每列格子的高度 */
    grid-template-rows: repeat(2, 200px);
    /* 设置栅格整体的对齐方式，与flex一样 */
    justify-content: center;
    /* 设置栅格所有内部元素在竖直方向上的对齐方式 */
    align-items: center;
  }
  #app > div:first-child {
    /* 设置该小栅格在水平方向上的位置范围，1/span 3是指“栅格从第一条线开始偏移三个格子”为该元素的位置 */
    grid-column: 1 / span 3;
    /* 设置该小栅格在竖直方向上的位置范围。2/3是指“栅格从第二条线到第三条线之间的格子”为该元素的位置 */
    grid-row: 2/3;
    /* 单独设置该元素在水平方向上的排布方式 */
    justify-self: center;
    /* 单独设置该元素在竖直方向上的排布方式 */
    align-self: center;
  }
</style>
<div id="app">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>