进度
html相关 https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML 盒子模型 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#%E5%9D%97%E7%BA%A7%E7%9B%92%E5%AD%90%EF%BC%88block_box%EF%BC%89%E5%92%8C_%E5%86%85%E8%81%94%E7%9B%92%E5%AD%90%EF%BC%88inline_box%EF%BC%89
学习记录
- 没想到css支持的规则这么多，https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E8%A1%A8
- 学到css 基础这一章：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks
- css的几个关键要素，层叠 cascade、优先级和继承
- 层叠很重要，当两个同样的规则运用到通一个要素上时，顺序在后面的会生效
- 关于优先级，更具体的选择器优先级比更广泛的选择器优先级更高，类选择器的权重大于元素选择器的权重
- 关于优先级，有一套权重计算方法：ID - 类 - 元素,分别对应百 - 十 - 个三个部分
- 关于优先级, 内联样式的优先级最高
- 关于优先级,!important 会抹去层叠优先级
- 关于盒子模型，分为块级盒子和内联盒子；内联盒子的border、padding、margin 会把水平的 内联盒子推开，不会把垂直方向的内联盒子推开
- 一个块级盒子，会在水平上，占据父容器的所有空间
- 盒子有外部显示类型 和内部显示类型，默认情况下按照常规流布局
- 重要知识点：display会改变盒子的外部显示类型，是块还是盒子
- 盒子模型的四个知识点：content、padding、border、margin；而width和weight实际上对应的是content的大小
- box-sizing: border-box;
- 关于盒子模型，已经学习到 ：