前端学习--CSS基础（二）-优快云博客

本文链接：https://blog.youkuaiyun.com/Tang4901/article/details/145696901

学习文档CSS 构建 - 学习 Web 开发 | MDN

CSS基础回顾

css工作原理

DOM树：浏览器载入HTML文件，转化为DOM（Document Object Model）；
拉取资源：浏览器拉取HTML中链接的资源（文档、图片等）；
渲染树：浏览器拉取并分析CSS，根据选择器的不同类型分“桶”，基于选择器，将不同的规则应用在对应的 DOM 的节点中，并添加节点依赖的样式。
布局：上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
着色：网页展示在屏幕上。

class属性

<ul>
<li>项目一</li>
<li class="special">项目二</li>
<li>项目 <em>三</em></li>
</ul>

.special {
color: orange;
font-weight: bold;
}

根据元素在文档中的位置确定样式

多个元素使用同一个样式元素间用‘ ，’隔开

包含选择符的选择器

li em { 选中的是表格单元<li>中的<em>元素: 中间用空格
color: rebeccapurple;
}

包含相邻选择符的选择器

h1 + p { 选中的是<h1>下面紧邻的第一个<p>：中间用+
font-size: 200%;
}

根据状态确定样式

链接未被访问过的

a:link {
color: pink;
}

链接被访问过的

a:visited {
color: green;
}

鼠标悬停时
a:hover {
text-decoration: none;
}

混合使用示例

在 <body> 之内，紧接在 <h1> 后面的 <p> 元素的内部，类名为 special

body h1 + p .special {
color: yellow;
background-color: black;
padding: 5px;
}

CSS选择器

选择器可以根据需要进行组合

结构

它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

选择器规范 CSS 3，包含常用的选择器

选择器列表（多个选择器，同一种样式）

h1,
.special {
color: blue;
}

选择器种类

类型选择器	h1 { }
类选择器	.box{ }
ID选择器	#unique{ }
标签属性选择器	a[title] { ... }； a[href="https://example.com"] { ... }
伪类	a:hover { ... }
伪元素	p::first-line { ... } `::first-line`是会选择一个元素（下面的情况中是`<p>`）中的第一行
运算符：将其他选择器组合起来，更复杂的选择元素。	article > p { } 用运算符（`>`）选择了`<article>`元素的初代子元素。

属性选择器

存否和值选择器

选择器	示例	描述
`[attr]`	`a[title]` li[class]	匹配带有一个名为attr的属性的元素——方括号里的值。
`[attr=value]`	`a[href="https://example.com"]` li[class="a"]	匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。
`[attr~=value]`	`p[class~="special"]` li[class~="a"]	匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。
`[attr\|=value]`	`div[lang\|="zh"]`	匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。

字符串匹配选择器

选择器	示例	描述
`[attr^=value]`	`li[class^="box-"]`	匹配带有一个名为attr的属性的元素，其*值开头为value子字符串*。
`[attr$=value]`	`li[class$="-box"]`	匹配带有一个名为attr的属性的元素，其*值结尾为value子字符串*
`[attr*=value]`	`li[class*="box"]`	匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。

大小写敏感的情况下匹配属性值

大小写不敏感在闭合括号之前，使用i值；这个标记告诉浏览器，要以大小写不敏感的方式匹配 ASCII 字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML 中是大小写敏感的。

伪类和伪元素

伪类使得你可以将处于特定状态的元素作为目标，就像你已向 DOM 添加了该状态的类一样。伪元素的作用就像是你已向 DOM 添加了全新的元素，并允许你为其设置样式。::before 和 ::after 伪元素让你可以使用 CSS 将内容插入文档。

伪类

伪类是选择器的一种，用于选择处于特定状态的元素（比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。）减少标记文本中多余的类，使代码更灵活、易于维护。

开头为冒号，“：bover”就是一个伪类。

常用：:first-child、:last-child、:only-child、:invalid

用户行为伪类（动态伪类）

用户以某种方式和文档交互的时候应用，表现得就像使一个类在用户和元素交互的时候加到了元素上一样。

:hover——上面提到过，只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。
:focus——只会在用户使用键盘控制，选定元素的时候激活。

<p><a href="">悬停在我上方</a></p>

a:link,
a:visited {
color: rebeccapurple;
font-weight: bold;
}

a:hover {
color: hotpink;
}

伪元素

