根据MDN网站学习记录笔记

CSS构建基础

理解层叠
- 资源顺序
- 优先级
CSS选择器
- 选择器列表
- 选择器的种类
盒模型
背景与边框
- 有关背景的一些属性
- 边框

理解层叠

层叠如何在定义不止一个元素的时候应用css规则。注意一个规则覆盖另一个规则时只覆盖相同属性。
考虑以下三因素（存在优先级）：

重要程度
优先级
资源顺序

资源顺序

有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。理解为后面的覆盖前面的。

优先级

有些规则在最后出现，但是却应用了前面的规则。这是因为前面的有更高的优先级 — 它范围更小，因此浏览器就把它选择为元素的样式。

不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位：选择器中包含ID选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。

!important用于修改特定属性的值，能够覆盖普通规则的层叠。
但是，强烈建议除了非常情况不要使用它。 !important 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。

CSS选择器

CSS选择器：元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式

选择器列表

将多个选择器通过 , 组合起来变成选择器列表。

h1,
.special {
  color: blue;
}

Noitce：当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。

选择器的种类

以下是几种常用的选择器：

元素选择器

h1 { }

类选择器

.box { }

id选择器

#unique { }

标签属性选择器

根据一个元素上某标签属性的存在。
eg:选择拥有titie属性的<a>标签

a[title] { }

根据一个有特定值的标签属性是否存在来选择

a[href="https://example.com"] { }

伪类与伪元素

伪类用于向某些选择器添加特殊的效果。
例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：

a:hover { }

包含伪元素的选择器，选择元素中的某个部分
例如，::first-line是会选择一个元素中的第一行

p::first-line { }

运算符
用运算符将选择器组合起来。
用 > 选择了<article>元素的初代子元素

article > p { }

盒模型

所有HTML元素可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

外部显示类型和内部显示类型

CSS的布局方式分为外部显示类型和内部显示类型两种

外部显示类型
浏览器默认的布局方式，控制的是相邻盒子之间的布局，分为块级盒子和内联盒子两种。
内部显示类型
控制盒子内部“子盒”之间的排列方式，通过display的值改变，分为两类：flex和grid
notice：行内盒子里面不能有块级盒子

块级盒子vs内联盒子

在CSS中常见的两种盒子：块级盒子和内联盒子；
在这里插入图片描述
图片来源

内联盒子无法手动设置宽和高，padding和margin可以生效：在垂直方向不挤占其他盒子空间，会导致重叠；在水平方向会挤占其他盒子的空间。

<p>
    I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height.
</p>

span {
  margin: 20px;
  padding: 20px;
  width: 80px;
  height: 50px;
  background-color: lightblue;
  border: 2px solid blue;
}

内联盒子设置边距上下重叠，左右推开
使用display: inline-block

用于不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。

一个元素使用 display: inline-block，实现我们需要的块级的部分效果：

设置width 和height 属性会生效。
padding, margin, 以及border 会推开其他元素。

CSS盒模型

完整的CSS盒模型应用于块级盒子，而内联盒子只能实现盒模型中定义的部分内容。盒模型分为两类：标准盒模型 & 替代（IE）的盒模型
盒模型的组成部分：

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。【内边距】
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。【边框】
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。【外边距】

标准盒模型
在标准模型中设置width和height实际设置的是conten box，要加上padding和border再一起决定盒子大小

替代（IE）盒模型
这个模型中所有宽度都是可见宽度。

默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。

外边距，内边距和边框设置

可以一次性（顺时针）控制，也可以四个边分别设置。

背景与边框

有关背景的一些属性

背景颜色和字体颜色

.box {
  background-color: #567895; 
  color: white;
}

背景图片
（如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部）
```
.b {
  background-image: url(star.png);
}
```

控制背景图片平铺background-repeat
no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。
使用 background-size 属性设置图片的长度和百分比值，来调整图像大小以适应背景。
其中关键字cover——使图片在保持高宽比同时覆盖盒子区域（可能超出盒子区）
关键字 contain——使图像大小适合盒子，若图片长宽比和盒子不同则会出现间隙。

背景图片定位：background-position 一般一个水平值后面跟一个垂直值。或者跟top right这样的关键字

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
or   background-position: 20px 10%;
or   background-position: top 20px right 10px;
}

多个背景图像。在单个属性值中指定多个background-image值，用逗号分隔。【代码靠前的图像出现在最顶端】
```
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;
```
不同属性的每个值，将与其他属性中相同位置的值匹配。
上面的image1的background-repeat值将是no-repeat。但是，当不同的属性具有不同数量的值时，较小数量的值会循环。
指定背景的滚动：background-attachment属性控制。scroll使元素背景在页面滚动时滚动；fixed使元素的背景固定在视图端口上。

边框

使用border为一个框的所有四个边设置边框。

.box {
  border: 1px solid black;
}

只设置一边

border-top: 1px solid black;

等价于

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

更具体

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

使用border-radius属性实现方框的圆角

.box {
  border-radius: 10px;
}

【Web前端开发】——（五）CSS构建基础一