HTML
1、每个HTML文件里开头都有个很重要的东西：Doctype,知道这是干什么的吗？
<!DOCTYPE>位于HTML第一行，在<html>标签之前，用来告诉浏览器用什么文档标准解析这个文档，标准模式还是兼容模式，该标签不存在或不正确都会导致文档按兼容模式解析
标准模式：排版样式和js运行模式都是按该浏览器支持的最高标准运行。
兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器，防止站点无法工作。
2、HTML4 和 HTML5 有哪些不同, 新增的有哪些? 移除了哪些元素？
不同：HTML4是基于SGML的子集，需要在DOCTYPE里设置DTD，而HTML5不是SGML的子集，只需要写<!DOCTYPE>
新增：语义化元素: article、section、nav、header、footer、figure等
其他元素：video、audio、canvas
本地存储：localStorage、sessionStorag
表单空间：time、email、search、number等
新技术：webworker、websocket、geolocation地理定位
移除：纯表现的元素：basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响：frame、frameset、noframe
3、如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5?
要支持HTML5标签，IE9以下在script里写 document.createElement(“header”) 同时css设置 header{display:block}，也可以直接用框架，如html5shim
区分HTML和HTML5：DOCTYPE声明、新增的结构元素和功能元素
4、SGML和DTD
SGML —通用标准置标语言，是定义电子文档结构和描述其内容的国际标准语言
DTD — 文档类型定义，可定义合法的标准通用标记语言，可扩展标记语言文档构建模块
5、HTML5 如何让一个div 旋转?
Transform：rotate（30deg）
6、你做的页面在哪些浏览器试过？这些浏览器的内核分别是什么？
Trident：IE、搜狗、360等
Gecko:Firefox
Presto：opera7以上
Webkit：Safari和chorme
Blink：chorme
7、行内元素有哪些？块级元素有哪些？说下行内元素和块级元素的区别？
行内元素：a、b、span、i、em、strong、input等
块级元素：div、ul、ol 、li、p、form、h1-h6等
空元素：br、hr、meta、img等
8、从输入网址到显示网页的过程发生了什么？
简化版：
1.浏览器开启一个线程处理这个请求，将请求的URL交给域名解析系统DNS，找到对应的IP，像服务器发起请求。
2.服务器交给后台处理，完成后发挥数据，浏览器接收文件(html,js,css,img等)
3.浏览器对拿到资源进行语法解析，建立对应的内部数据结构，如DOM熟
4.载入解析到的资源文件，渲染页面，完成
9、语义化标签是什么？为什么要使用语义化标签？
1.语义化标签：如header、nav、footer、section等，标签的意思就代表着页面的结构
2.为什么要使用语义化标签：
a.可以让页面的内容结构化，结构更清晰，方便浏览器和搜索引擎解析
b.即使在没有css样式的情况下，也以一种文档格式显示，容易阅读,方便维护
c.便于搜索引擎爬虫抓取
d.对盲人设备友好
10、书写CSS和HTML要注意什么？
1.减少无意义标签使用，尽量使用语义化标签，
2.css选择器命名要尽量使用英文名，且用驼峰或 “_” 连接，要语义化
3.设置高度的时候，看情况是否写死
4.html代码的结构要考虑数据渲染和后期扩展你
11、Meta定义的viewport有哪几个值？
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单 位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0">
12、禁止搜索引擎抓取的mata定义方法？
<meta name="robots" content="index,follow" />
index,follow：允许抓取本页，允许跟踪链接。
index,nofollow：允许抓取本页，但禁止跟踪链接。
noindex,follow：禁止抓取本页，但允许跟踪链接。
noindex,nofllow：禁止抓取本页，同时禁止跟踪本页中的链接。
index,follow可以写成all，如：
<meta name="robots" content="all" />
noindex,nofollow可以写成none，如：
<meta name="robots" content="none" />
13、例举4个html5新出现的标签，2个不再推荐使用的标签
新增：section、firgure、header、footer、nav 不再使用: color、font、u...
14、如果给你一个大型网站，你如何管理它的CSS、JS以及图片？
css:先期团队确定全局样式(global.css)和编码模式(utf-8)，与html文件分开并行存放
Js:分文件夹存放，文件夹名用该js功能的英文翻译
Img：图片采用整合的images.png png8格式文件使用，尽量整合在一起方便将来管理
15、常用哪种图片格式，各有什么区别，加载不同格式图片有什么区别。
图片类型有gif,png,jpg,svg,webp等 png和jpg的主要区别如下:
1、png可以透明，jpg不能透明，所以需要透明的地方，必须用png
2、png是无损保存，多次保存都不会影响图片质量；而jpg是压缩不可逆保存，所以一个jpg图片经过多次保存之后就会越来越模糊，
3、jpg小，png大；所以一般网页能用jpg的地方，就不用png
4 .webp小巧，但是兼容性不太好
16、标签上title与alt属性的区别是什么？
title是鼠标悬乎时，出来的说明，alt是加载不出来时直接出现在页面上的文字
17、对WEB标准以及W3C的理解与认识？
web标准简单来说可以分为结构、表现和行为，W3C对web标准提出了规范化的要求
结构：1.标签字母要小写 2.标签要闭合 3.标签不允许随意嵌套
表现和行为(css js)：
1.尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
2.样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
3.不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
18、简述HTML5中data-*属性的作用是什么？
自定义属性,如 data-author data-id data-name等
可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取
data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。
19、input如何设置最大输入长度？
input宽度css:width 文字长度：max-length属性
20、iframe有哪些缺点？
1.iframe会阻塞主页面的onload事件，搜索引擎无法解读这种页面，不利于seo
2.iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
解决：动态给iframe添加src属性，可以绕开上面两个问题
21、label的作用是什么？是怎么用的？
定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。如<label for=”name”>xxx<label> <input type=”text” name=”name”/>
22、在网页中应该使用奇数还是偶数的字体？为什么呢？
偶数：如12px 14px，原因：更容易和 web 设计的其他部分构成比例关系，如 14*1.5 = 21px,不少字体库都不支持奇数
24、怎么让Chrome支持小于12px的文字？
body{-webkit-text-size-adjust:none}
新版本的chrome已失效。用该方法：
p{font-size:10px;-webkit-transform:scale(0.8);}
25、对网页标准的认识？DIV+CSS的布局就是网页标准么？
网页标准看上面的web和w3c标准，DIV+CSS的布局不是网页的标准，现在更应选择语义化的元素
26、SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？
SGML 是元语言，是HTML和XML的根， HTML是SGML的一个实例，它的DTD已经固化下来，只能用于web
XML是精简后的SGML，可以设置DTD来定义其他文件系统，可以用于其他领域的文档
27、哪些浏览器支持HTML5？
IE9支持部分，IE10+支持全部，其他主流浏览器基本都支持
28、HTML5中的datalist是什么？
用来定义input框的详细属性 ：datalist 中描述了其可能的值。目前只有safari和chorme支持
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
29、HTML5中哪些是不同新的表单元素类型？
email（自动验证email格式） Date pickers （自带日期选择）url（自动验证url格式）number（只能输入数字）
search（搜索域，类似百度的类似搜索提示）color(兼容) range（类似音量滑动条）
30、HTML5中什么是输出元素？
html5中的输出元素是output，表单里的元素，跟input相对
31、新的HTML5文档类型和字符集是？
<!DOCTYPE html> 和 <meta charset=utf-8">
32、XHTML是什么？
可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格，是W3C组织设计出的—————— HTML5就是嫌弃XHTML太严格了，而被几大浏览器厂商搞出来的
CSS
1、px em rem 区别?
像素px是相对于显示器屏幕分辨率而言的
em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。
rem是CSS3新增的一个相对单位，相对的只是HTML根元素。 p {font-size:14px; font-size:.875rem;}解决兼容性
2、BFC 是什么? 在什么时候会触发? 触发方式有哪些?
BFC：块级格式化上下文，它是一块独立的区域，它决定了区域内部的块级元素怎么布局，并且内部的布局不影响外部
触发：• float的值不为none；• overflow的值不为visible；•
display的值为inline-block、table-cell、table-caption；• position的值为absolute或fixed；
3、CSS3新增属性?移除了哪些元素？
新增选择器如：nth-child(), :not()等
其他：圆角radius 多列布局column 阴影和反射:shadow eflect 文本特效text-shadow 文本渲染：text-decoration 线性渐变：gradient
转换：translate otatescale 过度transition 动画 animate
4、如何设置阴影? 有哪些值?
box-shadow: 10px 10px 5px #888888; box-shadow: 水平 垂直 距离 尺寸 color inset 后面4个可选
5、display:none和visibility:hidden的区别
visibility和display两个属性都有隐藏元素的功能
1、visibility:hidden--为隐藏的对象保留其物理空间
HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
2、display: none--不为被隐藏的对象保留其物理空间，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”
6、position:absolute和float属性的异同？什么时候使用定位？什么时候使用浮动？
共同点：对内联元素设置float或absolute属性，可以让元素脱离文档流（块级元素也可以），并且可以设置其宽高。
不同点： float仍会占据其位置，position会覆盖文档流中的其他元素
左右用浮动，其他用绝对
7、relative和absolute分别是相对于谁进行定位的？
relative 生成相对定位的元素，相对于其自身在普通流中的位置进行定位。
absolute 生成绝对定位的元素，相对于其向上查找第一个不为 static 定位的其他定位祖先元素进行定位。
8、介绍一下box-sizing，常用的属性有哪些？分别有什么作用？
box-sizing: content-box|border-box|inherit;
content-box：在宽度和高度之外绘制元素的内边距和边框。常规
border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
Inherit：规定应从父元素继承 box-sizing 属性的值。
9、div+css的布局较table布局有什么优点？
1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2.布局精准，网站版面布局修改简单。
3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签，
6.提高搜索引擎对网页的搜索效率。
10、CSS的盒模型？一个标签的宽度和那些有关？
Content+padding+border+margin ，
11、CSS引入的方式有哪些？link和@import的区别是？
引入方式：内嵌 内联 外链 内联+@import
1.Link属于XHTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用，而@import是css提供的，只能用于加载css
2.页面被加载时，link会同时被加载，而@impor引用的css会等到页面被加载完再加载
3.import是css2.1提出，只在IE5以上兼容，link是XHTML标签，无兼容问题
12、CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
选择器：三类，即id选择器、class选择器、标签选择器
组合： 后代选择器: 空格 子代选择器: > 群组选择器: 逗号 伪类选择器: name:伪类
• • 通用(通配符)选择器: * { 属性名: 属性值; }
CSS3： 某个子元素选择器 :nth-child() 排除选择器:not()
可继承的属性：
文本相关，如：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、 -- text-align、 ------list-style、list-style-type、list-style-position、list-style-image
不可继承的属性：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
优先级算法：权重值相加
内联和important哪个优先级高？ !important > [ id > class > tag ] !important >内嵌>内联>外联
13、清楚浮动有哪些方式？比较好的方式是哪一种？
1.使用空标签清除浮动 <br style="clear:both">
2.使用overflow属性<ul style="overflow:auto;zoom:1>
3.使用after伪对象清除浮动 .listinfo:after{display:block;clear:both;content:""; visibility:hidden;height:0;}
最常用第三种，难度小，兼容性好，各大主流浏览器通用
14、画一个三角形？
宽高为0 设置border
15、对CSS流式布局的看法
所谓的流式布局，就是区别于固定像素的布局，流式布局按百分比设置，可以适应不同的分辨率，解决固定布局的劣势
16、SASS的好处和理解。
Sass和less一样，也是"CSS预处理器"，它最实用的几个功能有变量、混合、嵌套，
当然还有更强大的函数等，它更适合于大型项目，它可以比css实现更复杂的表现(函数)，也更容易修改和维护(变量等)
17、概述CSS框架中的栅格系统是什么？
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
最常见的12格，也有16格，24格和32格
18、概述你用过的CSS框架中的主要特性。
就用过bootstrap,bootstrap非常强大，它定义了移动端优先的响应式布局，栅格系统，大量的UI组件，以及经过视觉细节处理的class类，你只要写HTML代码，调用这些组件和类名，不用写css代码都能实现一些像模像样的网站，但是就是样式相近
19、CSS实现垂直水平居中。
垂直居中：
1.单行文本，设置父级的高度，然后文本的line-hight等于父级高度
2.多行文本，position: absolute;//子级用绝对定位 top:50%;//先定位到50%的位置 height: 300px;//已知的高度margin-top: -150px;//往上提本身高度的一半
3．父级div里设置一个空div，高度50%，占位子，要居中的p设置高度，maigin-top=负一半高度
4.垂直居中一张图片（行内元素）, vertical-align: middle;，它是相对兄弟级行高（line-height）来定位，并且他仅对行内元素有效.,
5.父子都未知高度的块级元素居中：父设置 display: table; 子设置display: table-cell;vertical-align: middle;IE67不兼容
6.绝对定位居中法 子元素：position: absolute;top: 0; bottom: 0;left: 0;right: 0;margin:auto; 该方法也可以水平居中
水平居中： table-cell 和 绝对定位居中法 都能同时实现水平和垂直居中
1.text-align:center，用于居中行内文字或元素
2.margin:0 auto 居中固定宽度的块级元素
3.绝对定位position left:50% margin-left:-50%的自身宽
4.translate偏移
20、用自己的理解简述弹性布局，及其对应的CSS定义？ 有问题
弹性布局是CSS3引入的强大的布局方式，用来替代以前使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。
21、多级的CSS子代选择器执行方向是（从左至右）。
22、CSS伪类中选择3的倍数个元素的写法？
li:nth-child(3n){background: green}
23、background-size有哪4种值类型？
1.固定值，如100px，如果第二个值不写默认auto
2.百分比 50% 如果第二个值不写默认auto
3.cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。
4.contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
24、如何定义div的border边框向盒子内部绘制？
box-sizing:border-box
25、请用div+css写出左侧固定（200px）,右侧自适应的页面
利用BFC来做，左侧div{background: red; 200px;float: left;height: 200px;} 浮动，给宽高 ，
右侧div{background: green;height: 200px;overflow: hidden;} 利用BFC的overflow：hidden
利用margin 左侧一样，右侧div{background: green;height: 200px;margin-left: 200px;width：100%}
26、如何居中一个固定定位？
Left:50% margin-left:-50%自身宽度
27、子级相对定位，父级相对定位，子级上下左右为0，此时子级是什么情况？
左上角，都是相对定位，没用的，就算是绝对定位也没有用，还要配合margin
28、P标签里有行内块元素，P的px比行内块元素的px小，这是两种不同ox的位子是上对齐，还是从下对齐？
上对齐，下部溢出
29、LESS的流程
1.创建less文件 2.我用的是考拉解析器，选择编译的less文件，会生成对应的css文件
3.HTML里引入css 4，less文件里定义变量，@xxx:’’ 5,定义混合mixin 和嵌套
30、CSS层级
css是层叠样式表，层级性是指对同一元素设置的相同类型的多个样式，根据权重值来判定最后实际展示的样式
css也是一层一层的，层级越大越在上面，可以通过z-index改变层级结构
31、响应式布局用的什么属性？
@media
32、CSS3新增伪类有哪些？
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
:root :root 选择文档的根元素。
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:checked input:checked 选择每个被选中的 <input> 元素。
:not(selector) :not(p) 选择非 <p> 元素的每个元素。
::selection ::selection 选择被用户选取的元素部分。
33、translate()函数可以在Z轴移动一个元素的位置吗？
可以 translate3d(x,y,z) 或 translateZ(z)
34、请使用a标签创建一个mail链接：
＜a href="mailto: ×××××@abc. com.cn"＞与我E-mail联系＜/a＞。
35、解释css sprite,如何使用
背景定位 background-position:x y
36、CSS的基本语句构成是？
选择器{属性: 值;}
37、如何居中一个浮动元素？都是position: absolute+margin
1,纯margin 2.left: 50% margin-left:-50%width 3.left: 0;right: 0;bottom: 0;top:0;margin:auto;
38、响应式布局，移动端，PC端
响应式布局，针对不同的屏幕尺寸进行不同的排版，在移动端和pc端上显示不同的页面结构
39、三个嵌套的div，给最里面的div 设置 margin-top :10px 会怎样
触发BFC，父级div会margin相同的值，可以通过给父div设置overflow:hidden解决
40、css新增的单位，比如vh和vw
Rem-相对根节点html的字体大小来计算 vh-viewpoint width，视窗宽度，1vw等于视窗宽度的1%
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
56、一个DIV浮动后margin-left有什么 兼容性问题
ie6本身不支持margin-left可以用padding或_margin-left代替
浮动后margin在IE6、7上会有问题，本来IE8也有问题，但是后面修复了，其他浏览器都正常
41、CSS预处理器。::after ::before 什么时候用
CSS预处理器：less和sass，
为什么用less和sass：1，更符合编程的思维，2，简化代码，提高代码重用 3，提高开发效率 4.便于维护
::before,::after是伪元素，特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容，尽量使用它们显示修 饰性内容，例如图标。
42、CSS父代选择器的执行方向及效率。
没有父带选择器
43、描述CSS reset的作用和用途？
每个浏览器都有一些自带的或者共有的默认样式，会造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致，比如 *{margin:0;padding:0}就是一个最简单的css reset
44、三个div排成3列，左右div宽度都是200px 怎么让中间div的适应屏幕垂直水平居中
45、CSS中margin和padding的区别
Margin:外边距 padding:内边距
46、为什么通常推荐CSS<link>放置在<head></head>之间，而将JS<script>放置在<body>?
1，css放在头部，避免无样式闪烁 2.js放在头部，主要是因为会阻塞后面html代码执行
69、为什么要结构和表现相分离？
1.HTML是结构型的文档。就算没有css和js，它依然有自己的结构，能被阅读
2.在某些古老的浏览器不支持css和js
3.将结构和表现分离，能方便的维护网页
4.能轻易的实现结构或样式的复用
47、如何让2个并列的div自动登高（不设高度） js实现，取高的那个div的高度
48、介绍一下标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？
标准的：宽、高等于 内容区的宽高， 低版本IE(5,6)指宽、高等于内容区+pandding+border
49、li和li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
这个题有两种答法：
1，行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔 ， 解决 font-size=0
2.如果是li标签自带的间隔空白，这是浏览器行高计算的原因，可以手动设置行高来解决
50、margin和padding适合什么场景使用？
Margin:需要在盒子外部加空白区域 padding:需要在盒子内部加空白区域，但是padding会撑大盒子
Margin-left／right在IE5、6下会存在兼容性问题，可以display：inline或者用padding
51、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式：同一页面针对不同的设备屏幕尺寸，展示出不同的结构样式，就是响应式
基本设计原理：结合媒体查询@media 设置不同的尺寸展示的样式，尺寸需要设置百分比和rem
兼容性：插件解决，response.js和kr.js等
52、设置元素浮动后，该元素的display值是什么？
block
53、display:inline-block什么时候会显示间隔？
如两个Input框 <input type="text"> <input type="button" value="xxx"> 产生的原因主要是换行空格等
解决办法：1，font-size:0; 2.手动去空格 3,用注释占据空格的位置 4.letter-spacing和word-spacing 5.margin负值等
54、在使用CSS3时，我可以选择使用“标准盒模型”或“传统IE盒模型”吗？如果可以选择，请写出属性名。
Box-sizing属性默认是content-box,现代浏览器都支持， border-box则选择IE盒模型，padding、border在盒子内部绘制
55、CSS中使用列布局是什么？
Css3中提供列布局 column ，可设置属性是 column-countgap ule，分别是列数间隔距离列之间的宽度、样式和颜色
56、你能解释一下CSS3的文本效果么？
text-shadow 和 word-wrap，
text-shadow：水平阴影、垂直阴影、模糊距离，以及阴影的颜色
word-wrap，换行规则，详细见w3手册
57、如何用CSS控制文本单行溢出省略？并且大致说出多行省略的思路。
单行：CSS：{xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
多行：{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
58、CSS选择符有哪些并列的优先级？