【FE学习-CSS】基础CSS

依据freeCodeCamp、MDN、《CSS权威指南》等相关知识的笔记整理

实时更新代码仓库Augu1sto/FE-learning: 一个练习前端的小仓库，争取日更 (github.com)

CSS如何运行^[1]⁍

浏览器加载网页的基本步骤（不同浏览器或许会有所差异）

载入HTML ：浏览器载入HTML文件（比如从网络上获取）。
转化为DOM ：将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。
加载资源 ：接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理，简单起见，同时此节主讲CSS，所以这里对如何加载JavaScript不会展开叙述。
解析CSS，创建渲染树 ：浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
网页展示在屏幕上（这一步被称为着色）。

结合下面的图示更形象：

margin/padding顺序⁍

上右下左（顺时针），中间空格隔开

速记/简写属性^[2]⁍

像上面的被称作速记属性，除了margin/padding还有 font, background, padding, border, and margin 等属性

padding/margin：上右下左
font：style/variant/weight/stretch/ size /line-height / family
list-style：type/image/position
border：粗细样式颜色
background：值（图像/颜色/渐变）垂直位置水平位置 repeat属性（，逗号分隔多个背景）
box-shadow 属性按顺序采用以下值：
- offset-x （阴影的水平偏移量），
- offset-y （阴影的垂直偏移量），
- blur-radius
- spread-radius
- color

CSS 的简写属性 - CSS（层叠样式表） | MDN (mozilla.org)

引入google font api⁍

1	`<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lobster">`

选择符⁍

1. 元素选择符⁍

2. 群组选择符⁍

逗号隔开，*是通用选择符

3. ID选择符⁍

4. 类选择符⁍