表现得像往标记文本中加入全新的HTML元素一样。

以双冒号开头， ::before

例如：

如果你想选中一段的第一行，你可以把它用一个<span>元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变 HTML 的方式来可预测地这么做是不可能的。

::first-line伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。

article p::first-line {
font-size: 120%;
font-weight: bold;
}

<article>
<p>
蔬菜对你有好处，所以你需要多吃大头菜、大葱、白萝卜、苋菜、番茄酱、甜瓜、红豆、大蒜。
</p>

<p>
秋葵浓汤、甜菜叶、玉米、鸡冠菜、菊苣、秋葵浓汤、葫芦。欧芹、葱、西葫芦、塌棵菜、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、裙带菜、番茄。蒲公英、黄瓜、花生、豌豆、花生、鸡冠菜、西葫芦。
</p>
</article>

组合使用伪类和伪元素

article p:first-child::first-line {
font-size: 120%;
font-weight: bold;
}

从CSS插入文本字符（生成文本），::before、::after伪元素结合content属性

一些屏幕阅读器无法选中插入的文本，更推荐用来插入小图标

<p class="box">我的 HTML 页面的盒子中的内容。</p>
.box::after {
content: " ➥";
}

关系选择器

后代选择器

使用空格 “ ”，

.box p {
color: red;
}

<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>

子代关系选择器

子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为<article>的直接子元素的<p>元素：article > p

邻接兄弟

邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随<p>元素之后的<img>元素 p + img

通用兄弟

如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。要选中所有的<p>元素后任何地方的<img>元素，我们会这样做：p ~ img

盒模型

在 CSS 中，所有的元素都被一个个的“盒子”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

每个在页面上占用空间的盒子都有类似的属性：

padding（内边距）：是指内容周围的空间。在下面的例子中，它是段落文本周围的空间。
border（边框）：是紧接着内边距的实线。
margin（外边距）：是围绕元素边框外侧的空间

这里还使用了：

width：元素的宽度。
background-color：元素内容和内边距底下的颜色。
color：元素内容（通常是文本）的颜色。
text-shadow：为元素内的文本设置阴影。
display：设置元素的显示模式。

盒模型基础

为了指定使用盒子样式，一般给该对象添加一个class属性

区块盒子与行内盒子

盒子类型分为区块盒子、行内盒子；类型指的是盒子在页面流中的行为方式以及与页面其他盒子的关系

盒子有内部显示、外部显示，使用 display 属性为显示类型设置各种值。

外部显示类型

一个拥有 block 外部显示类型的盒子会表现出以下行为：

盒子会产生换行。
width 和 height 属性可以发挥作用。
内边距、外边距和边框会将其他元素从当前盒子周围“推开”。
如果未指定 width，方框将沿行向扩展，以填充其容器中的可用空间。在大多数情况下，盒子会变得与其容器一样宽，占据可用空间的 100%。

某些 HTML 元素，如 <h1> 和 <p>，默认使用 block 作为外部显示类型。

一个拥有 inline 外部显示类型的盒子会表现出以下行为：

盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

某些 HTML 元素，如 <a>、 <span>、 <em> 以及 <strong>，默认使用 inline 作为外部显示类型。

内部显示类型

盒子还有内部显示类型，它决定了盒子内元素的布局方式。

区块和行内布局是网络上的默认行为方式。默认情况下，在没有任何其他指令的情况下，方框内的元素也会以标准流的方式布局，并表现为区块或行内盒子。

例如，可以通过设置 display: flex; 来更改内部显示类型。该元素仍将使用外部显示类型 block 但内部显示类型将变为 flex。该方框的任何直接子代都将成为弹性（flex）项，并按照弹性盒子规范执行。

当你继续详细学习 CSS 布局时，将会遇到 flex 以及盒子可以具有的其他各种内部值，例如 grid。

不同种类盒子例子

在 CSS 中添加了边框的段落。浏览器会将其渲染为一个盒子框。段落从新行开始，并扩展整个可用宽度。

使用 display: flex 布局的列表。这就为容器的子项（即弹性项）建立了弹性布局。列表本身是一个区块盒子，与段落一样，会扩展到整个容器的宽度，然后换行。

一个块级段落，内含两个 <span> 元素。这些元素通常是 inline，但是其中一个元素的类是 block，令其被设置为 display: block。

盒模型结构

内容盒子：显示内容的区域；使用 inline-size 和 block-size 或 width 和 height 等属性确定其大小。

