CSS相关

1.1CSS 基础与选择器初识 | CSS

1. CSS 加载方式有几种？

CSS样式加载一共有四种方式：

1、行内样式

直接对HTML标签引入style=""设置样式；这样的方式会使得html不干净，代码冗余不利于维护。

2、内嵌样式--内部样式表

在head标签之间用<style></style>标签声明

div{margin : 0 ;padding:0;border:1px red solid;}

</style>

优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。

3、链入外部样式表—在head部分加入

链接样式使用最多，推荐使用的一种方法，在<head></head>标签之间用<link ...../>引入css文件

注：rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用。

4、导入外部样式表—在head部分加入

导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。

@import url(my.css);

</style>

四种CSS加载方式的优先级

1、就近原则

2、理论上：行内>内嵌>链接>导入

3、实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高

2.页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

3. CSS 选择器常见的有几种？

一、基本选择器

序号选择器含义

1.*通用元素选择器，匹配任何元素

2.E标签选择器，匹配所有使用E标签的元素

3..infoclass选择器，匹配所有class属性中包含info的元素

4.#footerid选择器，匹配所有id属性等于footer的元素

二、多元素的组合选择器

5. E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔

6. E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔

7. E > F 子元素选择器，匹配所有E元素的子元素F

8. E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

三、CSS 2.1 属性选择器

9. E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如"[cheacked]"。以下同。）

10. E[att=val] 匹配所有att属性等于"val"的E元素

11. E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素

12. E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"val"开头的E元素，主要用于lang属性，比如"en"、"en-us"、"en-gb"等等

四、CSS 2.1中的伪类

13. E:first-child 匹配父元素的第一个子元素

14. E:link 匹配所有未被点击的链接

15. E:visited 匹配所有已被点击的链接

16. E:active 匹配鼠标已经其上按下、还没有释放的E元素

17. E:hover 匹配鼠标悬停其上的E元素

18. E:focus 匹配获得当前焦点的E元素

19. E:lang(c) 匹配lang属性等于c的E元素

五、 CSS 2.1中的伪元素

20. E:first-line 匹配E元素的第一行

21. E:first-letter 匹配E元素的第一个字母

22. E:before 在E元素之前插入生成的内容

23. E:after 在E元素之后插入生成的内容

六、CSS 3的同级元素通用选择器

24. E ~ F 匹配任何在E元素之后的同级F元素

实例：

