前端&HTML&CSS | 青训营笔记

wujinhjun
123 阅读6分钟

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

前端工程师：

  • 使用WEB技术解决GUI下的人机交互问题

  • 技术栈有三层：

    • HTML+CSS决定结构与页面
    • JS负责逻辑
    • 浏览器通过http等协议与服务端交互

  • 前端需要功能、美观、安全、性能等

  • 前端其实不仅仅是页面，node、electron……等的出现

  • 个人从最初的想要去做交互设计，到想做人机交互，再到想要专注于人机界面交互，发现相较于设计，前端更贴近我心中交互设计，尽管说前端依然需要考虑编译、图形、渲染、算法等，但这一切的目的都是为了实现更好的用户体验

HTML

HTML： Hyper Text Markup Language（超文本标记语言）

HyperText： maybe考虑一下图表

Markup Language： markdown不就是一种吗

结构：

  • 声明：

    • <!Doctype html>

  • 文件：

    • <html></html>

  • 头部：缩放、页面标题……

    • <head></head>

  • 主体：显示的正文

    • <body></body>

语法：

  • 不分大小写（通常小写）
  • 空标签可以不闭合（或者说自闭合）
  • 属性值用引号包裹
  • 可以省略一些属性值

语义化：

  • html的元素、属性都具有含义
  • 开发者应该需要遵循语义（算是css in js 的一个劣势）

好处：

  • 可读性
  • 维护性
  • SEO优化
  • 无障碍性

如何实现：

  • 使用尽可能贴近的标签、属性（而不是CSS一把梭）
  • 不用低代码工具

CSS

如何工作：

加载HTML 解析HTML 生成DOM树 合并后会渲染到页面

加载CSS 解析CSS 生成CSSOM树

选择器：

通配

* {

}

标签

h1{

}

id

#logo {

}

类

.done {

}

属性

[disabled] {

}

伪类

a : hover {

}

:first-child last-child

组合

名称语法说明示例
直接组合ABA&Binput:focus
后代组合A BB inner Anav a
亲子组合A>BB为A的子元素section>p
兄弟选择器A~BB在A之后h2~p
相邻选择器A+BB贴在A后面h2+p

色彩：

RGB、HSV（HSL）

alpha：不透明度

字体：

font-family

通用字体族

名称组成
Serif 衬线体Georgia、宋体
Sans-Serif 无衬线体Arial、Helvetica、黑体、微软雅黑
Cursive 手写体Caflisch Script、楷体
FantasyComic Sans MS， Zapfino
Monospace等宽字体Consolas、courier、中文字体

  • tips（会存在一个回落的问题，从前向后选择，选到了就会停止）：

    • 字体列表最后再写通用字体族
    • 英文放在中文前

font-size：

  • 关键字：

    • small、medium、large

  • 长度

    • px
    • em

  • 百分数

    • 相对父级的大小

font-weight：

需要考虑字体自身的支持

line-height：

base-line之间的距离

简写：

font： style weight size/height family

text-align：

left、center、right、justify

spacing：

letter-spacing

word-spacing

其实这些就和之前排版的时候一样了

text-indent：

缩进

text-decoration

none、underline、line-through、overline

深入CSS：

选择器特异度（specificity）

类型特异度
id1
（伪）类2
标签2

继承：

显式与自动继承（继承不到就会用初始值）

初始值：

可以用initial重置

CSS求值过程：

  • filtering：规则筛选：选择器匹配、属性、mediaQuery

    • 声明值(Declared Values)

  • cascading：按照来源、行内、特异性、顺序等选出属性值

    • 层叠值(Cascaded Value)：优先最高的那个

  • defaulting：没有层叠值的时候继承或者是initial

    • 指定值(Specified Value)：到此指定值一定存在

  • resolving：转化为绝对值：calc（）、em……

    • 计算值(Computed Value)：在不进行实际布局的情况下得到一些具体的值：60%

  • formatting： 将关键字、百分比都转化为绝对值

    • 使用值(Used Value)：实际布局时的值

  • constraining：将小数转为整数

    • 实际值：渲染出来的值

