这是我参与「第四届青训营 」笔记创作活动的的第2天.
CSS是什么
CSS(Cascading Style Sheet)，层叠样式表，用来定义页面元素的样式，比如设置字体，颜色等。
CSS的构成：选择器{声明块}
引入CSS的方式：
- 外链：放在单独的文件由
<link>引入。开发中推荐使用外链。 - 嵌入：写在
<style></style>内部。 - 内联：写在html元素style属性中。
选择器
- 标签名选择器 div p span ……
- 类选择器 .class
- id选择器 #id
- 通配符选择器 *
- 属性选择器
- [属性名]
- [属性=""]属性为特定值
- [属性^=""]属性匹配以""开头的 $=""以""结尾
<label>用户名：<label>
<input value="zhang" disabled />
<label>密码：<label>
<input value="123456" type="password" />
<style>
[disabled] {
background:#eee;
color:#999;
}
[type="password"] {
border-color: red;
color:red;
}
</style>
- 伪类
- 状态伪类 元素处于某一种特定的状态才会被选中，比如：a:visited链接被访问过、聚焦边框……
- 结构伪类 DOM节点在DOM树中出现的位置，比如：li:first-child如果li是第一个元素被选中
选择器可以进行组合
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | div.box |
| 后代组合 | A B | 选中A的所有子孙B | div p |
| 亲子组合 | A>B | 选中A的直接子元素B | div>p |
| 兄弟选择器 | A~B | 选中B，如果AB同级且B在A后 | div~p |
| 相邻选择器 | A+B | 选中B，如果B紧跟在A后 | div+p |
选择器的优先级
内联>id>类>标签名 外链和嵌入样式发生冲突时，写在后面的样式会覆盖前面的。
继承
有些属性比如字体颜色等可以从父元素继承，有些如盒子的宽度高度不可以从父元素继承，若想实现继承，可以利用通配符将inherit作为想要继承属性的属性值。
布局
常规流/文档流
- 盒模型 width和height标准情况下是contentbox的宽度和高度，百分数是相对于容器的content box的高度，容器有指定的高度时，百分数才生效。
- 标准盒模型
- 怪异盒模型
- 表格布局
- IFC：Inline Formatting Context) ，内联格式化上下文
布局规则：
- 在一个IFC里，盒是一个接一个从水平放置。
- 摆放这些框，它们水平方向的margin,padding,border所占空间会被计算在内。
- 行盒的高度由行盒内最高的inline boxes决定。
- 垂直方向，可通过vertical-align设置文本基线，取值可以是具体像素值，也可以是middle等方向词。当内部的容器盒子太多了一个line box装不下来，他们折行之后会变成两个或者多个line box， line box们垂直方向无间隔地堆叠，但不能重叠。
- 浮动后IFC内部的浮动元素宽高参与IFC的line-box宽高计算并且 从换行后 的行开始排列
- BFC
布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
如何创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex。
4、overflow的值不是visible。
- Flex
- Grid
