这是我参与「第四届青训营 」笔记创作活动的第1天
html简单汇总
- 页面内容
CSS设计样式,JavaScript定义用户的行为-->在浏览器界面运行,而浏览器又是通过http协议进行通信的。
根本问题:图形界面下的人机交互问题。
CSS
- 用来定义页面元素的样式
-
- 设置字体和颜色
-
- 设置位置和大小
-
- 添加动画效果
CSS的使用
<link rel="stylesheet" href="/assets/style.css">
<!-- 嵌入 -->
<style>
li { margin: 0; list-style: none; }
p { margin: 1em 0; }
</style>
<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>
CSS选择器
-
通配选择器： *{}
-
标签选择器：标签名（eg.h1）{}
-
id选择器： #id名{}
-
类选择器： .类名{}
-
属性选择器: [属性名]{} 伪类(不基于标签和属性定位元素)
-
几种伪类
- 状态伪类
- 结构性伪类**:
存在于DOM树中,但如果不特别声明,将看不到他。
选择器特异度（决定权重）
1. #nav .list li a:link
2. .hd ul .links a
分析代码，1中id 选择器有 1个（#nav），类与伪类共有 2个（.list 与 :link）,元素与伪元素共有 2个（li 与 a）。所以在 1 中的特异度为 122；2中id 选择器有 0个，类与伪类共有 2个（.hd 与 .links）,元素与伪元素共有 2个（ul 与 a）。所以在 2 中的特异度为 022，122＞022，所以2中的选择器优先级更高。
盒子：从外到内：外边距（margin）--边界（border）--内边距（padding）--内容（content box）
width和height都是对内容大小进行设定，百分数制也是相对于内容部分，padding是相对于容器
布局
常规流
| Block Level Box | Inline Level Box |
|---|---|
| 不和其它盒子并列摆放 | 和其它行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
| 块级元素 | 行级元素 |
| -------------------------------------------- | --------------------------------- |
| 生成块级盒子 | - 生成行级盒子 - 内容分散在多个行盒 (line box) 中 |
| body、article、div、main、section、h1-6、p、ul、li 等 | span、em、strong、cite、code 等 |
| display: block | display: inline |
| display：可以使行级和块级转化 |
根元素、浮动和绝对定位的元素会脱离常规流
行级排版上下文
-
Inline Formatting Context (IFC)
-
只包含行级盒子的容器会创建一个IFC
-
IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素 块级排版上下文
-
Block Formatting Context (BFC)
-
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display: flow-root;
- 盒子从上到下摆放 BFC内排版规则
-
垂直 margin 合并
-
BFC 内盒子的 margin 不会与外面的合并
-
BFC 不会和浮动元素重叠
flex-shrink：在绝对值上，根据扩展或收缩权重，将剩余空间或缺少空间分配给父级中的盒子。 计算值：浏览器拿到CSS后，就能够马上算出或者转换的值。 还有一些值只知道html和css不能够直接确定绝对值的，比如60%，需要知道渲染的具体环境才能确定-->formatting 使用值。
