【CSS】CSS学习

CSS

选择器

类型、类和 ID 选择器

/* 类选择器 */
.class {
    color: red;
}

/* ID 选择器 */
#id {
    color: blue;
}

/* 类型选择器 */
div {
    color: green;
}

伪类与伪元素

/* 伪类 */
a:hover {
    color: red;
}

/* 伪元素 */
p::first-line {
    color: blue;
}

后代选择器

/* 后代选择器 */
div p {
    color: green;
}

子代关系选择器

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

/* 子代关系选择器 */
div > p {
    color: green;
}

邻接兄弟

邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。

/* 邻接兄弟选择器 */
div + p {
    color: green;
}

通用兄弟

如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。

/* 通用兄弟选择器 */
div ~ p {
    color: green;
}

层叠、优先级与继承

层叠

样式表层叠——简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
层的优先权顺序是创建层的顺序。
一旦创建，就无法更改层顺序。
普通样式的层优先权是创建层的顺序。
未分层普通样式优先于有层普通样式。
重要样式的层优先权被反转，早期创建的层具有优先权。
所有有层的重要样式都优先于未分层的重要（和普通）样式。
普通内联样式优先于所有普通样式，无论是否分层。
重要内联样式优先于所有其他样式，正在过渡的样式除外。
作者样式无法覆盖重要内联样式（过渡除外，但这是临时的）。

优先级

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：

一个元素选择器不是很具体，则会选择页面上该类型的所有元素，所以它的优先级就会低一些。
一个类选择器稍微具体点，则会选择该页面中有特定 class 属性值的元素，所以它的优先级就要高一点。

继承

继承也需要在上下文中去理解——一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。
inherit
设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
initial
将应用于选定元素的属性值设置为该属性的初始值。
revert
将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
revert-layer
将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
unset
将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样
!important
有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用——!important。用于修改特定属性的值，能够覆盖普通规则的层叠。

盒模型

盒模型的各个部分
CSS 中组成一个区块盒子需要：

内容盒子

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

内边距盒子

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

边框盒子

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

外边距盒子

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

使用 display: inline-block

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

背景样式

CSS background 属性是本课程中我们将遇到的一些普通背景属性的简写表示。这些属性包括：
调整背景图像的大小
在上面的例子中，我们有一个很大的图像（ballons.jpg），由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。

你也可以使用关键字：

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

边框

圆角
盒子上的圆角是通过使用 border-radius 属性和与盒子的每个角相关的普通属性来实现的。

文本

CSS 中的书写模式是指文本的排列方向是横向还是纵向的。

writing-mode 的三个值分别是：

horizontal-tb: 块流向从上至下。对应的文本方向是横向的。
vertical-rl: 块流向从右向左。对应的文本方向是纵向的。
vertical-lr: 块流向从左向右。对应的文本方向是纵向的。

overflow 属性

overflow 属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。overflow 的默认值为 visible，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。

如果你想在内容溢出的时候把它裁剪掉，你可以在你的盒子上设置 overflow: hidden。
你可以使用 overflow-y 属性，设置 overflow-y: scroll 来仅在 y 轴方向滚动。

单位和大小

绝对长度单位

以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

相对长度单位

相对长度单位是相对于其他某些东西的。例如：

em 和 rem 分别相对于父元素和根元素的字体大小。
概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”。
概括地说，rem 单位的意思是“根元素的字体大小”。
vh 和 vw 分别相对于视口的高度和宽度。

使用百分数

许多时候，百分数是长度单位，正如我们在 Value and units 这节课中讨论的那样，它们常常可与长度互换。当使用百分数时，你需要清楚，它是什么东西的百分数。对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数。

min- 和 max- 尺寸

除了让万物都有一个确定的大小以外，我们可以让 CSS 给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它至少有个确定的高度，你应该给它设置一个 min-height 属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。

视口单位

视口，即你在浏览器中看到的部分页面，也是有尺寸的。在 CSS 中，我们有与视口尺寸相关的度量单位，即意为视口宽度的 vw 单位，以及意为视口高度的 vh 单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。

颜色

rgb

你可以向 rgb() 传递第四个参数，它代表颜色的 alpha 通道，控制不透明度。如果你把这个值设置为 0，它将使颜色完全透明，而 1 将使它完全不透明。介于两者之间的值会给你带来不同级别的透明度。

HSL

另一种指定颜色的方法是 HSL 颜色模型。hsl() 函数不接受红、绿、蓝值，而是接受色相、饱和度和亮度值，这些值用于区分 1670 万种颜色。