p ~ ul { background:#ff0; }

七、CSS 3 属性选择器

25. E[att^="val"] 属性att的值以"val"开头的元素

26. E[att$="val"] 属性att的值以"val"结尾的元素

27. E[att*="val"] 属性att的值包含"val"字符串的元素

实例：

div[id^="nav"] { background:#ff0; }

八、CSS 3中与用户界面有关的伪类

28. E:enabled 匹配表单中激活的元素

29. E:disabled 匹配表单中禁用的元素

30. E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素

31. E::selection 匹配用户当前选中的元素

实例：

input[type="text"]:disabled { background:#ddd; }

九、CSS 3中的结构性伪类

32. E:root 匹配文档的根元素，对于HTML文档，就是HTML元素

33. E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1

34. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1

35. E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素

36. E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素

37. E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)

38. E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

39. E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

40. E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)

41. E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

42. E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

十、CSS 3的反选伪类

43. E:not(s) 匹配不符合当前选择器的任何元素

实例：

:not(p) { border:1px solid #ccc; }

十一、CSS 3中的 :target 伪类

44. E:target 匹配文档中特定"id"点击后的效果

4. id 选择器和 class 选择器的使用场景分别是什么？

在一个块或者几个块中使用class选择器，而在页面只出现一次的元素属性中使用id选择器。

5. @charset 有什么作用？

<charset>：

取值：字符编码。如：@charset "utf-8";

在外部样式表文件内使用。指定该样式表使用的字符编码。该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。

6. 简述 src 和 href 的区别？

href标识超文本引用，href是Hypertext

Reference

的缩写，指向网络资源所在的位置，建立和当前元素（锚点）或当前文档（链接之间的链接）（百科：超文本是超级文本的缩写。超文本链接可以用于各种效果。超链接可以用在目录和主题列表中。浏览者可以在浏览器屏幕上单击鼠标或在键盘上按下按键，从而选择并自动跳转到文档中自己感兴趣的那个主题）用在link和a等元素上，用于在当前文档和引用资源之间确立联系。

src是source的缩写，src用于替换当前的元素，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素

7. 伪类选择器有哪些？

伪类选择器主要可以分为：动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器。

下面详细介绍这些分类的选择器语法：

1.动态伪类选择器语法

E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

E:visited（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

E:hover （用户行为选择器）：选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

E:focus （用户行为选择器）：选择匹配的E元素，而且匹配元素获取焦点

动态伪类选择器可以用于超链接 a标签的应用中：

a标签有4种伪类（即对应四种状态）,如下：

:link “链接”：超链接点击之前

:visited “访问过的”：链接被访问过之后

:hover “悬停”：鼠标放到标签上的时候

:active “激活”：鼠标点击标签，但是不松手时。

a标签的这四种伪类选择器存在着一定的顺序，各个样式之间的顺序很有讲究，一旦出现排列错误就很有可能形成覆盖，导致其中某个样式无法显示。那么a标签的这四种伪类选择器需要怎样排序才可以使用？

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。

所以，a标签的这四种伪类选择器的顺序为：a:link ，a:visited，a:hover ，a:active

2.UI元素状态伪类选择器

E:checked（选中状态伪类选择器）：匹配选中的复选按钮或者单选按钮表单元素

E:enabled（启用状态伪类选择器）：匹配所有启用的表单元素

E:disabled（不可用状态伪类选择器）：匹配所有禁用的表单元素

UI元素状态伪类选择器主要是针对于HTML中的Form元素进行操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用：

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

注意：IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

3.结构伪类选择器

E:fisrt-child ：作为父元素的第一个子元素的元素E。与E:nth-child(1)等同

E:last-child ：作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

E:root：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同

E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.

F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同

E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素

E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素

E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同

E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同

E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素

E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素

E:empty：选择没有子元素的元素，而且该元素也不包含任何文本节点

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

结构伪类选择器很容易遭到误解，需要特别强调。如：

p:first-child;

它表示的是：选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。

注意：

结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。

4.否定伪类选择器

E:not(F)：匹配所有除元素F外的E元素

例：对form中所有input加边框，但又不想submit也起变化，就可以这样写：

input:not([type="submit"]) {border: 1px solid red;}

8. 伪元素和伪类的区别？

伪类：用于向某些选择器添加特殊的效果

伪元素：用于将特殊的效果添加到某些选择器

其实根本意思就是就是对那些不能通过class、id等选择元素的补充

9.选择器的优先级是如何计算的,当不同类别的多个选择器混合使用时怎么计算优先级？

对于不同类别的选择器，以以下原则进行排序：

1、在属性后面使用！important会覆盖页面内任何位置定义的元素样式。

2、作为style属性写在元素内的样式

3、id选择器

4、类选择器

5、标签选择器

6、通配符选择器

7、浏览器自定义或子元素集成父类的样式

将上面的稍微总结一下就是：

！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性

同一级别中后写的会覆盖先写的样式。

问题二：当不同类别的多个选择器混合使用个怎么计算优先级？

有一个简单的算法，设

a.内联样式表的权值为1000

b.ID选择器的权值为100

c.class类选择器的权值为10

d.HTML标签选择器的权值为1

10. 什么是 CSS 继承？哪些属性能继承，哪些不能？

一、能继承的属性

1. 字体系列属性:font、font-family、font-weight、font-size、font-style;

2. 文本系列属性:

（1）内联元素：color、line-height、word-spacing、letter-spacing、text-transform;

（2）块级元素：text-indent、text-align;

3. 元素可见性：visibility

4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout;

5. 列表布局属性：list-style

6. 生成内容属性：quotes

7. 光标属性：cursor

8. 页面样式属性：page、page-break-inside、windows、orphans;

9. 声音样式属性：speak、speech-rate、volume、voice-family、pitch、stress、elevation;

二、不能继承的属性

1. display：规定元素应该生成的框的类型；

2. 文本属性：vertical-align、text-decoration;

3. 盒子模型的属性：width、height、margin 、border、padding;

4. 背景属性：background、background-color、background-image;

5. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip;

6. 生成内容属性：content、counter-reset、counter-increment;

7. 轮廓样式属性：outline-style、outline-width、outline-color、outline;

8. 页面样式属性：size、page-break-before、page-break-after;

9. 声音样式属性：pause、cue、play-during;

11. 你有没有使用过视网膜分辨率的图形？当中使用什么技术？

我倾向于使用更高分辨率的图形（显示尺寸的两倍）来处理视网膜显示。更好的方法是使用媒体查询，像@media only screen and (min-device-pixel-ratio: 2) { ... }，然后改变background-image。

对于图标类的图形，我会尽可能使用 svg 和图标字体，因为它们在任何分辨率下，都能被渲染得十分清晰。

还有一种方法是，在检查了window.devicePixelRatio的值后，利用 JavaScript 将<img>的src属性修改，用更高分辨率的版本进行替换。

12. px、em、rem、%、vw、wh、vm 有什么区别？

px 就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的

em 是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）

如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

特点：

　　1. em的值并不是固定的；

　　2. em会继承父级元素的字体大小

rem 是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位

如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好

rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem

em与rem的区别：

　　rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小

两者使用规则：

如果这个属性根据它的font-size进行测量，则使用em

其他的一切事物属性均使用rem

这里提供了一个px、em、rem单位的转换工具：http://pxtoem.com/

vw、vh、vmax、vmin 这四个单位都是基于视口

vw 是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100，假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）

vh 是相对视口（viewport）的高度而定的，长度等于视口高度的1/100，假如浏览器的高度为500px，那么1vh就等于5px（500px/100）

vmin和vmax 是相对于视口的高度和宽度两者之间的最小值或最大值

其他单位：

%（百分比）

一般来说就是相对于父元素

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

css3新单位，相对于视口的宽度或高度中较小的那个

其中最小的那个被均分为100单位的vm

比如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px

缺点：兼容性差

常见问题：

1、假如使用em来设置文字大小要注意什么？

注意父元素的字体大小，因为em是根据父元素的大小来设置的。

比如同样是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px（特别是在多重div嵌套里面更要注意）

2、pc pt ch一般用在什么场景？

这些我们网页设计基本上用不到，在排版上会有用处

3、如何使 1rem=10px

在设置HTML{font-size：62.5%；}即可

4、如果父元素没有指定高度，那么子元素的百分比的高度是多少？

会按照子元素的实际高度，设置百分比则没有效果

13. 块级元素和行内元素分别有哪些？空（void）元素有那些？块级元素和行内元素有什么区别？

行内元素有：a b span img input select strong

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p

空元素：br hr img input link meta

区别：

1.行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

14. IE 盒模型和 W3C 盒模型有什么区别?

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

15. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例？

合并外边距的场景：

外边距合并的必备条件：margin必须是邻接的

两个margin是邻接的必需满足以下条件：

1、必须是处于常规文档流（非float和绝对定位）的块级盒子，并且处于同一个BFC当中

2、没有线盒，没有空隙，没有padding和border将他们分隔开

3、都属于垂直方向上相邻的外边距，可以是下面任意一种情况：

<1>:元素的margin-top与其第一个常规文档流的子元素的margin-top

<2>:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top

<3>:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom

<4>:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立斤的BFC的元素的margin-top和margin-bottom

合并规则:

一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会合并，除非它们之间存在clearance

一个常规文档流元素的margin-top与其第一个常规文档流的子元素的margin-top产生合并，条件为父元素不包含padding和border,子元素不包含clearance

一个’height’为’auto’并且’min-height’为0的常规文档流元素的margin-bottom会与其最后一个常规文档流子元素的margin-bottom合并，条件为父元素不包含padding和border,子元素的margin-bottom不与保护clearance的margin-top合并

一个不包含boder-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其’height’为0或’auto’,’min-height’为’0’,其里面也不包含line

box,其自身的margin-top和margin-bottom会合并

创建了新的BFC的元素（例如浮动元素或者’overflow’值为’visible’以外的元素）与它的子元素的外边距不会合并

浮动元素不与任何元素的外边距产生合并（包括其父元素和子元素）

绝对定位元素不与任何元素的外边距产生合并

inline-block元素不与任何元素的外边距产生合并

合并后margin计算规则

兄弟元素

父子元素

空元素

以上三种混合

父子外边距合并范例

1.2CSS 基本视觉格式化：② “行内盒子”格式化 | CSS

1. line-height: 2; 和 line-height: 200%; 有什么区别?

line-height: 2 表示单行文本的行高为它本身的两倍

line-height: 200% 表示单行文本的行高为系统默认字体的200%

在继承性上：

对父元素设置了line-height: 2后，父元素的子元素会继承line-height: 2这个属性，子元素的行高都是自身高度的2倍，是相对大小，子元素的字体大小不同，行高也会不同；

对父元素设置了line-height: 200%后，父元素的子元素会继承系统默认字体的200%，是一个固定的值，是固定大小，子元素的字体大小不同，行高都是固定某个值；

2. 行内元素的“边框”、“边界”等“框属性”是由 font-size 还是 line-height 控制？

行内元素的边框边界由font-size而不是line-height控制

3. height=line-height 可以用来垂直居中单行文本？代码怎么实现？

line-height与font-size的计算值之差（也就是两行的“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。所以当我们设置单行文本的line-height为所需要box的高度，即可实现垂直居中对齐。

4. inline-block 有什么特性？inline-block 在实际工作中有什么作用？

既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)

又呈现 block 特性 (可设置宽高，内外边距)

默认情况下，inline-block元素之间就有空隙出现

可以用于左右布局。

5. 怎么去除两个按钮中间的缝隙问题？

1.改变HTML结构，input之间不要换行

2.给第一个input添加左浮动

6. 一个页面有一排高度不一样的产品图，这时如果我们用 inline-block ，怎样使他们“顶端对齐”？

设置css属性 vertical-align:top;

1.3CSS 给盒子、背景、链接、列表、表单、表格等加样式 | CSS

1. 让一个元素“看不见”有几种方式？有什么区别？

最常用的两种方式：

display：none，这种方式可以使元素彻底从文档中删除，会造成浏览器的回流与重绘

visibility：hidden，元素会从页面中消失，它原本占据的空间会被保留，会造成浏览器的重绘，适用于希望元素隐藏又不影响页面布局的场景，但是该属性会被子元素继承，所以若不希望子元素隐藏，还需在子元素中设置visibility：visible。

不太推荐使用的方法：

opacity：0

opacity属性表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。但是它仍然存在与页面中。

盒模型属性设置为0

如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素。

.hiddenBox {

margin:0;

border:0;

padding:0;

height:0;

width:0;

overflow:hidden;

}

设置元素绝对定位将元素移出屏幕

.box1 {

position: absolute;

left: 100%;

}

或

.box1 {

position: absolute;

top: 9999px;

}

text-indent，一般首行缩2个中文字的用法是text-indent:2em。但当给他一个足够大的负值，大到我们浏览器无法显示。如text-indent:-999em。

2. 单行文本溢出加 ... 如何实现？

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

实现方法：

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

效果如图：

但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号，如下。

实现方法：

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:3;

overflow:hidden;

效果如图：

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

实现方法：

p{position:relative;line-height:20px;max-height:40px;overflow:hidden;}p::after{content:"...";position:absolute;bottom:0;right:0;padding-left:40px;background:-webkit-linear-gradient(left,transparent,#fff 55%);background:-o-linear-gradient(right,transparent,#fff 55%);background:-moz-linear-gradient(right,transparent,#fff 55%);background:linear-gradient(to right,transparent,#fff 55%);}

3. 如何在页面上实现一个圆形的可点击区域？

三种解决方案： html标签、css实现、纯js实现

方案一：

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

<img

src="task6.jpg" width="1366" height="768" border="0"

usemap="#Map"/><map name="Map" id="Map"><area shape="circle"

coords="100,100,50" href="https://www.baidu.com"

target="_blank"/></map>

方案二：

<style>

.disc{

width:100px;

height:100px;

background-color:dimgray;

border-radius: 50%;

cursor: pointer;

position: absolute;

left:50px;

top:50px;

line-height: 100px;

text-align: center;

color: white;}</style><div class="disc">点击区域</div>

方案三：

varr = 50;//圆的半径varx1 = 100, y1 = 100;

varx2 = e.clientX,

y2 = e.clientY;

varlen=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));

if(len<=50){

console.log("Inner");

}else{

console.log("Outer");

}

1.4让“盒子”动起来：② “定位”和 BFC | CSS

1. 有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？

position: relative 相对定位 相对于元素的正常位置进行定位；参考点为元素原来的位置；在使用相对定位时，无论是否进行移动，元素在文档流中仍然占据原来的空间，只是表现出来的位置会改变；

position: absolute 绝对定位 相对于static（默认值，没有定位）以外的第一个父元素进行定位；参考点为第一个父元素；根据定位点的padding进行偏移；不占据文档空间，普通流中的元素布局就像绝对定位元素不存在；

position: fixed 固定定位 相对于浏览器窗口进行定位；参考点为浏览器窗口；固定定位的元素也不包含在文档流中；

position: sticky CSS3新属性，表现类似relative和fixed的集合体，目标区域在屏幕可见时，它的行为像position: relative，当页面滚动超出目标区域时，它的行为像position: fixed。

2. z-index 有什么作用？如何使用？

可以解决元素的覆盖问题，决定那个元素在上方，哪一个在下方；

z-index的值可以是负数，也可以为0，也可以无群大，数值大的在上方；

z-index父元素设置的值权重比较大，当两个父元素相比的时候，父元素起决定作用，其中的子元素设置多大都没有用；

相同z-index谁上谁下

1.如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。

2.如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素

父子关系处理

1.如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方

2.如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效

兄弟之间子元素

如果兄弟元素的z-index生效，那么其子元素覆盖关系由父元素决定

3. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。

1，什么是BFC？

1）BFC(Block formatting context)直译为“块级格式化上下文”。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。

2）可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流

3）不是所有的元素，模式都能产生BFC 。w3c规范：display属性为block, list-item ,table的元素，会产生BFC。

2，BFC的原理是什么？

1）内部的Box会在垂直方向，一个接一个地放置。

2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3）每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4）BFC的区域不会与float box重叠。

5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6）计算BFC的高度时，浮动元素也参与计算

3，如何创建BFC?

1）根元素

2）float属性不为none

3）position不为static和relative

4）overflow不为visible

5）display为inline-block, table-cell, table-caption, flex, inline-flex

4,BFC作用？

1）防止外边距重叠。

bfc导致的属于同一个bfc中的子元素的margin重叠(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)

我们可以在div外面包裹一层容器，并触发该容器生成一个BFC。那么两个div便不属于同一个BFC，就不会发生margin重叠了。

2）清除浮动的影响

块级子元素浮动，如果块级父元素没有设置高度，其会有高度塌陷的情况发生。

原因：子元素浮动后，均开启了BFC，父元素不会被子元素撑开。

解决方法：由第六条原理得，计算BFC的高度时，浮动元素也参与计算。所以只要将父容器设置为bfc

就可以把子元素包含进去：这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的

子元素，在这个BFC，这些元素将会回到页面的常规文档流。

3）防止文字环绕

5. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？

特征：

浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示

浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐

浮动元素后面的内联元素会向此浮动元素的外边距靠齐

float造成的影响：

1、对其父元素的影响

对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷

2、对其兄弟元素（非浮动）的影响

如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。

如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。

3、对其兄弟元素（浮动）的影响

同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面

反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下

4、对子元素的影响

当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

6. 清除浮动指什么？如何清除浮动？两种以上方法。

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

清除浮动方法：

1、使用带clear属性的空元素

在浮动元素后使用一个空元素如

，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用

或

来进行清理。

2、使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在

IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置

zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

3、给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

4、使用邻接元素处理

什么都不做，给浮动元素后面的元素添加clear属性。

5、方法五：使用CSS的:after伪元素

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

总结

利用 clear属性，清除浮动

使父容器形成BFC

BFC清理浮动

float为 left|right

overflow为 hidden|auto|scroll

display为 table-cell|table-caption|inline-block|flex|inline-flex

position为 absolute|fixed

我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果

通用的清理浮动法案

.clearfix{

*zoom:1;

}

.clearfix:after{

content:".";

display:block;

height:0;

visibility:hidden;

clear:left;

}

.clearfix{

*zoom:1;

}

.clearfix:after{

content:"";

display:table;

clear:both;

}

7. 可以通过哪些方法优化 CSS3 Animation 渲染？

1、尽可能多的利用硬件能力，如使用3D变形来开启GPU加速：

比如代码：

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性；

原因：CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite

Paint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform:

translateX(3em)的方案代替使用left:

3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite（这也是为什么推荐在CSS动画中使用webkit-transform:

translateX(500px)的方案代替使用left: 500px）；

如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-perspective: 1000;

-moz-perspective: 1000;

-ms-perspective: 1000;

perspective: 1000;

2、尽可能少的使用box-shadows与gradients

box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们.

尽可能的让动画元素不在文档流中，以减少重排

position: fixed;

position: absolute;

我们一起来看下CSS3动画其中一些属性性能消耗图：

性能消耗图，由此可见最受欢饮和性能最好的莫过于transform和opacity了。

以上只是总结了2点关于性能优化，后来参阅了一些其他的文章和自己的研究发现：现代浏览器在使用CSS3动画时，以下四种情形绘制的效率较高（包含了以上2种）。

* 改变位置

* 改变大小

* 旋转

* 改变透明度

8. 如何让块级元素水平居中？如何让行内元素水平居中？如何让 inline-block 元素水平居中？

CSS设置行内元素的水平居中

div{text-align:center} /DIV内的行内元素均会水平居中/

CSS设置行内元素的垂直居中

div{height:30px; line-height:30px} /DIV内的行内元素均会垂直居中/

PS:当然，如果既要水平居中又要垂直居中，那么综合一下

div{text-align:center; height:30px; line-height:30px}

CSS设置块级元素的水平居中

div p{margin:0 auto; width:500px} /块级元素p一定要设置宽度，

才能相当于DIV父容器水平居中/

CSS设置块级元素的垂直居中

div{width:500px} /DIV父容器设置宽度/

div p{margin:0 aut0; height:30px; line-height:30px} /块级元素p也可以加个宽度，

以达到相对于DIV父容器的水平居中效果/

inline-block元素水平居中

对其父元素添加 text-align:center;

9. 垂直上下居中的办法？

绝对定位方法：不确定当前div的宽度和高度，采用transform:translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

div{

background:red;

position: absolute;

left:50%;

top:50%;

transform: translate(-50%, -50%);

}

　绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

div{

width:600px;

height: 600px;

background:red;

position: absolute;

left:50%;

top:50%;

margin-left:-300px;

margin-top:-300px;

}

绝对定位方法：绝对定位下top left right bottom 都设置0

<divclass="child">我是子级</div>

/**css**/

div.child{

width: 600px;

height: 600px;

background: red;

position:absolute;

left:0;

top: 0;

bottom: 0;

right: 0;

margin: auto;

}

flex布局方法：当前div的父级添加flex css样式

<divclass="child">child</div>

</div>

.box{

height:800px;

-webkit-display:flex;

display:flex;

-webkit-align-items:center;

align-items:center;

-webkit-justify-content:center;

justify-content:center;

border:1px solid #ccc;

}

div.child{

width:600px;

height:600px;

background-color:red;

}

table-cell实现水平垂直居中: table-cell middle center组合使用

<divclass="table-cell">

</div>

.table-cell {

display: table-cell;

vertical-align: middle;

text-align: center;

width: 240px;

height: 180px;

border:1px solid #666;

}

10.响应式布局原理？

响应式布局的实现可以通过媒体查询+px,媒体查询+百分比，媒体查询+rem+js,vm/vh,vm/vh

+rem这几种方式来实现。但每一种方式都是有缺点的，媒体查询需要选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配，另外用户体验也不友好，布局在响应断点范围内的分辨率下维持不变，而在响应断点切换的瞬间，布局带来断层式的切换变化，如同卡带的唱机般“咔咔咔”地一下又一下。通过百分比来适配首先是计算麻烦，第二各个属性中如果使用百分比，其相对的元素的属性并不是唯一的，这样就造成我们使用百分比单位容易使布局问题变得复杂。通过采用rem单位的动态计算的弹性布局，则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小，使得CSS与JS

耦合了在一起。通过利用纯css视口单位实现适配的页面，是既能解决响应式断层问题，又能解决脚本依赖的问题的，但是兼容性还没有完全能结构接受。

举例：

/* for 240 px width screen */

@media only screen and (max-device-width:240px){

selector{ ... }

}

/* for 320px width screen */

@media only screen and (min-device-width:241px) and (max-device-width:320px){

selector{ ... }

}

/* for 480 px width screen */

@media only screen (min-device-width:321px)and (max-device-width:480px){

selector{ ... }

}

11. 如何使用伪元素来清除浮动？

代码 #content:after{content:"";display:block;clear:both;}

1.5让这些“展示”有更好的扩展性——媒体查询 | CSS

1. 列举你了解的 HTML5、CSS3 新特性？

1.HTML5 新元素

<article>定义页面独立的内容区域。

<aside>定义页面的侧边栏内容。

<footer>定义 section 或 document 的页脚。

<header>定义了文档的头部区域

<nav>定义导航链接的部分。

<audio> 音频元素

<video> 视频元素

2.HTML5 Web 存储

Web Storage DOM API 为Web应用提供了一个能够替代cookie的Javascript解决方案

sessionStorage—客户端数据存储，只能维持在当前会话范围内。

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

localStorage—客户端数据存储，能维持在多个会话范围内。

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

CSS3

CSS3 边框，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序

border-image设置所有边框图像的速记属性。

border-radius一个用于设置所有四个边框- *-半径属性的速记属性

box-shadow附加一个或多个下拉框的阴影

CSS3中包含几个新的背景属性，提供更大背景元素

background-clip规定背景的绘制区域。

background-origin规定背景图片的定位区域。

background-size规定背景图片的尺寸。

CSS3 定义了两种类型的渐变（gradients）

CSS3 转换和变形

transform适用于2D或3D转换的元素

CSS3 过渡transition

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

CSS3 盒模型

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

resize：none | both | horizontal | vertical | inherit

box-sizing: content-box | border-box | inherit

outline:outline-color outline-style outline-width outine-offset

2. Canvas 和 SVG 有什么区别？

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

Canvas

描述：

通过Javascript来绘制2D图形。

是逐像素进行渲染的。

其位置发生改变，会重新进行绘制。

SVG

描述：

一种使用XML描述的2D图形的语言

SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

比较

Canvas

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序（比如谷歌地图）

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

不适合游戏应用

参考：http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp

1.6CSS 拓展：① 浏览器兼容 | CSS

1. 渐进增强和优雅降级分别是什么意思？

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

2. 什么是 CSS Hack？在哪个网站查看标签（属性）的浏览器兼容情况？

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。

3. IE6、7 的 Hack 写法是？

常见hack写法

.box{

color: red;

_color: blue; /*ie6*/

*color: pink; /*ie67*/

color: yellow\9; /*ie/edge 6-8*/

}

<!–-[if IE 7]>

<![endif]–->

4. 尽可能多的列举浏览器兼容的处理范例？

.clearfix:after{

content: '';

display: block;

clear: both;

}

.clearfix{

*zoom: 1; /* 仅对ie67有效 */

}

.target{

display: inline-block;

*display: inline;

*zoom: 1;

}

<!--[if lt IE 9]>

<![endif]-->

<!DOCTYPE html>

<!--[if

(gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html

dir="ltr" lang="en-US" class="no-js">

5. CSS Reset 是什么？CSS 预编译器是什么？后编译器（PostCSS）是什么？

css reset 即重置浏览器标签的样式表，现在所使用的主流浏览器对一些标签的默认属性上并没有做到统一，所以我们偶尔会发现，某个页面在chrome浏览器上很正常，到了firefox上面却有意想不到的偏差。当然编程人员不喜欢这样的兼容性问题的，而reset.css就是解决默认样式不兼容问题的办法之一。

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

目前主流的预处理器里最常用的三种有：Sass，Less ，Stylus 。

PostCSS是一个使用JavaScript插件来转换CSS的工具。它将CSS转换成抽象语法树(AST)，也就是JavaScript可以操作的一种数据形式。基于JavaScript的PostCSS插件可以执行不同的代码操作。PostCSS本身并没有改变你的CSS，它请允许插件执行和转换你的代码。

实际上，对于CSS的操作，PostCSS插件并没有任何限制。只要你有想得到的，你都可以写一个PostCSS插件来实现。

6. CSS Reset 和 Normalize.css 有什么区别？

作用：

Reset CSS和Normalize CSS都是重置浏览器自带样式。

区别：

reset的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。

normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置。

最主要的区别是Normalize.css保留不同浏览器同标签相同的默认值，只重置不同默认样式的差异，可以说css reset的高级版。

相对于普通的css reset，Normalize的的浏览器的兼容性更好，normalize.css支持更多的浏览器（包括手机端）

根据官网的定义： normalize.css是一个现代的，为HTML5准备的reset.css的替代品。它可以使元素的渲染在多个浏览器下都能保持一致并且符合规范。它所瞄准的，也都是些需要规范化的样式。

Normalize.css的目标

1、保留有用的浏览器默认样式，而不是一概将它们“抹杀”。

2、normalize.css作用在范围更广的元素上面。

3、修正了一些bug及主流浏览器在渲染上的不一致。

4、提高了可用性。

5、用更加详细的文档及注释来解释代码的含义。

7. 尽可能多的写出浏览器兼容性问题？

1.不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同

解决方案：css里增加通配符*{margin：0；padding：0}

2.IE6双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题

解决方案：设置display：inline；

3.当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决方案：超出高度的标签设置overflow：hidden，或者设置line-height的值小于你的设置高度

4.图片默认有间距

解决方案：使用float为img布局

5.IE9以下浏览器不能使用opacity

解决方案：opacity：0.5；filter：alfha（opacity=50）；filter：progid：DXlmageTransform.Microsoft.Alfha(style=0,opacity=50);

6.边距重叠问题；当相邻两个元素都设置了margin边距时，margin将取最大值，舍弃最小值；

7.cursor：hand显示手型在safari上不支持

解决方案：统一使用cursor：pointer

8.两个块级元素，父元素设置了overflow：auto；子元素设置了position：relative；且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决方案：父级元素设置position：relative

9.const问题

说明：Firefox下，可以使用const关键字来定义常量；IE下，只能使用var关键字来定义常量。

解决方法：统一使用var关键字来定义常量。

10.event.srcElement问题

问题说明：IE下，event对象有srcElement属性，但是没有target属性；Firefox下，event对象有target属性，但是没有srcElement属性。

解决方法：使用srcObj = event.srcElement?event.srcElement:event.target;

11.事件绑定

IE:dom.attachEvent();

其他浏览器：dom.addEventListener();

标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。

12.操作tr的html

在ie9以下，不能操作tr的innerHTML

13.ajax略有不同

IE：ActiveXObject

其他：xmlHttpReuest

14.对象宽高赋值问题

问题说明：FireFox中类似obj.style.height = imgObj.height的语句无效。

CSS

1. cursor:hand VS cursor:pointer

firefox不支持hand，但ie支持pointer

解决方法: 统一使用pointer

2. innerText在IE中能正常工作，但在FireFox中却不行.

需用textContent。

解决方法:

if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById('element').innerText = "my text";

} else{

document.getElementById('element').textContent = "my text";

}

3. CSS透明

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

FF：opacity:0.6。

4. css中的width和padding

在IE7和FF中width宽度不包括padding，在Ie6中包括padding.

5. FF和IEBOX模型解释不一致导致相差2px

box.style{width:100;border1px;}

ie理解为box.width =100

ff理解为box.width =100 + 1*2 = 102 //加上边框2px

解决方法：div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

6. IE5 和IE6的BOX解释不一致

IE5下div{width:300px;margin:0 10px 0 10px;}

div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

7. ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;

经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

8. 元素水平居中问题

FF: margin:0auto;

IE: 父级{ text-align:center; }

9. Div的垂直居中问题

vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

10. margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

例如：

<divid=”imfloat”>

相应的css为

# imfloat{

float:left;

margin:5px;//IE下理解为10px

display:inline;//IE下再理解为5px}

11. IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}

12. 页面的最小宽度

如上一个问题，IE不识别min，要实现最小宽度，可用下面的方法：

#container{ min-width: 600px;width:expression(document.body.clientWidth＜ 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

13. DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

</div>

14. IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

15. float的div闭合;清除浮动;自适应高度

① 例如：＜div id=”floatA”>＜div id=”floatB”>＜div id=”NOTfloatC”>

这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在＜divclass=”floatB”>＜div class=”NOTfloatC”>之间加上＜div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

</div>

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left centerright的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决：

</div>

再嵌入一个float left而宽度是100%的DIV解决之。

④万能float 闭合(非常重要!)

关于 clear float 的原理可参见 [How To ClearFloats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix"即可,屡试不爽。

/* Clear Fix /

.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; }

.clearfix { display:inline-block; }

/ Hide from IE Mac /

.clearfix {display:block;}

/ End hide from IE Mac /

/ end of clearfix */

或者这样设置：.hackbox{display:table; //将对象作为块元素级的表格显示}

16. 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。

例：

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

<p>p对象中的内容＜/p>

</div>

解决技巧：在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}或者为DIV加上border属性。

17. IE6下图片下有空隙产生

解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom都可以解决.

18. 对齐文本与文本输入框

加上vertical-align:middle;

input {

width:200px;

height:30px;

border:1px solid red;

vertical-align:middle;

}

</style>

经验证，在IE下任一版本都不适用，而ff、opera、safari、chrome均OK！

19. LI中内容超过长度后以省略号显示

此技巧适用与IE、Opera、safari、chrom浏览器，FF暂不支持。

li {

width:200px;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow: hidden;

}

</style>

20. 为什么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html {

scrollbar-face-color:#f6f6f6;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee;

scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000;

scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;

}

＜/style>

21. 为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多：

例如:overflow:hidden　 zoom:0.08 　line-height:1px

22. 链接(a标签)的边框与背景

a链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照menubar, 给 a 和menubar设置高度是为了避免底边显示错位, 若不设 height, 可以在menubar中插入一个空格。

23. 超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

Code:

a:link {}

a:visited {}

a:hover {}

a:active {}

</style>

24. FORM标签

这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}。

25. 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

26. 为什么FF下文本无法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

{

height:auto!important;

height:200px;

min-height:200px;

}

27.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明

<paramname="wmode" value="transparent" />

8. 如何让 Chrome 浏览器显示小于 12px 的文字？

谷歌浏览器Chrome是Webkit的内核，有一个 -webkit-text-size-adjust 的私有CSS样式：

-webkit-text-size-adjust:none;

或者针对谷歌浏览器 css3样式 -webkit-transform:scale()进行缩放

9. CSS 预处理器的比较：Less、Sass、Stylus？

语法 Syntax

Sass(Scss)

Sass 有两种语法格式。首先是 SCSS (Sassy CSS)，这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式。

Less

Less 其实在某种程度上很像 Scss，它和 CSS 也是完全兼容的。要有分号，要有冒号，还有大括号。

Stylus

他的语法和 Sass 有一点点类似，但是最大的特点便是没有分号，没有冒号，没有大括号，通过缩进和换行。一切的定义方式都是按照编程的风格定义的，像编程一样的函数调用，像编程一样的变量定义，像编程一样的书写方式。

除此之外，他还有一个最大的优点便是他随意的格式，官方推荐的是无分号，无冒号，无大括号，但是他可以有分号，可以有冒号，也可以有大括号，也就是说你愿意的话，你完全可以当做普通的 CSS 文件来写，甚至是 Less,Sass 等其他预处理器的风格。所以这也就是我为什么用这个的原因。

注释

Sass (//, /* */)，多行注释会完整的输出到编译之后的文件，但是单行不会，所以如果是对文件描述的可以使用多行注释，如果只是开发相关的，请使用单行注释。当然这些行为参数可以控制。

可以使用 ! 作为多行注释的第一个字符，表示即使在压缩模式下也保留这条注释并输出到 CSS 文件中，通常用于版权的添加。

Playground

SassMeister

Less Online Editor

Stylus Compiler

具体内容请查看官方文档。

变量 Variables

开头标识

Sass 用 $ 表示变量

Less 用 @ 表示变量

Stylus 没有特殊的开头标识

赋值方式

Sass/Less 通过 var-name: var-value; 的方式

Stylus 通过 = 赋值的方式，类似于编程语言的编程方式

Sass

Sass 的变量以 $ 开头，赋值方法与 CSS 属性的写法一致：

$var-name: var-value;

直接使用就可以获取变量的值，非常简单。同样支持块级作用域，也分为全局变量（所有 Rule 外面定义的变量）和局部变量（在规则内部定义的变量）。同时支持将局部变量声明为全局变量，通过 !global 声明：

#main {

$width: 5em !global;

width: $width;

}

#sidebar {

width: $width;

}

