网页知识点

时间 2019-12-02

标签网页知识栏目 HTML 繁體版

原文原文链接

HTMLcss

1、每一个HTML文件里开头都有个很重要的东西：Doctype,知道这是干什么的吗？html

<!DOCTYPE>位于HTML第一行，在<html>标签以前，用来告诉浏览器用什么文档标准解析这个文档，标准模式仍是兼容模式，该标签不存在或不正确都会致使文档按兼容模式解析html5

标准模式：排版样式和js运行模式都是按该浏览器支持的最高标准运行。web

兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器，防止站点没法工做。算法

2、HTML4 和 HTML5 有哪些不一样, 新增的有哪些? 移除了哪些元素？chrome

不一样：HTML4是基于SGML的子集，须要在DOCTYPE里设置DTD，而HTML5不是SGML的子集，只须要写<!DOCTYPE>编程

新增：语义化元素: article、section、nav、header、footer、figure等bootstrap

其余元素：video、audio、canvascanvas

本地存储：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：用户是否能够手动缩放

12、禁止搜索引擎抓取的mata定义方法？

index,follow：容许抓取本页，容许跟踪连接。

index,nofollow：容许抓取本页，但禁止跟踪连接。

noindex,follow：禁止抓取本页，但容许跟踪连接。

noindex,nofllow：禁止抓取本页，同时禁止跟踪本页中的连接。

index,follow能够写成all，如：

noindex,nofollow能够写成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支持

</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\reflect 文本特效text-shadow 文本渲染：text-decoration 线性渐变：gradient

转换：translate \rotate\scale 过分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写出左侧固定（width:200px）,右侧自适应的页面

利用BFC来作，左侧div{background: red;width: 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-count\gap\rule，分别是列数\间隔距离\列之间的宽度、样式和颜色

56、你能解释一下CSS3的文本效果么？

text-shadow 和 word-wrap，

text-shadow：水平阴影、垂直阴影、模糊距离，以及阴影的颜色

word-wrap，换行规则，详细见w3手册

57、如何用CSS控制文本单行溢出省略？而且大体说出多行省略的思路。

单行：CSS：{width: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选择符有哪些并列的优先级？