CSS知识整理

CSS的优先级

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

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

!important

有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。用于修改特定属性的值， 能够覆盖普通规则的层叠。

控制继承

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

inherit

设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".

initial

设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。

unset

将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样

css选择器

组合选择器

h1, .special {
  color: blue;
} 

 标签属性选择器

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

 伪类和为元素

a:hover { }
例如，::first-line是会选择一个元素（下面的情况中是<p>）中的第一行，
类似<span>包在了第一个被格式化的行外面，然后选择这个<span>。
p::first-line { }

 运算符

article > p { }

选择器	示例	学习 CSS 的教程
类型选择器	h1 { }	类型选择器
通配选择器	* { }	通配选择器
类选择器	.box { }	类选择器
ID 选择器	#unique { }	ID 选择器
标签属性选择器	a[title] { }	标签属性选择器
伪类选择器	p:first-child { }	伪类
伪元素选择器	p::first-line { }	伪元素
后代选择器	article p	后代运算符
子代选择器	article > p	子代选择器
相邻兄弟选择器	h1 + p	相邻兄弟
通用兄弟选择器	h1 ~ p	通用兄弟

 盒子模型

分为块级盒子和内联盒子

块级盒子

• 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
• 每个盒子都会换行
• width 和 height 属性可以发挥作用
• 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开

内联盒子

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

我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

什么是 CSS 盒模型？

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。

盒模型的各个部分

CSS 中组成一个块级盒子需要：

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

如下图：

标准盒模型

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小

假设定义了 width, height, margin, border, and padding:

.box {   
  width: 350px;  
  height: 150px;  
  margin: 25px;  
  padding: 25px;   
  border: 5px solid black; } 

如果使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。

替代（IE）盒模型

你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的 ! 因为这个原因，css 还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。

默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。 这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小

box-sizing代表padding和border不会改变div的宽度，除非padding占满了内容区才会被撑出了。

边距

外边距折叠

理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。

在下面的例子中，我们有两个段落。顶部段落的页 margin-bottom为 50px。第二段的margin-top 为 30px。因为外边距折叠的概念，所以框之间的实际外边距是 50px，而不是两个外边距的总和。

您可以通过将第 2 段的 margin-top 设置为 0 来测试它。两个段落之间的可见边距不会改变——它保留了第一个段落 margin-bottom设置的 50 像素。

盒子模型和内联盒子

以上所有的方法都完全适用于块级盒子。有些属性也可以应用于内联盒子，例如由<span>元素创建的那些内联盒子。
在下面的示例中，我们在一个段落中使用了<span>，并对其应用了宽度、高度、边距、边框和内边距。可以看到，宽度和高度被忽略了。外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠。

使用 display: inline-block

display 有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用：您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。

背景和边框

opacity：不透明度属性(0-1之间)

rgba(2, 121, 139, .3);第四个值代表不透明度

控制背景平铺

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

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

控制背景图像大小

background-size:

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

背景图像定位

background-position属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是 (0,0)，框沿着水平 (x) 和垂直 (y) 轴定位。

你可以使用像top和right这样的关键字 (在background-image页面上查找其他的关键字):

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
} 

Copy to Clipboard

或者使用 长度值, and 百分比：

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

Copy to Clipboard

你也可以混合使用关键字，长度值以及百分比，例如：

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

Copy to Clipboard

最后，您还可以使用 4-value 语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的 CSS 中，我们将背景从顶部调整 20px，从右侧调整 10px:

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

渐变背景

.a {
  background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
}

.b {
  background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
  background-size: 100px 50px;
}

多个背景图像

background-image: 
url(image1.png), 
url(image2.png),
url(image3.png), 
url(image4.png);

背景附加

另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由background-attachment属性控制的，它可以接受以下值：

• scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
• fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。
• local: 这个值是后来添加的 (它只在 Internet Explorer 9+中受支持，而其他的在 IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。

长度

最常见的数字类型是<length>，例如 10px(像素) 或 30em。CSS 中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。

绝对长度单位

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

单位	名称	等价换算
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/6th of 1in
pt	点	1pt = 1/72th of 1in
px	像素	1px = 1/96th of 1in

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm。惟一一个您经常使用的值，估计就是 px(像素)。

相对长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位。

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

ems and rems

em和rem是您在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的，尤其是当您开始学习更复杂的主题时，比如样式化文本或 CSS 布局。下面的示例提供了一个演示。

HTML 是一组嵌套的列表—我们总共有三个列表，并且两个示例都有相同的 HTML。唯一的区别是第一个类具有 ems，第二个类具有 rems。

首先，我们将 16px 设置为<html>元素的字体大小。

概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”。带有 ems 类的<ul>内的<li>元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为 1.3em—是其父嵌套字体大小的 1.3 倍。

概括地说，rem 单位的意思是“根元素的字体大小”。(“根 em”的 rem 标准。)<ul>内的<li>元素和一个 rems 类从根元素 (<html>)中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。

css中调整大小

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

max-width属性可以缩小图片本身与容器一样大小。

在下面的示例里，我们使用了两次相同的图片。第一次使用，属性值已设为width: 100%，位于比图片大的容器里，因此图片拉伸到了与容器相同的宽度；第二次的属性值则设为max-width: 100%，因此它并没有拉伸到充满容器；第三个盒子再一次包含了相同的图片，同时设定了max-width: 100%属性，这时你能看到它是怎样缩小来和盒子大小相适应的。

视口单位

1vh等于视口高度的 1%，1vw则为视口宽度的 1%.你可以用这些单位约束盒子的大小，还有文字的大小。在下面的示例里，我们有一个大小被设为 20vh 和 20vw 的盒子。这个盒子里面有一个字母A，其font-size属性被设成了 10vh。

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

图像、媒体和表单元素

调整图片大小

如果想要一张图片可以盖住盒子的大小，可以使用object-fit,值为

• cover:缩小了图像，维持了图像的比例，所以图像可以整齐地充满盒子，同时由于比例保持不变,
• contain:图像将会缩放到足以放到盒子里面的大小。如果它和盒子的比例不同，这将会导致“开天窗”的结果,
• fill:它可以让图像充满盒子，但是不会维持比例

.cover {
  object-fit: cover;
}

继承和表单元素

在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用 body 中或者一个父元素中定义的字体，你需要向你的 CSS 中加入这条规则。

button,
input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
} 

样式化表格

间距和布局

通过 table-layout: fixed： 创建更可控的表布局，您可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容

默认情况下，当您在表元素上设置边框时，它们之间将会有间隔。

使用 border-collapse: collapse; 使表元素边框合并，生成一个更整洁、更易于控制的外观

:nth-child选择器用于选择特定的子元素。它也可以用一个公式作为参数，来选择一个元素序列。公式2n-1会选择所有奇数的子元素 (1、3、5 等)，而公式2n会选择所有偶数的子元素 (2、4、6 等等)。

letter-spacing:设置单元格之间的间距

/* spacing */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 20px;
}

样式化文字

字体栈

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

CSS 提供了 4 种常用的属性来改变文本的样子：

• font-style: 用来打开和关闭文本 italic (斜体)。可能的值如下 (你很少会用到这个属性，除非你因为一些理由想将斜体文字关闭斜体状态)：

• • normal: 将文本设置为普通字体 (将存在的斜体关闭)
  • italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
  • oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。

• font-weight: 设置文字的粗体大小。这里有很多值可选 (比如 -light, -normal, -bold, -extrabold, -black, 等等), 不过事实上你很少会用到 normal 和 bold以外的值：

• • normal, bold: 普通或者加粗的字体粗细
  • lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。100–900: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。

• text-transform: 允许你设置要转换的字体。值包括：

• • none: 防止任何转型。
  • uppercase: 将所有文本转为大写。
  • lowercase: 将所有文本转为小写。
  • capitalize: 转换所有单词让其首字母大写。
  • full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。

• text-decoration: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为：

• • none: 取消已经存在的任何文本装饰。
  • underline: 文本下划线.
  • overline: 文本上划线
  • line-through: 穿过文本的线 strikethrough over the text.

文字阴影

text-shadow

text-shadow: 4px 4px 5px red;

1. 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的。这个值必须指定。
2. 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。
3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为 0，这意味着没有模糊。可以使用大多数的 CSS 单位 length and size units.
4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为 black.

文本布局

文本对齐

text-align

• left: 左对齐文本。
• right: 右对齐文本。
• center: 居中文字
• justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同

行高

line-height

line-height: 1.5;

字母和单词间距

letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距

Font 样式：

• font-variant: 在小型大写字母和普通文本选项之间切换。
• font-kerning: 开启或关闭字体间距选项。
• font-feature-settings: 开启或关闭不同的 OpenType 字体特性。
• font-variant-alternates: 控制给定的自定义字体的替代字形的使用。
• font-variant-caps: 控制大写字母替代字形的使用。
• font-variant-east-asian(en-US): 控制东亚文字替代字形的使用，像日语和汉语。
• font-variant-ligatures: 控制文本中使用的连写和上下文形式。
• font-variant-numeric: 控制数字，分式和序标的替代字形的使用。
• font-variant-position: 控制位于上标或下标处，字号更小的替代字形的使用。
• font-size-adjust: 独立于字体的实际大小尺寸，调整其可视大小尺寸。
• font-stretch: 在给定字体的可选拉伸版本中切换。
• text-underline-position: 指定下划线的排版位置，通过使用 text-decoration-line 属性的underline 值。
• text-rendering: 尝试执行一些文本渲染优化。

文本布局样式：

• text-indent: 指定文本内容的第一行前面应该留出多少的水平空间。
• text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。
• white-space: 定义如何处理元素内部的空白和换行。
• word-break: 指定是否能在单词内部换行。

normal

使用默认的断行规则。

break-all

对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

keep-all

CJK 文本不断行。Non-CJK 文本表现同 normal。

break-word

他的效果是word-break: normal 和 overflow-wrap: anywhere 的合，不论 overflow-wrap的值是多少。

• direction: 定义文本的方向 (这取决于语言，并且通常最好让 HTML 来处理这部分，因为它是和文本内容相关联的。)
• hyphens: 为支持的语言开启或关闭连字符。
• line-break: 对东亚语言采用更强或更弱的换行规则。
• text-align-last: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。
• text-orientation: 定义行内文本的方向。
• word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。
• writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。

列表特定样式

• list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
• list-style-position ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
• list-style-image ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。

start

start 属性允许你从 1 以外的数字开始计数

<ol start="4">
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

reversed

reversed 属性将启动列表倒计数

<ol start="4" reversed>
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

value

value 属性允许设置列表项指定数值

<ol>
  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

样式化链接

• Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link 伪类来应用样式。
• Visited: 这个链接已经被访问过了 (存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。
• Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用 :hover 伪类来应用样式。
• Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()(en-US)) 它可以使用 :focus 伪类来应用样式。
• Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 :active 伪类来应用样式。
• color 文字的颜色
• cursor 鼠标光标的样式，你不应该把这个关掉，除非你有非常好的理由。
• outline 文字的轮廓 (轮廓有点像边框，唯一的区别是边框占用了盒模型的空间，而轮廓没有； 它只是设置在背景图片的顶部)。outline 是一个有用的辅助功能，所以在把它关掉之前考虑清楚；你至少应该将悬停 (hover) 状态的样式同时应用到选中 (focus) 状态上。

• 

 给网页链接插入图片

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

web字体

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

正常布局流

默认的，一个块级元素的内容宽度是其父元素的 100%，其高度与其内容高度一致。内联元素的 height width 与内容一致。你无法设置内联元素的 height width --- 它们就那样置于块级元素的内容里。如果你想控制内联元素的尺寸，你需要为元素设置display: block; （或者，display: inline-block; inline-block 混合了 inline 和 block 的特性。)

弹性盒子

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

section {
  display:flex
}

flex 模型说明

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

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

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

• row
• column
• row-reverse
• column-reverse

flex-wrap: wrap//任何溢出的元素将被移到下一行
flex: 200px;//flex: 200px 规则，意味着每个元素的宽度至少是 200px

flex-flow 缩写

flex-direction 和 flex-wrap — 的缩写 flex-flow

flex-direction: row;
flex-wrap: wrap;
--------------------
flex-flow: row wrap;

article {
  flex: 1;//这是一个无单位的比例值，
  表示每个 flex 项沿主轴的可用空间大小。
  本例中，我们设置 <article> 元素的 flex 值为 1，
  这表示每个元素占用空间都是相等的，
  占用的空间是在设置 padding 和 margin 之后剩余的空间
}

article {
  flex: 1 200px;
}
article:nth-of-type(3) {

  flex: 2 200px;
//这表示“每个 flex 项将首先给出 200px 的可用空间，
然后，剩余的可用空间将根据分配的比例共享“
}

