Css Ⅰ
- 水平居中的方法
- 垂直居中的方法
- 如何垂直居中一个``?（用更简便的方法。）
- CSS 基础与选择器初识
- CSS 选择器详解
- CSS 结构和层叠（继承与优先级）
- CSS 值和单位(颜色，pt,px,em,rem,vm.....)
- CSS 给文本加样式：① 字体属性(阿里iconfont使用原理）
- CSS 给文本加样式：② 文本属性(大小写 阴影 行高 缩进 间隔 空白符)
- CSS 基本视觉格式化：① “块盒子”格式化（盒与margin，*margin重叠）
- 块级元素和行内元素分别有哪些？ 空（void）元素有那些？块级元素和行内元素有什么区别？
- 盒模型
- CSS 定位 与 BFC
- CSS “伪元素”妙用（清楚浮动，替代标签，动态选择）
- CSS居中
- CSS常用布局
- CSS响应式布局原理
- 媒体查询
- CSS3
- 浏览器兼容
- CSS编码规范
水平居中的方法
元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto;
如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
绝对定位中固定高度时设置left:50%，margin-left值为高度一半的负值 || transform: translateX(-50%);
使用flex-box布局，指定justify-content属性为center
display设置为tabel-ceil
垂直居中的方法
将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
使用flex布局，设置为align-item：center
绝对定位中设置bottom:0,top:0,并设置margin:auto
绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值 || transform: translateY(-50%);
文本垂直居中设置line-height为height值
如何垂直居中一个<img>?（用更简便的方法。）
#container /**<img>的容器设置如下**/
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
CSS 基础与选择器初识
https://mp.weixin.qq.com/s/OQL8JVDuJopphXqAEp5AWQ
CSS 加载方式有几种？
- 外部样式表：通过
<link>“链入” CSS；
<link rel="stylesheet" href="style.css">
- 外部样式表：通过 @import “导入”样式；
<style>
@import url("index.css");
@import url(index.css);
@import "index2.css";
</style>
- 内部样式表：放在 head 元素内的
<style>标签中；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表单</title>
<style>
#txa {
width: 300px;
height: 200px;
margin-left: -12px;
}
</style>
</head>
<body>
- 内联样式表：直接写在元素开始标签的 style 属性中(不推荐)。
<p style="background: yellow; font-family: sans-serif;">Oliver 是个好人!</p>
@import 有什么作用？如何使用？
@import 用于从其他样式表导入样式规则，告诉 CSS 引擎引入一个外部样式表
用法：
外部样式表：通过 @import “导入”样式。
<style>
@import url("index.css");
@import url(index.css);
@import "index2.css";
</style>
CSS 选择器常见的有几种？
- 元素选择器
- ID 选择器
- 类选择器
- 通配选择器
- 属性选择器
- 组合选择器：
多元素选择器
后代选择器
子元素选择器
直接相邻元素选择器
普通相邻元素选择器 - 伪类选择器
UI 元素伪类选择器
=========== 结构伪类选择器
id 选择器和 class 选择器的使用场景分别是什么？
想要对多个元素使用某个样式时，就把这些元素都加入到这个“类”里，就会用到 class ；
但如果只有一个元素需要加这个样式，那就用 id 。
@charset 有什么作用？
https://www.html.cn/book/css/rules/@charset.htm#a4
@charset 是 CSS @规则, 指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而且前面不得有任何字符。
如果有多个 @charset @规则被声明，只有第一个会被使用，而且不能在 HTML 元素或 HTML 页面的字符集相关 <style> 元素内的样式属性内使用。
此 @规则 在某些 CSS 属性中使用非 ASCII 字符时非常有用，例如 content。
另外，CSS注释中，如果使用了中文，不加以指定字符编码，若和编码不一致，则可能在浏览器中显示乱码。
简述 src 和 href 的区别？
href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
例如：
<link href="reset.css" rel=”stylesheet“/>
浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。
src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。
例如：
<script src="script.js"></script>
当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将 js 脚本放在底部而不是头部得原因。
简而言之，src 用于替换当前元素；href 用于在当前文档和引用资源之间建立联系。
页面导入时，使用 link 和 @import 有什么区别？
-
link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS，定义 rel 连接属性等作用；而 @import 是 CSS 提供的，只能用于加载 CSS；
-
页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载；
-
@import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题。
在 index.css 和 common.css 中有如下内容，html 里引入 index.css 后发现页面字体的颜色和大小没发生任何变化，原因可能是？（不定项）
/*index.css*/
@import "common.css"
body {
font-size: 12px
}
/*common.css*/
body {
color: red;
}
✅ common.css 的文件路径可能错了，检查元素看看报错可以定位问题。
✅ @import “url”; 后面必须有分号。
✅ index.css 里 body 的字体设置中的 : 写成了：。
❌ font-size: 12px 后面缺少了分号。
CSS 选择器详解
https://mp.weixin.qq.com/s/TjVivhhlOTfDA3Plk0KEPw
伪类选择器有哪些？
静态，动态伪类选择器
:link
:visited
:focus
:hover
:active
UI 元素伪类选择器
:checked
::selection //注意两个冒号
:enabled
:disabled
:read-write
:read-only
结构伪类选择器
E:first-child
E:last-child
E:nth-child(n)
E:only-child
E:first-of-type
E:last-of-type
E:nth-of-type(n)
E:only-of-type
:root //根元素 也就是html
E:not(selector)
E:empty
E:target
伪元素和伪类的区别？
伪元素是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。
伪元素还提供一些在源文档中不存在的内容分配样式，例如 :before 和 :after 能够访问产生的内容。
伪元素的内容实际上和普通 DOM 元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
伪类是基于元素的特征而不是他们的 id、class、属性或者内容。一般来说，元素的特征是不可以从 DOM 树上推断得到的，而且其是动态的，当用户和 DOM 进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是 :first-child 和 :lang 是可以从 DOM 树中推断出来的。）
相同之处：
伪类和伪元素都不出现在源文件和文档树中。也就是说在 html 源文件中是看不到伪类和伪元素的。
不同之处：
伪类其实就是基于普通 DOM 元素而产生的不同状态，他是 DOM 元素的某一特征。
伪元素能够创建在 DOM 树中不存在的抽象对象，而且这些抽象对象是能够访问到的。
//标准伪元素索引
::after (:after)
::before (:before)
::cue (:cue)
::first-letter (:first-letter)
::first-line (:first-line)
::selection
::slotted()
//标准伪类索引
:active
:checked
:default
:defined
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-within
:host
:host()
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visiteda
单冒号和双冒号的区别、
- 单冒号都为伪类，是一种选择器
eg:
a:first-child{}
a:nth-of-type(2) {}
a:last-child {}
a:nth-of-type(even) {}
a:nth-of-type(odd) {} - 而伪元素的使用中可以用单冒号和双冒号都可以实现伪元素的使用，但是较规范而言建议使用双冒号来实现。
eg:
a::after {content: “”}
a::before {content: “”}
CSS 结构和层叠（继承与优先级）
https://mp.weixin.qq.com/s/RMzmiwLTqJMs82xx1Z8_yA
选择器的优先级是如何计算的？
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式；
作为 style 属性写在元素标签上的内联样式；
id 选择器；
类选择器；
伪类选择器；
属性选择器；
标签选择器；
通配符选择器（通用选择器）；
浏览器自定义。
什么是 CSS 继承？哪些属性能继承，哪些不能？
一般来讲，如果样式会影响你的文本外观，则所有这些样式都能“继承”。如：字体颜色 color 、所有与字体相关的属性：
font-family
font-size
font-weight
font-style
而大多数 “框模型属性” 就不能继承（包括外边距、内边距、背景和边框），比如给 元素加了一个边框样式，不代表我们希望这个“身体”里所有的元素都有“边框”。w
display: none;与visibility: hidden;的区别
联系：它们都能让元素不可见
区别：
- display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
- display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
- 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
- 读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容
display:inline-block 什么时候不会显示间隙？(携程)
- 移除空格
- 使用margin负值
- 使用font-size:0
- letter-spacing
- word-spacing
CSS 值和单位(颜色，pt,px,em,rem,vm…)
你有没有使用过视网膜分辨率的图形？当中使用什么技术？
用过（听说过/了解过），“视网膜屏幕 retina”诞生后，旧有平台的图像如果根据其实际像素在视网膜屏幕中显示时，字体、图标等就会变得特别小。
为了适应实际使用体验和兼容性，厂商发展出了“像素合并技术”（输出来的图像、文字比以前更细腻，因为可以显示的细节更多），过去 1px 的面积包含了更多的像素单位。
pt，px，dpi，em，rem，vw 有什么区别？
pt：point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业
px 像素（Pixel）：相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。
PPI（DPI）：pixel（dot）per inch，每英寸的像素（点）数，是一个率，表示了“清晰度”，“精度”
em : 相对长度单位，相对于父元素字体大小，1em 被定义为一种给定字体的 font-size 值。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem : rem——root em，是相对于根元素 的字体大小单位。
vw : 1vw 为视口宽度的 1%。
CSS 给文本加样式：① 字体属性(阿里iconfont使用原理）
https://mp.weixin.qq.com/s/mfgkFXMDOzt7J5z604sVBA
如何实现小于12px的字体效果
transform: scale(0.7);
transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;
CSS 给文本加样式：② 文本属性(大小写 阴影 行高 缩进 间隔 空白符)
https://mp.weixin.qq.com/s/0O6vSy25JpWsum3Z2ICoiw
CSS 基本视觉格式化：① “块盒子”格式化（盒与margin，*margin重叠）
https://mp.weixin.qq.com/s/wSpN-4p7qEhafSc0t5Rt_w
块级元素和行内元素分别有哪些？ 空（void）元素有那些？块级元素和行内元素有什么区别？
块级元素
//块级元素
<h1>~<h6>
<div>
<p>
<form><fieldset>
<table>
<ul><ol><li>
<dl><dt><dd>
<header><nav><main><aslide><footer>
<address>
行内元素
空元素
<br/> //换行
<hr> //分隔线
<input> //文本框等
<img> //图片
<link> <meta>
块级元素和行内元素有什么区别？
行内元素不可以设置宽高，不独占一行；
- 补充：内联元素，宽高：auto由内容撑开，margin：上下无效左右有效，padding：左右有效，上下有效但不影响行高，基本无作用，可用于修饰背景。border：左右有效，上下有效但不影响行高，基本无作用，可用作修饰
块级元素可以设置宽高，独占一行。
盒模型
IE 盒模型和 W3C 盒模型有什么区别?
标准盒模型中 padding border 所占空间不在 width/height 范围内，而 IE 盒模型的 width 包括 content 尺寸+ padding + border。
IE6/7/8 怪异模式下（不添加 doctype）就使用的 IE 盒模型。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例？
会出现外边距合并的场景：
兄弟元素合并：当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
父子间合并：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
空元素：假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。
如果这个外边距遇到另一个元素的外边距，它还会发生合并。
如何合并：
两个相邻的外边距都是正数时，合并结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，合并结果是两者绝对值的较大值。
两个外边距一正一负时，合并结果是两者的相加的和。
解决外边距合并的办法：
对于兄弟元素：设置浮动，display: inline-block; 或使其父元素均形成 BFC 可防止边距合并（如 overflow: hidden; ）。
对于父子间的元素：可以给父元素设置 border 或 padding 属性来防止合并。
对于空元素：设置 border 或 padding 属性或 overflow: hidden; 等（形成 BFC）来防止合并。
关于 .item {width: 100%;}，以下说法正确的是：
❌ .item 的宽度（包括左右 margin、左右边框、左右 padding、content）等于它父亲的宽度（包括左右 margin、左右边框、左右 padding、content）。
❌ .item 的宽度（包括左右边框、左右 padding、content）等于它父亲的宽度（左右边框、左右 padding、content）。
❌ .item 的宽度（左右 padding、content）等于它父亲的宽度（左右 padding、content）。
✅ .item 的宽度（content）等于它父亲的宽度（content）。
❌ 如果设置了 * {box-sizing: border-box}，.item 的宽度（包括左右边框、左右 padding、content）等于它父亲的宽度（左右边框、左右 padding、content）。
详解CSS中的百分比的应用
https://blog.5udou.cn/blog/Xiang-Jie-CSSZhong-De-Bai-Fen-Bi-De-Ying-Yong-58
CSS给盒子加样式 绘制常见图形 背景图片相关 省略号
https://mp.weixin.qq.com/s/sMUi_SZUhGWSNhChTEzXUQ
- 补充 协助理解利用border绘制图形
让一个元素“看不见”有几种方式？有什么区别？
-
opacity: 0; 透明度为 0 ，整体都看不见了；
-
visibility: hidden; 这个和上边类似；
-
display: none; 消失，不占用位置；
-
background-color: rgba(0,0,0,0.2); 只是背景色透明。
单行文本溢出加 … 如何实现？
p{
white-space;nowrap /*强制文本不换行*/
overflow:hidden;/* 其次 隐藏溢出 */
text-overflow:ellipsis/*最后，对溢出的文本用ellipsis省略号代替*/
}
解释下面代码的作用？字体里 \5b8b\4f53 代表什么？
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
作用：指定字体；
字体里 \5b8b\4f53 是 unicode 码：
\5b8b 代表：“宋”；
\4f53 代表：“体”。
如何去除列表元素的默认样式前面的点 · ？
✅ list-style: none;
❌ text-decoration: none;
❌ opacity: 0;
❌ default-type: none;
浮动与清除浮动
https://mp.weixin.qq.com/s/HwG7AFf_fHc5St1nv95n5w
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？
特征：
- 浮动元素会脱离正常文档流，按照外边距指定位置相对于上一个块级元素或父元素进行定位
- 浮动元素的边框和背景会忽略浮动元素而向上一个非浮动元素靠奇，但是内容（文字与行内元素）会识别浮动元素并向浮动元素的外边距靠齐
- 浮动元素后面的内联元素会向此浮动元素的外边距靠齐
影响：
- 对其父元素的影响
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。
- 对其兄弟元素（非浮动）的影响
如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过 z-index 属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
3. 对其兄弟元素（浮动）的影响
同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下。
- 对子元素的影响
当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从 100% 变为自适应（浮动元素 display: block; ）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
清除浮动指什么？如何清除浮动？两种以上方法。
在非 IE 浏览器（如 Firefox）下，当容器的高度为 auto，且容器的内容中有浮动（float 为 left 或 right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的 CSS 处理，就叫 CSS 清除浮动。
清除浮动方法：
- 使用带 clear 属性的空元素。
在浮动元素后使用一个空元素如 <div class="clear"></div>，并在 CSS中赋予 .clear {clear: both;} 属性即可清理浮动。亦可使用 <br class="clear" /> 或 <hr class="clear" /> 来进行清理。
- 使用 CSS 的 overflow 属性。
给浮动元素的容器添加 overflow: hidden; 或 overflow: auto; 可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom: 1;。在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
- 给浮动的元素的容器添加浮动。
给浮动元素的容器也添加上浮动属性即可清除内部浮动，触发BFC，但是这样会使其整体浮动，影响布局，不推荐使用。
- 使用邻接元素处理。
什么都不做，给浮动元素后面的元素添加 clear 属性。
- 使用 CSS 的 :after 伪元素。
给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个 :after 伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
CSS 定位 与 BFC
https://mp.weixin.qq.com/s/R8M4007QRE4YzT3rkYtXjw
有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？
static（默认值）：元素使用正常的布局行为，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top，bottom，left，right 影响。
relative：相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
absolute：绝对定位的元素脱离了文档流，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 。
fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。Fixed 定位的元素和其他元素重叠。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
sticky：粘性定位基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动。具体表现为在跨越特定阈值前为相对定位，之后为固定定位。指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效,否则其行为与相对定位相同。
z-index 有什么作用？如何使用？
元素使用绝对定位之后，产生元素覆盖的问题，z-index 可以解决元素之间覆盖顺序的问题，设置它的层叠顺序。
同级元素，数值越大，越靠近视觉点；不同父元素，只要父元素越大，那么整体就越靠近视觉点，而不管其子元素大小情况。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。
BFC（块格式化上下文）
全称 Block Formating Context 。BFC 是一个独立的渲染区域，只有 block-level box 参与。它规定了内部 block-level box 如何布局，并且与这个区域外部毫不相关。
下列方式会生成 BFC：
1、 根元素
2、 float属性不为none
3、 position为absolute或fixed
4、 overflow的值不为visible
5、 display的值为table-cell，table-caption，inline-block中的任何一个。
BFC 常见的用途：
清除元素内部浮动：通过给父元素创建 BFC ，添加 overflow: hidden; 样式；
解决外边距合并问题：将垂直方向上的盒子放在不同的 BFC 中，margin 就不会重叠了；
制作自适应两栏布局：要求两栏布局中间没有缝隙时，通过触发 main 生成 BFC ，来实现自适应无缝隙两栏布局。
CSS “伪元素”妙用（清楚浮动，替代标签，动态选择）
https://mp.weixin.qq.com/s/RuGBnMsC0CHrPKiOvj8GAw
CSS居中
如何让块级元素水平居中？如何让行内元素水平居中？如何让 inline-block 元素水平居中？
- 在父元素上设置 text-align: center; 使文字/图片水平居中：
.container {
text-align: center;
}
- margin
.container {
width: 80%;
margin: 0 auto;
}
垂直上下居中的办法？
/* 第一种方法（知道元素的宽和高）*/
div.box {
width: 200px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -200px;
}
/* 第二种方法（不知道元素的宽和高）*/
div.box {
width: 200px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
/* 第三种方法（不知道元素的宽和高）*/
.main {
width: 400px;
height: 400px;
background-color: #aaa;
display: table; /* 父元素设置表格属性 */
text-align: center;
}
.main span {
display: table-cell; /* img 设置成表格元素属性 */
vertical-align: middle; /* 两个 display 设置后这个属性就起作用 */
}
/* 第四种方法（flex 布局）*/
父级元素：{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
子级元素：{
flex: 1;
}
/* 第五种方法（flex 布局）*/
父级元素：{
display: flex;
}
子级元素：{
margin：auto;
}
CSS常用布局
https://blog.csdn.net/Ayun0420/article/details/98461552
CSS响应式布局原理
https://blog.csdn.net/Ayun0420/article/details/98490092
媒体查询
https://mp.weixin.qq.com/s/vBxf08nF4ZGonENWvREv7Q
CSS3
CSS3新特性
-
媒体查询（可以查询设备的物理像素然后进行自适应操作）；
-
transform，transition，translate，scale，skelw，rotate 等相关动画效果；
-
box-shadow ，text-shadow 等特效；
-
CSS3 @font-face 规则，设计师可以引入任意的字体了；
-
CSS3 @keyframes 规则，可以自己创建一些动画等；
-
2D、3D 转换；
-
添加了 border-radius，border-image 等属性；
CSS3新增伪类有那些？
p:first-of-type 选择属于其父元素的首个<p>元素的每个<p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容。
:enabled 已启用的表单元素。
:disabled 已禁用的表单元素。
:checked 单选框或复选框被选中。
rgba()和opacity的透明效果有什么不同？
- rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
- 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
Canvas 和 SVG 有什么区别？
SVG 绘制出来的每一个图形的元素都是独立的 DOM 节点，能够方便的绑定事件或用来修改；Canvas 输出的是一整幅画布。
SVG 输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿；而 Canvas 输出标量画布，就像一张图片一样，放大会失真或者锯齿。
浏览器兼容
https://mp.weixin.qq.com/s/k3jFFVwDfSiskZjGpcqCvg
渐进增强和优雅降级分别是什么意思？
渐进增强（Progressive Enhancement）：
一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：
一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
什么是 CSS Hack？在哪个网站查看标签（属性）的浏览器兼容情况？
CSS hack 是通过在 CSS 样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack 就是让你记住这个标准），以达到应用不同的 CSS 样式的目的。
由于不同厂商的浏览器，比如 Internet Explorer，Safari，Mozilla Firefox，Chrome 等，或者是同一厂商的浏览器的不同版本，如 IE6 和 IE7，对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的 CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack 的目的就是使你的 CSS 代码兼容不同的浏览器。当然，我们也可以反过来利用 CSS hack 为不同版本的浏览器定制编写不同的 CSS 效果。
CSS Hack 常见的有三种形式：
CSS 属性 Hack
CSS 选择符 Hack
IE 条件注释 Hack
Hack 主要针对 IE 浏览器。
-
属性级 Hack：比如 IE6 能识别下划线“”和星号“”，IE7 能识别星号“”，但不能识别下划线“”，而 firefox 两个都不能认识。
-
选择符级 Hack：比如 IE6 能识别 *html .class{}，IE7 能识别 *+html .class{} 或者 *:first-child+html .class{} 。
-
IE 条件注释 Hack：IE 条件注释是微软 IE5 开始就提供的一种非标准逻辑语句。
比如针对所有 IE：
<!-[if IE]><!-您的代码-><![endif]>
针对 IE6 及以下版本：
<!-[if it IE 7]><!-您的代码-><![endif]->
这类 Hack 不仅对 CSS 生效，对写在判断语句里面的所有代码都会生效。
PS：条件注释只有在 IE 浏览器下才能执行，这个代码在非 IE 浏览下被当做注释视而不见。可以通过 IE 条件注释载入不同的 CSS、JS、HTML 和服务器代码等。
caniuse.com 查 CSS 属性兼容情况；
browserhacks.com 查 Hack 的写法
E6、7 的 Hack 写法是？
.box {
color: red;
_color: blue; /*ie6 下它生效*/
*color: pink; /*ie67 下它生效*/
color: yellow\9; /*ie/edge 6-8 下它生效*/
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
尽可能多的列举浏览器兼容的处理范例？
例一：
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* 仅对ie67有效 */
}
例二：
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
例三：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
例四：
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
CSS Reset 是什么？CSS 预编译器是什么？后编译器（PostCSS）是什么？
CSS reset 将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式，“覆盖”浏览器的 CSS 默认属性。
CSS 预编译器的作用是增强了 CSS 语法，让我们可以在 CSS 中使用变量、循环、嵌套等功能，主要代表是 Less、Sass 、Stylus ，它们本质上就是一种编译器。
后编译器 PostCSS 提供了一种方式用 JavaScript 代码来处理 CSS 。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。
简单来说：它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将 CSS 解析成抽象语法树，通过 PostCSS 这个平台，我们能够开发一些插件来处理 CSS 。热门插件如 autoprefixer ，它可以帮我们处理兼容问题，只需正常写 CSS ，autoprefixer 可以帮我们自动生成兼容性代码。
CSS Reset 和 Normalize.css 有什么区别？
Normalize.css 只是一个很小的 CSS 文件，但它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 CSS reset ，Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案。Normalize.css 是一个可以定制的 CSS 文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
它可以：
保留有用的默认值，不同于许多 CSS reset 的简单粗暴全部抹掉；
标准化的样式，适用范围广的元素；
纠正错误和常见的浏览器的不一致性；
一些细微的改进，提高了易用性；
使用详细的注释来解释代码。
尽可能多的写出浏览器兼容性问题？
- 不同浏览器的标签默认的 margin 和 padding 不同。
解决办法：
body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }
- 块属性标签 float 后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。
解决办法：在 float 的标签样式控制中加入 display: inline; 将其转化为行内属性。
- 设置较小高度标签（一般小于 10px），在 IE6，IE7，遨游中高度超出自己设置高度。
解决办法：给超出高度的标签设置 overflow: hidden; 或者设置行高 line-height 小于你设置的高度。
- 清除浮动：
解决办法：万能公式在 float 的父元素上使用：
.abc:after {
content: '';
clear: both;
display: block;
width: 0;
height: 0;
visibility: hidden;
}
- IE 浮动边缘产生的双倍距离：
#box {
float: left;
width: 100px;
margin: 0 0 0 100px; //这种情况之下 IE 会产生 200px 的距离
display: inline; //使浮动忽略
}
- 透明度：
IE：filter: alpha(opacity = 10);
FF：不透明度: 0.6;
FF：-moz-opacity: 0.10;
最好两个都写，并将透明度属性放在下面
- 最小高度的实现（兼容 IE6，IE7，FF）：
#mrjin {
background: #ccc;
min-height: 100px;
height: auto !important;
height: 100px;
overflow: visible;
}
- IE6 下在使用 margin: 0 auto; 无法使其居中。
解决办法：为其父容器设置 text-align: center;。
- 被点击过后的超链接不再具有 hover 和 active 属性。
解决办法：按 “lvha” 的顺序书写 css 样式：
:link： a 标签还未被访问的状态；
:visited：a 标签已被访问过的状态；
:hover：鼠标悬停在 a 标签上的状态；
:active：a 标签被鼠标按着时的状态；
- IE6 下无法设置 1px 的行高，原因是由其默认行高引起的。
解决办法：为其设置 overflow: hidden; 或者 line-height:1px;。
如何让 Chrome 浏览器显示小于 12px 的文字？
为了兼容所有的浏览器，使用缩放方式使字体变小：
p {
font-size: 10px;
-webkit-transform: scale(0.8);
}
如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms
CSS 预处理器的比较：Less、Sass？
- 两者的相同点：
首先 sass 和 less 都是 CSS 的预编译处理语言，他们引入了 mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript 赋值等加快了 CSS 开发效率，当然这两者都可以配合 gulp 和 grunt 等前端构建工具使用。
- 两者的区别：
less 是基于 JavaScript 的在客户端处理。
sass 是基于 ruby 所以在服务器处理。
LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系
- 两者的优缺点：
less 缺点：因为 JavaScript 引擎需要额外的时间来处理代码然后输出修改过的 CSS 到浏览器。
less优点：less 简单，易上手；属于 CSS 的基础拓展；less 更适合静态界面写样式。
sass 的缺点：复杂对于新手比较不友好。
sass 的优点：功能强大，更加丰富的拓展 sass 适合游戏或者其他做效果时需要逻辑来更换不同样式。
常见兼容性问题？
png24 位的图片在 IE6 浏览器上出现背景，解决方案是做成 PNG8。
浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 *{margin: 0;padding: 0;} 来统一，但是全局效率很低，一般是如下这样解决：
IE 下，event 对象有 x、y 属性，但是没有 pageX、pageY 属性。
Firefox 下，event 对象有 pageX，pageY 属性，但是没有 x、y 属性。
CSS编码规范
https://mp.weixin.qq.com/s/4qF_-ZM5Ki31YlPZh8PmQA
1964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