// output

#main {

width: 5em;

}

#sidebar {

width: 5em;

}

Sass 支持 6 种主要的数据类型

数字，1, 2, 13, 10px

字符串，有引号字符串与无引号字符串，"foo", 'bar', baz

颜色，blue, #04a3f9, rgba(255,0,0,0.5)

布尔型，true, false

空值，null

数组 (list)，用空格或逗号作分隔符，多维数组用 () 包括，逗号比空格的优先级要高，所以会优先用逗号分隔数组，1.5em 1em 0 2em, Helvetica, Arial, sans-serif。输出时扁平化输出。

maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

Less

Less 的变量是以 @ 开头，语法格式类似于 CSS 的 Property 的书写格式，与 Sass/Scss 有一些类似：

@var-name: var-value;

使用的时候也是带着 @，他支持变量插值，类似于 PHP 那样的。比如说

@red: 1;

@var1: red;

@var2: @{@var1}; // 1

// or

@var2: @@var1;

同时变量的执行都是懒加载，也就是说变量的值得计算都是在你用到的时候计算的，例如

@a: 1;

@b: @a;

.a {

content: @b; // 1

}

.b {

@a: 2;

content: @b; // 2

}

当然他也有作用域，有根级的作用域，也有块级的作用域。所以我们只需要在当前作用于修改变量，并不会影响上级作用域的变量的内容。

