字节青训营第二天-理解CSS

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

使用CSS三种方法

外链

<link rel="stylesheet" href="style.css">

嵌入

<style> p { margin: 10px; } </style>

内联

<p style="margin: 10px;">这是个例子</p>

CSS在页面渲染部分的工作原理

解析HTML和CSS,分别生成 DOM Tree 和 Style Rules
根据DOM树和样式规则，生成渲染树 Render Tree
进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置、大小）
进行绘制 Paintion(重绘):根据计算和获取的信息进行真个页面的绘制
Display: 展示到页面上

CSS选择器

通配符选择器
类选择器
id选择器
属性选择器
标签选择器
伪类选择器
- 状态伪类
- 结构伪类

选择器组合

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A > B	选中B, 如果它是A的子元素	section > p
兄弟选择器	A ~ B	选中B, 如果它在A后且和A同级	h1 ~ p
相邻选择器	A + B	选中B，如果它紧跟在A后面	h1 + p

选择器特异度(Specificity)

CSS样式根据特异度大小产生效果

初始值

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

eg: background-color 的初始值为 transparent

可以使用inittial 关键字显示重置为初始值

eg: background-color: initial

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值

颜色RGB

rgb字符 rgb(0, 0, 0);
rgba字符 rgba(0, 0, 0, 0);
十六进制 #FFFFFF
HSL Hue(色相) Saturation(饱和度) Lightness(亮度)

HSL(0, 100%, 50%);
hsla(0, 100%, 50%, 0);

字体font-family

字体设置多个，eg: font-family: Optima, Georgia, serif;

设备从前到后读取字体，为了适应不同设备和终端

通用字体族

字体大小font-size

关键词：small、medium、large

长度：px、em

百分数：相对于父元素字体大小

行高line-height

当有多段文字时一般都需要设置行高

空格white-space

属性：normal、nowrap、pre、pre-wrap、pre-line

布局(Layout)

什么是布局：确定内容大小和位置的算法

实现：依据元素、容器、兄弟节点和内容等信息来计算

布局Layout.png

布局相关技术

盒子

基本属性：widtth(宽度)、height(高度)、padding(内边距)、margin(外边距)

类型 box-sizing

标准盒模型：content-box
怪异盒模型：border-box

dispaly

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

行级排版上下文(IFC)

排版规则：

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

块级排版上下文(BFC)

排版规则

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

Flex排版上下文

排版规则

通过flex-direction控制主轴和侧轴

主轴

侧轴

Flexibility

可以设置子项弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

Grid排版上下文

display: grid 使元素生成一个块级的 Grid 容器
使用 grid-template 相关属性将容器划分为网格
设置每一个子项所占行\列

浮动

float，逐渐被flex 和 grid 布局取代

定位

absolute

绝对定位，相对非static祖先元素定位
relative

相对定位，相对自身原位置偏移，不脱离文档流
static

默认值，非定位元素
fixed

相对于视口绝对定位

理解CSS | 青训营笔记