水平和垂直对齐

还可以使用 弹性盒子的功能让 flex 项沿主轴或交叉轴对齐

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

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

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

button:first-child {
  align-self: flex-end;
}

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

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

flex 项排序

弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）

button:first-child {
  order: 1;
}

• 所有 flex 项默认的 order 值是 0。
• order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
• 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是 2，1，1 和 0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
• 第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。
• 你也可以给 order 设置负值使它们比值为 0 的元素排得更前面。

button:last-child {
  order: -1;
}

网格

网格是由一系列水平及垂直的线构成的一种布局模式

.container {
    display: grid;
}

将容器的display属性设置为grid来定义一个网络。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

使用 fr 单位的灵活网格

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;//
  这个单位表示了可用空间的一个比例
}

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;//第一个网格占据两个格子大小
}

fr可以与一般的长度单位混合使用，比如grid-template-columns: 300px 2fr 1fr，那么第一列宽度是300px，剩下的两列会根据除去300px后的可用空间按比例分配。

网格间隙

使用 grid-column-gap(en-US) 属性来定义列间隙，使用 grid-row-gap(en-US) 来定义行间隙；使用 grid-gap(en-US) 可以同时设定两者

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}

间隙距离可以用任何长度单位包括百分比来表示，但不能使用fr单位

重复构建行/列

你可以使用repeat来重复构建具有某些宽度配置的某些列。举个例子，如果要创建多个等宽轨道，可以用下面的方法。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

显式网格与隐式网格

到目前为止，我们定义过了列，但还没有管过行。但在这之前，我们要来理解一下显式网格和隐式网格。显式网格是我们用grid-template-columns 或 grid-template-rows 属性创建的。而隐式网格则是当有内容被放到网格外时才会生成的。显式网格与隐式网格的关系与弹性盒子的 main 和 cross 轴的关系有些类似。

隐式网格中生成的行/列大小是参数默认是auto，大小会根据放入的内容自动调整。当然，你也可以使用grid-auto-rows和grid-auto-columns属性手动设定隐式网格的大小。下面的例子将grid-auto-rows设为了100px，然后你可以看到那些隐式网格中的行（因为这个例子里没有设定grid-template-rows，因此，所有行都位于隐式网格内）现在都是 100 像素高了。

.container {
			  display: grid;
			  grid-template-columns: repeat(3, 1fr);
			  grid-auto-rows: minmax(100px,auto);
			  grid-gap: 20px;
			}

方便的 minmax() 函数

100像素高的行/列有时可能会不够用，因为时常会有比100像素高的内容加进去。所以，我们希望可以将其设定为至少100像素，而且可以跟随内容来自动拓展尺寸保证能容纳所有内容。显而易见，你很难知道网页上某个元素的尺寸在不同情况下会变成多少，一些额外的内容或者更大的字号就会导致许多能做到像素级精准的设计出现问题。所以，我们有了minmax函数。

minmax 函数为一个行/列的尺寸设置了取值范围。比如设定为 minmax(100px, auto)，那么尺寸就至少为 100 像素，并且如果内容尺寸大于 100 像素则会根据内容自动调整

自动使用多列填充

repeat函数中的一个关键字auto-fill来替代确定的重复次数

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));//根据后面的minmax分配的最小空间
  分配合适的网格数量
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}

基于线的元素放置

在定义完了网格之后，我们要把元素放入网格中。我们的网格有许多分隔线，第一条线的起始点与文档书写模式相关。在英文中，第一条列分隔线（即网格边缘线）在网格的最左边而第一条行分隔线在网格的最上面。而对于阿拉伯语，第一条列分隔线在网格的最右边，因为阿拉伯文是从右往左书写的。

我们根据这些分隔线来放置元素，通过以下属性来指定从那条线开始到哪条线结束。

• grid-column-start(en-US)
• grid-column-end(en-US)
• grid-row-start(en-US)
• grid-row-end(en-US)

这些属性的值均为分隔线序号，你也可以用以下缩写形式来同时指定开始与结束的线。

• grid-column
• grid-row

注意开始与结束的线的序号要使用/符号分开。

媒体查询

CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用

可以指定的媒体类型为：

• all
• print
• screen
• speech

