[理解CSS | 青训营笔记]

库库好好学习
100 阅读5分钟

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

课程介绍

CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。本节课旨在通过对 CSS 的工作流程及原理、页面中 CSS 使用方法等详细解读，帮助前端新手建立对 CSS 的全面而深刻的认知。

课程重点

  1. CSS 代码构成
  2. CSS 使用方法
  3. CSS 流程之选择器组、文本渲染
  4. 调试 CSS

一、CSS是什么

Cascading Style Sheets层叠样式表，用来定义页面元素的样式。

h1 {                  //选择器Selector
    color:while;      //声明Declaration（选择器Property：属性值Value）
    font-size:14px;   
}

二、在页面中使用CSS

三种方式，推荐外联，ui组件库可能会使用内联
image.png

三、CSS是如何工作的

image.png

四、选择器

1. 按照dom树中位置

2. 通配选择器，*选中所有

3. id选择器，#id，id需要为唯一值

4. 类选择器，.class

5. 属性选择器，[disabled]

image.png
^指以#开头，$指以.jpg结尾

6. 伪类

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

  1. 状态性伪类
    image.png
  2. 结构性伪类
    image.png

7. 组合选择器

image.png

8. 选择器组

用逗号隔开

五、颜色

RGB表示：#000000，rgb(0,0,0)
HSL表示：H色相，S饱和度，L亮度，hsl(18,91%,84%)
名称表示：black，white
透明度alpha：1不透明，0完全透明，rgba(255,0,0,0.47)，hsla(18,91%,84%,0.47)

六、字体

1.font-family

image.png 为什么设置多个：不同设备可能能使用的字体不一样，给多种选择。
serif/sans-serif：通用字体组，表示一种风格，必须要加。
image.png 下载字体：web-fonts，性能开销
image.png

2.font-size

  • 关键字
    small、medium、large
  • 长度
    px、em
  • 百分数
    相对父元素字体大小

3.font-style

normal斜体

4.font-weight

字重，normal400，bold700。

5.line-height

行高，两行文字的距离

6.text-align

7.white-space

html中空格和换行会被合并为一个，white-space解决这个问题。
normal、nowrap、pre、pre-wrap、pre-line

七、调试css

右击页面选择检查。
使用快捷键Crtl+Shift+I。

课程介绍

在了解 CSS 基本原理后，本节课进一步深入讨论，通过具体案例对于选择器的特异度展开讲解，在此基础上进一步引出 CSS 继承与布局的话题，对其定义及相关技术分别作出介绍。

课程重点

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

一、选择器的优先值/特异度

id>类>标签

二、复用和继承

  1. 复用
    image.png
  2. 继承
    image.png 显式继承：inherit，让原本不可继承的变为可继承
  3. 初始值
    CSS中每个属性都有一个初始值，可以用initial关键字显式重置为初始值。

三、CSS的求值过程

image.png

四、布局Layout

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

  1. 常规流
  • 行级、块级、表格布局、flexbox、grid布局。
  • 盒模型
    标准盒content-box 默认情况下指定宽高，指定的是content-box的宽高。取值为长度、百分数、auto。
    width：auto由浏览器根据其他属性确定，百分数相对于容器的content box的宽度。
    height：auto由内容计算得来，百分数相对容器content box，容器有指定高度时，百分数才生效。
    image.png
  • 内边距padding
    image.png image.png
  • 边框border
    image.png
  • 外边距margin
    四个方向，长度、百分数、auto，百分数相对于容器宽度。
    使用margin：auto实现水平居中：
    image.png
    margin collapse：margin塌陷，相邻盒子都有margin时，取其中较大的值。用浮动解决。
  • 怪异盒
    box-size：border-box
    默认情况下指定宽高，指定的是border-box的宽高。 image.png
  • overflow
    image.png
    内容超出盒子范围。visible/hidden/scroll。
  • 块级/行级
    块级不和其他盒子并排摆放，要独占一行，行级可以一起放。
    块级适用所有的盒模型属性，行级的width、height不适用，由其中的内容决定。 image.png
    image.png
  • 常规流规则
    根元素、浮动和绝对定位的元素会脱离常规流。
  • 行级排版上下文 IFC
    只包含行级盒子，盒子在一行内水平摆放，一行放不下换行显示，text-align决定一行内盒子的水平对齐，vertical-align决定行内垂直对齐，避开浮动元素。
    image.png
    overflow-wrap解决单词过长问题，超出容器范围会换行。
  • 块级排版上下文 BFC
    image.png
    image.png
  • 应用
    一个盒子里不允许又有块级又有行级，如下分为三个盒子。
    image.png
  • flex box
    一种新的排版上下文，可以控制子级盒子的摆放流向、顺序，盒子宽高，水平和垂直方向的对齐，是否运行换行。不再遵循bfc、ifc。
    display：flex
    流向flex-direction：row，row-reverse，colomn，colomn-reverse。
    image.png
    主轴对齐：
    image.png
    侧轴对齐：
    image.png
    image.png
    image.png
  • flexibility
    设置子项的弹性：当容器有剩余空间时会伸展；空间不够时收缩。
    flex-grow有剩余空间时的伸展能力。
    flex-shrink容器空间不足时收缩的能力。
    flex-basis没有伸展或收缩时的基础长度。
    可以缩写为一个flex属性：
    image.png
  • grid布局
    image.png
    image.png
    image.png
    image.png
    image.png
    fr：fragment，将剩余区域划分份数。
  • grid-area
    image.png
    image.png
  1. 浮动float
    image.png
  2. 绝对定位
    position属性
  • static默认。非定位元素。
  • relative相对于自身原本位置偏移，不脱离文档流。 image.png
  • absolute绝对定位，相对非static祖先元素定位，脱离常规流，其他元素当他不存在。
    image.png
  • fixed相对于视口定位。 导航栏。页面怎么滚动，导航栏一直固定在上部。
avatar
文章
阅读
粉丝