理解 CSS

本文主要补充作者不了解的一些知识

CSS是如何工作的

选择器

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

<input type="text" disabled>
<input type="password" value="">
<p><a href="#top">TOP</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  [disabled] {
    background-color: blue;
  }

  /* 以# 号开头 */
  a[href^="#"] {
    color: red;
  }

  /* 以.jpg 结尾 */
  a[href$=".jpg"] {
    color: green;
  }
  
  // 更多属性匹配方式请查看文档
</style>

伪类选择器

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>


<style>
  li{
     border-bottom: 4px solid #ccc;
  }
  li:first-child{
    color: red;
  }
  li:last-child{
    color: blue;
    border-bottom: none
  }
  li:nth-child(2){
    color:orange;
    font-size: 38px;
    font-weight:bold
  }
</style>

组合

名称	语法	说明	示例
直接组合	AB	满足A的同时满足B	`input:focus` `<a class="A B"/>`
后代组合	A B	B是A的子孙元素， A包含的所有B都会应用这个样式	`nav a` `<nav>` `<a/> <br /> <p><a/></p><br /><nav/>`
亲子元素	A>B	B是A的直接子元素	`<div><a/><div/>`
兄弟选择器	A~B	B和A同级	`<h2></h2><p></p>`
相邻选择器	A+B	B紧跟在A的后面	`h2+P`

选择器组

用逗号分隔

h1, h2, h3{
  color:red;
}

.div1,.div2,.div3{
  background-color: aqua;
  width: 100px;
  height: 100px;
  margin: 10px;
}

特异度（Specificity）- 权重

权重计算规则

第一优先级：!important会覆盖页面内任何位置的元素样式，权重值为无限
内联样式，如 style="color: green"，权值为1000
ID选择器，如#app，权值为 0100
类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010
标签、伪元素选择器，如div::first-line，权值为0001
通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000
继承的样式没有权值
相同的权重：以后面出现的选择器为最后规则
不同的权重：权重值高则生效
与元素“挨得近”的规则生效
| | style内联样式 | # id | . (伪)类 属性选择器 | E 标签 | 权重值 |
| — | — | — | — | — | — |
| #nav .list li a:link | 0 | 1 | 2 | 2 | 0122 |
| .hd ul.links a | 0 | 0 | 2 | 2 | 0022 |
| <p style="color: red"></p> | 1 | 0 | 0 | 0 | 1000 |

权重记忆口诀

从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

注意事项：这里的权重可以理解成 122``22``1000 数值越高权重越大

颜色

RGB

rgb 使用范围广但是没有办法直观的看到颜色

#00000000
rgb(0,0,0,0)
前三个参数分别对应三原色（0-255）
第4个参数代表透明度（老版本浏览器需要使用rgba 才能支持第4个参数）

HSL

hsl(Hue,Saturation,Lightness)

Hue
- 色相是色彩的基本属性，如红色、黄色等；取值范围时 0-360
Saturation
- 饱和度，是只色彩的鲜艳程度，越高颜色越鲜艳；取值范围是 0-100%
Lightness
- 亮度是指颜色的明亮成度，越高越亮；取值范围是 0-100%

字体 font-family

h1{
  font-family:Optima,Georgia,serif;
}
p{
  font-family:Helvetica,sans-serif;
}

通用字体族

Serif 衬线体
- Georgia、宋体
Sans-Serif 无衬线体
- Arial、Helvetica、黑体、微软雅黑
Cursive 手写体
- Caflisch Script、楷体
Fantasy 艺术字
- Comic Sans MS
Monospace 等宽字体
- Consolas、Courier、中文字体

注意事项：一定要在最后加上一个通用的字体族（建议 sans-serif）

CSS 求值过程

布局相关技术

边距折叠（margin collapse）

<div class="a"></div>
<div class="b"></div>

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }
  
  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

外边距叠加存在两种情况：一是父子外边距叠加；二是兄弟外边距叠加。
只有垂直方向的外边距会发生外边距叠加。水平方向的外边距不存在叠加的情况。

水平边距永远不会坍塌。

解决方法：BFC

BFC (Block Formatting Context)，中文叫块级格式上下文。
触发BFC方法：
- float属性为left/right
- overflow为hidden/scroll/auto
- position为absolute/fixed
- display为inline-block/table-cell/table-caption

常规流 Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流
其他元素都在常规之内（in-flow）
常规流中的盒子，在某种排版上下文中参与布局
- 行级排版上下文
- 块级排版上下文
- Table 排版上下文
- Flex 排版上下文
- Grid 排版上下文

行级排版上下文

Inline Formatting Context （IFC）
只包含行级盒子的容器会创建一个 IFC
IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的的垂直对齐
- 避开浮动（float）元素

点击查看【codepen】

块级排版上下文

Block Fromatting Context （BFC）
某些容器会创建一个 BFC
- 根元素
- 浮动、绝对定位、inline-block
- overflow值不是 visible的块盒
- display:flow-root
BFC 内的排版规则
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC 内盒子的 margin不会与外面的合并
- BFC 不会和浮动元素重叠