）指定的宽度，!DOCTYPE 声明缺失，IE8 和早期版本会在右边增添 17px 的 margin。这似乎是一个滚动的预留空间。使用 float 属性始终设置在 DOCTYPE 声明中！

body{margin:0;padding:0;}.right{float:right;width:300px;background-color:#b0e0e6;}

透明度

IE9，Firefox，Chrome，Opera，和 Safari 浏览器使用透明度属性可以将图像变的不透明。 Opacity 属性值从0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

img{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}

图像拼合

图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量，并节省带宽。

#home{left:0px;width:46px;}#home{background:url("img_navsprites.gif") 0 0;}#prev{left:63px;width:43px;}#prev{background:url("img_navsprites.gif") -47px 0;}#next{left:129px;width:43px;}#next{background:url("img_navsprites.gif") -91px 0;}

定义背景图像和它的位置（左 0px，顶部 0px），即左上角是（0,0），往右和往下都是负数。

media 规则

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。

@media 规则允许在相同样式表为不同媒体设置不同的样式。

其它细节

CSS注释以 "/*" 开始, 以 "*/" 结束。

list-style-type:none- 移除列表前小标志。

不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px"，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

margin:0; padding:0;可以移除浏览器的默认设置将边距和填充设置为 0

CSS3

CSS3 是最新的 CSS 标准。

CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。

CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。

CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的规范。

一些最重要CSS3模块如下：

选择器盒模型背景和边框文字特效2D/3D转换动画多列布局用户界面

圆角和边框

在CSS3中border-radius属性就是被用于创建圆角：border-radius:25px;，在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。也可以在四个角上一一指定，两个和三个值也可以。

box-shadow属性被用来添加阴影: box-shadow: 10px 10px 5px #888888;

border-image属性允许你指定一个图片作为边框：

border-image:url(border.png) 30 30 round;-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */-o-border-image:url(border.png) 30 30 round; /* Opera */

背景属性

CSS3中可以通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。background-image: url(img_flwr.gif), url(paper.gif);同时显示多张图片。可以给不同的图片设置多个不同的属性。

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。

background-Origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。background-origin:content-box;

CSS3中background-clip背景剪裁属性是从指定位置开始绘制，background-clip: content-box;

渐变

background: linear-gradient(direction, color-stop1, color-stop2, ...); 方向可以是to right或to bottom right等，或者是度数，如180deg

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */

文本特征

CSS3中包含几个新的文本特征。

text-shadow：适用于文本阴影box-shadow：适用于盒子阴影text-overflow：指定应向用户如何显示溢出内容，如text-overflow: clip; word-wrap：如果某个单词太长，不适合在一个区域内，它扩展到外面，CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字允许长文本换行，如：word-wrap:break-word;word-break：单词拆分换行属性指定换行规则，value可以是keep-all或break-all

字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

2D 转换

2D变换方法：

translate()：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。如：transform: translate(50px,100px);rotate()：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。如：transform: rotate(30deg);scale()：元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。如：transform: scale(2,4);转变宽度为原来的大小的2倍，和其原始大小4倍的高度。skew()：包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。如：transform: skew(30deg,20deg);元素在X轴和Y轴上倾斜30度和20度。matrix()：和2D变换方法合并成一个。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。如：transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D转换类似，如：translateX(x)，多了X或Y或Z的坐标轴。

过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性指定效果的持续时间。

如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时，如：

div {width: 100px;height: 100px;background: red;-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */transition: width 2s, height 2s, transform 2s;}

div:hover {width: 200px;height: 200px;-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */transform: rotate(180deg);}

动画

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称规定动画的时长

div{width:100px;height:100px;background:red;animation:myfirst 5s;-webkit-animation:myfirst 5s; /* Safari and Chrome */}

@keyframes myfirst{from {background:red;}to {background:yellow;}}

@-webkit-keyframes myfirst /* Safari and Chrome */{from {background:red;}to {background:yellow;}}

必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

div{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}

@keyframes myfirst{0% {background:red;}25% {background:yellow;}50% {background:blue;}100% {background:green;}}

多列

能够创建多个列来对文本进行布局 - 就像报纸那样

多列属性：

column-count：指定元素的列数，如：column-count:3;column-gap：指定的列之间的差距，如：column-gap:40px;column-rule：设置列之间的宽度，样式和颜色，如：column-rule:3px outset #ff00ff;column-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-width

用户界面

用户界面属性：

resizebox-sizingoutline-offset

resize

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。这个 div 元素由用户调整大小。如：

div{border:2px solid;padding:10px 40px; width:300px;resize:both;overflow:auto;}

可以拖拉文本框的大小。

box-sizing

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。如;box-sizing:border-box;

CSS3 box-sizing属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box;则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:两个 div 现在是一样大小的，若去除掉box-sizing: border-box;属性，则div2因为有padding，整个框会更大。

.div1 { width: 300px; height:100px; border: 1px solid blue; box-sizing: border-box;}.div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box;}