图片

你可以选择对容器内的图像作其他方式的处理。例如，你可能想把一张图像调整到能够完全盖住一个盒子的大小。

object-fit 属性可以在这里帮助你。当使用 object-fit 时，替换元素可以以多种方式被调整到合乎盒子的大小。

使用值 cover 来缩小图像，同时维持了图像的原始比例。这样图像就可以充满盒子。但由于比例保持不变，图像多余的一部分将会被盒子裁切掉。

在对替换元素使用各种 CSS 布局时，你可能会发现他们的表现方式与其他元素有一些细节上的差异。例如，flex 或者 grid 布局中，默认情况下元素会被拉伸到充满整块区域。但是图像不会被拉伸，而会对齐到网格区域或者弹性容器的起始处。

高级效果

回到我们的样式化文本模块，我们查看了 text-shadow 属性，它允许你将一个或多个阴影应用到元素的文本上。对于盒子来说，存在一个等价的属性——box-shadow 允许你将一个或多个阴影应用到一个实际的元素盒子中。

Filters（滤镜）

CSS 滤镜提供了一种过滤元素的方法，就好比你在诸如 Photoshop 这样的平面设计程序中过滤元素一样。有大量的不同的选项可以使用

Blend modes（混合模式）

CSS 混合模式允许我们为元素添加一个混合模式，以当两个元素重叠时，指定一个混合的效果——最终每个像素所展示的颜色将会是原来像素中颜色和其下面一层相组合之后的结果，对于像 Photoshop 这样的图形程序的用户来说，混合模式应该也非常熟悉。

这里有两个在 CSS 中用到的属性：

background-blend-mode, 用来将单个元素的多重背景图片和背景颜色设置混合在一起。
mix-blend-mode, 用来将一个元素与它覆盖的那些元素各自所设置的背景（background）和内容 (content) 混合在一起。

链接

链接状态

第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的伪类来应用样式：

Link：有目的地的链接（即不只是一个具名锚点），使用 :link 伪类来应用样式。
Visited：已访问过（存在于浏览器历史记录中）的链接，使用 :visited 伪类来应用样式。
Hover：被用户鼠标指针悬停的链接，使用 :hover 伪类来应用样式。
Focus：被选中的链接（比如通过键盘的 Tab 移动到这个链接，或者使用像 HTMLElement.focus() 这样的方法编程地聚焦链接），使用 :focus 伪类来应用样式。
Active：激活（如点击）的链接，使用 :active 伪类来应用样式。

布局

display 属性

在 css 中实现页面布局的主要方法是设定 display 属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个 display 的值，用作元素的默认行为方式。例如，英文段落显示在一个段落的下面，这是因为它们的样式是 display:block。如果在段落中的某个文本周围创建链接，则该链接将与文本的其余部分保持内联，并且不会打断到新行。这是因为<a>元素默认为 display:inline。

你可以更改此默认显示行为。例如，<li>元素默认为 display:block，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为 inline，它们现在将显示在彼此旁边，就像单词在句子中所做的那样。

Flex 布局

设置 display:flex，我们把 display: flex 添加到它的父元素时，这三个元素就自动按列进行排列。
我们可以在我们的所有子元素上添加 flex 属性，并赋值为 1，这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多空间，那么子元素们就会变得更宽，反之，他们就会变得更窄。

Grid 布局

Flexbox 用于设计横向或纵向的布局，而 Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。Grid 布局是一个二维布局系统，它允许我们在行和列上对元素进行布局。同 flex 一样，你可以通过指定 display 的值来转到 grid 布局：display: grid。下面的例子使用了与 flex 例子类似的 HTML 标记，描述了一个容器和若干子元素。除了使用 display:grid，我们还分别使用 grid-template-rows 和 grid-template-columns 两个属性定义了一些行和列的轨道。定义了三个 1fr 的列，还有两个 100px 的行之后，无需再在子元素上指定任何规则，它们自动地排列到了我们创建的格子当中。

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}

浮动

把一个元素“浮动”(float) 起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流 (normal flow) 中移除，这时候其他的周围内容就会在这个被设置浮动 (float) 的元素周围环绕。

float 属性有四个可能的值：

left — 将元素浮动到左侧。
right — 将元素浮动到右侧。
none — 默认值，不浮动。
inherit — 继承父元素的浮动属性。

定位

定位技术

定位 (positioning) 能够让我们把一个元素从它原本在正常布局流 (normal flow) 中应该在的位置移动到另一个位置。定位 (positioning) 并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。