内边距盒子：填充位于内容周围的空白处；使用 padding 和相关属性确定其大小。

边框盒子：边框盒子包住内容和任何填充；使用 border 和相关属性确定其大小。

外边距盒子：外边距是最外层，其包裹内容、内边距和边框，作为该盒子与其他元素之间的空白；使用 margin 和相关属性确定其大小。

CSS标准盒模型

.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}
方框实际占用的空间宽为 410px（350 + 25 + 25 + 5 + 5），高为 210px（150 + 25 + 25 + 5 + 5）

CSS替代盒模型

在替代盒模型中，任何宽度都是页面上可见方框的宽度。内容区域的宽度是该宽度减去填充和边框的宽度。无需将边框和内边距相加，即可获得盒子的实际大小。

.box {
box-sizing: border-box;
width: 350px;
inline-size: 350px;
height: 150px;
block-size: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}

盒子实际占用的空间在行向为 350px，在块向为 150px。

外边距、内边距、边框

外边距

外边距属性的值可以为正，也可以为负。

margin-top、margin-right、margin-bottom、margin-left

.box {
margin-top: -30px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 4em;
}

外边距折叠（页面中两个相邻盒子间的距离，是相对的，由两个margin值共同决定）

根据外边距相接触的两个元素是正边距还是负边距，结果会有所不同：

两个正外边距将合并为一个外边距。其大小等于最大的单个外边距。
两个负外边距会折叠，并使用最小（离零最远）的值。
如果其中一个外边距为负值，其值将从总值中减去。

边框（常用属性）

border-top、border-right、border-bottom、border-left
border-width、border-style、border-color
border-top-width、border-top-style、border-top-color
border-right-width、border-right-style、border-right-color
border-bottom-width、border-bottom-style、border-bottom-color
border-left-width、border-left-style、border-left-color

内边距

内边距位于边框和内容区域之间，用于将内容推离边框。与外边距不同，内边距不能为负数。任何应用于元素的背景都会显示在内边距后面。

padding-top、padding-right、padding-bottom、padding-left

盒子模型与行内模型

以上所有的方法都完全适用于块级盒子。某些属性也适用于行内盒子，例如由 <span> 元素创建的盒子。

在下面的示例中，我们在一个段落中使用了 <span>，并对其应用了 width、height、margin、border 和 padding。可以看到，宽度和高度都被忽略了。上下外边距、内边距边框都得到了应用，但不会改变其他内容与行内盒子之间的关系。内边距和边框与段落中的其他文字重叠。左右内边距、外边距和边框会将其他内容从方框中推开。

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

display：inline-block

display: inline-block 是 display 的一个特殊值，它提供了介于 inline 和 block 之间的中间位置。如果不希望项目换行，但又希望它使用 width 和 height 值并避免出现上述重叠现象，请使用它。

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

span {
margin: 10px;
padding: 20px;
width: 40px;
height: 20px;
background-color: lightblue;
border: 2px solid blue;
display: inline-block;
}

层叠、优先级与继承

常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。

CSS即层叠样式表(Cascading Stytle Sheets)，层叠可以理解为多个应用于同一元素的规则（继承而来的通用规则与针对该元素的规则，），但实际上只能生效一个，这就是规则冲突，通过设定优先级来确定生效哪一个规则。

控制继承

CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性都接收这些值。

inherit：设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
initial：将应用于选定元素的属性值设置为该属性的初始值。
revert：将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
revert-layer：将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
unset：将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样。

属性all 可以将这些继承属性值应用于几乎所有的属性：这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。

优先级判断

一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数：

ID：选择器中包含 ID 选择器则百位得一分。
类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
元素：选择器中包含元素、伪元素选择器则个位得一分。