ID和类选择符的书写方式其实是[元素选择符/群组选择符][ID选择符/类选择符]，例如p.first-para/*#first

不过通用选择符可以省略，所以一般看到的就是#first的形式

选中同时拥有多个类的元素：.classA.classB

5. 属性选择符⁍

选择具有某个属性的元素

使用 元素[attr=value] 属性选择器来修改样式

和ID/类选择符一样，当前面的元素为*时，可以省略
=value可以省略，表示所有具有attr属性的元素
可以基于多个属性选择，例如a[href][title]
可以匹配子串，详细规则见《CSS权威指南》p57-62

6. 根据文档结构选择⁍

后代选择符⁍

根据空格隔开，例如 ul ol{color:gray;}

两个元素之间的层级间隔可以是无限的，不论嵌套多深，后代选择符不能感知距离

选择直接子元素⁍

用>表示，如h1 > strong {color:red;}

选择紧邻同胞元素⁍

选择紧跟在A元素后面平级的B元素A+B

选择后续同胞⁍

选择一个元素后面同属一个父元素的另一个元素（不一定紧邻），例如h2~ol

7. 伪类选择符⁍

pseudo-class selector 为 文档中不一定真实存在的结构 或者 某些元素的特定状态 指定样式/赋予幽灵类

不相互排斥的伪类可以通过:串联拼接，例如a:visited:hover
分为 结构伪类 、 动态伪类 、 UI状态伪类 、 target伪类 、lang伪类、 否定伪类（即not()）

伪类 - CSS（层叠样式表） | MDN (mozilla.org)

部分：

:empty：没有子代的任何元素（甚至连文本节点，包括文本和空格、换行等都没有），利用p:empty{display:none;}可以禁止显示空段落。但是img/textarea等也算空元素。

例如我在一个网页中添加样式*:empty{display:none}会使得图片也一起消失
:nth-child(/:nth-last-child)

选择每第n个元素，找到所有当前元素的 兄弟元素 ，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3…）。
- 表示HTML表的倒数的奇数行：tr:nth-child(2n+1) or tr:nth-child(odd)
- 表示父元素中子元素为第一的并且名字为span的标签被选中：span:nth-child(1)，相当于span:first-child
:active：匹配被用户激活的元素（表示鼠标点击状态）。一般被用于<a>和<button>中。声明的时候要防止被其他伪类覆盖，需要按照LVHA顺序声明。（其他几个伪类很熟了就不介绍了）

LVHA 顺序：:link — :visited — :hover — :active。

L o V e F ears HA te (:focus)
:focus：获取当前的焦点
:required：表单必填项的格式
:invalid：不满足所有数据有效性的输入框
:enabled/:disabled：启用/禁用
:target：表一个唯一的页面元素(目标元素)，其id与当前URL里的片段标识符（例如http://www.example.com/index.html#section2，id为section2）匹配，可以用于加亮锚点

8. 伪元素选择符⁍

用一对冒号::first-line表示，只能出现在选择符最后，例如p::first-line em是无效的

::before和::after伪元素与content属性的共同使用，在CSS中被叫做“生成内容“，可以用作给出视觉提示（但并不会朗读出来）

选择器	描述
`::after`	匹配出现在原有元素的实际内容之后的一个可样式化元素。
`::before`	匹配出现在原有元素的实际内容之前的一个可样式化元素。
`::first-letter`	匹配元素的第一个字母。
`::first-line`	匹配包含此伪元素的元素的第一行。
`::grammar-error`	匹配文档中包含了浏览器标记的语法错误的那部分。
`::selection`	匹配文档中被选择的那部分。
`::spelling-error`	匹配文档中包含了浏览器标记的拼写错误的那部分。

层叠与继承⁍

继承⁍

CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
不可继承样式：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear
可以继承的样式：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor

层叠规则⁍

有三个因素需要考虑，根据重要性排序如下，前面的更重要：

重要程度：!important用于修改特定属性的值，能够覆盖普通规则的层叠。
优先级
资源顺序：相同重要程度和优先级的情况下，定义在后面的css样式会覆盖前面的

相互冲突的声明将按以下顺序适用，后一种声明将覆盖前一种声明：

用户代理样式表中的声明(例如，浏览器的默认样式，在没有设置其他样式时使用)。
用户样式表中的常规声明(由用户设置的自定义样式)。
作者样式表中的常规声明(这些是我们web开发人员设置的样式)。
作者样式表中的!important声明
用户样式表中的!important 声明

特指度/优先级权重⁍

由4位数字组成

选择符	特指度
ID	0100
类、属性选择、伪类	0010
元素/伪元素	0001
内联样式	1000
通用选择符	0000（不等于无）

可以相加，注 : 通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。

选择器	优先级
`h1`	0001
`h1 + p::first-letter`	0003
`li > a[href*="en-US"] > .inline-warning`	0022
`#identifier`	0100
内联样式	1000

绝对单位、相对单位⁍

绝对：例如，in 和 mm 分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。

单位	名称	等价换算
`cm`	厘米	1cm = 96px/2.54
`mm`	毫米	1mm = 1/10th of 1cm
`Q`	四分之一毫米	1Q = 1/40th of 1cm
`in`	英寸	1in = 2.54cm = 96px
`pc`	十二点活字	1pc = 1/16th of 1in
`pt`	点	1pt = 1/72th of 1in
`px`	像素	1px = 1/96th of 1in

相对：比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。比如 em 的大小基于元素字体的字体大小 。如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。

单位	相对于
`em`	在 font-size 中使用是相对于父元素的字体大小(嵌套)，在其他属性中使用是相对于自身的字体大小，如 width
`ex`	字符“x”的高度
`ch`	数字“0”的宽度
`rem`	根元素的字体大小
`lh`	元素的line-height
`vw`	视窗宽度的1%
`vh`	视窗高度的1%
`vmin`	视窗较小尺寸的1%
`vmax`	视图大尺寸的1%
百分号	父元素的百分比

使用百分比作为元素外边距（ margin ）或填充（ padding ）的单位时，值是以包含块的内联尺寸进行计算的，也就是元素的水平宽度。（上下边距也是水平宽度）

min-/max-尺寸⁍

设置一个min-height属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。

max-width的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。

基础样式⁍

背景⁍

可以通过逗号分隔添加多个重叠的背景图像

background-repeat属性用于控制图像的平铺行为。

no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。

background-size属性，它可以设置长度或百分比值，也可以使用关键字:

cover —— 浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像 可能会跳出盒子外
contain —— 使图像的大小适合盒子内。可能在图像的任何一边或顶部和底部出现间隙。

background-position框沿着水平(x)和垂直(y)轴定位。可以用center/top/bottom center/left/right等关键词进行定位。默认是center（？

渐变背景⁍

1 2	`background: linear-gradient(90deg, rgba(154,205,72,1) 25%, rgba(0,212,255,1) 100%); background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);`

大致就是（角度，颜色位置，…）

条纹背景⁍

background: repeating-linear-gradient(
  45deg,
  yellow 0px,
  yellow 40px,
  black 40px,
  black 80px
);

角度，颜色1 起始位置，颜色1 结束位置，…

背景附加⁍

指定他们如何滚动时，内容滚动。这是由background-attachment属性

示例

scroll：固定在页面的某个位置（成为页面的一个部分）。内容滚动时，背景不动；页面滚动时，背景随页面滚动
fixed：固定不动。
local：（CSS3新增）。固定在元素内容上（随内容滚动）。

简写⁍

background的MDN

有一些规则，需要在简写背景属性时遵循，例如:

background-color 只能在逗号之后指定。
background-size 值只能包含在背景位置之后，用’/'字符分隔，例如：center/80%。

.box {
  background:   
    linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat, 
    rebeccapurple;
}

边框⁍

使右上角边框圆角的水平半径为1em，垂直半径为10％：

1
2
3

.box {
  border-top-right-radius: 1em 10%;
}

替换元素——图像和视频以及iframe⁍

CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。

如何调整图像大小使之合适盒子：

用max-width:100%处理溢出
object-fit属性（本身不会改变大小，使用前需要设置width/height:100%）
- cover：填充整个盒子（不改变比例）
- contain：保持比例完整显示图片，但会有空隙
- fill：拉伸，改变比例填充盒子
Need help with task 1 of Images and Form elements skill test - MDN / Learn - Mozilla Discourse

在替换元素使用各式CSS布局技巧，例如网格或者弹性布局的一部分时，有不同的默认行为

表单样式⁍

在一些浏览器中，表单元素默认不会继承字体样式。

form元素 (mozilla.org) 一些有用的表单重置：

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

textarea {
  overflow: auto;
}

表格⁍

示例

table-layout CSS属性定义了用于布局表格单元格，行和列的算法。

auto：表格及单元格的宽度取决于其包含的内容。
fixed：表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。

通过设定fixed，指定首行宽度，可以是表的行为在默认情况下更好预测。

border-collapse属性的collapse值可以让表格边框合为一条

caption-side属性，可以调整表格标题的位置

使用<thead>,<tbody>(en-US)和<tfoot> 将表格分割成逻辑块，并提供额外的应用CSS的地方，因此如果需要的话，可以更容易地将样式层叠在一起。

使用斑马线来让其他行更容易阅读。

使用 text-align直线对齐您的文本，使内容更整洁、更易于跟随。