《CSS世界》学习笔记

Alooc...大约 6 分钟

1. 概述

1. `在css的世界里，页面上的任何看似简单的呈现都是由许许多多css属性共同作用的结果`

2. `每个css属性在css世界中都是有其存在的原因的，都是和其他多个css属性发生着千丝万缕的关系的·`

3. Cascading Style Sheets

CSS世界的诞生就是为图文信息展示服务的
流是css世界中的一种基本的定位和布局机制，可以理解为现实世界的一套物理规则。
css世界中的构建基石是HTML,HTML中最具代表性的两个基石是div 和 span (对应着水和木头)

4. 流对css的影响：

- （1）擒贼先擒王
- （2）特殊布局与流的破坏
- （3）流向的改变

5. 流体布局：利用元素"流"的特性实现的各类布局效果

6. `<table>比CSS老，table有自己的世界`

7. css的新世界 CSS3

CSS3的新属性：

（1）布局更加丰富

		- 移动端的崛起，催生了CSS3媒介查询以及许多响应式布局特性的出现，如图片元素的srcset属性、CSS的object-fit属性
		- 弹性盒子布局终于熬出了头（flexible box layout）
		- 格栅布局姗姗来迟（grid layout）

（2）视觉表现长足进步

圆角、阴影和渐变让元素更有质感
transform变换让元素有更多的可能
fliter滤镜和混合模式让web轻松变成在线PS
animation让动画变得非常简单

CSS3设计的初衷是为了实现更丰富、更复杂的网页，所以基本上和“流”的关系并不大

2. 需提前了解的术语和概念

1. 关键术语

1. 属性

2. 值

值的常用类型：

- 整数值
- 数值
- 百分比值
- 长度值
- 颜色值
- 字符串值
- 位置值等

3. 关键字

4. 变量

5. 长度单位

时间单位 s ms
角度单位 deg rad
长度单位 px em等

细分长度单位：

相对长度单位
- 相对字体长度单位 em ex rem ch
- 相对视区长度单位 vh vw vmin vmax
- 绝对长度单位 px pt cm mm pc

6. 功能符

值以函数的形式存在

- 表示颜色 rgba hsla
- 背景图片地址 url
- 元素属性值
- 计算 calc
- 过渡效果

7. 属性值

值+关键字+功能符

8. 声明

属性名加上属性值就是声明

9. 声明块

花括号包裹的一系列声明

10. 规则或规则集

选择器加声明块

11. 选择器

类选择器
ID选择器
属性选择器：指含有[]的选择器。形如：[title]{} [title="css-world"]{} [title~="css-world"]{} [title^="css-world"]{} [title$="css-world"]{}
伪类选择器前面有一个英文冒号:
伪元素选择器有两个连续冒号的选择器

12. 关系选择器

指根据与其他元素的关系选择元素的选择器，常见的符号有空格、>、~、+

后代选择器空格连接 所有后代元素
相邻后代选择器/子选择器 > 儿子元素
兄弟选择器 ~ 当前元素后面的所有同级元素
相邻兄弟选择器 + 当前元素相邻的同级元素

13. @规则

@规则指的是以@字符开始的一些规则，像@media、@font-face、@page或者@support

2. 了解CSS世界中的未定义行为

因浏览器不同导致BUG

3. 流、元素与基本尺寸

块级元素的基本特征：一个水平流上只能单独显示一个元素，多个块级元素则换行显示
这世界上任何事物，一旦限死了，就丧失了灵活性，其发展潜力及作用范围就会大大受限。

元素的构造：

1. 外在盒子：负责元素是可以一行显示，还是只能换行显示
1. 内在盒子：负责宽高、内容呈现等等
- 容器盒子
  - margin box
    - border box
    - padding box
    - content box

display属性可以元素默认的盒模型：inline、block、inline-block

块级与内联的区别：

- 块级（外部）盒子：block模型    可定义宽高、独占一行、多个换行
- 内联（外部）盒子：inline模型    不可定义宽高、多个一行显示
- 块级容器盒子（块级内部盒子）：inline-block模型    可定义宽高、独占一行、多个换行

1. 块级元素

width/height作用的具体细节
1. width:auto 的4种不同的宽度表现：
  1. 充分利用可用空间 100%于父级容器 fill-available 【外部尺寸】
  2. 收缩与包裹 shrink-to-fit 【内部尺寸】
  3. 收缩到最小 minimum content width 【内部尺寸】
  4. 超出容器限制【内部尺寸】
流体特性
1. 外部尺寸与流体特性
  1. 正常流宽度：无宽度原则
  2. 格式化宽度：仅出现在“绝对定位模型”，宽度大小相对于最近的具有定位特性的祖先元素计算的