outline-offset

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

轮廓不占用空间轮廓可能是非矩形

div{ border:2px solid black; outline:2px solid red; outline-offset:15px;}

图片

响应式图片会自动适配各种尺寸的屏幕。如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

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

卡片式图片

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

filter属性用为元素添加可视效果 (例如：模糊与饱和度) 。

.blur {-webkit-filter: blur(4px);filter: blur(4px);}.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}.invert {-webkit-filter: invert(100%);filter: invert(100%);}.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}.saturate {-webkit-filter: saturate(7); filter: saturate(7);}.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

弹性盒子

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

.flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey;}

.flex-item{ background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px;}

当然我们可以修改排列方式。如果我们设置 direction属性为 rtl(right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变

body { direction: rtl;}

flex-direction顺序指定了弹性子元素在父容器中的位置。

flex-direction的值有:

row：横向从左到右排列（左对齐），默认的排列方式。row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。column：纵向排列。column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

多媒体查询

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {    CSS-Code;}

复制

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

not:not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。only:用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。all:所有设备，这个应该经常看到。

也可以在不同的媒体上使用不同的样式文件：

在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:

@media screen and (min-width: 480px) { body { background-color: lightgreen; }}

可以在已有的查询媒体后使用逗号分隔来添加其他媒体查询 (类似 OR 操作符):

width在520~699

@media screen and (max-width: 699px) and (min-width: 520px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; }}

width在520~699 或大于1151时

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; }}

CSS工具

为了解决原生CSS存在的一些问题，社区中出现了各式各样的样式工具。有覆盖范围比较小，但是解决了最关键问题的 CSS module；也有以 Sass 为代表的，中规中矩的 CSS 预处理器；还有通过插件化形式，具备非常强大的可拓展性的 PostCSS；以及剑走偏锋的 tailwind 和 styled-components。他们各有自己的优势劣势，也不存在一个最好的工具，作为前端工程师，只能根据具体场景，选择最适合的工具。

原生 CSS

从前，车马很慢，书信很远，样式开发也很简单。我们只需要将样式放在 CSS 文件中，并直接引入即可。然而简单也是需要代价的：

缺少局部作用域：所有组件使用的所有 CSS 代码，都会全局生效。不支持条件逻辑：比如，我们无法非常方便的实现“第一个元素是红色，其余元素为绿色”，而是需要使用较复杂的伪类选择器。这也是 CSS 被人诟病“不是一种编程语言”的原因之一。

CSS module

CSS Modules 是这样一种效果：CSS 文件中的所有类名都默认具有局部作用域。即使是一个普通的 CSS 文件，只要开发者通过某种方式实现了这种效果。也可以称之为“使用了 CSS module”。

显著的不同是：CSS 文件居然导出了一个变量（style）。并且，html标签上的类名，并不是普通的字符串，而是从style变量导出的同名属性。

最主流、应用最广也是最早产生的实现方式，就是通过构建工具来实现。比如 webpack 生态下的 css-loader。这些工具会为 CSS 文件中的每个类名，生成一个哈希值。并在打包产物中，将哈希值作为类名使用。并且打包工具会保证 ，即使是不同的 CSS 文件中，存在同名的类，生成的哈希值也是不同的。从而保证了局部作用域。

CSS 预处理器

CSS 预处理器可以说是众多样式工具中比较主流的一类，有很多广受欢迎的工具：Less、Sass 以及 Stylus。

CSS预处理器是一种独有的语法来生成 CSS 代码的程序。也就是说，每种 CSS 预处理器，都会引入一种新的语言，开发者需要使用这种新的语言来编写源码。而预处理器会负责将源码编译成 CSS 代码。并且，虽然说会引入一种新的语言，但为了方便开发者使用，这种新的语言一般不会和 CSS 相差太多，基本上是 CSS 的一个超集。从这个意义上来说，CSS 预处理器其实和 Typescript 有些相似之处。