但是文档中并没有提及类型的问题，所以不得而知。

Stylus

变量通过 = 进行定义，就像是普通的编程的变量一般，不需要什么特殊的前缀：

var-name = var-value

不过我还是推荐使用 $ 作为开头，因为当 stylus 写大的时候，你会发现经常你会把变量和属性值弄混，所以建议用 $ 开头，这样我们可以很清晰的看出来，那个是变量，那个是属性值。

运算 Operations

算数运算

所有的算数运算都支持单位的运算，也支持自动转化，比如说 20mm + 4in = 121.6mm。如果发现单位无法转换，那么一般是忽略单位只有单独运算，运算结束之后再加上左操作数的单位，例如 5s - 3px = 2s。

有一点例外的就是，对于乘法除法来说，单位相乘是没有什么意义的，所以在乘除当中和单位无法转换的情况相同。

如果操作的类型是颜色类型的话，那么运算都是相对于 R/G/B 单独计算的，也就是说 #0000ff + #000001 = #0000ff 而不是 #000100，不存在进位的情况。

数组运算

Sass 不支持任何数组的运算符，全部都是通过函数操控

Less 没有找到文档，测试无法使用 []，目测也是通过和 Sass 一样的方式。

Stylus 支持 [] 下标取值

函数 Function

函数定义

