由于CSS语言本身的表达能力较差，Web开发人员常常使用SASS、LESS之类的CSS预处理器语言来编写样式，然后再编译为普通的CSS代码。

PostCSS是一个类似的、较晚出现的CSS处理器，它基于JavaScript语言编写。PostCSS使用插件式的架构，而不是像以前的CSS预处理器那样内置所有特性。目前PostCSS的插件数量已经有数百个。

尽管名字中带有Post，PostCSS并不是所谓后处理器。它可以执行其它预处理器能够完成的任务。PostCSS本身只做两件事情：

1. 将输入代码转换为抽象语法树（AST）
2. 调用插件处理AST

PostCSS依赖于插件完成实际的工作，例如Lint、变量和混入的支持、未来CSS特性支持（transpile）、内联图片，等等。本节列出常用的插件。

all: initial

PostCSS可以转换基于任何语法的样式，不仅仅是CSS

基于postcss-loader：

module.exports = {
    module: {
        loaders: [
            {
                test: /\.css$/,
                // 需要在style、css等加载器之前执行
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function () {
        // 列出启用的PostCSS插件
        return [ require( 'autoprefixer' ), require( 'precss' ) ];
    }
}

postcss --use autoprefixer -c options.json -o main.css css/*.css

你需要安装PostCSS support插件，以获得以下特性：

1. 自动识别.pcss文件
2. 支持PostCSS语法高亮
3. 智能的代码完成
4. 可配置的代码样式和自动格式化
5. 代码导航支持
6. 对自定义选择器、自定义媒体查询的支持

如果要对任意.css文件启用PostCSS支持，你可以在Preferences ⇨ Languages & Frameworks ⇨ Stylesheets ⇨ Dialects 把方言切换为PostCSS。

这是一个必备的插件，可以让你脱离编写厂商特定的规则前缀的苦海。启用该插件后，如果需要编写弹性和子布局，你仅需要：

#content {
    display: flex;
}

该插件会将其转换为：

#content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

你可以配置需要支持的浏览器：

require( 'autoprefixer' )( {
    // 仅仅支持支持主流浏览器的最近两个版本
    browsers: [ 'last 2 versions' ]
    // ie 6-8 表示支持IE6-8
    // > 1% 表示支持全球占用率超过1%的浏览器
} )

该插件允许你使用未来版本CSS可能纳入标准的特性，它会将其编译为当前浏览器能够理解的CSS规则。

cssnext已经使用了Autoprefixer，因此不需要明确声明后者。

CSS 的层叠变量的自定义属性规范（CSS Custom Properties for Cascading Variables）允许在CSS中定义属性，并在样式规则中将其作为变量引用。自定义属性以

--

var()

:root {
    /* 自定义属性 */
    --text-color: black;
}

body {
    /* 引用自定义属性 */
    color: var(--text-color);
}

你还可以定义一个属性集，然后通过@apply来应用：

:root {
    /* 自定义属性集 */
    --danger-theme: {
        color: white;
        background-color: red;
    };
}

.danger {
    /* 应用属性集，新增两条样式规则 */
    @apply --danger-theme;
}

你可以在calc()函数中引用属性：

:root {
    --fontSize: 1rem;
}

h1 {
    font-size: calc(var(--fontSize) * 2);
}

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
    /* 对于小的viewport应用样式 */
}

使用操作符代替min- / max-，让语法更易读：

@media (width >= 500px) and (width <= 1200px) {
    /* 样式规则 */
}

/* 也可以和自定义媒体查询联用 */
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
@media (--only-medium-screen) {
    /* 样式规则 */
}

CSS 扩展规范（CSS Extensions）允许自定义选择器，你可以创建一个选择器来引用多个既有选择器：

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading {
    font-weight: bold;
}

转换后的结果为：

h1, h2, h3, h4, h5, h6 {
 font-weight: bold;
}

样式规则嵌套是非常实用的特性，可以减少重复的选择器声明。它是SASS、LESS等CSS预处理器能够流行的重要原因。

CSS 嵌套模块规范（CSS Nesting Module）中定义了标准的样式规则嵌套方式，cssnext支持这些规范。

规范引入了一种新的嵌套选择器，使用

&

嵌套样式规则具有两种语法：

1. 直接嵌套，直接编写在其它样式的内部，且规则的组合选择器（compound selector）的第一个必须是嵌套选择器：
   

   .foo {
       color: blue;
       & > .bar { color: red; }
   }
   /* 转换后 */
   .foo { color: blue; }
   .foo > .bar { color: red; }
   
   
   .foo {
       color: blue;
       &.bar { color: red; }
   }
   /* 转换后 */
   .foo { color: blue; }
   .foo.bar { color: red; }
   
   .foo, .bar {
       color: blue;
       & + .baz, &.qux {
           color: red;
       }
   }
   
   /* 等价于 */
   .foo, .bar { color: blue; }
   :matches(.foo, .bar) + .baz, :matches(.foo, .bar).qux { color: red; }

2. 嵌套@Rule：这种方式更加灵活，没有嵌套选择器的那些限制：
   

   .foo {
       color: red;
       @nest & > .bar { color: blue; }
   }
   /* 等价于 */
   .foo { color: red; }
   .foo > .bar { color: blue; }
   
   
   .foo {
       color: red;
       /* & 仍然表示父规则，但是位置随意了 */
       @nest .parent & { color: blue; }
   }
   /* 等价于 */
   .foo { color: red; }
   .parent .foo { color: blue; }
   
   .foo {
       color: red;
       @nest :not(&) { color: blue; }
   }
   /* 等价于 */
   .foo { color: red; }
   :not(.foo) { color: blue; }

color函数可以让颜色操控更加方便，该函数会被编译为rgba：

a {
    color: color(red alpha(-10%));
}

a:hover {
    color: color(red blackness(80%));
}

更多的颜色修饰符参考官方。

hwb函数类似于hsl，但是更加易于人类理解，该函数会被编译为rgba：

body {
    color: hwb(90, 0%, 0%, 0.5);
}

gray函数用于指定灰度颜色 ，该函数会被编译为rgba：

.foo {
    color: gray(85);
}

.bar {
    color: gray(10%, 50%);
}

四位或者八位的

#rrggbbaa

body {
    background: #9d9c;
}

cssnext允许任何样式属性取值initial，这个值不是浏览器默认值，而是规定的某个属性的默认值。例如display的默认值总是inline。

你可以使用

div {
    all: initial;
}

把所有属性设置为默认值。

该伪类匹配任何具有href属性的a/area/link元素：

nav :any-link {
    background-color: yellow;
}

该伪类：

p:matches(:first-child, .special) {
    color: red;
}

允许该伪类指定多个选择器：

p:not(:first-child, .special) {
  color: red;
}

对于不支持该语法的旧浏览器，自动转换为单个冒号：

a::before {  }

在某个样式类文件中启用PostCSS插件。例如清除CSS代码中的注释：

/* 标准语法 */
@use postcss-discard-comments(removeAll: true);
/* 备选语法 */
@use postcss-discard-comments {
    removeAll: true
}

/* 这里的注释会被清除 */
h1 {
    color: red
}

为某些样式属性提供简写：

/* 简写 */
.icon {
    size: 48px;
}
/* 等价于 */
.icon {
    width: 48px;
    height: 48px;
}


/* 简写 */
.frame {
    /* 第一个是下上，第二个是左右 */
    margin: * auto;
}
/* 等价于 */
.frame {
    margin-right: auto;
    margin-left: auto;
}


/* 简写 */
.banner {
    position: fixed 0 0 *;
}
/* 等价于 */
.banner {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

/* 简写 */
.canvas {
    color: #abccfc #212231;
}
/* 等价于 */
.canvas {
    color: #abccfc;
    background-color: #212231;
}

目前IDE对这些简写的支持不太好，可能误判为语法错误。

The post PostCSS学习笔记 appeared first on 绿色记忆.

CSS Modules是一个开源项目，它是一个简单的CSS模块化规范，主要完成两件事情：

1. 样式类名、动画名的作用域支持。这可以避免命名冲突
2. 模块化支持，允许CSS文件之间的依赖关系

与Less、SASS、PostCSS不同，CM并不尝试把CSS变得像一门编程语言（比如支持控制结构、变量），它仅仅解决模块化的基本问题——作用域和模块依赖。

使用CM时所有

url(...)

import

1. ./xxx

   和

   ../xxx

    这样的URL表示想对路径

2. xxx

   和

   xxx/yyy

    这样的URL表示目标位于模块目录（例如node_modules）内部

使用CM时，样式类名、动画名默认仅具有局部作用域。CM会把CSS文件编译为一个低级别ICSS（Interoperable CSS）格式，不过你编写的时候仍然使用普通CSS语法：

/* style.css */
.className {
    color: green;
}

ICSS会导出一个对象，其键是局部名称（即你在CSS中声明的样式类名），其值则是编译后的全局名称。全局名称正是运行时使用的真实CSS样式类名，默认情况下全局名称是依据局部名称生成的哈希串。

从JS模块引入一个CSS模块时，你自然获得上述导出对象，可以通过键引用CSS类名：

// 导入全部映射
import styles from "./style.css";
// 导入需要的映射
import { className } from "./style.css";

// 基于键引用全局样式类名
element.innerHTML = '<div class="' + styles.className + '">';

CM建议局部名称一律使用驼峰式大小写，单这不是必须的。

使用特殊伪类

:global

:global(.className) {
    color: green;
}

@keyframes :global(animeName){
}

全局名称不会被编译成哈希串，在JS中可以直接使用： 

element.innerHTML = '<div class="className">';

尽管通常情况下没有必要，你可以显式的声明局部作用域： 

:local(.className) {
    color: green;
}

CM支持让一个选择器compose另一个选择器定义的样式规则，并称其为组合（Composition）。例如：

.className {
    color: green;
    background: red;
}

.otherClassName {
    composes: className;
    color: yellow;
}

/* 编译结果 */
.global_name_className{
   color: green;
   background: red;
}
.global_name_otherClassName{
    color: yellow;
}

引用otherClassName的JS代码，会被编译为分别引用上面两个选择器的形式：

`<div class="${otherClassName}">`
<!-- 编译结果 -->
<div class="global_name_className global_name_otherClassName">

注意：

1. 你可以在单个composes规则中指定多个目标类名，例如

   composes: classNameA classNameB;

2. 你可以指定多次composes规则，但是必须位于其它规则的前面
3. 组合仅仅支持局部选择器，并且选择器必须是单个样式类名

使用组合时，你可以compose来自其它CSS模块的样式类：

.title {
    composes: className from './another.css';
    color: red;
}

注意： compose其它CSS文件中定义的样式类时，其应用顺序是不确定的，因此你不能假设同名规则的覆盖情况。

CM为流行的构建工具提供了插件支持。使用Webpack时，你可以通过css-loader来支持CM。配置示例：

// Webpack 1.x配置
module.exports = {
    module: {
        loaders: [
            {
                test: /\.css$/,
                // modules参数导致css-loader工作在module模式下
                loader: "style-loader!css-loader?modules"
                // 你可以使用localIdentName参数来定制全局名生成规则，默认规则为[hash:base64]
                loader: "style-loader!css-loader?modules&localIdentName=[path][name]-[local]-[hash:base64:5]"
            },
        ]
    }
};

当工作在modules模式下时，css-loader会把所有局部样式类名编译成唯一的全局名。 

CM产生的ICSS文件与SASS/SCSS/LESS之类的CSS预处理器是兼容的。你可以把预处理器的loader添加到加载器链中：

{
    test: /\.scss$/,
    loaders: [
        // 注意链条是从右向左（从下向上）执行的
        'style',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'resolve-url',
        'sass'
    ]
} 

在开发React应用程序时，可以考虑使用PostCSS插件React CSS Modules来代替CM，其优势是：

1. 不要求你使用驼峰式大小写的类名。使用CM时，Webpack的css-loader强制要求驼峰式大小写
2. 不需要在代码中到处引用styles对象中的属性
3. 全局CSS与CSS模块很容易区分：
   

   // RCS使用className引用全局CSS类名，styleName引用局部CSS类名
   <div className='global-css' styleName='local-module'></div> 

4. 如果styleName属性引用一个未定义的CSS模块，你可以得到一个警告而非错误

RCS扩展了目标React组件的render方法，依据输出元素上的styleName属性的值来寻找styles对象中的CSS模块，然后把找到的全局样式类名附加到元素的className后面。

这意味着，组件必须要被RCS装饰。

在开发环境下，你可能希望启用Sourcemaps和热模块替换（Hot Module Replacement） 。加载器style-loader已经支持HMR，因此HMR是开箱即用的。

参考下面的内容配置加载器：

// 需要预先安装style-loader、css-loader
{
    test: /\.css$/,
    loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

在生产环境下，你可能希望把CSS块合并到单个文件中：

// 需要预先安装style-loader、css-loader
// extract-text-webpack-plugin 用于把CSS块合并到单个文件
{
    module: {
        loaders: [
            // ExtractTextPlugin v2x
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract( {
                    notExtractLoader: 'style-loader',
                    loader: 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!resolve-url!postcss',
                } ),
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin( {
            filename: 'app.css',
            allChunks: true
        } )
    ]
}

要使用RCM，你的React组件必须被CSSModules装饰：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

// 可以使用ES7装饰器语法
@CSSModules(styles, options)
class Table extends React.Component {
    render() {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
            </div>
        </div>;
    }
}

// 必须装饰React组件，否则无法使用styleName属性
export default CSSModules( Table, styles, options);

其中options支持以下选项：

<div styleName='foo bar' /> 

被装饰的React组件，会获得

this.props.styles

<div>
   // 这两种写法等价
    <p styleName='foo'></p>
    <p className={this.props.styles.foo}></p>
</div>;

默认的，你不能在子组件中的输出元素中使用styleName属性，因为子组件没有被CSSModules装饰。你可以：

1. 使用装饰过的子组件
2. 使用从被装饰过的父组件中继承得到的

   this.props.styles

The post CSS Modules学习笔记 appeared first on 绿色记忆.

Sass是对CSS语言的扩展，为其提供了：变量、嵌套规则、混入、内联（inline）导入等语言特性。

Sass具有两套语法风格。

一种是旧的、基于缩进的语法风格，通常称为Sass，扩展名.sass 。这种语法风格使用缩进而不是代码块来表示嵌套规则，使用换行符而非分号来分隔属性，因而比较简洁。

另一种是新的、基于代码块的语法风格，通常称为Sassy CSS，扩展名.scss 。符合CSS3语法的文件都可以是SCSS文件。

使用命令行，可以在这两种格式进行转换：

# 将SASS转换为SCSS格式
sass-convert style.sass style.scss

# 将 SCSS转换为SASS格式
$ sass-convert style.scss style.sass

本文主要使用SCSS的语法风格。

Sass命令行基于Ruby语言开发，你需要先安装、配置好Ruby环境 。然后执行：

# 安装Sass命令行工具
gem install sass

# 转换为标准CSS文件
sass input.scss output.css
# 指定输出风格：
# nested：嵌套缩进的CSS代码，默认值
# expanded：没有缩进的、扩展的代码代码
# compact：简洁格式的代码代码
# compressed：压缩后的代码代码，用于生产环境
sass --style compressed test.sass test.css

# 监控文件的改动并自动更新
sass --watch input.scss:output.css

本章内容介绍Sass对标准CSS语言的扩展，Sass的某些特性与未来的CSS 4规范是兼容的。

Sass允许一个CSS规则嵌套编写在另外一个规则的内部，这样可以避免重复书写父选择器：

#main p {
    color: #00ff00;
    width: 97%;
    // 嵌套规则
    .redbox {
        background-color: #ff0000;
        color: #000000;
    }
}

转换后的CSS为：

#main p {
    color: #00ff00;
    width: 97%;
}
#main p .redbox {
    background-color: #ff0000;
    color: #000000;
}

Sass支持以

&

a {
    font-weight: bold;
    // 父选择器放在前面
    &:hover {
        text-decoration: underline;
    }
    // 也可以放在后面
    body.firefox & {
        font-weight: normal;
    }
}

转换后的结果：

a {
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
}
body.firefox a {
    font-weight: normal;
}

你可以把某些同类属性合并到一个块中：

.funky {
    font: {
        family: fantasy;
        size: 30em;
        weight: bold;
    }
}

Sass支持两种风格的注释：

/* */

//

除了普通的CSS语言扩展外，Sass还支持脚本机制。你可以定义变量、使用函数。任何CSS属性都可以用脚本来指定。

你可以使用

$

$width: 5em;

#main {
    // 引用变量
    width: $width;
}

