HTML 和 CSS丨青训营笔记

用户448431129087
69 阅读5分钟

HTML 和 CSS丨青训营笔记

这是我参与「第四届青训营 - 前端场」笔记创作活动的第3天。

一、什么是前端

全程“Web 前端开发”， 使用 Web 技术栈解决图形界面下的人机交互的问题。

二、HTML

HTML：HyperText Markup Language

HTML 称为超文本标记语言，是一种标记语言。

HTML 语义化

根据内容的结构选择合适的标签，便于阅读并且使代码更加优雅。

为什么要语义化

  • 使页面能呈现出很好地“内容结构、代码结构”。
  • 有利于维护代码和添加样式。
  • 方便其他设备解析。
  • 提升搜索引擎优化(SEO)的效果。
  • 有利于构建清晰的结构，有利于团队的开发、维护。
  • 通常语义化 HTML 会使代码变的更少，使页面加载更快。

如何做到语义化

  • 了解每个标签和属性的含义。
  • 思考什么标签最适合描述这个内容。
  • 不适用可视化工具生成代码。

HTML 传达内容，而不是样式

三、CSS

CSS：Cascading Style Sheets

CSS 称为层叠样式表。

CSS 是如何工作的

当浏览器加载 HTML 后， 解析 HTML 的同时会加载 CSS，加载后进行解析，随后与 HTML 一起创建 DOM 树，CSS 添加样式到 DOM 节点，DOM 将 HTML 与 CSS 结合在一起后，浏览器就展示其内容。

CSS 中 ID 与 class 的区别

ID是唯一的，class不是唯一的。

每个元素仅可有一个ID，且每个页面仅可有一个元素拥有这个ID。

相同的类可以在多个元素中使用，也可以使用多个类在一个元素

  • 在写 CSS 时，使用ID是加“#”， 使用类是加“.”。

选择器的特异度（Specificity）

高优先级的样式可以覆盖低优先级的样式

权重排行（由高到低）

  1. 行内样式
（!important）
  1. ID 选择器
#id
  1. class、属性、伪类选择器
.title, input[type = "text"], :hover
  1. 类型、伪元素选择器
div, ::before

权重向量

(0, 0, 0, 0)
(行内样式，ID选择器，class/属性/伪类选择器，类型/伪元素)

注意：权重相同时，后定义的优先。

CSS继承

为 HTML 中的某个元素赋予 CSS 样式时，有些样式不仅会影响当前元素，还会影响该元素的子元素。

下层子元素继承上层祖先元素样式属性的特点就称为 CSS 继承。

继承的作用

继承能够方便开发，利用继承可以简化 CSS 样式的使用。

注意：背景相关、布局相关的样式不会被继承

CSS 的求值过程

常规流

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

行级排版上下文

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 不会和浮动元素重叠

Flexbox

Flexbox 是 flexible box 的简称，是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局.

表现
  • 在不同方向排列元素
  • 重新排列元素的显示顺序
  • 更改元素的对齐方式
  • 动态地将元素装入容器
可以控制
  • 摆放的流向( → ← ↑ ↓ )
  • 摆放顺序
  • 盒子的高度和宽度
  • 水平和垂直方向的对齐
  • 是否运行折行
主轴与侧轴

Flexibility

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩

  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

Grid

Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局

每个 Grid 布局都有隐藏的网格线，用来帮助定位

网格布局(grid)是最强大的布局方案, 但是知识点比较多, 学习成本相对较高, 目前兼容性不如 Flex 布局

四、随手记

  • <cite>：引用别人的文章
[attr ~= value]用于选取属性值中包含指定词汇的元素。
[attr ^= value]匹配属性值以指定值开头的每个元素。
[attr $= value]匹配属性值以指定值结尾的每个元素。
[attr *= value]匹配属性值中包含指定值的每个元素。
  • HSL：(hue, saturation, lightness)

色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。

饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。

亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。

  • alpha: 设置元素的不透明度
  • line-height: 没有单位时表示自身字体大小的倍数
  • height： 容器有指定的高度时，百分数才生效

如有问题欢迎指正。

avatar
文章
阅读
粉丝