第二节 理解CSS | 青训营笔记

Mayonnaise
55 阅读4分钟

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

字节青训营第二节课程讲师深入浅出CSS，对部分CSS属性和常见的布局进行了介绍，对于巩固前端基础css具有很大的帮助。

认识CSS

CSS的三种引入方式

  1. 内联
<div style="width: 100px"></div>
  1. 嵌入
<style>
  div {
      width: 100px;
      height: 100px;
  }
</style>
  1. 外链
<link rel="stylesheet" href="/src/myStyle.css">

推荐使用嵌入或者外链的方式引入css，避免使用内联样式，保持css各司其职的原则。

CSS选择器

  1. 标签选择器
    选中所有对应的标签，例如：
div {
    color: #fff;
}
  1. id选择器
    #标识，选中设置了id属性的元素，原则上同一id应该只能设置在一个元素上。
#myId {
   color: #fff;
}
  1. 类选择器
    .标识，选中设置了响应类名的元素，同一className可以应用在多个元素上。
.myClassName {
   color: #fff;
}
  1. 属性选择器
    选择具有某属性的标签。
<a href="#demo.html"></a>
<input type="password" />

<style>
    input[type="password"]{
        color: red;
    }
    a[href ^= "#"]{
    }
    a[href $= ".jpg"]{
    }
</style>
  1. 通配选择器
    匹配所有，*选择器。
* {
   box-sizing: border-box;
}
  1. 伪类选择器

伪类选择器有状态伪类选择器 和 结构伪类选择器。

  • 状态伪类选择器
    | 选择器 | 描述 | |---|---| | :link | 匹配所有未被访问的链接 | | :active | 匹配被点击的链接 | | :hover | 匹配鼠标悬停其上的元素 | | :visited | 匹配已访问过的链接 | | ... | ... |
  • 结构伪类选择器
    | 选择器 | 描述 | |---|---| | :first-child | 匹配父元素中的第一个子元素 | | :last-child | 匹配父元素中的最后一个子元素 | | :nth-child(n) | 匹配父元素中的第n个子元素 | | ... | ... |
  1. 选择器组
    通过,隔开多个选择器，控制他们一致的样式。
<style>
body, 
html,
p,
ul {
  margin: 0;
  padding: 0;
}
</style>
  1. 选择器组合
    image.png

CSS样式优先级

CSS的样式优先级决定了在多条样式规则重叠时，浏览器将渲染哪一条样式规则。首先考虑样式引入方式的优先级，内联样式优先于内嵌样式优先于外链样式。 考虑选择器优先级（选择器特异度 Sepicifity）。

image.png id > 伪类 > 标签，在计算优先级时，累计同阶选择器的特异度再进行比较即可。

CSS布局

布局（Layout），用以确定页面内容大小和位置的算法。
image.png

盒模型

  1. 标准盒模型 content-box image.png

  2. 怪异盒模型 border-box image.png

行级排版上下文 IFC

lnline Formatting Context (IFC)

  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素*

块级排版上下文 BFC

Block Formatting Context (BFC)

  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block-Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display: flow-root;
  • BFC内的排版规则
    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

position

position定位，可以实现页面元素的灵位位置控制。

Position valuedescription
static默认值，非定位元素
relative相对自身原本位置偏移，不脱离文档流
absolute绝对定位，相对非static祖先元素定位
fixed相对于视口绝对定位

float

  • 实现文字围绕图片效果
  • 建议使用定位或者弹性盒子flex替代实现float的相关布局

flex布局

  • 一种新的排版上下文
  • 它可以控制子级盒子的:
    • 摆放的流向(→t ↓)摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行


关于flex布局的详细教程请参考MDN文档 flex 布局的基本概念 - CSS（层叠样式表） | MDN (mozilla.org)

Grid布局

网格布局，一种灵活的二维布局方案。直观上将页面划分为多个区域，控制各单元的大小位置样式。 关于Grid布局的详细教程请参考MDN文档 grid - CSS（层叠样式表） | MDN (mozilla.org)

总结

本次课程学习了css的相关知识，介绍了css的一些基础特性和布局方案。在写css代码时，我们应该要关注到css的样式优先级，从而避免样式覆盖的错误；了解css的渲染规则将有助于我们编写简洁高效的代码，例如在使用了百分比的值时，是需要给元素本身或者父级设置固定值大小的；在设置文本属性font-family时，英文字体应该写在中文字体前，避免渲染时首先渲染成为中文字体而忽视预设置的英文字体。
掌握css相关的布局，灵活使用flex和Grid布局，有助于我们高效地实现页面的常见布局，但是也要考虑到css新特性的兼容性，必要时可以使用定位来代替。

avatar
文章
阅读
粉丝