layout:

相关技术：

  • 常规流：行、块、表格、flex、grid
  • 浮动
  • 绝对定位

盒模型：

content-box与border-box

content-box：

content、padding、border、margin

height与width：
  • content的大小
  • lenght、%、auto
  • auto会由浏览器决定
  • %相对于content决定
  • 但height只有在指定高度后，%才有用
padding：

  • 顺时针转圈(和figma那个一样)

    • 10px 10px 20px 10 20 10 20px

  • %相对于容器宽度

border：
  • none/solid/dashed/dotted
  • 粗细
  • color

属性：

  • border-width
  • border-style
  • border-color

方向：

  • top
  • right
  • bottom
  • left

好玩的是可以给四个边不同的样式，从而画一些好玩的形状（比如三角形、梯形）

margin：
  • 外边距
  • lenght、%、auto
  • %相对于容器宽度

margin： auto可以居中

margin-collapse: 会出现融合（margin不会相加）

border-box：

content、padding、border、margin

height与width：
  • box的大小

其他的差不多

overflow： visible、hidden、scroll

行级 块级：

Blockinline
不并列放在一行或者是拆成多行
适用所有盒模型width和height不适用
块级元素行级元素
生成块级盒子行级盒子（内容会分散）
body、articl、div、main、section、h1-6、p、ul、li……span、em、strong、cite、code……
display：blockdisplay：inline

display属性

name类型
block块级盒子
inline行级盒子
inline-block本身是行，但可以设置看宽度、放在行盒中、但不会被拆散
none没有了
行级排版
inline formatting context（IFC）
只包括行级盒子时会创建IFC
规则：
  • 盒子在一行内layout
  • 放不下会换行
  • text-align会使水平对齐
  • vertical会垂直对齐
  • 避开float

overflow-wrap：normal、anywhere、break-word

anywhere: even there is a long word or an url, it will be broken

break-word: unbreakable words allowd to be broken at arbitrary points

mayber this is about the overflow-wrap

In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

this is word-break:normal\break-all\keep-all\break-word

break-all: even if it is an entire word, it will be break

keep-all: not be used for CJK text（what is CJK? hahaha）

break-word: deprecated

块级排版
block formatting context（所谓的BFC）
创建条件：
  • 根元素
  • float、absolute、inline-block
  • flex、grid
  • overflow not visible
  • display： flow-root
规则：
  • 从上到下
  • 垂直的margin合并
  • 但BFC内部的margin不会与外部合并
  • 不与float重叠

flexBox:

  • display: flex

  • 新的排版上下文

  • 控制子级盒子：

    • 流向
    • 顺序
    • 宽高
    • 对齐
    • 换行
关键字：

  • flex-direction:

    • row\row-reverse column\column-reverse

  • 主轴（横向）、纵轴（纵向） ：

    • justify-content:

      • flex-start
      • flex-end
      • center
      • space-between(The first item is flush with the main-start edge, and the last item is flush with the main-end edge)
      • space-around（The empty space before the first and after the last item equals half of the space between each pair of adjacent items.）
      • space-evenly（ The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.）

    • align-item:

      • flex-start
      • flex-end
      • center
      • stretch
      • baseline

  • what is the order：changes the paint order of the items; items with a lower value for order will be painted first and those with a higher value for order painted afterwards

  • flexiblity：

    • flex-grow

    • flex-shrink

    • flex-basis

    • flex:

      • flexflex-growflex-shrinkflex-basis
        1110
        100px11100px
        2 1210
        1 100px11100px
        2 0 100px20100px
        auto11auto
        none00auto

grid:

  • display: grid

  • grid-template:

    • grid-template-columns
    • grid-template-rows

  • grid line:

    • 从1开始
    • grid-row-start
    • grid-row-end
    • grid-column-start
    • grid-column-end

  • grid area

float

position:

  • static
  • relative:相对自身偏移，不脱离文档流
  • absolute:相对非static的祖先定位
  • fixed:相对视窗定位

推荐

MDN

w3c文档

css secret（CSS揭秘）

avatar
文章
阅读
粉丝