Sass，通过一个 @function 来定义一个函数，然后通过 @return 返回一个值

Less，准确说没有函数这个概念，但是他有混入(Mixin) 来充当函数的概念。不过这个也是合理的，毕竟 CSS 是最后需要输出一段字符串，一切操作都是为了生成字符串，所以没有函数也是完全可以接受的。

嵌套 Nest rules

所有的预处理中都有嵌套的功能，而且语法都是类似的，将 Rule 写在某个 Rule 里面，便可以实现嵌套的功能。

不需要每次都输入父选择器了，方便快捷高效。

同理，也都有 & 父选择引用，可以方便的在 Rule 内部定义父级的 Rule，一般用来定义 hover 或者相连的选择器 &.other-class。

Less 中还支持嵌套 Directive，比如 media, keyframe 等等。这些 Directives 及时再非常深的地方，也会一起冒泡到顶级。

混合 Mixins

定义

Sass 会复杂一些，需要使用 @mixin 指令定义。简写为 =

Less 很简单，一个类就可以是一个混入的定义，当然 ID 也可以，不过标签不可以，也就是说你必须要有 . 或者 # 开头。在这种情况下，所有的混入自然会输出的(它也没法区分混入和普通类)，如果你不想让他输出，那么可以在定义的类名后面添加 () 从而不让其在最后的结果中输出，感觉就像是定义了一个函数 :)

