这是我参与「第四届青训营」笔记创作活动的第2天

课程内容

了解CSS

什么是CSS

使用CSS的方法

外链
嵌入
内联

深入CSS

选择器

1.组合 2.选择器的特异度：高优先级选择器会覆盖低优先级选择器相同属性的值 可以看成 122 > 22，所以第一个选择器的优先级更高。

继承

有些属性（比如：字体系列属性）可以继承，有些属性是不可以直接继承的（除text-indent、text-align之外的文本系列属性），此时需要inheit属性使它能够继承。
显式继承：inherit

初始值

CSS 中，每个属性都有一个初始值
·background-color 的初始值为 transparent（透明）
·margin-left 的初始值为 0
可以使用 initial 关键字显式重置为初始值
·background-color: initial （透明）

布局

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

相关技术：

1.width
·指定content box宽度
·取值为长度、百分数 、auto
·auto由浏览器根据其他属性确定
·百分数相对于容器的content box宽度
height
·指定content box高度
·取值为长度、百分数 、auto
·auto取值由内容计算得来
·百分数相对于容器的content box高度
·容器有指定的高度时，百分数才生效 padding
·指定元素四个方向的内边距 ·百分数相对容器宽度宽度 border
指定容器边框样式、粗细和颜色

三种属性
·border-width
·border-style
·border-color
四个方向
·border-top
·border-right
·border-left
·border-bottom

margin
·指定元素四个方向的外边距
·取值为长度、百分数 、auto
·百分数相对容器宽度
·margin:auto 水平居中
·margin collapse：上下相邻的margin会叠加，取较大值，相同时，取相同值( 只会发生在垂直方向上，不会发生在水平方向上)
box-sizing
·默认值：content+padding+boder的width和height
·设置border-box：包含boder在内的高度和宽度 overlow
设置固定高度时，内容溢出时的处理
属性：visible（默认值）：显示超出的文字，hidden：超出的文字不可见，scroll：有滚动条，auto：超出时有滚动条，不超出时没有滚动条

总结及感悟

这一堂课主要带领大家简单复习了一些CSS的相关知识，在CSS第一部分的笔记里面主要记录了一些CSS相关介绍和技术，以及一些块级布局元素，也为我之前已有的知识添加了一些小细节和新内容。

CSS (1)｜ 青训营笔记