CSS

CSS语言是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

选择器的特异度(Specificity)

CSS继承

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

初始值

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

1. background-color的初始值为transparent
2. margin-left的初始值为0

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

1. background-color：initial

CSS求值过程

布局(Layout)是什么?

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

布局相关技术

块级vs.行级

Block Level Box

• 不和其他盒子并列摆放
• 适用所有的盒模型属性

Inline Level Box

• 和其他行级盒子一起放在一行或拆开成多行
• 盒模型中的width、height不适用

块级元素

• 生成块级盒子
• body、article、div、main、section、h1-6、p、ul、li等
• display：block

行级盒子

• 生成行级盒子
• 内容分散在多个行盒(line box）中
• span、em、strong、cite、code等
• display：inline

display属性

常规流（Normal Flow）

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

行级排版上下文

块级排版上下文

BFC内的排版规则

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

Flex Box是什么?

• 一种新的排版上下文
• 它可以控制子级盒子的：

1. 摆放的流向(→ ←↑↓)
2. 摆上顺序
3. 盒子宽度和高度
4. 水平和垂直方向的对齐
5. 是否允许折行

主轴和侧轴

Flexibility

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

Grid布局

position属性

• static 默认值，非定位元素
• relative 相对自身原本位置偏移，不脱离文档流
• absolute 绝对定位，相对非static祖先元素定位
• fixed 相对于视口绝对定位

总结

总的来说，学习CSS可以让我们意识到网页设计的无尽的可能性和创造力。深入学习CSS是一段充满挑战和乐趣的旅程。它让我们进入到网页设计的世界，通过对网页样式和布局的掌控，将想象变为现实。我将会继续不断学习和不断进步。