Stylus 很简单，在后面添加 () 即可，类似于普通的函数。

使用

Sass 需要通过 @include 指令引入混入。简写为 +

Less 通过直接引用类名可以直接进行混入，当然加不加括号都是可以的 .a() 或者 .a 都是正确的写法。

Stylus 使用 Mixin 主要有两种方式，第一种就是类似于函数调用的方式，通过 ()，第二种便是将 Mixin 当做普通的属性来使用（正是因为这个的存在，所以你可以定义一个和标准 CSS 属性同名的 Mixin，从而修改这个属性的输出，通常用于 hack）。推荐使用第二种方式，可以保持整个代码的整洁。

参数、关键词参数、 Rest 参数(...)

这三者都支持，定义方式也是大同小异，没什么可以说的。也都支持类似于 JS 中 arguments 的变量。

Sass 不支持，用 , 分隔参数

Less @arguments，用 ; 分隔参数，这样更像是属性定义。

Stylue arguments，用 , 分隔参数

不过 Less 有一点比较特殊，因为他没有函数，也就是说他很难做到根据不同的输入有不同的输出（属性上的不同），所以它支持模式匹配，也就是说根据某些参数来运行不同的 Mixin，其实就是 Mixin 重载。

向 Mixin 传入自定义 Rules

Sass 支持像 Ruby 的 Block，也就是说你可以直接传入一段自定义的 Block，通过 @content 引用这段 Block，例子请查看官网。