变量的作用域取决于它所处于的块。除了使用$前缀以外，旧式的

!

:

=

#{}

@mixin firefox-message($selector) {
    body.firefox #{$selector}:before {
        content: "Hi, Firefox users!";
    }
}

@include firefox-message(".header");

/* .header周围的引号被自动去掉 */
body.firefox .header:before {
    content: "Hi, Firefox users!";
}

Helvetica, Arial, sans-serif

1px 2px, 5px 6px

(1px 2px) (5px 6px)

(key1: value1, key2: value2)

p {
    font: 10px/8px;             // 不解释为除法，原样输出
    $width: 1000px;
    width: $width/2;            // 使用变量，解释为除法
    width: round(1.5)/2;        // 使用函数，解释为除法
    height: (500px/2);          // 使用括号，解释为除法
    margin-left: 5px + 8px/2px; // 使用+号，解释为除法
    font: (italic bold 10px/8px); // 列表中，不解释为除法，原样输出
}
/* 转换结果 */
p {
    font: 10px/8px;
    width: 500px;
    width: 1;
    height: 250px;
    margin-left: 9px;
    font: italic bold 10px/8px;
}

p {
    cursor: e + -resize;
}
// 转换后：
p {
    cursor: e-resize;
}

p {
    color: #111 + #222;
}
// 转换后：
p {
    color: #333333;
}

