前端布局与响应式设计综合指南(末)

🌈个人主页：前端青山
🔥系列专栏：Css篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来Css篇专栏内容:前端布局与响应式设计综合指南(末)

61、为什么要初始化CSS样式

62、CSS3 有哪些新特性

63、解释下CSS sprites，以及你要如何在页面或者网站中使用它

64、a点击出现框，解决方法

65、如果我不输入，HTML 5能工作吗？

66、哪些浏览器支持HTML 5？

67、CSS3中的选择器都有什么？

68、CSS3中多列布局的用处是什么？

69、CSS优先级算法如何计算？

70、HTML5中的本地存储概念

71、本地存储有生命周期吗？

72、本地存储和Cookies之间的区别是什么？

73、WebSQL是什么？WebSQL是HTML 5规范的一部分吗？

74、XHTML与HTML的有何异同？

75、box-sizing属性？

76、Doctype的作用？标准模式与兼容模式各有什么区别？

77、CSS3新增伪类有那些?

78、介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？

79、前端页面有哪三层构成？分别是什么？作用是什么？

80、CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

81、HTML中div与span区别

82、iframe的优缺点？

83、请描述一下cookies，sessionStorage 和 localStorage的区别？

84、重排（reflow）与重绘（repaint）

85、display:none与visibility：hidden的区别？

86、BFC 是什么东西

87、flex布局有哪些属性

88、对BFC规范(块级格式化上下文：block formatting context)的理解？

89、CSS优化、提高性能的方法有哪些(简短回答)？

90、浏览器是怎样解析CSS选择器的？

91、单行或者多行文本溢出展示省略号的实现方法

92、display:none 和visbility:hidden的区别是什么啊

61、为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

*最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）

62、CSS3 有哪些新特性

新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}

弹性盒模型 display: flex;

多列布局 column-count: 5;

媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}

个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}

颜色透明度 color: rgba（255, 0, 0, 0.75）；

圆角 border-radius: 5px;

渐变 background:linear-gradient（red, green, blue）；

阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；

倒影 box-reflect: below 2px;

文字装饰 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

边框效果 border-image:url（bt_blue.png） 0 10;

转换

旋转 transform: rotate（20deg）；

倾斜 transform: skew（150deg, -10deg）；

位移 transform:translate（20px, 20px）；

缩放 transform: scale（。5）；

平滑过渡 transition: all .3s ease-in .1s;

动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

63、解释下CSS sprites，以及你要如何在页面或者网站中使用它

CSS Sprites通常被称为css精灵图，在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。就是将导航的背景图，按钮的背景图等有规则的合并成一张背景图，即多张图合并为一张整图，然后再利用background-position进行背景图定位的一种技术

为什么需要css sprites

CSS Sprites 并不是一门新的技术了，目前他发展的已经比较成熟，阿里巴巴、百度、谷歌等各公司的网页中到处都可以发现CSS Sprites 的影子。

他是网页里常见的一种图片应用处理方式，他允许你将一个页面里所涉及到的所=有的零星的图片都整合到一张大图中去，这样一来，当访问这个页面时，所加载的图片就不会像以前那样一张一张的慢慢显示出来了，对于当前的网络所流行的速度来说，不超出200kb的单张图片所需要的加载时间基本是差不多的，节省加载速度的关键不是降低重量，而是减少个数，就因为计算机都是按照byte计算。页面每显示一张图片都会向服务器发送一次请求。所以，图片越多，所请求的次数就越多。

为了减少HTTP的请求次数，很多网站的导航背景图、登录框、按钮背景图等使用的并不是 <img>标签，而是CSS Sprite

css sprites的优势

优势：通过整合图片，减少对服务器的请求数量，减少图片的体积从而减轻服务器的负担，提高网页的加载速度

64、a点击出现框，解决方法

css中添加

 -webkit-tap-highlight-color: transparent; outline: none;


.pageStr span a {border: 1px solid #e4e4e4;color: #999;cursor: pointer;display: inline-block;height: 29px;line-height: 29px;padding: 0 10px;text-align: center;background:#fff;-webkit-tap-highlight-color: transparent; outline: none;
}

65、如果我不输入<!DOCTYPE HTML>，HTML 5能工作吗？

No，浏览器将无法识别HTML文件，并且HTML 5标签将无法正常工作。

66、哪些浏览器支持HTML 5？