静态定位

（Static positioning）是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
相对定位（Relative positioning）允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计（design pinpointing）非常有用。

绝对定位

（Absolute positioning）将元素完全从页面的正常布局流（normal layout flow）中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的 <html> 元素边缘固定，或者相对于该元素的最近被定位祖先元素（nearest positioned ancestor element）。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。

固定定位

（Fixed positioning）与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。

粘性定位

（Sticky positioning）是一种新的定位方式，它会让元素先保持和 position: static 一样的定位，当它的相对视口位置（offset from the viewport）达到某一个预设值时，它就会像 position: fixed 一样定位。

Z 轴

Z 轴（z-index）属性允许你控制元素在页面上的堆叠顺序。默认情况下，元素按照它们在 HTML 中的顺序堆叠，但是你可以使用 z-index 属性来改变这个顺序。

弹性盒子

flex 模型说明
当元素表现为 flex 框时，它们沿着两个轴来布局：

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）

列还是行？
弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）——它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排（在英语/中文浏览器中是从左到右）。

flex-direction: column;

换行
当你在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的弹性盒子子元素会溢出，破坏了布局。这时候你可以使用 flex-wrap 属性来控制弹性盒子子元素是否换行。

flex-wrap: wrap;

同时，把以下规则应用到 flex 容器中的所有 flex 项：

flex: 1 1 200px;

flex-flow 缩写
flex-flow 属性是 flex-direction 和 flex-wrap 的缩写。它的默认值是 row nowrap，这意味着弹性盒子子元素会在一行中排列，不会换行。

flex-flow: column wrap;

flex 项的动态尺寸

article {
  flex: 1;
}

这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。

flex 是一个可以指定最多三个不同值的缩写属性：

第一个就是上面所讨论过的无单位比例。可以单独指定全写 flex-grow 属性的值。
第二个无单位比例——flex-shrink——一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。这是一个相当高级的弹性盒子功能，我们不会在本文中进一步说明。
第三个是上面讨论的最小值。可以单独指定全写 flex-basis 属性的值。

align-items 控制 flex 项在交叉轴上的位置。

默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。我们的第一个例子在默认情况下得到相等的高度的列的原因。
在上面规则中我们使用的 center 值会使这些项保持其原有的高度，但是会在交叉轴居中。这就是那些按钮垂直居中的原因。
你也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。

align-items: center;

justify-content 控制 flex 项在主轴上的位置。

默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
你也可以用 flex-end 来让 flex 项到结尾处。
center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
而我们上面用到的值 space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
还有一个值是 space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。

justify-content: space-around;

align-self 属性
align-self 属性允许你在单个 flex 项上覆盖 align-items 属性的值。这对于在一个 flex 容器中有一个 flex 项需要不同的对齐方式时非常有用。

align-self: flex-end;

order 属性
order 属性允许你在 flex 项中重新排序。默认情况下，所有 flex 项的 order 值为 0，但是你可以使用任何整数值来重新排序它们。这对于在一个 flex 容器中有一个 flex 项需要不同的对齐方式时非常有用。

order: 1;

网格布局

什么是网格布局？
网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。

一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。

使用 fr 单位的灵活网格
除了长度和百分比，我们也可以用 fr 这个单位来灵活地定义网格的行与列的大小。这个单位代表网格容器中可用空间的一份，可能有点抽象，看看下面的例子吧。

使用下面的规则来修改你的网格轨道，创建 3 个宽度为 1fr 的列：

grid-template-columns: 1fr 1fr 1fr;

网格间隙
使用 grid-column-gap 属性来定义列间隙；使用 grid-row-gap 来定义行间隙；使用 grid-gap 可以同时设定两者。

grid-gap: 10px;

网格线的命名
你可以给网格线命名，这样你就可以更容易地引用它们。这对于大型网格布局特别有用，因为它可以让你更容易地理解你的布局。

grid-template-columns: [first] 100px [line2] 100px [line3] 100px [last];

设置 break-inside
我们可以使用 CSS Fragmentation 中声明的属性控制这一特性。这份规范提供了一些属性来控制 multicol 和多页媒体中的内容拆分、折断。比如，在规则 .card 上添加属性break-inside，并设值 avoid 。.card 是标题和文本的容器，我们不想拆开这个盒子。

.card {
    break-inside: avoid;
}

浮动

清除浮动
我们看到，一个浮动元素会被移出正常文档流，且其他元素会显示在它的下方。如果我们不想让剩余元素也受到浮动元素的影响，我们需要 停止 它；这是通过添加 clear 属性实现的。

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