p {
    color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
// 透明度不受影响：
p {
    color: rgba(255, 255, 0, 0.75);
}

SassScript定义了一些额外的函数，调用方式与普通CSS函数一致：

p {
    color: hsl(0, 100%, 50%);
}
// 转换后：
p {
    color: red;
}

调用SassScript函数时，可以明确指定参数名称，这样可以改变传参顺序：

p {
    color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

所有函数的列表：http://sass-lang.com/documentation/Sass/Script/Functions.html

lighten(#cc3, 10%) // #d6d65c

grayscale(#cc3) // #808080

你可以在选择器、属性名处使用插值来引用变量：

$name: foo;
$attr: border;
p.#{$name} {
    #{$attr}-color: blue;
}
// 转换后
p.foo {
    border-color: blue;
}

在属性值中，通常直接使用变量。如果想把插值周围的操作符作为普通CSS字符看待，可以使用插值：

p {
    $font-size: 12px;
    $line-height: 30px;
    // 这里的 / 不会作为除法看待
    font: #{$font-size}/#{$line-height};
}

// 转换后
p {
    font: 12px/30px;
}

在SassScript中，&符号同样代表父选择器：

.foo.bar .baz.bang, .bip.qux {
    $selector: &;
    // 这里变量$selector的值为 ((".foo.bar" ".baz.bang"), ".bip.qux")
}

如果父选择器不存在，则&的值为null。你可以依此判断父选择器是否存在：

@mixin does-parent-exist {
    @if & {
        &:hover {
            color: red;
        }
    } @else {
        a {
            color: red;
        }
    }
}

特殊语法

!default

$content: "First content";
// 如果$content没有赋值过，则设置为Second content?
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
    content: $content;
    new-content: $new_content;
}

// 转换后：
#main {
    content: "First content";
    new-content: "First time reference";
}

从另外一个选择器继承属性：

.class1 {
    border: 1px solid #ddd;
}

.class2 {
    @extend .class1;
    font-size: 120%;
}


/* 转换后 */
.class1, .class2 {
    border: 1px solid #ddd;  // .class2选择器自动获得该属性
}

.class2 {
    font-size: 120%;
}

在同一个规则中，该指令可以出现多次。

混入，定义一个可复用的代码块：

@mixin left {
    float: left;
    margin-left: 10px;
}
div {
    @include left;
}

/* 转换后 */
div {
    float: left;
    margin-left: 10px;
}

上述示例类似于@extend，但是混入本身不会引入选择器定义。混入的强大之处在于它支持参数： 

// 指定一个value参数，还提供了默认值
@mixin left($value: 10px) {
    float: left;
    margin-right: $value;
}

div {
    @include left(20px);
    // 使用默认值
    @include left();
    @include left;
}

/* 转换后：*/
div {
    float: left;
    margin-right: 20px;
}

用于把外部文件插入到当前文档中：

@import "path/filename.scss";
@import "http://foo.com/bar";
@import url(foo);
// 同时引入多个文件
@import "rounded-corners", "text-shadow";

如果插入的是CSS文件，则等价于CSS3的@import指令。 

如果你不希望Sass编译某个scss文件，可以让他的名字以下划线开头。这种文件可以用于被导入，导入时需要去掉下划线前缀：

// 导入_colors.scss
@import "colors";

@import可以嵌套在规则内部使用：

.example {
  color: red;
}

#main {
    @import "example";
}

