HTML+CSS ｜ 青训营笔记

SaraiNoQ
140 阅读5分钟

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

HTML部分

📌 图形界面下人机交流的问题。

页面要求

  • 功能
  • 美观
  • 无障碍
  • 性能
  • 安全
  • 兼容：PC、mobile
  • 用户体验

DOM Tree

html

  • lang属性：设置页面语言

  • head

    • title：页面标题

    • meta：元数据（name-content）

      • charset：设置字符编码
      • description：添加作者和描述优化SEO结果、）

    • link

      • icon
      • css

    • script（optional）

      • defer告诉浏览器在解析完成 HTML 后再加载 JavaScript

  • body

HTML语法

  • 不区分大小写！
  • 空标签可以不闭合，如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，如required、readonly

List

ol（order list）：有序列表

ul（un-order list）：无序列表

dl：定义列表

  • dt：defination title
  • dd：defitation description

Link

  • href：跳转地址
  • target=“_blank”：新窗口打开

Input

引用

  • blockquote：长引用
  • cite：段引用

代码

  • pre：保留html原始键入
  • code：代码

📌 HTML → HTML5：语义化

语义化的好处？

  • 代码可读性
  • 可维护性
  • 搜索引擎优化（SEO）
  • 提升无障碍性

Q：服务端渲染（SSR）优化

A：bundle.js在服务器本地加载

Q：组件化怎么做SEO

Q：SEO优化场景

内外链接

提升搜索权限

Q：怪异模式

box-sizing不同：

  • 标准模式box-sizing: content-box;
  • 怪异模式box-sizing: border-box;

CSS

基础

Work Flow

css-work-flow.png

Selector

  • 通配选择器

  • 标签选择器

  • id选择器

  • 属性选择器（可使用正则）

  • 伪类选择器

    • 状态伪类（鼠标聚焦？按钮激活？）
    • 结构伪类

Combinators

  • 直接组合（AB）：同时满足
  • 后代组合（A B）：选中A的子孙B
  • 亲子组合（A>B）：选中A的子元素B
  • 兄弟选择器（A~B）：选中A后与A同级的B
  • 相邻选择器（A+B）：选中紧邻A的B

Specificity

id > (pseudo)class > label

颜色表示

  • 16进制-rgb
  • rgba
  • hsla（适用于颜色明亮变化）

font-family

写多个字体，避免多种设备不存在该字体，提高兼容性。

在字体族属性最后一定记得加通用字体族。

英文字符的字体放在前面。因为中文字体中包含英文字符。

offical-font-family.png

Web Fonts

使用服务器上的字体。可能会有性能和跨域问题。

(转)CSS3 @font-face - _成飞 - 博客园 (cnblogs.com)

@font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }

font属性

font-size: [style] [weight] size[/height] family

spacing

  • letter-spacing：字间距（eng）
  • word-spacing：词间距（eng/zh）

white-space

  • normal：正常
  • nowrap：不换行
  • pre：源形式
  • pre-wrap：保留
  • pre-line：保留换行，没有空格

Q:CSS预处理？

Q:CSS如何挂载到DOM Tree中？

Q:CSS Module？

作用域问题-隔离

加父子选择器

深入

继承 inherit

css中与文字相关的一般都可继承，与盒子模型有关的一般不可继承。

显示继承

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing: content-box;
}

初始值 initial

CSS 中，每个属性都有一个初始值

resolving：分析css context可以计算出具体结果的。

formatting：需要知道实际环境才可计算出结果。

box-sizing属性

border-box：

box-sizing.png

content-box: 宽高等于content的宽高

行级排版上下文（IFC）

  • 只包含行级盒子的容器会创建一个IFC

  • IFC 内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素*

ifc.png

块级排版上下文（BFC）

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;

  • BFC 内的排版规则

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

bfc.png

块级元素和行级元素在同一个父元素中：

css渲染引擎生成匿名块元素包裹行级元素。

Q:飞书水印的实现

遮罩层

o.s. 使用一个div，设置宽度和高度为100vw和100vh，采用position: fix;布局。然后设置div为透明，使用background-image重复排版水印。

Q:原子化CSS

e.g. tailwindcss

(10条消息) 重新构想原子化 CSS_若川视野的博客-CSDN博客

Q:响应式布局

  1. 纯mobild APP
  2. 多端响应：FlexBox、Grid

Q:行盒

IFC中每一行有一个行盒，包含一个或多个行级元素的行块

vertical-align：每一个行盒会有一个baseline，设置该属性会改变该行盒内行级元素在垂直方向相对baseline的对齐

Flex Box

  • 一种新的排版上下文

  • 它可以控制子级盒子的:

    • 摆放的流向 ( →  ←  ↑  ↓ )：flex-direction

    • 摆放顺序：order

    • 盒子宽度和高度：

    • 水平和垂直方向的对齐：主轴justify-content，侧轴align-items

      • align-item默认stretch
      • baseline以每个flex子项内部的baseline来对齐

    • 是否允许折行：align-self

    • 间距：gap

    • Flexibility：可以设置子项的弹性

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

    • 缩写

flex.png

Grid

  • 先画格子，再布局
  • grid-template划分格子
  • grid line网格线
  • grid-area：grid-row-start/grid-column-start/grid-row-end/grid-column-end

Float

  • 关注本身的作用：文字环绕的效果

Position

position.png

Q:CSS书籍推荐

  1. CSS设计思想：W3C设计文档
  2. CSS高级应用：CSS secret

Q:匿名块级元素

见例子，本身不存在，只是在css排版引擎中的一个概念。并没有生成一个真实的bfc，所以依旧保持ifc的特性。

Q:BFC解决塌陷问题

ifc中较高元素浮动导致坍塌

Q:重绘、重排

影响页面layout的变化会导致页面元素重排。

解决：分层（layer），使用translate。依靠GPU加速

Q:获取offset-top属性的时候引起页面重排

浏览器底层实现。没有缓存相关信息，需要重新计算。

avatar
文章
阅读
粉丝