clear 属性接受下列值：

left：停止任何活动的左浮动
right：停止任何活动的右浮动
both：停止任何活动的左右浮动

响应式设计

需要你理解的很重要的一点是响应式 Web 设计不是单独的技术，它是描述 Web 设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词。在 Marcotte’s 原来的探索中，这意味着灵活网格（使用 float）和媒体查询，但是在这篇文章写就的几乎十年以后，Web 的响应式工作已经成为了默认做法。现代的 CSS 布局方式基本上就是响应式的，而且我们在 Web 平台上内置了新的东西，使得设计响应式站点变得容易。

响应式图像

最简单的处理响应式图像的方式是在 Marcotte 的早年的关于响应式设计的文章上所描述的那样。基本来说，你可以用一张有着所需最大尺寸的图像。然后缩放它。这仍然是今日所使用的一种方式，而且在大多数样式表里面，你在某些地方可以找到下面的 CSS：

img {
    max-width: 100%;
    height: auto;
}

响应式排版

使用视口单位实现响应式排版
一个有趣的方式是使用视口单位vw来实现响应式排版。1vw等同于视口宽度的百分之一，即如果你用vw来设定字体大小的话，字体的大小将总是随视口的大小进行改变。
问题在于，当做上面的事情的时候，因为文本总是随着视口的大小改变大小，用户失去了放缩任何使用vw单位的文本的能力。所以你永远都不要只用 viewport 单位设定文本。

这里有一个解决方法，它使用了calc()，如果你将vw单位加到了使用固定大小（例如em或者rem）的值组，那么文本仍然是可放缩的。基本来说，是vw加在了放缩后的值上。

h1 {
    font-size: calc(1em + 1vw);
}

视口元标签

如果你看看一张响应式页面的 HTML 源代码，你通常将会在文档的<head>看到下面的<meta>标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

为何需要这个？因为移动端浏览器倾向于在它们的视口宽度上说谎。
如果你有个窄屏布局，在 480 像素及以下的视口宽度下生效，但是视口是按 960 像素设定的，你将不会在移动端看到你的窄屏布局。通过设定width=device-width，你用设备的实际宽度覆写了苹果默认的width=960px，然后你的媒介查询就会像预期那样生效。
和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的。

initial-scale：设定了页面的初始缩放，我们设定为 1。
height：特别为视口设定一个高度。
minimum-scale：设定最小缩放级别。
maximum-scale：设定最大缩放级别。
user-scalable：如果设为no的话阻止缩放。

媒体查询

媒体类型

你可以指定的媒体类型为：

all
print
screen
speech

宽和高
为了建立响应式设计（已经广受浏览器支持），我们一般最常探测的特征是视口宽度，而且我们可以使用min-width、max-width和width媒体特征，在视口宽度大于或者小于某个大小——或者是恰好处于某个大小——的时候，应用 CSS。

这些特征是用来创建响应不同屏幕大小的布局的。例如，要想在视口正好是 600 像素的时候，让 body 的文本变为红色，你可能会使用下面的媒体查询。

@media screen and (width: 600px) {
  body {
    color: red;
  }
}

媒体功能

媒体功能是一种特殊的媒体查询，它们不是针对设备类型或者视口特征的，而是针对设备的能力的。例如，你可以使用媒体功能来检测设备是否支持触摸屏，或者是否支持颜色。

@media (hover: hover) {
  /* 这个设备支持悬停 */
}

朝向

一个受到良好支持的媒体特征是orientation，我们可以用它测得竖放（portrait mode）和横放（landscape mode）模式。要在设备处于横向的时候改变 body 文本颜色的话，可使用下面的媒体查询。

@media (orientation: landscape) {
  body {
    color: red;
  }
}

媒体查询中的“与”逻辑

你可以在媒体查询中使用逻辑运算符 and，来同时检测多个条件。例如，你可以检测设备是否支持颜色和悬停。

@media (color) and (hover) {
  /* 这个设备支持颜色和悬停 */
}

媒体查询中的“或”逻辑

你可以在媒体查询中使用逻辑运算符 or，来检测多个条件中的任意一个。例如，你可以检测设备是否支持颜色或者悬停。

@media (color), (hover) {
  /* 这个设备支持颜色或者悬停 */
}

媒体查询中的“非”逻辑

你可以在媒体查询中使用逻辑运算符 not，来检测不满足某个条件的设备。例如，你可以检测设备是否不支持颜色。

@media not (color) {
  /* 这个设备不支持颜色 */
}