// 转换后
#main .example {
    color: red;
}

用于自定义函数：

@function square($n) {
    @return $n * $n;
}

#squre {
    size: square(10);
}

// 转换后
#squre {
    size: 10000; }

SassScript支持条件分支、循环等基本的流程控制。

$width: 100;
div {
    @if $width >= 100 {
        height: 100px;
    } @else if ($width <50) {
        height: 50px;
    } @else {
        height: 75px;
    }
}

// 转换后：
div {
    height: 100px;
}

注意以开区间结束：

@for $i from 1 to 3 {
    .kssi-header-#{$i} {
        font-size: $i*10px;
    }
}

// 转换后：
.kssi-header-1 {
    font-size: 10px; }

.kssi-header-2 {
    font-size: 20px; }

$i: 0;
@while $i < 2 {
    .icon-user-#{$i} {
        background-image: url("user-#{$i}.jpg");
    }
    $i : $i + 1;
}

// 转换后

.icon-user-0 {
    background-image: url("user-0.jpg"); }

.icon-user-1 {
    background-image: url("user-1.jpg"); }

@each $user in user admin anonymous {
    .icon-#{$user}{
        background-image: url("#{$user}.png");
    }
}

// 转换后：
.icon-user {
    background-image: url("user.png"); }

.icon-admin {
    background-image: url("admin.png"); }

.icon-anonymous {
    background-image: url("anonymous.png"); }

The post Sass学习笔记 appeared first on 绿色记忆.

只有基于Webkit的浏览器才支持此特性，Firefox不支持：

selector  {
    background: -webkit-linear-gradient(#3ADB69, #059CF7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

注意：不能和背景颜色一起使用，但是可以和渐变背景一起使用：

selector {
    /* 不能和background-color配合 */
    background: -webkit-linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69);
    background: -o-linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69);
    background: -moz-linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69);
    background: linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69);
    background-repeat: no-repeat;
    background-size: 3px 100%; /* 背景宽度3像素，高度100% */
}

CSS格式说明：

/* direction：表示渐变发生的方向 */
/* 预定义值：to bottom, to top, to right, to left, to bottom right */
/* 至少需要两个颜色（color-stop），支持透明度 */
selector {
    background: linear-gradient(direction, color-stop1, color-stop2,...);
}

从左向右的渐变： 

selector {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #3ADB69, #059CF7); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #3ADB69, #059CF7); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #3ADB69, #059CF7); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #3ADB69, #059CF7); /* Standard syntax */
}

你可以为direction指定任意的渐变角度：

