软件
产品
浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：
!important
有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。用于修改特定属性的值， 能够覆盖普通规则的层叠。
CSS 为控制继承提供了四个特殊的通用属性值。每个 css 属性都接收这些值。
inherit
设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承".
initial
设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。
unset
将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
组合选择器
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 | 通用兄弟 |
分为块级盒子和内联盒子
我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。
CSS 中组成一个块级盒子需要：
如下图：
在标准模型中，如果你给盒设置 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。
你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的 ! 因为这个原因，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 有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用：您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。
opacity：不透明度属性(0-1之间)
rgba(2, 121, 139, .3);第四个值代表不透明度
background-repeat属性用于控制图像的平铺行为。可用的值是：
background-size:
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属性控制的，它可以接受以下值：
最常见的数字类型是<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>)中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。
如果你有一个包含了变化容量的内容的盒子，而且你总是想让它至少有个确定的高度，你应该给它设置一个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 { 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 种常用的属性来改变文本的样子：
文字阴影
text -shadow
text-shadow: 4px 4px 5px red;text-align
行高
line-height
line-height: 1.5;字母和单词间距
letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距
Font 样式：
文本布局样式：
normal
使用默认的断行规则。
break-all
对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
keep-all
CJK 文本不断行。Non-CJK 文本表现同 normal。
break-word
他的效果是word-break: normal 和 overflow-wrap: anywhere 的合，不论 overflow-wrap的值是多少。
列表特定样式
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>样式化链接
给网页链接插入图片
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 框时，它们沿着两个轴来布局：
弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排（在英语/中文浏览器中是从左到右）。
flex-wrap: wrap//任何溢出的元素将被移到下一行flex: 200px;//flex: 200px 规则，意味着每个元素的宽度至少是 200pxflex-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 项在交叉轴上的位置。
button:first-child { align-self: flex-end;}justify-content 控制 flex 项在主轴上的位置。
flex 项排序
弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）
button:first-child { order: 1;}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;}基于线的元素放置
在定义完了网格之后，我们要把元素放入网格中。我们的网格有许多分隔线，第一条线的起始点与文档书写模式相关。在英文中，第一条列分隔线（即网格边缘线）在网格的最左边而第一条行分隔线在网格的最上面。而对于阿拉伯语，第一条列分隔线在网格的最右边，因为阿拉伯文是从右往左书写的。
我们根据这些分隔线来放置元素，通过以下属性来指定从那条线开始到哪条线结束。
这些属性的值均为分隔线序号，你也可以用以下缩写形式来同时指定开始与结束的线。
注意开始与结束的线的序号要使用/符号分开。
媒体查询
CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用
可以指定的媒体类型为：
例如
@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() 函数来在 CSS 里面做数学方面的计算——这允许你在 CSS 里插入简单的算式，来计算那些值
.col.span4 { width: calc((6.25%*4) + (2.08333333%*3));}
免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删
技术文档
推荐好文
155-2731-8020
