理解CSS｜青训营笔记

Freaky_Forward
42 阅读5分钟

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

CSS是什么？有什么用？有哪些基本内容？

  • Cascading Style Sheets
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

如在在页面中使用CSS（三种方式）

image.png

CSS是如何工作的

image.png

选择器 Selector：

  • 用于找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素
    • 按照标签名、类名或id
    • 按照属性
    • 按照DOM树中的位置

image.png

注意： 样式优先级比较时，需要同层级比较，不能仅凭上图CSS权重直接相加进行比较。

小知识：MarkDown中也可以使用HTML表格语法，相比之下，使用HTML语法可以实现更多的样式。

一些基本的CSS属性

日常开发中，最常使用的color属性值模型是 RGB ，RGB的代码表示方法中，括号中的三个数分别表示红、绿、蓝中每一种的一个数量，这个数量是从0到255，但是用十六进制去表示，通过三原色的这些数值来混合，得到我们希望的颜色。

但十六进制的表示方式对我们而言不够直观，不够符合直觉，我们没法将数值和颜色关联起来，直接判断。HSL模型就是一个在这方面的改进。它通过把我们颜色的三方面的属性，单独领出来形成一个颜色，即下图。

image-20220725211857013.png

「HSL的好处在于，相比于RGB，可读性会更好一些。」

补充：写CSS属性时，RGB的表达函数：rgb(x,x,x)或rgba(x,x,x,x)这的a表示开启alpha通达，比使用rgb函数时多一个参数，这个参数表示透明度，值范围为 ：0～1。

深入理解CSS

理解继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值。
inherit表示显式地从父级继承，可以让一个原来不能继承的变成可继承。

image.png

初始值

  • CSS中，每个属性都有一个初始值
  • 可以使用initial关键字显式重置为初始值
    • background-color：initial

image.png

CSS的求值过程

值得了解：这是理解CSS样式优先级计算的一个关键

image.png

布局

布局是什么

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

  • 常规流
    • 行级
    • 块级
    • 表格布局
    • FlexBox
    • Grid布局
  • 浮动
  • 绝对定位

标准盒模型

image-20220725220259137.png

width

  • 指定content box 宽度
  • 取值为长度、百分、auto
  • auto由浏览器根据其它属性确定
  • 百分数相对于容器的content box 宽度

height

  • 指定content box 高度
  • 取值为长度、百分数、auto
  • auto取值由内容计算的来
  • 百分数相对于容器的content box 高度
  • 容器有指定的高度时，百分数才生效

image.png

padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

border

  • 指定容器边框样式、粗细和颜色

image-20220725220649486.png

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

块级与行级

display

  • block 块级盒子
  • inline 行级盒子
  • inline-block 本身是行级，可以放在行级盒子中；可以设置宽高；作为一个整体，不会被拆散成多行
  • none 排版时完全被忽略

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局
    • 行级排版上下文
    • 块级排版上下文
    • Table排版上下文
    • Flex排版上下文
    • Grid排版上下文

行级排版上下文

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

块级排版上下文

  • Block Formatting Context（BFC）
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块级盒子
    • display： flow-root；

BFC内的排版规则

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

Flex Box是什么

  • 一种新的排版上下文
  • 它可以控制子集盒子
    • 摆放的流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许拆行

position：

  • relative： 在文档流中布局，相对于自己本来的位置进行偏移，使用top、left等进行偏移，不受流内其他元素的影响。
  • absolute：脱离文档流，相对于最近的非static祖先定位，不会对流内元素布局造成影响。
  • fixed：脱离文档流，位置总是相对于视口固定
  • sticky：粘性布局，元素首先会被相对定位，直到在视口中遇到给定的偏移值为止，之后固定在适合的位置。
avatar
文章
阅读
粉丝