/* 从下往上为0deg，顺时针旋转，90deg为从左往右 */
selector {
    background: -webkit-linear-gradient(60deg, #3ADB69, #059CF7, #3ADB69); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(60deg, #3ADB69, #059CF7, #3ADB69); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(60deg, #3ADB69, #059CF7, #3ADB69); /* For Firefox 3.6 to 15 */
    background: linear-gradient(60deg, #3ADB69, #059CF7, #3ADB69); /* Standard syntax */
} 

要设置表单元素placeholder的样式，需要为不同浏览器设置伪元素/类的样式：

/* Safari, Google Chrome, Opera 15+ */
selector::-webkit-input-placeholder{}
/* Mozilla Firefox 19- */
selector:-moz-placeholder{}
/* Mozilla Firefox 19+ */
selector::-moz-placeholder{}
/* IE 10/11 */
selector:-ms-input-placeholder{} 

我们知道CSS由一系列的规则组成，每个规则包括两个部分：选择器（selector）和声明块（declaration block）组成。

CSS3支持通过更多的选择器将元素和样式进行绑定，避免在HTML中添加不必要的class属性，进一步的实现内容与样式分离。

即元素的名称（tag name）为选择器，匹配一个类型的元素：

元素标签名 {
    /* 样式声明 */
}

匹配特定的样式类，样式类通过HTML元素的class属性声明，一个元素可以声明多个样式类，以空格分隔：

.类名称 {
    /* 样式声明 */
}
元素标签名.类名称 {
    /* 样式声明 */
}

类选择器可以和元素选择器联用，进一步限制匹配范围，例如：

/* 匹配具有normal样式类的p元素 */
p.normal {}
/* 匹配具有normal样式类的任何元素 */
*.normal {}

 要限定目标元素同时具有多个样式类，可以使用多类选择器：

.类名称1.类名称2{
    /* 样式声明 */
}

/* 举例 */
p.normal.highlight{}

各样式类的顺序无关紧要。

 用于匹配具有特定ID的元素：

#标识符 {
    /* 样式声明 */
}

基于HTML元素的属性来匹配，包括4种变体：

属性选择器可以和元素选择器联用，例如：

p[class~="normal"]{}

用于匹配文档中所有元素：

* {
    /* 样式声明 */
}

如果多个选择器具有相同的样式规则，可以使用选择器分组，用逗号分隔多个选择器： 

选择器1, 选择器2 {
    /* 样式声明 */
}

也称为包含选择器、上下文选择器：

选择器1 > 选择器2 {
    /* 仅匹配选择器1匹配元素的直接子元素，且子元素满足选择器2 */
}
选择器1  选择器2 {
    /* 于上面类似，但是匹配任意后代，不限定直接子元素 */
}

选择器1 + 选择器2 {
    /* 匹配选择器1的任何后续兄弟元素（父元素相同），且这些兄弟元素匹配选择器2 */
}

所谓伪类，是指非用户指定的样式类，而是CSS中预定义的、与元素状态相关的特殊类：

:伪类{
    /* 样式声明 */
}

以下伪类适用于链接元素： 

以下伪类可以用于任何元素：

类似于伪类，伪元素并不是文档中真实存在的DOM节点，它描述与其它元素的关系。伪元素选择器也以冒号开头。 

p:before {
    content: "++"; /* 在元素前面插入的内容 */
    content: url(img.png) /* 还可以插入图片 */
    content: attr(alt) /* 插入HTML属性值 */
    /*counter(计数器名称)用于顺序排号，计数器名称任意*/
    content: '第'counter(c0) '节' 
}

p:nth-child(5){
    /* 匹配第5个子元素 */
}
p:nth-child(odd){
    /* 匹配序号为奇数的所有元素 */
}
p:nth-child(even){
    /* 匹配序号为偶数的所有元素 */
}

选择器1:not(选择器2){
    /* 样式声明 */
}

/*四个属性分别为：阴影水平偏移、阴影垂直偏移、阴影模糊半径、阴影颜色*/
text-shadow : length length length color;

@font-face {
    font-family: Gmem;
    src: url("fonts/gmem.otf") format("opentype");
    font-weight: normal;
}
/* 用于IE的字体定义，不需要指定format */
@font-face {
    font-family: Gmem;
    /* local表示使用客户端本地字体，指定多个源时，前面的优先使用 */
    src: local(Gmem), url("fonts/gmem.eot");
    font-weight: normal;
}

/* 引用字体定义 */
p {
    font-family: Gmem;
}

在CSS中，

display

在CSS2.1追加了一种inline-block类型。下面的例子说明这三者的区别：

上例中，灰色背景指示了父块元素的边界，绿色背景指示了设置不同Box类型的子元素的边界，子元素的宽高被设置为100像素。

可以看到，block、inline-block元素遵循宽高设置，而inline、inline-block元素则在“行内”显示。

使用inline-block可以方便的实现并列显示，避免使用float、position等复杂的布局方式。使用inline-block并排显示时，默认是底部对齐，可以修改

vertical-align

list-style-type

如果设置了盒的宽高，当某些内容无法容纳到盒中时，可以使用overflow属性决定溢出内容如何显示：

在CSS3中，该属性可以给盒子添加阴影。使用Safari浏览器时，需要写作

-webkit-box-shadow

-moz-box-shadow

box-shadow: length length length color;

将模糊半径设置为0，则阴影没有渐变消失的效果；将偏移设置为0，则可以实现类似于外发光的效果。

在CSS3中，该属性指定如何计算元素的宽高。我们知道width、height用于设置元素的宽高，而box-sizing可以指示此宽高是否包含元素的内部补白、边框的宽高。

此属性设置为

content-box

border-box

使用Safari、Firefox、IE时，此属性分别要写作

-webkit-box-sizing

-moz--box-sizing

-ms-box-sizing

使用column-count属性，可以把块中的文本均匀的划分到多列显示。可以同时使用column-gap、column-rule，来指定列之间的间隙大小、列分隔线的颜色举例：

.newspaper {
    /* 分为三列显示 */
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    /* 列与列之间的间隙为40像素 */
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    /* 列与列之间分隔线的样式 */
    -webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 4px outset #ff00ff; /* Firefox */
    column-rule: 4px outset #ff00ff;
}

CSS3引入了新的布局模型：弹性盒子（Flexbox）。设置样式

display: flex

display: inline-flex

弹性盒子布局仅关注条目在容器中的排列，条目内部如何显示不受影响，此布局的特性和ExtJS的flex布局很类似。

.flex-container {
    display: -webkit-flex; 
    display: flex;
} 

margin: auto

在CSS3中，利用转换功能，可以对文字或图像进行旋转、缩放、倾斜、移动处理。 要进行转换，可以指定CSS属性

transform

/* 多个转换函数以空格分开，可同时使用 */
transform: none|transform-functions;

Internet Explorer 10、Firefox、Opera 支持 transform 属性；Internet Explorer 9仅支持通过

-ms-transform

-webkit-transform

div {
    transform: rotate(7deg);
    -ms-transform: rotate(7deg); /* IE 9 */
    -moz-transform: rotate(7deg); /* Firefox */
    -webkit-transform: rotate(7deg); /* Safari 和 Chrome */
    -o-transform: rotate(7deg); /* Opera */
}

transform-origin

/* x-axis可以取值left center right 数值 百分比*/
/* y-axis可以取值top center bottom 数值 百分比*/
/* z-axis可以取值 数值 */
transform-origin: x-axis y-axis z-axis;

通过CSS3动画，可以让页面上的文字、图像具有移动、淡入淡出、变形等动画效果。CSS3支持通过两种方式实现动画：

1. Transitions：从一个CSS属性过渡到另外一个属性，形成动画效果
2. Animations：通过指定多个关键帧，实现更加复杂的动画效果

该属性的语法如下：

/* property 需要实现过渡的CSS属性名称，该值对应属性transition-property */
/* duration 完成过渡需要的时间，s或者ms，该值对应属性transition-duration */
/* timing-function 规定速度曲线的函数，该值对应属性transition-timing-function */
/* delay 规定何时启动过渡效果，该值对应属性transition-delay */
transition: property duration timing-function delay;

其中timing-function指定速度曲线函数，可选值包括：

要使用此功能，首先要定义一种特殊的CSS规则，语法如下：

@keyframes animation-name {
    from | to | percent {
        css-property : value;
        ... /*可以指定多个属性*/
    }
    ... /*可以指定多个帧*/
}
/* Safari 和 Chrome 使用下面的方式定义 */
@-webkit-keyframes {}

然后，可以在某个样式规则中引用已经定义的动画：

.rule {
    /* 已定义的动画（@keyframes）的名称 */
    animation-name: animation-name; /* Safari 和 Chrome */
    webkit-animation-name: animation-name;
    /* 动画完成需要的时间，0意味着没有动画效果 */
    animation-duration: 5s;
    -webkit-animation-duration:2s; /* Safari 和 Chrome */
    /* 动画重复的次数，infinite则无限播放 */
    animation-iteration-count: 10;
    -webkit-animation-iteration-count: 10; /* Safari 和 Chrome */
    /* 当动画不在播放时（已经结束，或者延迟而尚未开始），如何显示目标元素 */
    /* none 默认值，在开始前、结束后，动画不会在目标上应用任何样式 */
    /* forwards 在动画结束后，将最后一帧的样式应用给元素 */
    /* backwards 在延迟动画开始前，将第一帧的样式应用给元素 */
    /* both 同时应用forwards和backwards*/
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;/* Safari 和 Chrome */
}

最简单的例子，仅仅规定开始、结束两帧：

/* 移动效果 */
@keyframes slide {
    /*起始帧*/
    from {
        left: 0;
        top: 0;
    }
    /*结束帧*/
    to {
        left: 100px;
        top: 100px;
    }

}

 指定多个关键帧的例子：

/* 摇晃效果 */
@keyframes wobble {
    /*动画开始时*/
    0% {
        left: 100px;
    }
    /*动画时间消逝了40%时*/
    40% {
        left: 150px;
    }
    /*动画时间消逝了60%时*/
    60% {
        left: 75px;
    }
    /*动画结束时*/
    100% {
        left: 100px;
    }
}

进一步，还可以为每一个关键帧指定函数：

/* 弹跳效果 */
@keyframes bounce {
    from {
        top: 100px;
        animation-timing-function: ease-out;
    }
    25% {
        top: 50px;
        animation-timing-function: ease-in;
    }
    50% {
        top: 100px;
        animation-timing-function: ease-out;
    }
    75% {
        top: 75px;
        animation-timing-function: ease-in;
    }
    to {
        top: 100px;
    }
}

该特性用于针对特定媒体来改变样式，语法如下：

@media not|only mediatype and (media feature) {
    /* CSS样式规则 */
}

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

媒体类型包括：

媒体特性包括纵横比、颜色深度、设备尺寸、分辨率等等，详见：W3schools。

使用媒体查询，可以很方便的实现“响应式布局”。以本网站的首页为例，当浏览器宽度变窄后，可以自动由三栏切换为单栏显示。Bootstrap是一个流行的可以实现响应式布局的UI框架。

在以前，CSS仅支持RGB颜色，并且只能通过

opacity

利用RGBA、HSLA，可以基于alpha通道来设置透明度，其优势是可以针对背景、文字分别设置透明度，而opacity则只能整体上设置。下面是一个例子：

/* 四个数值分别为红、绿、蓝、透明度，完全透明为0，完全不透明为1 */
background-color: rgba(255, 0, 0, 0.5);

CSS3中，可以对一切颜色属性（color、border-color、background-color）设置特殊值 

transparent

该属性允许用户通过拖拽方式来改变元素的尺寸，支持的值包括none、both、horizontal、vertical、inherit。 inherit表示继承父元素的设置。

这一值用于取消对某一属性的样式设置，恢复其默认值。

The post CSS3学习笔记 appeared first on 绿色记忆.

1. CSS规则中URL相对于当前CSS文件，于引用CSS的网页的URL无关
2. CSS为每个HTML元素生成一个盒（Box），在其中包含元素的内容
3. CSS注释语法：

   /* 注释内容，可以多行 */

    

4. @import

    指令，用于引入外部样式表文件
5. URL格式

   url(protocol://server/pathname)

    ，url后面不得有空格
6. CSS值关键字：

   1. none

       表示不设置此属性

   2. inherit

       表示从父元素继承此属性

   3. initial

       从CSS3开始支持，表示恢复为默认值
7. 根元素：文档树顶端的元素，即html元素
8. 正常流：指从左向右，从上到下的显示方式。要使一个元素脱离正常流，可以使之成为浮动元素或者定位元素
9. 非替换元素：元素本身的内容包含在文档中，大部分元素都是非替换元素
10. 替换元素（replaced element）：元素本身仅仅是一个占位符，需要根据其标签、属性的不同来决定显示什么，例如input、img、textarea、select、object
11. 块级元素：类似p、div这样的元素，在正常流中，这类元素的元素框前、后会出现“换行”，兄弟块元素会垂直摆放。设置

    display:block

     可以让任何元素成为块级元素，生成块级框
12. 行内元素：也叫内联元素，类似span、strong，这类元素的元素框前后不会出现“换行”。设置

    display:inline

     可以让任何元素成为行内元素，生成行内框
13. 匿名文本：未包含在任何行内元素中的文本
14. em框：即字符框，实际的字形可以比em框告或者矮
15. 内容区：行内元素的内容区类似于块元素的内容框。非替换元素的内容区可以是各em框连接在一起构成的区域
16. 行间距（leading）：只适用于非替换元素，line-heiht与font-size的差值，等分为上下两部分，分别称为半间距（half-leading）
17. 行内框：对于非替换元素，行内框等于line-height；对于替换元素，行内框等于内容区高度，因为行间距不应用到替换元素
18. 行框：包含了该行所有行内框的最高最低点的最小框

CSS假定每个元素都会生成一个或者多个矩形框，称为元素框（element boxes）。元素框的最中央是内容区（content area），向外依次是可选的内边距（paddings）、边框（borders）、外边距（margins）。外边距通常是透明的，可以看到父元素的背景，外边距甚至可以是负数。下图示意了CSS的元素框模型：

每个元素都相对于它的包含块布局，包含块是元素的布局上下文。

CSS定义了一系列规则，来确定元素的包含块。对于文本来说，其最近的块祖先框、表单元格、行内块祖先框的内容框边界构成它的包含块，例如：

<body>
<!-- div的包含块是body，因此div的布局依赖于body的布局 -->
<div>
    <!-- p的包含块是div，因此p的布局依赖于div的布局 -->
    <p>This is a paragraph.</p>
</div>
</body>

如何在水平、垂直方向决定块元素的大小和位置，很不相同，这使得块元素的行为有时候显得诡异。

width指定的是内容区的宽度，而不是整个元素框。后者的宽度还包括内外边距、边框。

水平方向所有兄弟元素的元素框宽度之和，总是等于父元素的内容区宽度（width）。以下面的代码为例：

<div style="background-color: #DFE; border: 2px dotted #BDC;">
    <div style="width: 100px;height:25px;background-color: #FEE; border: 2px dotted #ECC;"></div>
</div>

虽然内部红色的div貌似只有100像素的宽度，实质上它的元素框宽度几乎等于绿色部分，右侧大片空白（绿色）都属于红色div的右外边距（margin-right）：

和水平方向布局有关的CSS属性有7个，它们和包含块宽度有如下关系（即使使用负外边距也满足）：

包含块的宽度 = 左外边距宽度 + 左边框宽度 + 左内边距宽度 + width  + 右内边距宽度 + 右边框宽度 + 右外边距宽度

包含块的宽度往往就是父元素的width值。

这7个属性中，wdith、margin-left、margin-right可以设置为auto，其它4个必须是特定的值。当：

1. 设置某单个值为auto，则auto属性根据其余两个属性自动计算——auto可用于“实际值”与“总和值”的差距
2. 设置margin-left、margin-right为auto，可以使元素相对于父元素水平居中
3. 如果三个值都设置为auto（默认值），则margin变为0，宽度尽可能大
4. 如果三个值都设置为非auto，那么margin-right强制变成auto

注意：父子元素在水平方向的外边距不会合并，因此元素的外边距（内边距、边框）可能导致子元素的偏移

块级替换元素的水平布局，与非替换元素（上文）类似，但是有一个附加的规则：如果width设置为auto，则元素的宽度是内容的固有宽度：

<img src="gmem.png" style="width: auto;"/> <!-- 如果图片大小是100像素，那么实际渲染为100像素-->

如果为替换元素设置width，那么其height会成比例的自动变化，除非明确设置。 

在垂直方向，一个块级元素的默认高度由其内容决定（相比之下，默认宽度为包含块宽度）。高度还会受到宽度影响，宽度越窄，则高度越高，以便容纳全部内容。

可以对任何块级元素显式设置高度：

1. 如果高度设置的大于内容固有高度，效果上好像多出额外的下内边距
2. 如果高度设置的小与内容固有高度，可能导致出现滚动条，或者溢出内容剪切

和垂直方向布局相关的CSS属性也有7个：上外边距高度 、上边框高度、上内边距高度、height、下内边距高度、下边框高度、下外边距高度。其中height、margin-top、margin-bottom可以设置为auto，其它4个必须是特定的值。当：

1. margin-top、margin-bottom设置为auto，相对于设置为0
2. 正常块级元素的height设置为auto，且仅有内联子元素，那么元素高度恰好能容纳内联内容
3. 正常块级元素的height设置为auto，且仅有块级子元素，那么元素的高度是最顶部子元素的上外边界到最底部下外边界的距离
4. 设置为百分比时，如果包含块的高度没有显式设置，那么设置任何百分比的高度都等价于auto

垂直方向布局的另外一个特点是相邻外边距的合并（重叠）——前一个元素的下边距、后一个元素的上边距，取其大者作为两者间的边距。例如：

<style>
    li{margin-top:20px;margin-bottom: 20px;border:1px dashed #AED;}
</style>
<ol>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ol>

你会注意到列表条目之间的距离是20像素，而不是40像素。 

行内元素的布局没有块元素那么直接——生成一个简单的矩形框。当行内文本较多，形成多行时，各文本行的边框默认相互重叠（上一行的下边框，位于下一行的上边框的下面，这是因为边框画在行外部的一个像素上）。

对于行内元素：

1. 行内元素的背景默认应用到内容区和内边距
2. 行内元素的边框包围内容区和内边距
3. 非替换元素的内外边距、边框不会影响元素行内框的高度，即不会导致line-height变大
4. 替换元素的外边距、边框会影响行内框的高度，也可能进而影响行框的高度
5. 各行内框，在行中依据自己的

   vertical-align

    属性，在垂直方向对齐

行的高度由其组成元素、文本节点确定。

line-height

<!-- 由于下面的块元素没有任何内容，因此设置line-height为任意值，都不会影响行框的创建 -->
<div style="line-height:48px;border :1px dashed #A33;"></div>
<!-- div的高度为0 -->

注意：块元素中的各行文本都是行内元素。

1. 按下列步骤确定行内各元素的行内框高度：
   1. 得到非替换元素、匿名文本的font-size和line-height值，求差后等分，应用到内容区上下
   2. 得到各替换元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-height、border-bottom-height，将其加在一起
2. 对于各内容区，确定其在整行基线的上下方分别超出多少。需要获得各元素、匿名文本的基线位置，然后得到行本书基线的位置，最后对齐之；对于替换元素，将其底部放在整行的基线上
3. 对于指定了vertical-align的元素，确定其垂直偏移量，即元素的行内框需要上移/下移多远
4. 此时，每个行内框的大小位置已经确定，行框的高度自然确定

如果行中只包含非替换元素或匿名文本，则font-size确定内容区的高度，亦即每个字符的em框高度都等于font-size。假设font-size为14px，而line-height为20px（行内框高度），那么这两者之间的差值6px会被UA等分为两个3px，分别应用到内容区的顶部和底部：

需要注意的是，font-size可能大于line-height，这时行内框的高度比内容区更小，这是合法的。 

行内框大小一致，并不能让文本整齐的排列，因为文本默认是按照基线对齐的：

修改垂直对齐属性，可能导致行内框的抬高或者降低，进而影响行框的高度。下面的例子示例了垂直对齐不同取值下的效果：

<div style="border:1px dotted #CCC;width: 95%;margin: auto;line-height: 100px;height:100px;font-size:25px;">
    <!-- 行内块元素，设置高度为容器1/2-->
    <span style="background-color: #A55;display: inline-block;height:50px;vertical-align: top">&nbsp;</span>
    <span style="background-color: #A55;display: inline-block;height:50px;vertical-align: middle">&nbsp;</span>
    <span style="background-color: #A55;display: inline-block;height:50px;vertical-align: bottom">&nbsp;</span>
    <span style="background-color: #A55;display: inline-block;height:50px;vertical-align: baseline">&nbsp;</span>
    <!-- 行内元素，行内框与容器高度一致-->
    <span style="background-color: #55A;vertical-align: top">&nbsp;</span>
    <span style="background-color: #55A;vertical-align: middle">&nbsp;</span>
    <span style="background-color: #55A;vertical-align: bottom">&nbsp;</span>
    <span style="background-color: #55A;vertical-align: baseline">&nbsp;</span>
    <!-- 行内元素，行内框与内容区高度一致 -->
    <span style="background-color: #5A5;vertical-align: top;line-height: 25px;">&nbsp;</span>
    <span style="background-color: #5A5;vertical-align: middle;line-height: 25px;">&nbsp;</span>
    <span style="background-color: #5A5;vertical-align: bottom;line-height: 25px;">&nbsp;</span>
    <span style="background-color: #5A5;vertical-align: baseline;line-height: 25px;">&nbsp;</span>
    <!-- 行内元素，行内框与内容区高度一致，数值的垂直偏移-->
    <span style="background-color: #555;vertical-align: 25px;line-height: 25px;">&nbsp;</span>
    <span style="background-color: #555;vertical-align: -25px;line-height: 25px;">&nbsp;</span>
</div> 

讨论行内元素的垂直对齐时，往往需要关注基线，默认的，行内元素基于基线对齐。

基线相对于em框的位置，取决于字体，这一信息是内置在字体中的。

一般认为行内替换元素具有固有的宽高，替换元素可能导致行框变高，但是它不会改变任何元素（包括它自己）的line-height。

行内替换元素的line-height存在的意义是，作为垂直对齐时（例如设置为百分比）的参考值。

默认的，行内替换元素按基线对齐，即它的底端（下外边距的边界）与行基线对齐。

这是CSS2.1新增的，其效果类似于图片放在文本行中，即它是作为替换元素进行布局的。

你可以设置行内块元素的宽高，就好像设置行内替换元素、块元素的宽高一样。

使用CSS属性

float

float属性可以取值left、right、none，最后一个值表示不浮动（默认值）。

浮动元素的包含块是最近的块级祖先元素。任何浮动元素都会生成一个块级框，不需要声明display:block，即使它是inline元素。

clear

利用定位，可以准确的定义元素框相对于其正常位置/父元素/视窗应该出现在哪里。CSS使用属性

position

确定一个定位元素的包含块（定位上下文）的算法较为复杂：

1. 根元素的包含块由UA建立，在HTML中是html元素。在大部分浏览器中初始包含块是视窗大小的矩形
2. 对于一个非根元素，如果其position取值relative/static，则其包含块由最近的块级框、表单元格或者行内祖先框的内容边界构成
3. 对于一个非根元素，如果其position取值absolute，则其包含块取决于最近的position不为static的祖先元素：
   1. 如果此祖先是块级元素，包含块设置为祖先的内边距边界
   2. 如果此祖先是行内元素，包含块设置为祖先的内容边界
   3. 如果没有祖先，则包含块设置为初始包含块

top、right、bottom、left这四个属性成为偏移属性，其中top/bottom说明元素相对于包含块顶边/底边的偏移，left/right则说明元素相对于包含块左边/右边的偏移。

z-index

在CSS中设置字体类型

font-family

CSS函数

calc()

/* 充满可用宽度 - 80像素 */
width: calc(100% - 80px); 
/* 高度比视窗小80像素 */
height: calc(100vh - 80px);

/* 缩进2字符 */
text-indent: 2em;

<br>

尝试添加样式：

outline: 1px solid transparent;

1. 使用百分比或者视窗相对单位（vw/vh/vmin/vmax）来代替绝对数值
2. 要想在大分辨率客户端上固定最大宽度，使用max-width
3. 注意设置替换元素的max-width为100%
4. 如果背景图片需要覆盖整个容器，使用background-size: cover
5. 在grid中布局元素时，让grid的列数由视窗宽度决定。使用Flexbox、display:inline-block可以达到这一点
6. 使用多栏文本时，指定column-width而不是column-count，以便自动在小分辨率UA上显示为单列

增加被修饰的样式的权重，权重高的样式规则会最终生效。权重从小到大依次为：

1. 用户代理的声明（浏览器默认样式）
2. 用户声明
3. 开发者声明（引用的CSS文件）
4. 带有!important的开发者声明
5. 带有!important的用户声明

另外需要注意亮点：

1. 更加具体化的选择器比笼统选择器获得更大的权重
2. 后面出现的规则，具有更大的权重

应当尽可能避免使用!important，因为它使得维护难度增加。

.parent:hover .child {
} 

.noselect {
    cursor: default; 
    -webkit-touch-callout : none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    -webkit-touch-callout: none; /* Non-prefixed version, currently not supported by any browser */
}

对于cellpadding，可以设置td元素的样式：

td { 
    padding: 10px;
}

对于cellspacing，可以设置table元素的样式：

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

/* 下面的代码相当于设置table元素的cellspacing="0" */
table { 
    border-spacing: 0;
    border-collapse: collapse;
}

将父元素设置为相对定位，子元素设置为绝对定位，则子元素相对于父元素进行绝对定位：

#parentDiv {
    position: relative;
}

#childDiv {
    position: absolute;
    left: 12px;
    top: 12px;
}

/*对于块元素*/
#blockElement {
    margin: 0px auto;
}
/*对于文本元素*/
#textElement {
    text-align: center;
}

html,body {
    margin: 0;
    height: 100%;
}

#blockDiv {
    width: 100%;
    height: 100%;
}

The post CSS知识集锦 appeared first on 绿色记忆.