【CSS】
一、CSS3新增的特性有哪些？移除的元素有哪些？
新增的特性：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面
移除的元素：(纯表现的元素) basefont，big，center，font，s，strike，tt，u
二、选择器
- ID 选择器（#id）
- 类选择器（.class）、属性选择器（E[attr]...）、伪类选择器（:）
- 元素选择器(标签选择器)（E）、关系选择器(层次选择器)、伪元素选择器（::）
- 通配符选择器（*）
动态伪类选择器： E:link、E:visited、E:acitved、E:hover、E:focus
UI元素状态伪类选择器：E:checked、E:enabled、E:disabled
结构伪类选择器：E:nth-child(n)、E:nth-of-type(n)、E:empty、E:root
E F:nth-child(n) 和 E F:nth-of-type(n) 的区别：
E F:nth-child(n) 是指元素 E 的第 n 个子元素，如果同时该子元素是元素F，则选中；否则选不中。
E F:nth-of-type(n) 是指元素 E 的第 n 个 F 子元素。
n 可以是（odd、even）、（2n+1、2n+2）、（n+5、-n+5）、（3n）等。
否定伪类选择器：E:not(F)
关系选择器（层次选择器）：E F | E>F | E+F | E~F
伪元素选择器：::first-letter、::first-line、::before、::after、::selection
三、样式优先级
- CSS 优先规则1：最近的祖先样式比其他祖先样式优先级高。
- CSS 优先规则2："直接样式"比"祖先样式"优先级高。
- CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。
- CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
- CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。
四、Position定位
(1) Position 属性的五个值：absolute、fixed、relative、static、sticky。
(2) absolute
- absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
- absolute 定位使元素的位置与文档流无关，因此不占据空间。
- absolute 定位的元素和其他元素重叠。
(3) fixed
- fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
- fixed 定位使元素的位置与文档流无关，因此不占据空间。
- fixed 定位的元素和其他元素重叠。
我们可以发现 fixed 与 absolute 只是 第一条 不同。
(4) relative
- relative 相对定位元素的定位是相对其正常位置。
- 移动相对定位元素，但它原本所占的空间不会改变。
- 相对定位元素经常被用来作为绝对定位元素的容器块。
(5) static
- HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
- 静态定位的元素不会受到 top, bottom, left, right 影响。其他四个值则都会受 top, bottom, left, right 影响。
- 静态定位的元素会受到 margin, padding 影响。
(6) sticky
- sticky 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
- 粘性定位元素的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。
- 粘性元素的定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
五、水平垂直居中
水平居中：
- 使用 text-align: center
- 使用 margin: 0 auto （条件：必须设置元素的宽度；必须是块级元素）
- 使用 position 和 transform：把父元素设置为：position: relative；把子元素设置为：position: absolute；left: 50%；transform: translateX(-50%)
- 使用 flexbox 布局：把父元素设置为：display: flex；justify-content: center
垂直居中：
- 使用 padding：任意值px 0 （条件：没有设置高度）
- 使用 line-height：
// 单行 —— 把父元素的 line-height 属性值与 height 属性值设置为相等
// 多行 —— 把父元素的 line-height 属性值与 height 属性值设置为相等，并添加元素设置为：
line-height: 1.5;
display: inline-block;
vertical-align: middle- 使用 position 和 transform：把父元素设置为：position: relative；把子元素设置为：position: absolute；top: 50%；transform: translateY(-50%)
- 使用 flexbox 布局：把父元素设置为：display: flex；align-items: center
- 使用 table：把父元素设置为：display: table；把子元素设置为：display: table-cell； vertical-align: middle；
水平垂直居中：
- padding + text-align: center
- line-height + text-align: center
- position 和 transform：把父元素设置为：position: relative；把子元素设置为：position: absolute；left: 50%；top: 50%；transform: translate(-50%)
- flexbox：把父元素设置为：display: flex；justify-content: center；align-items: center
- table：把父元素设置为：display: table； text-align: center；把子元素设置为：display: table-cell； vertical-align: middle；
六、Flex布局
- 任何一个容器都可以指定为 Flex 布局：{ display: flex；}
- 行内元素也可以使用 Flex 布局：{ display: inline-flex；}
- Webkit 内核的浏览器，必须加上-webkit 前缀：{ display: -webkit-flex； /* Safari */ }
- 设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
容器的属性
属性名称 | 属性描述 | 可选值 | 默认值 | |
1 | flex-direction | 主轴方向（即项目的排列方向） | row | row-reverse | column | column-reverse | row |
2 | flex-wrap | 换行方式（默认情况下不换行） | nowrap | wrap | wrap-reverse | nowrap |
3 | flex-flow | flex-direction 和 flex-wrap 的简写 | <flex-direction> || <flex-wrap> | row nowrap |
4 | justify-content | 项目在主轴上的对齐方式 | flex-start | flex-end | center | space-between | space-around | flex-start |
5 | align-items | 项目在交叉轴上对齐方式 | flex-start | flex-end | center | baseline | stretch | stretch |
6 | align-content | 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 | flex-start | flex-end | center | space-between | space-around | stretch | stretch |
项目的属性
属性名称 | 属性描述 | 可选值 | 默认值 | |
1 | order | 项目的排列顺序。数值越小，排列越靠前。 | <integer>，取整数 | 0 |
2 | flex-grow | 项目的放大比例 | <number>，负值无效，可以有小数点 | 0，即如果存在剩余空间，也不放大。 |
3 | flex-shrink | 项目的缩小比例 | <number>，负值无效，可以有小数点 | 1，即如果空间不足，该项目将缩小。 |
4 | flex-basis | 项目占据的主轴空间；它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。 | <length> | auto | auto，即项目的本来大小。 |
5 | flex | flex-grow、flex-shrink 和 flex-basis 的简写 | none | [ <flex-grow> <flex-shrink> ? || <flex-basis> ] | 0 1 auto，后两个属性可选。 两个快捷值： auto(1 1 auto)、none(0 0 auto) |
6 | align-self | 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。 | auto | flex-start | flex-end | center | baseline | stretch | auto，即表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。 |
七、行内元素、行内块元素和块元素
行内元素：<span>、<a>、<br>、<input>、<img>
- 设置宽高无效
- 对 margin 设置的左右方向有效，上下无效；对 padding 设置的上下左右都有效，即会撑大空间
- 不会自动进行换行
- 多个行内元素标签写在一起，默认排列方式为从左到右
行内块元素：
- 设置宽高有效
- 对 margin 和 padding 设置的上下左右均有效
- 不会自动进行换行
- 多个行内块元素标签写在一起，默认排列方式为从左到右
块级元素：<div>、<p>、<ul>、<ol>、<li>、<h1>...、<hr>
- 设置宽高有效
- 对 margin 和 padding 设置的上下左右均有效
- 可以自动进行换行
- 多个块级元素标签写在一起，默认排列方式为从上至下
三者的转换：
- 转换为行内元素：display:inline
- 转换为块级元素：display:block
- 转换为行内块元素：display:inline-block
八、浮动和清除浮动
相关概念:
- 浮动的定义：浮动是指让元素脱离标准流(文档流)，漂浮在标准流之上，和标准流不是一个层次。而且，浮动元素会按照指定的方向发生移动，遇到父元素边界或者相邻的浮动元素时停下来。注意：浮动元素设置宽高有效。
- 实现浮动的途径：float、absolute、fixed 。
- 清除浮动主要针对 float 产生的浮动元素。
- 高度塌陷：当浮动元素的父元素高度自适应（不设置高度时），父元素会发生高度塌陷。
清除浮动的方法:
（1）使用 clear：{ clear:both }
- 缺点：会增加无意义的标签。
（2）使用 br：在浮动元素下方添加：<br clear="both" />
- 缺点：不符合工作中：结构、样式、行为，三者分离的要求。
（3）给浮动元素的父元素设置高度
- 缺点：当浮动元素高度不确定的时候不适用。
（4）让浮动元素的父元素也浮动
- 缺点：需要给每个浮动元素的父元素添加浮动，而且浮动多了容易出现问题。
（5）把浮动元素的父元素设置成 { display：inline-block }
- 缺点：父元素的 margin 左右、auto 失效，无法使用 { margin: 0 auto } 居中了。
（6）把浮动元素的父元素设置成 { overflow:hidden }，兼容IE6 IE7：{ zoom:1 }
（7）给浮动元素的父元素使用 :after 伪类，兼容IE6 IE7：{ zoom:1 }（推荐）
选择父元素 :after {
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
注意：
:after伪类 在元素内部末尾添加内容
:after { content: "添加的内容"; } IE6 IE7 下不兼容注意：第（1）、（2）种方法，浮动元素会占据文档流的空间；但后面的五种方法不会，只是解决了高度坍塌的问题。
结论：
- 如果A元素是浮动元素，且它的上一个元素是标准流中的元素，那么A元素的相对垂直位置不会改变，也就是说A元素的顶部总是和上一个元素的底部对齐。
- 如果A元素是浮动元素，且它的上一个元素也是浮动元素，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素就会被挤到下一行)。
- 清除浮动 (clear) 只能影响使用清除的元素本身，不能影响其他元素。
九、BFC规范
BFC 即 Block Formatting Contexts (块级格式化上下文)，是 W3C 规范中的一个概念。
触发 BFC：只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position 为 absolute、fixed
- display 为 flex、inline-flex、inline-block、table-caption、table-cell
- overflow 为 hidden、auto、scroll (除了 visible 以外的值)
BFC 特性及应用：
- 同一个BFC下 外边距margin 会发生折叠
- BFC 可以包含浮动的元素，用来清除浮动：overflow: hidden
- BFC 可以阻止元素被浮动元素覆盖：overflow: hidden
实现两列自适应布局：左边为浮动元素，宽度固定；右边为BFC特性：overflow: hidden，宽度自适应。
避免外边距重叠的方法：
方法一：{ overflow: hidden; } 你可以单独设置其中任意一个盒子，也可以两个都设置。
方法二：{ float: left; } 或者 { position: absolute; } 你只能设置第二个盒子。
方法三：{ display: flex; } 或者 { display: table; } 或者 { display: table-caption; } 你可以单独设置其中任意一个盒子，也可以两个都设置。
方法四：{ display: inline-flex; } 或者 { display: inline-block; } 或者 { display: table-cell; } 你只能单独设置其中任意一个盒子。
十、AMD和CMD的区别
AMD（Asynchronous Module Definition）即异步模块化定义，是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD（Common Moudle Definition）即通用模块定义，是 SeaJS 在推广过程中对模块定义的规范化产出。
共同点：AMD和CMD都是 一种框架在推广的过程中对模块定义的规范化产出；而且它们都是异步加载模块。
不同点：
1. RequireJS 在主文件里是将所有的文件同时加载；然而 SeaJS 强调一个文件一个模块。
2. AMD推崇依赖前置，CMD推崇依赖就近。
3. AMD和CMD对依赖模块的执行时机有所不同。
AMD加载完模块后，就立马执行该模块；CMD加载完模块后不会立即执行，而是等遇到require语句的时候再执行。
4. AMD的API默认是一个当多个用，CMD的API严格区分，推崇职责单一。
各自的优点：AMD用户体验好，因为模块提前执行了；CMD性能好，因为只有用户需要的时候才执行。
十一、Border边框
简写语法：border：border-width border-style border-color （border-style 是必须的，三个属性的顺序随意）
边框类型：border-style：none | dotted | dashed | solid | double | inherit
对边框的四条边分别设置不同的属性，以style为例：
border-style: solid;
/* 一个值时，表示四条边都是solid类型 */
border-style: solid dotted;
/* 两个值时，第一个值表示上下边框的类型，第二个值表示左右边框的类型 */
border-style: solid dotted dashed;
/* 三个值时，第一个值表示上边框的类型，第二个值表示左右边框的类型，第三个值表示下边框的类型 */
border-style: solid dotted dashed inset;
/* 四个值时，依次代表上右下左边框 */圆角边框属性：
对边框的四条边分别设置圆角：
border-radius 的值：如果存在反斜杠符号 “/”，“/” 前面的值是设置圆角的水平方向半径，“/”后面的值是设置圆角的垂直方向的半径；如果没有 “/”，则圆角的水平和垂直方向的半径值相等。
border-top-left-radius:
/* 两个值时分别代表圆角的水平半径和垂直半径 */
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:border-radius 的四个值是按照 top-left、top-right、bottom-right 和 bottom-left 顺序来设置的。
border-radius:{1}设置一个值时，四个圆角的效果一样；
border-radius:{2}设置两个值时，top-left=bottom-right=第一个值，top-right=bottom-left=第二个值；
border-radius:{3}设置三个值时，第一个值设置top-left，第二个值设置top-right和bottom-left，第三个值设置bottom-right；
border-radius:{4}设置四个值是，就按顺序设置样式。盒子阴影属性：
/*设置盒子一条边的阴影效果*/
box-shadow：none | [ inset x-offset y-offset blur-radius spread-radius color ]
/*设置盒子多条边的阴影效果,用逗号隔开*/
box-shadow：none | [ inset x-offset y-offset blur-radius spread-radius color ],[ inset x-offset y-offset blur-radius spread-radius color ]十二、CSS动画
- 动画属性：transition、animation(CSS3新增)。
- animation 可以通过 @keyframes (关键帧) 构建一些 transition 的动画效果。
- CSS3 一共有八个子属性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode。
举例：
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
/* 可以使用 from / to 来代替 0% / 100% */
}
</style>十三、渐进增强和优雅降级
渐进增强和优雅降级都是一种开发方式，更是一种设计理念。
渐进增强是指在编写Web页面时，首先保证最基本、最核心的功能实现，并让所有的浏览器（包括旧式、低端的浏览器）都能看到站点的内容；然后再考虑使用高级但非必要的CSS和JavaScript等增强功能，为当前和未来的浏览器提供更好的支持。
优雅降级是指在编写Web页面时，首先必须完整的实现站点的所有内容(包括功能和效果)。然后再为那些无法支持所有功能和效果的浏览器增加候选方案，使之在旧式、低端的浏览器上以某种形式降级体验却不至于完全失效。
十四、CSS应用：实现一个三角形
<div class="demo"></div><style type="text/css">
.demo{
width: 0;
height: 0;
border: 40px solid transparent;
border-top-color: aqua;
}
</style>十五、Sass 和 Less 的区别
Sass 和 Less 是两种常见的 CSS 预处理器，我们可以把 Sass 和 Less 编辑的样式转换为正常的 CSS 样式。
(1) 主要区别(实现方式)：Less在JS上运行，Sass在Ruby上使用。
Less基于JavaScript，通过npm安装，在客户端处理 ；Sass基于Ruby，需要安装Ruby，在服务器处理。
为了使用Less，我们可以将适用的JavaScript文件上传到服务器或通过脱机编译器编译CSS表。
(2) 编写变量的方式不同。
Sass使用$，而Less使用@。
(3) 在Less中，仅允许循环数值。
在Sass中，我们可以遍历任何类型的数据；但在Less中，我们只能使用递归函数循环数值。
(4) Sass有Compass，Less有Preboot
Sass和Less有可用于集成mixins的扩展（在整个站点中存储和共享CSS声明的能力）。
Sass有适用于mixins的Compass，其中包括所有可用的选项以及未来支持的更新。
Less有Preboot.less，LESS Mixins，LESS Elements，gs和Frameless。Less的软件支持比Sass更加分散，导致许多不同的扩展选项可能不会以相同的方式运行。对于项目，我们可能需要所有列出的扩展以获得与Compass类似的性能。
十六、CSS3 2D 和 3D 转换
CSS3转换，通过 transform，我们可以移动，旋转，缩放，和倾斜元素。
2D 转换：translate()、rotate()、scale()、skew()、 matrix()
3D 转换：translate()、rotate()、scale()、matrix()、perspective()
十七、display，float，position 三者的优先级
- 如果 display 的值是 none，则 position 和 float 无效。否则，继续。
- 如果 position 的值是 absolute 或 fixed，则浮动失效，并且 display 的值 按照 对应表 设置。否则，继续。此时，元素的位置将由 ‘top’，’right’，’bottom’ 和 ‘left’ 属性和该框的包含块确定。
- 如果 float 的值不是 none，则元素浮动，并且 display 的值 按照 对应表 设置。否则，继续。
- 如果元素是根元素，display 的值 按照 对应表 设置。否则，继续。
- 应用指定的 display 特性值。
display的转换对应表
设定值 | 计算值 |
inline-table | table |
inline, run-in, table-row-group, table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell,table-caption, inline-block | block |
其他 | 同设定值 |
position:absolute 和 float 会隐式的改变 display 的类型
不论之前是什么类型的元素（display:none 除外），只要设置了 position:absolute 或 float，都会让元素以 display:inline-block 的方式显示，可以设置长宽，默认宽度并不会占满父元素，就算是显示的设置 display:inline 或 display:block，仍然无效。
float 在 IE6 下的 双倍边距bug 就是利用添加 display:inline 来解决的。
position:relative 并不能够隐式的改变 display 的类型。
END