几乎所有的浏览器都支持HTML 5，例如Safari，Chrome，火狐，Opera，IE等。

67、CSS3中的选择器都有什么？

*通用选择器，ID选择器，.类选择器class，标签选择器，标签组合选择器，伪类选择器：，+相邻元素选择器，>子元素选择器，~同辈选择器， x[title]属性选择器[type="button"]， x[href^="http"]匹配以href值为http打头的地址, x[href$=".jpg"]匹配所有的图片链接 input[type=checkbox]:checked{};选择checkbox为当前选中的那个标签。

伪类选择器 ------： p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。 :first-child 第一个 :last-child 最后一个 :nth-child(11) 1--11个 x:first/x:after 在x选择器之前或者之后插入内容

伪元素选择器 ::before ,::after 通过 css 模拟出来html标签的效果

68、CSS3中多列布局的用处是什么？

好用现在经常做自适应页面，就用的比较多了

69、CSS优先级算法如何计算？

元素选择符： 1 class选择符： 10 id选择符：100 元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

70、HTML5中的本地存储概念

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。 sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，因此sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。

71、本地存储有生命周期吗？

本地存储没有生命周期，它会一直存在直到用户将其从浏览器清楚或使用JavaScript代码删除它。

72、本地存储和Cookies之间的区别是什么？

cookies本地存储客户端/服务器端既可以从客户端也可以从服务器端访问数据。每个请求都会发送cookie数据到服务器。只能在本地浏览器端访问数据。服务器无法访问本地存储，除非特意通过POST或GET发送到服务器。大小每个Cookie 4095个字节。每个域5 MB。有效期cookie有附加的有效期。所以有效期后的cookie和cookie数据会被删除。数据没有有效期限。要么最终用户从浏览器删除它，要么使用JavaScript编程删除。

73、WebSQL是什么？WebSQL是HTML 5规范的一部分吗？

WebSQL是客户浏览器端的结构化的关系数据库。这是浏览器内部的本地RDBMS，你可以在这个本地RDBMS上执行SQL查询

74、XHTML与HTML的有何异同？

一、其基础语言不同

1、XHTML是基于可扩展标bai记语言（XML）。

2、HTML是基于标准通用标记语言（SGML）。

二、语法严格程度不同

1、XHTML语法比较严格，存在DTD定义规则。

2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。

三、可混合应用不同

1、XHTML可以混合各种XML应用，比如MathML、SVG。

2、HTML不能混合其它XML应用。

四、大小写敏感度不同

1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。

2、HTML对大小写不敏感。

五、公布时间不同

1、XHTML是2000年W3C公布发行的。

2、HTML4.01是1999年W3C推荐标准。

75、box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

76、Doctype的作用？标准模式与兼容模式各有什么区别？

①<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 ②标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。注意点： HTML5 只需要写<!DOCTYPEHTML>不需要对DTD进行引用，因为HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

77、CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中。

78、介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？

主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。

渲染引擎：负责取得网页的内容(html,xml和图像等等)，整理讯息(例如加入css)，以及计算网页的显示方式，输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行JavaScript来实现网页的动态效果。以及交互内容

浏览器内核种类

一.Gecko内核

以Mozilla浏览器为代表，FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一。使用它的比较著名的浏览器是Firefox、Netscape6至9.

二.Trident内核

Trident又被称为MSHTML，是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器主要有：IE、世界之窗浏览器、傲游、Avant、Sleipnir、GreenBrowser、NetCaptor和KKman等。

三.WebKit内核

代表浏览器有Safari、Chromewebkit。是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要作品有Safari以及Chrome。

四.Presto内核

是由Opera Sofeware开发的浏览器排版引擎，Opera7.0及以上可使用。它取代了旧版Opera4到6使用的Elektra排版引擎，包括加入动态功能，而重新排版。

79、前端页面有哪三层构成？分别是什么？作用是什么？

最准确的网页设计思路是把网页分成三个层次，即：结构层、bai样式层、行为层。

HTML：结构层

网页的结构或内容层是该页面的基础HTML代码。正如房屋的框架为房屋的其他部分构建了一个坚实

的基础，HTML的坚实基础创建了一个可以在其上创建网站的平台。

结构层用于存储客户想要阅读或查看的所有内容。HTML结构可以包含文本和图像，它包括访问者用

