这是我参与「第五届青训营」伴学笔记创作活动的第28天
一、本节课重点内容
在了解 CSS 基本原理后，本节课进一步深入讨论，通过具体案例对于选择器的特异度展开讲解，在此基础上进一步引出 CSS 继承与布局的话题，对其定义及相关技术分别作出介绍。
课程重点内容归纳总结如下：
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
二、详细知识点介绍
继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值
显式继承：
初始值：CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0 可以使用initial 关键字显示重置为初始值
- background-color: initial
布局(Layout)是什么?
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术：
width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto 由浏览器根据其它属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的contentbox高度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border
指定容器边框样式、粗细和颜色
●三种属性
- border-width
- border-style
- border-color
●四个方向
- border-top
- boder-right
- border-bottom
- border-left
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
块级 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
三、总结
学习到了css的基本语法与基础参数，对布局有了新的认识，也明白了块级元素与行级元素的区别与联系。