例如

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

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

朝向

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

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

使用指点设备

@media (hover: hover) {
    body {
        color: rebeccapurple;
    }
}

媒体查询中的“与”逻辑

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

媒体查询中的“或”逻辑
@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

媒体查询中的“非”逻辑

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

媒体查询案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Responsive Web Design Task: Task</title>
    <link rel="stylesheet" href="../styles.css"/>
    <style>
      * {
        box-sizing: border-box;
      }

      html {
        font: 1.2em/1.4 Arial, Helvetica, sans-serif;
      }

      body {
        padding: 0 0 1em;
      }

      header {
        background-color: #333;
        color: #fff;
        border: 5px solid #000;
      }

      header ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      header a {
        color: #fff;
        text-decoration: none;
        display: block;
        padding: 0.5em 1em;
        border-top: 1px solid #999;
      }

      header .title {
        font-size: 150%;
        font-style: italic;
        font-weight: bold;
        padding: 1em;
      }

      main {
        padding: 0 1em;
      }

      .cards {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .cards li {
        border: 5px solid #000;
        margin-bottom: 1em;
      }

      .cards h2 {
        background-color: #333;
        color: #fff;
        margin: 0;
        padding: 0.5em 1em;
      }

      .cards .inner {
        padding: 0.5em 1em;
      }

      .sidebar {
        background-color: #333;
        border: 5px solid #000;
        padding: 0.5em 1em;
        color: #fff;
      }
	  @media screen and (min-width:93.75rem){
		  header{
			  display: flex;
			  justify-content: space-between;
		  }
		  header a{
			  border:none
		  }
		  nav>ul{
			  display: flex;
		  }
		  nav>ul>li{
			  padding: 1.5em 0em 0em 0em;
		  }
		  main{
			display: grid;
			grid-template-columns:3fr 1fr;
		  }
		  .cards{
			  display: grid;
			  grid-template-columns: 1fr 1fr 1fr;
			  grid-gap:20px;
		  }
		 .sidebar{
			 margin: 15px;
		 }
	  }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <header>
      <div class="title">My Website</div>
      <nav>
        <ul>
          <li>
            <a href="">Link 1</a>
          </li>
          <li>
            <a href="">Link 2</a>
          </li>
          <li>
            <a href="">Link 3</a>
          </li>
        </ul>
      </nav>

    </header>

    <main>
      <article>
        <h1>This is the main heading</h1>
        <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>

        <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

        <ul class="cards">
          <li>
            <h2>Card One</h2>
            <div class="inner">
              <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado.</p>
            </div>
          </li>
          <li>
            <h2>Card Two</h2>
            <div class="inner">
              <p>Daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
            </div>
          </li>
          <li>
            <h2>Card Three</h2>
            <div class="inner">
              <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
            </div>
          </li>
          <li>
            <h2>Card Four</h2>
            <div class="inner">
              <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
            </div>
          </li>
          <li>
            <h2>Card Five</h2>
            <div class="inner">
              <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p>
            </div>
          </li>

        </ul>
      </article>
      <aside class="sidebar">
        <p>Have you discovered all of the other excellent content on this website?</p>

      </aside>
    </main>

  </body>

</html>

创建液态网格

这个网格表现的不错，但是它长度固定。 我们实际却想要一个弹性（流体）的网格，它可以随着浏览器的viewport大小的变化自动伸缩。为了达成这个目标，我们需要把相应的像素的长度变为百分比长度。

把固定宽度转为伸缩的基于百分比宽度的算式在下面：

target / context = result

在我们的列宽里，我们的目标列长度是 60 像素，我们的上下文是 960 像素的包装。我们可以这么计算百分比：

60 / 960 = 0.0625

然后我们挪动小数点两位，得到百分数 6.25%。所以在 CSS 里面，我们可以用 6.25% 代替 60 像素。

我们需要同样这么算间隔：

20 / 960 = 0.02083333333

所以我们需要用 2.08333333% 代替.col里margin-left的 20 像素，和.wrapper里padding-right的 20 像素。

使用 calc() 函数的更简单计算

你可以用 calc() 函数来在 CSS 里面做数学方面的计算——这允许你在 CSS 里插入简单的算式，来计算那些值 

.col.span4 {
  width: calc((6.25%*4) + (2.08333333%*3));
}