Less 目前没有发现这个功能。

Stylus 在使用 Mixins 前面添加 + 就可以在后面添加 Block。其实只是想和 Mixin 定义区分开。

Mixin 定义嵌套

目前在文档中都没有相关内容的介绍，发现部分是可以的。

Sass 不允许嵌套定义

Less 可以定义，而且可以从外面引用到

Stylus 可以定义，但是限制作用域，只能在定义的位置使用。

总体来说，Sass 和 Less 在混入方面我还是喜欢 Less，简单直接。

控制语句 Controls

Sass if 有两种，第一种是 if() 函数，第二种便是 @if 指令。如果指令的表达式为真，那么久输出值，否则就不输出。当然也有 @else if 和 @else。条件表达式不需要括号

Less 没有直接对应的东西，但是他有一个 Guard 的概念，可以认为是变种的 if。通过在某些选择器、Mixin 定义后面添加 when (condition)。只有当 condition 为真的时候，相应的选择器、Mixin 才会起作用。

Stylus if/else 跟普通编程语言几乎是一模一样的，也可以嵌套，这里就不多讲了。不过 Stylus 还有一个 unless ，就是 if 加了 !，其他都是一样的。也支持后添加的条件表达式，类似于 CoffeeScript 和 Ruby。条件表达式不需要括号

Loop

Sass 的循环主要有两种语法 @for $var from <start> through <end> 和 @for $var from <start> to <end> 区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。反正 Sass 的 for 循环只支持整数。

也有 @while 循环，他的就简单多了，只需要接受一个条件表达式就可以了。

但是如果你想循环其他的元素，那么你需要使用 @each $var in <list>。支持解构

Less 首先大家要清楚，Less 中的变量都是懒加载的所，他无法实现循环中对变量的有效控制，所以他支持 Mixin 内调用自己，也即是说通过 Guard 和 Pattern Matching 通过递归实现循环。

Stylus 简单来说就一个 for <val-name> [, <index-name>] in <expression>。就跟普通的 JS 语句一样。和 if 语句类似，他也支持后缀表达式。但是如果 express 是 Hashes，那么表达式相应的变为 for <key-name>, <value-name> in <hashes>