这些超集内容提供了很多的语法，比如支持定义变量和嵌套写法等，为我们的开发带来了很大的助力。

PostCSS

PostCSS 的名称可能会让人误解，认为这个工具是进行 CSS 后处理（对用户编写的标准 CSS 代码进行处理）的。从而与一些 CSS 预处理工具（比如上面提到的 Sass）区分开。实际上，PostCSS 依靠其简单的核心功能以及丰富的插件体系，能够同时完成 CSS 后处理，以及 CSS 预处理的工作。

PostCSS 的插件体系是极其丰富的，对于常见的需求，我们都能找到对应的插件。比如 Autoprefixer 是一个十分常用的 PostCSS 插件。它能够在输出的 CSS 中，对于兼容性有问题的 CSS 规则，自动加上不同浏览器的前缀。免去了开发人员手动为每一个规则加上不同前缀的繁琐而无趣的工作。

Tailwind

Tailwind和上面提到的工具，采取了完全不同的思路。因此也有了完全不同的架构。具体来说，tailwind 的思路是：它提供非常多的原子化CSS类。用户可以通过组合这些类来实现想要的样式。

总的来说 tailwind 的优点和缺点都十分突出。其缺点显而易见：大多数人都不熟悉这种方式，并且学习起来比较困难。要想熟练地使用 tailwind，需要对其提供的大多数常用的类都比较熟悉，看到某个组件的设计图，就能大概知道需要使用哪些原子化 CSS 类。而在达到这个程度之前，使用 tailwind 编写样式是一个比较痛苦的过程（写两行代码需要看十次文档）。

而优点可能不太容易察觉：

在大多数情况下，几乎不用自己编写一行CSS代码如果开发者能够对 tailwind 比较熟悉，就能够使用它提供的原子化 CSS 类完成全部样式。当我们需要对第三方组件库（比如 antD）的类添加一些样式时，我们就必须自己编写 CSS 代码了极大的提高开发效率之前需要编写多行 CSS 规则，现在只需要组合几个原子化 CSS 类几乎不需要考虑原子化CSS类之间的冲突原子化这个称呼就表明了，每个类只完成一个孤立的功能。所以不同类的 CSS 规则之间，不会有覆盖或重叠以一种非常独特的方式，解决了全局作用域问题如果我们完全使用 tailwind 来编程，我们会发现，我们几乎不需要定义 CSS 类。如此，既然不存在自定义的CSS 类，就根本不会存在 CSS 类污染了全局作用域的问题。但也有例外，比如上文提到的“为第三方组件库的类添加一些样式”时，还是会产生 CSS 类名，从而产生了污染全局作用域的风险

Styled-components

Jeff Atwood 在2007年提出 Atwood 定律：任何能够用JavaScript实现的应用系统，最终都必将用 JavaScript 实现。大家或许能想到 JS 在服务器、客户端领域的大放异彩。但大家想不到的是，JS 竟然也想要将样式也纳入统治范围之内。而这个趋势的产物，就是 styled-components。

使用者完全不需要引入 CSS 文件或者类 CSS 文件，也完全不需要定义和使用CSS类名。而是需要将样式代码，放在一个个样式组件中。而样式组件如何定义呢？需要使用暴露出来的styledapi，并且将样式代码放在模板字符串中。

值得一提的是 antd v5 开始使用了 css in js 方案，不过部分开发者认为 styled-components 这种“依赖模板字符串构建样式组件”的方式并没有给他们带来多大收益，但是它让样式组件，以及样式组件和逻辑组件分离的概念普及给了更多人，这本身就是一件很好的事情。

学习途径

在线学习

CSS教程：https://www.w3cschool.cn/css/index.html

CSS3教程：https://www.w3cschool.cn/css3/index.html

SAAS教程：https://www.w3cschool.cn/sass/

推荐书籍

《CSS 世界》：张鑫旭大神的书，十多年的 CSS 经验分享，必买书籍。《CSS 选择器世界》：张鑫旭大神的另一力作，深入讲解 CSS 选择器。《CSS 揭秘》：各种 CSS 奇淫巧技，主要是来开阔视野。《CSS 权威指南》：属于 CSS 的新华字典，很全面，属于一本工具书。《深入解析 CSS》：2020 年的新书，奇虎团工程师翻译，质量有保证。

标签： PostCSS HTML