选择器 ID 类元素优先级
h1 0 0 1 0-0-1
h1 + p::first-letter 0 0 3 0-0-3
li > a[href*="en-US"] > .inline-warning 0 2 2 0-2-2
#identifier 1 0 0 1-0-0
button:not(#mainBtn, .cta) 1 0 1 1-0-1

选择器	ID	类	元素	优先级
`h1`	0	0	1	0-0-1
`h1 + p::first-letter`	0	0	3	0-0-3
`li > a[href*="en-US"] > .inline-warning`	0	2	2	0-2-2
`#identifier`	1	0	0	1-0-0
`button:not(#mainBtn, .cta)`	1	0	1	1-0-1

内联样式，即 style 属性内的样式声明，优先于所有普通的样式，无论其优先级如何。这样的声明没有选择器，但它们的优先级可以理解为 1-0-0-0；即无论选择器中有多少个 ID，它总是比其他任何优先级的权重都要高。

!important属性值 可以用来覆盖所有上面所有优先级计算

覆盖 !important 唯一的办法就是另一个 !important 具有相同优先级而且顺序靠后，或者更高优先级。

覆盖声明的顺序

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

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

级联层的顺序

在级联层中声明 CSS 时，优先级的顺序由声明层的顺序来决定。在任何层之外声明的 CSS 样式会被按声明的顺序组合在一起，形成一个未命名的层，它会被当作最后声明的层。对于存在冲突的常规（没有 !important 声明）样式，后面的层比先前定义的层的优先级高。但对于带有 !important 标记的样式，其顺序相反——先前的层中的 important 样式比后面的层以及为在层中声明的 important 样式优先级要高。但内联样式比所有作者定义的样式的优先级都要高，不受级联层规则的影响。

当你在不同的层中有多个样式块，且其中提供了对于某一元素的单一属性的相互冲突的值时，声明该冲突样式的层的顺序将决定其优先级。而不是高优先级的层直接覆盖低优先级的层中的所有样式。需要注意的是单独的一个层中的样式的优先级仍旧会起作用。（!important等）

<p id="addSpecificity">具有边框和背景的段落</p>

@layer firstLayer, secondLayer;

p {
/* 0-0-1 */
background-color: red;
color: grey !important;
border: 5px inset purple;
}
p#addSpecificity {
/* 1-0-1 */
border-style: solid !important;
}

@layer firstLayer {
#addSpecificity {
/* 1-0-0 */
background-color: blue;
color: white !important;
border-width: 5px;
border-style: dashed !important;
}
}

@layer secondLayer {
p#addSpecificity {
/* 1-0-1 */
background-color: green;
color: orange !important;
border-width: 10px;
border-style: dotted !important;
}
}

让我们讨论一下上例以了解发生了什么。示例中，声明了两个级联层，按 firstLayer 和 secondLayer 的顺序声明。即使 secondLayer 的优先级更高，但其中声明的样式没有被使用。为什么？因为不分层的常规样式具有更高的优先级，覆盖了层中的常规样式，不论层的优先级如何，而具有 important 的样式，则是先前声明的层会覆盖后声明的层，而不是层的优先级。

如果你修改示例中 CSS 的第一行为 @layer secondLayer, firstLayer;，就会修改层声明的顺序，所有 firstLayer 中的 important 样式会被 secondLayer 中的冲突值覆盖。

CSS值（数据类型）和单位

CSS的值，又被称为CSS数据类型，使用<>符号来区别于CSS属性，如<color>值和color属性。

CSS 中的值类型是一种定义了一些可使用的值的集合的方式。这意味着如果你看到的 <color> 是有效的，那么你就不需要考虑可以使用哪种类型——不管是关键字、十六进制值还是 rgb() 函数等都是有效的。如果浏览器支持这些可用的 <color> 值，则可以使用它们当中的任意一个。

数字、长度和百分比

<integer>整数、<number>小数、<dimension>附加单位的<number>、<percentage>百分比

绝对长度单位：cm、px像素等

相对长度：

em：相对于本元素或父元素（因为是从父元素继承的）的字体大小；

rem相对于根元素的字体大小；

vh和vw分别相对于视口的高度和宽度

百分比：percent属性，相对于父元素。

数字：有些值接受数字，不添加任何单位。如元素的不透明度属性opacity（接受完全透明0和完全不透明1之间的数字）。

颜色

颜色关键词

<color>元素

background-color: antiquewhite古董白、blueviolet靛色

十六进制RGB值

每个十六进制值由一个散列/磅符号（#）和六个十六进制数字组成，每个十六进制数字都可以取 0 到 f（代表 15）之间的 16 个值中的一个

background-color: #02798b

RGB和RGBA 的值

使用空格分隔

rgb(红色通道绿色通道蓝色通道)

rgb()函数，三个参数，表示颜色的红色、绿色和蓝色通道值。

每个通道由一个介于 0 到 255 之间的十进制数字表示。

rgb(红色通道绿色通道蓝色通道不透明度)

或者四个参数，即颜色的alpha通道控制不透明度。