于浏览网站的超链接。这是在符合标准的HTML5中编码的，可以包括文本，图像和多媒体（视频，音频等）。

网站内容的每个方面都应该在结构层中表示。这允许关闭JavaScript的客户或无法查看整个网站的

CSS访问权限的客户（如果不是所有功能）。

CSS：样式层

该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。这些文件包含有

关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的

媒体查询。

网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表，但请记住，每个CSS文件都需

要HTTP请求才能获取它，从而影响站点性能。

JavaScript：行为层

行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最

常用的语言，但CGI和PHP也经常被使用。

当开发人员引用行为层时，大多数都是指在Web浏览器中直接激活的层。您可以使用此图层直接与

DOM（文档对象模型）进行交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重

要。在构建行为层时，应该像使用CSS一样使用外部脚本文件来优化速度和性能。

80、CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

81、HTML中div与span区别

div和span

1、div和span都可以称为“图层“。 2、图层的作用是为了保证页面可以灵活的布局。相当于“盒子”。 3、div和span是可以定位的，只要确定div的左上角的x轴和y轴坐标即可。 4、最早的网页是采用table进行布局（不灵活，太死板），现代的网页开发中div布局使用最多。 5、div和span的区别？ div独自占用一行（默认情况下，浏览器通常会在其后放置一个换行符）；span不会独自占用一行。

div

1、<div>标签定义HTML文档中的一个分隔区块或者一个区域部分。 2、<div>标签常用于组合块级元素，以便通过CSS来对这些元素进行格式化。 3、可以对同一个<div>标签同时应用class或id属性，但通常情况下我们偏向于只使用其中一种。 4、为了避免麻烦，可以不必为每一个<div>标签都加上class或id属性。

span

1、<span>元素是无语义的行内元素，它可以对元素进行分组，使它们以不同的样式显示。 2、<span>标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对<span>应用样式，那么<span>元素中的文本与其他文本不会任何视觉上的差异。 3、<span>标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。 4、可以对同一个<span>元素应用class或id属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。 5、被<span>元素包含的文本，可以使用CSS对它定义样式，或者使用JavaScript对它进行操作。

82、iframe的优缺点？

iframe的优点：

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：

1.会产生很多页面，不容易管理。

2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。

3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发

83、请描述一下cookies，sessionStorage 和 localStorage的区别？

⒈localStorage长期存储数据，浏览器关闭数据后不丢失；

⒉sessionStorage数据在浏览器关闭后自动删除；

⒊cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。session storage和local storage不会自动把数据发给服务器，仅在本地保存；

⒋存储大小：cookie数据大小不会超过4K，session storage和local storage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更多；

⒌有期时间：local storage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。session storage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；

84、重排（reflow）与重绘（repaint）

解析HTML文档，构建DOM树
解析CSS属性，构建CSSOM树
结合DOM树和CSSOM树，构建render树
在render树的基础上进行布局, 计算每个节点的几何结构
把每个节点绘制在屏幕上

一个页面可以简单看成由两个部分组成：

DOM节点：描述页面的结构
DOM节点的属性：描述DOM节点如何呈现

我们可以发现Reflow发生在第4步，而Repaint发生在第5步。

Reflow （重排）

当涉及到DOM节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫回流（Reflow）。

Repaint（重绘）

当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程称为重绘（Repaint)。因此重排必然会引起重绘。

二、引起Repaint和Reflow的一些操作

浏览器在处理重排时，会递归处理DOM节点，所以导致重排的成本高于重绘。

如果你是Web开发者，可能更关注的是哪些具体原因会引起浏览器的重排，下面罗列一下：

调整窗口大小
字体大小
样式表变动
元素内容变化，尤其是输入控件
CSS伪类激活，在用户交互过程中发生
DOM操作，DOM元素增删、修改
width, clientWidth, scrollTop等布局宽高的计算

这些引起回流的操作中，6和7是和JavaScript相关的，所以前端开发人员应该注意2点：

避免大量的DOM操作
避免过多DOM布局属性的计算

85、display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘） visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

86、BFC 是什么东西

一、什么是BFC

首先引用一下WC3对BFC的专业解释

BFC（Block Formatting Context）：翻译成中文叫做块级格式化上下文，它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，其提供了一个环境，元素在这个环境中按照一定的规则进行布局排列