2. 内部尺寸于流体特性
  - 内部尺寸，简单来讲就是元素的尺寸由内部的元素决定，而非由外部的容器决定的。
  - 表现形式
    1. 包裹性
    2. 首选最小宽度
    3. 最大宽度
CSS流体布局下的宽度分离原则
宽度分离原则，就是css中的width属性不与padding/border属性共存。

width、height
min、max
box-sizing
display
auto
relative
absolute
inline-block

2. 内联元素

哪些元素是内联元素
1. 从定义看
  内联盒子的内联特指外在盒子
2. 从表现看
  内联元素的典型特征是可以和文字在一行显示。因此，文字、图片、按钮、输入框和下拉框等原生表单控件也是内联元素
内联世界深入的基础——内联盒模型
1. 内容区域（content area）
2. 内联盒子（inline box）
  1. 内联盒子
  2. 匿名内联盒子
3. 行框盒子（line box）
4. 包含盒子（containing box）
幽灵空白节点
内联元素的所有解析和渲染表现就如同每个行框盒子的前面都有一个“空白节点”一样。
strut 支柱，是一个存在于每个行框盒子前面，同时具有该元素的字体和行高属性的0宽度的内联盒。

《CSS世界》学习笔记

1. 概述

1. `在css的世界里，页面上的任何看似简单的呈现都是由许许多多css属性共同作用的结果`

2. `每个css属性在css世界中都是有其存在的原因的，都是和其他多个css属性发生着千丝万缕的关系的·`

3. Cascading Style Sheets

4. 流对css的影响：

5. 流体布局：利用元素"流"的特性实现的各类布局效果

6. `<table>比CSS老，table有自己的世界`

7. css的新世界 CSS3

2. 需提前了解的术语和概念

1. 关键术语

1. 属性

2. 值

3. 关键字

4. 变量

5. 长度单位

6. 功能符

7. 属性值

8. 声明

9. 声明块

10. 规则或规则集

11. 选择器

12. 关系选择器

13. @规则

2. 了解CSS世界中的未定义行为

3. 流、元素与基本尺寸

1. 块级元素

2. 内联元素

4. 盒尺寸四大家族

5. 内联元素与流

6.流的破坏与保护

7. CSS世界的层叠规则

8. 强大的文本处理能力

9. 元素的装饰与美化

10. 元素的显示与隐藏

11. 用户界面样式

12. 流向的改变

预览:

《CSS世界》学习笔记

# 1. 概述

# 1. 在css的世界里，页面上的任何看似简单的呈现都是由许许多多css属性共同作用的结果

# 2. 每个css属性在css世界中都是有其存在的原因的，都是和其他多个css属性发生着千丝万缕的关系的·

# 3. Cascading Style Sheets

# 4. 流对css的影响：

# 5. 流体布局：利用元素"流"的特性实现的各类布局效果

# 6. <table>比CSS老，table有自己的世界

# 7. css的新世界 CSS3

# 2. 需提前了解的术语和概念

# 1. 关键术语

# 1. 属性

# 2. 值

# 3. 关键字

# 4. 变量

# 5. 长度单位

# 6. 功能符

# 7. 属性值

# 8. 声明

# 9. 声明块

# 10. 规则或规则集

# 11. 选择器

# 12. 关系选择器

# 13. @规则

# 2. 了解CSS世界中的未定义行为

# 3. 流、元素与基本尺寸

# 1. 块级元素

# 2. 内联元素

# 4. 盒尺寸四大家族

# 5. 内联元素与流

# 6.流的破坏与保护

# 7. CSS世界的层叠规则

# 8. 强大的文本处理能力

# 9. 元素的装饰与美化

# 10. 元素的显示与隐藏

# 11. 用户界面样式

# 12. 流向的改变

预览:

1. 概述

1. `在css的世界里，页面上的任何看似简单的呈现都是由许许多多css属性共同作用的结果`

2. `每个css属性在css世界中都是有其存在的原因的，都是和其他多个css属性发生着千丝万缕的关系的·`

3. Cascading Style Sheets

4. 流对css的影响：

5. 流体布局：利用元素"流"的特性实现的各类布局效果

6. `<table>比CSS老，table有自己的世界`

7. css的新世界 CSS3

2. 需提前了解的术语和概念

1. 关键术语

1. 属性

2. 值

3. 关键字

4. 变量

5. 长度单位

6. 功能符

7. 属性值

8. 声明

9. 声明块

10. 规则或规则集

11. 选择器

12. 关系选择器

13. @规则

2. 了解CSS世界中的未定义行为

3. 流、元素与基本尺寸

1. 块级元素

2. 内联元素

4. 盒尺寸四大家族

5. 内联元素与流

6.流的破坏与保护

7. CSS世界的层叠规则

8. 强大的文本处理能力

9. 元素的装饰与美化

10. 元素的显示与隐藏

11. 用户界面样式

12. 流向的改变