与opacity属性，RGBA中只能控制指定颜色的不透明度

HSL和HSLA值

HSL颜色模型。

使用空格分隔

hsl(色相饱和度亮度)

色调：颜色的底色。这个值在 0 和 360 之间，表示 color wheel 周围的角度。

饱和度：颜色有多饱和？它的值为 0–100%，其中 0 为无颜色（它将显示为灰色阴影），100% 为全色饱和度

亮度：颜色有多亮？它从 0–100% 中获取一个值，其中 0 表示没有光（它将完全显示为黑色），100% 表示完全亮（它将完全显示为白色）

hsla(色调饱和度亮度不透明度)

图片<image>数据类型

通过 url() 函数指向的实际图像文件，也可以是一个渐变。

<div class="box image"></div>
<div class="box gradient"></div>

.box {
height: 150px;
width: 300px;
margin: 20px auto;
border-radius: 0.5em;
}
.image {
background-image: url(https://mdn.github.io/shared-assets/images/examples/big-star.png);
}

.gradient {
background-image: linear-gradient(
90deg,
rgb(119 0 255 / 39%),
rgb(0 212 255 / 100%)
);
}

位置<position>数据类型

        <position> 数据类型表示一组 2D 坐标，用于定位一个元素，如背景图像（通过 background-position）。它可以使用关键字（如 top、left、bottom、right 以及 center）将元素与 2D 框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。

        一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 center。

        在下面的示例中，我们使用关键字将背景图像从容器的顶部到右侧放置了 40px。
background-position: right 40px;

字符串和标识符

字符串使用引号括起来，结合content属性，用于在指定生成的内容时。

如red等非字符串的关键字，被称为标识符

.box::after {
  content: "这是个字符串。因为它在 CSS 中被引号包裹了，所以我这么认为。";
}

函数

<div class="wrapper">
<div class="box">我的宽度是计算出来的。</div>
</div>

.wrapper {
width: 400px;
}
.box {
padding: 1em;
border-radius: 0.5em;
border: 5px solid rebeccapurple;
background-color: lightblue;
width: calc(20% + 100px);
}

在CSS中调整大小

原始尺寸 / 固有尺寸

图像文件自身的图片长宽尺寸，为固有尺寸

一个空的<div>元素，如果赋予边框border：5px；则呈现出一条宽为10px的直线段，因为没有内容，内容的高度为0。

设置具体的尺寸

给元素<div>指定尺寸，又称外部尺寸

.box {
border: 5px solid darkblue;
height: 150px;
width: 200px;
}设置了长宽，不再是直线段，但固定的长度height，会存在内容溢出问题。

把百分比作为内外边距

        可以使用百分比来赋予外部尺寸，但需要清楚是相对于什么东西的百分比。一般指父元素。

        使用百分比作为元素外边距（margin）或填充（padding）的单位时，值是以包含块的内联尺寸进行计算的，也就是元素的水平宽度。在我们的示例中，所有的外边距或填充都是宽度的 10%。

        请记住一个事实，当你使用百分比作为元素外边距或填充的单位时，你将得到一个相同尺寸的外边距或填充。

min-和max-尺寸

想让一个包含了变化容量的内容的盒子至少有个确定的高度，可以设置一个 min-height 属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。

.box {
border: 5px solid darkblue;
min-height: 150px;
width: 200px;
}

max-width 的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。这个技术是用来让图片可响应的，所以在更小的设备上浏览的时候，它们会合适地缩放。

max-width：100%

视口单元

视口：浏览器中看到的部分页面。
视口宽度单位：vw
视口高度单位u：vh
1vh相当于视口高度的1%

.box {
border: 5px solid darkblue;
width: 20vw;
height: 20vh;
font-size: 10vh; font：字体
}

背景与边框

CSS背景样式

background属性，示例：

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

background-color

背景颜色，接受所有<color>值

background-image

背景图片，从CSS添加

.a {
background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
}

background-repeat

控制图像的平铺行为，值如下：

no-repeat——阻止背景重复平铺。

repeat-x——仅水平方向上重复平铺。

repeat-y——仅垂直方向上重复平铺。

repeat——默认值，在水平和垂直两个方向重复平铺。

平铺：图片尺寸小于盒子时，用重复的图片铺满盒子。

background-size 调整背景图像的大小，值：

用于指定尺寸大小的长度，80px、10em等
cover：浏览器将使图像足够大，使它完全覆盖了盒子区域，同时仍然保持其宽高比。在这种情况下，图像的部分区域可能会跳出盒子外。
contain：浏览器会将图像调整到适合框内的尺寸。在这种情况下，如果图像的长宽比与盒子的长宽比不同，你可能会在图像的两边或顶部和底部出现空隙。

background-position 背景图像定位

最常见的 background-position 值有两个单独的值——一个水平值后面跟着一个垂直值。

.box {
background-image: url(image.png); 图片url
background-repeat: no-repeat; 不平铺
上下位于顶部，左右位于中间

background-position: top center;

background-position: 20px 10%;

距离盒子上方20px，距离盒子右边框10%盒子长度

background-position: top 20px right 10px;
}

渐变背景<gradient>数据类型

background-image: linear-gradient(
    105deg,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );

多个背景图像

用逗号‘，’隔开。

background-image:
url(image1.png), url(image2.png), url(image3.png), url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
10px 20px,
top right;
当不同的属性具有不同数量的值时，较小数量的值会循环——在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环——image3 将被赋予第一个位置值，image4 将被赋予第二个位置值。

background-attachement 背景附加

scroll：使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
fixed：使元素的背景固定在视口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。
local：将背景固定在它所设置的元素上，所以当你滚动该元素时，背景也随之滚动。

属性简写

如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。在下面的示例中，我们有一个渐变，它指定大小和位置，然后是指定为 no-repeat 的图像背景，它指定位置，然后是颜色。
background-color 只能在最后一个逗号之后指定。
background-size 值只能立即包含在 background-position 之后，用“/”字符分隔，例如：center/80%。

.box {
width: 500px;
height: 300px;
padding: 0.5em;
background:
linear-gradient(
105deg,
rgb(255 255 255 / 20%) 39%,
rgb(51 56 57 / 100%) 96%
)
center center / 400px 200px no-repeat,
url(https://mdn.github.io/shared-assets/images/examples/big-star.png) center
no-repeat,
rebeccapurple;
}

边框

边框属性 border

从四条边框统一样式，到细致划分

.box {
border: 1px solid black;
}
.box {
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属性

盒子上的圆角是通过使用 border-radius 属性和与盒子的每个角相关的普通属性来实现的。两个长度或百分比可以作为一个值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，你只会传入一个值，这个值会被用于这两个。

.box {
width: 500px;
height: 110px;
padding: 0.5em;
border: 10px solid rebeccapurple;
border-radius: 1em; 统一样式，半径1em
border-top-right-radius: 10% 30%; 右上角，水平半径10%盒子宽，垂直半径30%盒子高度
}

溢出的内容

溢出出现的原因，最早时，设置的盒子是固定尺寸的，但无法预料盒子中内容的多少，内容过多会溢出盒子，CSS为了尽量减少溢出内容不可见而产生的类似“数据损失”，默认能看到溢出的内容。（overflow：visible）

overflow属性

overflow：visible 溢出可见

overflow：hidden 隐藏溢出内容，要确定不影响使用

overflow：scroll 为盒子创建滚动条（水平方向和垂直方向）

overflow-x：scroll 水平方向

overflow-y：scroll 垂直方向、

overflow: auto 让滚动条在有比盒子所能装下更多的内容的时候才显示

使用scroll、auto等创建带滚动条的盒子，建立了区块格式化上下文（Block Formatting Context，BFC）在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。

图像、媒体和表单元素

替换元素

可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。

典型

<video>视频

<img>图片

调整图像大小

可使用max-width、min-width等

object-fit属性

object-fit的属性值	效果
contain	被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover	被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
fill	被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
none	被替换的内容将保持其原有的尺寸。
scale-down	内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

form表单

input[type="text"], 使用input[type="----"]的形式链接HTML
input[type="email"] {
border: 2px solid #000;
margin: 0 0 1em 0;
padding: 10px;
width: 100%;
}

input[type="submit"] {
border: 3px solid #333;
background-color: #999;
border-radius: 5px;
padding: 10px 2em;
font-weight: bold;
color: #fff;
}

input[type="submit"]:hover, input[type="submit"]:focus {
background-color: #333;
}

<form>
<div><label for="name">Name</label>
<input type="text" id="name"></div>
<div><label for="email">Email</label>
<input type="email" id="email"></div>

<div class="buttons"><input type="submit" value="Submit"></div>
</form>