换句话说，BFC就是为元素提供一个独立的容器，在该容器里按照一定的规则进行布局排列，该容器内的元素不会影响外部的元素，同理，外部的元素也不会影响内部的元素

二、如何触发BFC

先来了解一下有哪些条件可以触发BFC：

float 不为 none
position 为 absolute 或 fixed
overflow 不为 visible
display 为 inline-block 或 table 或 flow-root

后续的案例中，但凡遇到需要触发BFC的，都可以按照这四个条件来使用

87、flex布局有哪些属性

flex是Flexible Box的缩写，意思为“弹性布局”，在使用过程中简单、易用、代码较少，在制作网页的时候经常使用这种方法来进行布局。

在使用的过程中任何一个容器都可以指定为Flex布局.{display:flex},行内元素也可以使用Flex布局.box{display:inline-flex;}。当我们将容器设置为Flex布局以后，容器当中的子元素的float、clear等属性会失效。采用Flex布局的元素，称为Flex容器，他的所有子元素自动成为容器成员，称为Flex项目。

容器可以有如下几个属性：justify-content、align-content、align-items flex-direction、flex-wrap、flex-flow。

flex-direction属性决定主轴的的方向，即容器中项目排列的方向，一般默认的方向是横排列。flex-direction有四个值，分别为row：主轴水平方向，起点在左端，row-reverse：起点在右端，column：主轴为垂直方向，起点在上沿，column-reverse：起点在下沿。

flex-wrap属性，项目的默认值（nowrap）都在一条线上，wrap换行，第一行在上方，wrap-reverse换行，第一行在下方。

flex-flow是属性flex-direction属性和flex-wrap的简写。默认值（row nowrap）为横向排列不换行。.box{flex-flow:flex-direction flex-wrap}。

.box{justify-content:flex-start|flex-end|center|space-between|sp-ace-around},这几个值的意思分别为左对齐，右对齐，居中，两端对齐，两端对齐但是项目边上的元素和容器之间有空隙。他的默认值为左对齐。

align-items属性有五个值，flex-start：交叉轴的起点对齐，flex-end：终点对齐，center：中点对齐，baseline：项目的第一行文字基线对齐，stretch：当项目未设置高度的时候，占满这个容器的高度。

align-content属性定义了多根轴线的对齐方式。当项目只有一根轴线的时候，该属性是不起作用的。flex-start：交叉轴的起点对齐，flex-end：终点对齐，center：中点对齐，space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布，space-around：每根轴线两侧的间隔都相等，因此，轴线之间的间隔比轴线与边框的间隔大一倍，strentch：轴线占满整个交叉轴。

88、对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC规定了内部的Block Box如何布局。定位方案：

内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包含块border box的左边相接触。
BFC的区域不会与float box重叠。
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC

根元素，即html
float的值不为none（默认）
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

89、CSS优化、提高性能的方法有哪些(简短回答)？

避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免！important，可以选择其他选择器
尽可能的精简规则，你可以合并不同类里的重复规则

90、浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

91、单行或者多行文本溢出展示省略号的实现方法

如果实现单行文本的溢出显示省略号同学们应该都知道用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%);
}

效果如图： 适用范围： 该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注：

将height设置为line-height的整数倍，防止超出的文字露出。
给p::after添加渐变背景可避免文字只显示一半。
由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。

92、display:none 和visbility:hidden的区别是什么啊

使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。

display与元素的隐藏

如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。

<body>


<div>


<strong>给元素设置display:none样式</strong>


<p>A元素</p>


<p style='display:none;'>B元素</p>


<p>C元素</p>


</div>



</body>

效果图：

visibility与元素的隐藏

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

<body>


<div>


<strong>给元素设置visibility:hidden样式</strong>


<p>A元素</p>


<p style='visibility:hidden;'>B元素</p>


<p>C元素</p>


</div>



</body>

效果图:

display: none与visibility: hidden的区别

很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留，实际上没那么简单，visibility是一个非常有故事性的属性

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

 <body>
<div>


<strong>给元素设置visibility:hidden样式</strong>


<ol>


<li>元素1</li>


<li style="visibility:hidden;">元素2</li>
<li>元素3</li>
<li>元素4</li>
</ol>
</div><div>
<strong>给元素设置display:none样式</strong>
<ol>
<li>元素1</li>
<li style="display:none;">元素2</li>
<li>元素3</li>
<li>元素4</li>
</ol>
</div>
</body>