导入 Imports

无一例外，三大框架都使用了 @import 作为导入的关键字。这里就会有一个问题，因为 @import 在 CSS 中也有，于是就存在到底是将文件导入进来还是仅仅作为一个 CSS 的关键字输出呢？

总体来说有如下的规则：

如果是以 .css 结尾，那么直接输出，不导入

如果包含 url() 也直接输出到文件，不导入

如果包含 http:// 或者 https:// 也就是网络请求，那么也直接输出到文件中，不导入

其他情况，当做普通的编程文件导入。

特殊情况

Sass

如果包含 media queries 也直接输出，不导入。

Less

如果包含 url() 或者 http:///https://，并不直接输出，而是导入。

Less 只有一种情况会直接输出，那么就是如果文件以 .css 结尾

Stylus

支持 glob 导入，支持 index 导入，类似于 node 的包管理机制一般。

同时这三大框架都支持嵌套导入。部分支持引用导入和内联导入，同时 Less 的 @import 默认是只导入一次的。

Sass

支持引用导入，可以仅仅导入但是不输出为 CSS，只需要在文件名前添加下划线，但是导入语句中不需要

如果同时存在添加下换线与未添加下换线的同名文件时，添加下划线的会被忽略

Less

支持 @import (options) "filename" 设置不同的导入模式，现在总共有 7 种，可以通过逗号分隔多个参数。

reference 引用导入，不输出 css

inline 直接内联，输出为 css

less 将文件当做 less 文件，忽略他的后缀名

css 将文件当做 css 文件，忽略他的后缀名

once 只导入一次（默认行为）

multiple 导入多次

optional 到文件未找到的时候，忽略这个错误，继续执行

Stylus

默认情况下 @import 是可以导入多次的，但是如果你想要导入一次的话，可以通过 @require，这两者只有导入次数的区别，没有别的区别。类似于 php 的 require 和 import。

Stylus 是没有是否引用导入的这个功能的，因为 Stylus 不能将 Rule 作为 mixin 进行使用，所以就不会出现 Sass/Less 这种有一些 Rule 只是 mixin 而不是普通的 Rule 的情况，所以也就不需要有引用导入这个功能。

扩展 Extends

简单说一些 Extend 和 Mixin 的区别的吧，Mixin 就像是 copy/paste，每次执行 Mixin ，都会在不同的 Rule 下面有相同的内容，他们不会进行复用。但是 Extend 会进行复用，将相同的内容提取出来，复用成一个 Rule。

不过有一点很特殊的是， Less 竟然没有 Extned。而且 Stylus 的 Extend 还是由 Sass 扩展过来的，所以他们两个基本相同，都使用 @extend 关键字。

而且 Sass 的 Extend 没有什么太多的概念，我就一起来讲了。

首先两者有一个最大的区别就是 Stylus 支持 nested selector，而 Sass 是不支持的。

其次两者都有 placeholder ，也就是仅仅用于 extend 的类，但是两者的定义方式不一样。

Sass 通过将 #/. 替换为 %

Stylus 通过在最前面添加 $ 来实现的，其实用这个也能弥补 Stylus 没有那种只定义不输出的功能，只不过只能用于 Extend

也支持 optional 功能，其实就是如果找不到 Extend 类但是不报错的样子。通过在类后面添加 !optional。

DEMO: @extend .a !optional, .b !optional

其他指令 Other Directives

@css

Stylus

有的时候 Stylus 无法正确的处理 css 的选择器，你可以将 css 属性放入到 @css 标签内。内部的类都将作为普通的 css 来处理。

其他功能 Others

Error Handle

Stylus

支持自定义的错误输出，通过 error 函数

Introspection

Stylus

允许 Mixin 和 Function 使用反射获取对应的信息

生态 Community

Stylus

nib 各种工具大集合，也自带各种 hack 类。

1.7CSS 拓展：② CSS 编码规范 | CSS

1. 编码规范的作用是什么？列举 5 条以上编码规范。

作用：

1. 提高可读性

编码规范，帮助我们写出容易理解的代码，它为我们提供了最基本的模板，良好的编码风格，使代码具有一定的描述性，可以通过名字来获取一些需要IDE才能得到的提示，如可访问性、继承基类等。

2. 促进团队协助

编码规范，要求团队成员遵守这一统一的全局决策，这样成员之间可以轻松地阅读对方的代码，所有成员正以一种清晰而一致的风格进行编码。而且，开发人员也可以集中精力关注他们真正应该关注的问题——自身代码的业务逻辑，与需求的契合度等局部问题。

3. 有助于知识传递，加快工作交接

风格的相似性，能让开发人员更迅速，更容易理解一些陌生的代码，更快速地理解别人的代码。因为，他和你的代码风格是一样的，你没有必要对他的一些个性化风格进行揣测。这样的好处是开发人员可以很快的接手项目组其他成员的工作，快速完成工作交接。

4. 降低维护成本

在没有规范的情况下，和容易为同一类型的实例起不同的名字。对于以后维护这些代码程序员来说会产生疑惑。

5. 强调变量之间的关系，降低缺陷引入的机会

命名可以表示一定的逻辑关系，是开发人员在使用时保持警惕，从而一定程度上减少缺陷被引人的机会。

6. 提高程序员个人能力

每个程序员都应该养成良好的编码习惯，而编码规范无疑是教材之一。即便是为了自身发展，作为程序员也没有理由抵制这种规则的存在。你可能没有认识到，我们正默默地得益于编码规范。

规范

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

<!DOCTYPE html>

<html>

<head>

</head>

</html>

字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。

<head>

</head>

实用为王

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

布尔（boolean）型属性

布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。

</select>

减少标签的数量

编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。

</span>

2. 什么是盒模型？

盒模型简单的来说就是一个盒子，它从内到外由外边距margin border边界 padding内边距内容尺寸width/height 四种基本样式组成的。它的内容尺寸大小由宽高决定，它的盒模型尺寸大小由宽高和padding，margin决定，而它的盒模型区域由宽高，padding，border，margin决定的。

盒模型分为标准盒模型和怪异盒模型:

1.标准盒模型

标准盒模型：盒模型大小=width+height,浏览器默认的是标准盒模型。

2.怪异盒模型

怪异盒模型:盒模型大小=width+height+padding+border;

4. CSS 的属性 box-sizing 有什么值？分别有什么作用？

box-sizing: content-box|border-box|inherit;

content-box：这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box：为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit：规定应从父元素继承 box-sizing 属性的值。