- 01 CSS高级功能 自定义属性 CSS 提供的属性（比如 font-weight、 line-height）都是标准给定的，但是 CSS 也允许用户自定义属性，这又称为“CSS 变量”。 自定义属性跟普通属性一样，也是定义在某个选择器... 7 年前
- 02 CSS 动画 timer linear：线性运行，各个时刻速度都一样。 ease: 快速加速，然后逐渐减速，CSS 的默认值。 ease-in：逐渐加速，结尾时变快，适用于退出页面显示的元素。 ease-out：开始时速度最快，... 7 年前
- 03 背景 如果不定义背景图片或者背景色，一个网页元素的背景就是透明的。 opaque opaque的值在0到100之间。默认值是100，表示百分之百不透明，而0表示百分之百透明。 background-attachment ... 9 年前
- 04 盒状模型 width width: auto表示父元素提供的所有宽度（100%）。 max-width max-width设为 none，可以让元素占满父元素的整个宽度。 overflow overflow属性指定如果元素的... 9 年前
- 05 颜色 颜色关键字 CSS 允许使用关键字表示颜色，CSS2.1 设置了16个基本的颜色，CSS 3 又增加了131个。 六位颜色表示法 六位颜色表示法又称为 RGB 表示，分别使用两位十六进制数表示红色（R）、绿色（G）... 7 年前
- 06 常用组件 对话框 显示屏幕居中的对话框。 <div id="dialog"> <p>I am the dialog's content</p> <button type="button">close dialog</... 9 年前
- 07 display 属性 display: none;会从文档流移除该元素及其子元素，仿佛它们是不存在的。它们占据的空间会释放出来。 display: inline;产生行内元素，没有自己的高度和宽度，由容器决定，前后不会产生换行。 dis... 9 年前
- 08 常用功能 置中 transform方法。 容器设置相对定位。 .container { position: relative; width: 200px; height: 200px; overflow: h... 9 年前
- 09 字体 字体文件类型 内嵌OpenType（Embedded OpenType，.eot）。在使用@font-face时，Internet Explorer 8及之前的版本仅支持内嵌OpenType。内嵌OpenType是... 7 年前
- 10 函数 CSS 提供一些函数，方便操作。 minmax minmax提供一个长度范围，不小于较小值，不大于较大值。 minmax( min, max ) 如果第二个参数 max小于第一个参数 min，那么 max会被忽略，... 9 年前
- 11 图像处理 filter filter命令支持以下函数。 url()：使用svg滤镜 blur()：高斯模糊 brightness()：亮度 contrast()：对比度 drop-shadow()：阴影 grayscale(... 9 年前
- 12 CSS 概述 简介 CSS 用于定义网页的样式，比如每个网页元素的位置、大小、颜色等等。 CSS 随着网页的诞生而诞生。1996年12月，CSS 1.0 标准问世，目前广泛使用的是2000年4月发布的 CSS 3 标准。 CSS... 7 年前
- 13 响应式布局：media query 响应式布局（responsive）的含义是，网页会根据不同的媒介，自动采用不同的 CSS 规则。它主要通过 media 命令实现。 media命令用来规定 CSS 规则生效的媒介。 @media命令后面使用关键词，... 9 年前
- 14 基本操作 垂直置中 （1）方法一 原理：子元素的 top, right, bottom, left, margin, and padding属性，针对的是父元素的维度；transform针对的子元素本身的维度。 父元素、子元... 9 年前
- 15 position position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即 position属性主要有五个值。 static relative fixed absolute sticky 下面就依次介绍这五个值。 ... 6 年前
- 16 CSS 属性 inherit属性值 CSS 的许多属性可以继承，即子元素默认继承父元素的属性。比如， body元素的字体样式，可以被页面的所有元素继承。 body { font-family: Arial, Helvetic... 6 年前
- 17 响应式布局 图片自适应各种屏幕的写法。 img { width: 100%; height: auto; } 如果使用 <img>或 <picture>元素的 srcset属性，上面这样的写法就够了。但是，对于普通的 ... 9 年前
- 18 变形 transform命令用于元素的变形，它有多种设置。 transform: scaleX(-1); 上面命令设置元素的 x坐标沿水平轴翻转， y坐标不变。 scaleX(-1)会起到水平翻转的效果。 9 年前
- 19 CSS的单位 inherit 大多数 CSS 属性默认继承它的父元素的设定，但是有一些属性默认不继承。比如， input元素和 textarea元素的 CSS 属性，都是不继承父元素的。这时，可以强制它们继承。 * { fo... 7 年前
- 20 打印样式 基本用法 @media print命令可以设置打印样式，即用户选择打印当前网页时，生效的 CSS 规则。 @media print { h1 { font-size: 16pt; } } 上面代码设置的 h1样... 6 年前
- 21 CSS 计数器 简介 counter-reset：新建或重置一个计数器。 counter-increment：指定计数器的值加1。 counter()：取出指定计数器的值。 counter-reset：counterName; c... 5 年前
- 22 表单的 CSS 设置 textarea 文本框（textarea）用于让用户输入大量文本。它的高度通常是固定的，如果用户输入的文本多于文本框的高度，文本框就会出现滚动条，只有拖动滚动条，才能看见文本的其余部分。 form-sizing属... 3 年前
- 23 多栏式布局 多栏式布局是 CSS 原生提供的一种内容分栏显示的解决方案。 基本用法 column-count属性指定 div的子元素分成四栏。 div { column-count:4; } column-width属性指... 8 年前
- 24 flex布局 网页布局（layout）是CSS的一个重点应用。 传统的布局有下面几种。 display: block; display: inline; display: list-item; display: table; d... 4 年前
- 25 float 简介 float属性指定某个元素定位在容器的左侧或右侧，文字和其他行内元素紧挨在它的旁边。 h4 { float: left; } 如果对行内元素指定 float属性，就相当于将这个行内元素变成块级元素。 f... 9 年前
- 26 Grid 布局 一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，... 7 年前
- 27 Table 布局 CSS 可以让 HTML 元素像表格那样排列。 下面是表格的各个 HTML 标签，所对应的布局模式。 table { display: table } tr { display: table-ro... 8 年前
- 28 属性选择器 [attribute] 匹配指定属性，不论具体值是什么 [attribute="value"] 完全匹配指定属性值 [attribute~="value"] 属性值是以空格分隔的多个单词，其中有一个完全匹配指定值 ... 7 年前
- 29 选择器 选择器决定了样式规则对哪些元素有效。 基本选择器 元素名称选择器，选中所有该标签的元素。 #elementId选中指定 id属性的元素。 .elementClass选中指定 class属性的元素。 应该尽量使用 c... 7 年前
- 30 伪类选择器 伪元素（pseudo-element）是 HTML 中并不存在的元素。例如，定义第一个字母或第一行文字时，并未在HTML中作相应的标记。 伪类（pseudo-class）是浏览器根据网页元素的状态，自动提供的 CS... 6 年前
- 31 text-decoration 文本可以附加装饰线（比如下划线），以下属性用来设置装饰线。 text-decoration text-decoration设置文本采用哪一种装饰线，主要有下划线（underline）、上划线（overline）和删... 8 年前
- 32 文本 direction direction属性设置块级元素内部的文本阅读方向。 它的默认值是 ltr（从左到右），适用于大部分语言。它还可以设成 rtl（从右到左）。 blockquote { direction:... 7 年前
- 33 空格 一、基本规则 HTML 代码的空格通常会被浏览器忽略。 <p>◡◡hello◡◡world◡◡</p> 上面是一行 HTML 代码，文字的前部、内部和后部各有两个空格。为了便于识别，这里使用半圆形符号 ◡表示空格。... 8 年前