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

​🌈个人主页：前端青山
🔥系列专栏：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的优势

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

img

img

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

  1. !important声明的样式优先级最高，如果冲突再进行计算。

  2. 如果优先级相同，则选择最后出现的样式。

  3. 继承得到的样式的优先级最低。

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是一样的。

  1. chrome中，使用collapse值和使用hidden没有区别。

  2. 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）

  1. 解析HTML文档，构建DOM树

  2. 解析CSS属性，构建CSSOM树

  3. 结合DOM树和CSSOM树，构建render树

  4. 在render树的基础上进行布局, 计算每个节点的几何结构

  5. 把每个节点绘制在屏幕上

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

  • DOM节点：描述页面的结构

  • DOM节点的属性：描述DOM节点如何呈现

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

Reflow （重排）

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

Repaint（重绘）

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

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

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

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

  1. 调整窗口大小

  2. 字体大小

  3. 样式表变动

  4. 元素内容变化，尤其是输入控件

  5. CSS伪类激活，在用户交互过程中发生

  6. DOM操作，DOM元素增删、修改

  7. 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：

  1. float 不为 none

  2. position 为 absolute 或 fixed

  3. overflow 不为 visible

  4. 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：起点在下沿。

img

img

img

img

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如何布局。 定位方案：

  1. 内部的Box会在垂直方向上一个接一个放置。

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

  3. 每个元素的margin box 的左边，与包含块border box的左边相接触。

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

  5. BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

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

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

  1. 根元素，即html

  2. float的值不为none（默认）

  3. overflow的值不为visible（默认）

  4. display的值为inline-block、table-cell、table-caption

  5. position的值为absolute或fixed

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

  1. 避免过度约束

  2. 避免后代选择符

  3. 避免链式选择符

  4. 使用紧凑的语法

  5. 避免不必要的命名空间

  6. 避免不必要的重复

  7. 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

  8. 避免！important，可以选择其他选择器

  9. 尽可能的精简规则，你可以合并不同类里的重复规则

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浏览器及移动端；

注：

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

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

  3. -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优化该方法。

注：

  1. 将height设置为line-height的整数倍，防止超出的文字露出。

  2. 给p::after添加渐变背景可避免文字只显示一半。

  3. 由于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>

效果图：

img

visibility与元素的隐藏

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

<body>
​
​
​
    <div>
​
​
​
        <strong>给元素设置visibility:hidden样式</strong>
​
​
​
        <p>A元素</p>
​
​
​
        <p style='visibility:hidden;'>B元素</p>
​
​
​
        <p>C元素</p>
​
​
​
    </div>
​
​
​
</body>

效果图:

img

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>

img

3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/894746.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【python】NumPy（三）：文件读写

【python】NumPy（三）：文件读写

目录 ​前言 NumPy 常见IO函数 save()和load() savez() loadtxt()和savetxt() 练习 前言 在数据分析中&#xff0c;我们经常需要从文件中读取数据或者将数据写入文件&#xff0c;常见的文件格式有&#xff1a;文本文件txt、CSV格式文件&#xff08;用逗号分隔&#xff…
阅读更多...
vue-router钩子中调用ElMessage等样式出错

vue-router钩子中调用ElMessage等样式出错

升级 vue3.5 时遇到奇怪的问题, 页面点击离开没反应 经过排查, 是以下几点相互作用导致此问题 vue 有应用上下文的概念, 例如 runWithContext API,vue-router 在调用钩子时会获取 vue 的应用上下文element-plus 在唤起弹窗时会从 parent 或 应用上下文上拿到 config 信息eleme…
阅读更多...
大数据环境 hbase+ phoenix idea

大数据环境 hbase+ phoenix idea

1、选择jdk 2、添加驱动 3、添加数据源
阅读更多...
【精选】基于javaweb的流浪动物领养系统（源码+定制+开发）

【精选】基于javaweb的流浪动物领养系统（源码+定制+开发）

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…
阅读更多...
《重置MobaXterm密码并连接Linux虚拟机的完整操作指南》

《重置MobaXterm密码并连接Linux虚拟机的完整操作指南》

目录 引言 一、双击MobaXterm_Personal_24.2进入&#xff0c;但是忘记密码。 那么接下来请跟着我操作。 二、点击此链接&#xff0c;重设密码。 三、下载完成后&#xff0c;现在把这个exe文件解压。注意解压要与MobaXterm_Personal_24.2.exe在同一目录下哦&#xff0c;不然…
阅读更多...
从零入门AI篡改图片检测（金融场景）#Datawhale十月组队学习

从零入门AI篡改图片检测（金融场景）#Datawhale十月组队学习

1.大赛背景 在全球人工智能发展和治理广受关注的大趋势下&#xff0c;由中国图象图形学学会、蚂蚁集团、云安全联盟CSA大中华区主办&#xff0c;广泛联合学界、机构共同组织发起全球AI攻防挑战赛。本次比赛包含攻防两大赛道&#xff0c;分别聚焦大模型自身安全和大模型生成内容…
阅读更多...
pc轨迹回放制作

pc轨迹回放制作

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;pc轨迹回放制作 主要内容&#xff1a;制作车辆轨迹操作页&#xff0c;包括查询条件、动态轨迹回放、车辆轨迹详情表单等 应用场景&#xff1a;车辆…
阅读更多...
sqli-labs less-25a

sqli-labs less-25a

Sqli-labs less-25a 判断注入类型&#xff0c;列数及注入点 构造 http://192.168.140.130/sq/Less-25a/?id1 回显正常 http://192.168.140.130/sq/Less-25a/?id1’ 报错 构造 http://192.168.140.130/sq/Less-25a/?id1 and 11 回显正常 http://192.168.140.130/sq/Less-25a…
阅读更多...
RabbitMQ 入门(三)SpringAMQP五种消息类型（Basic Queue）

RabbitMQ 入门(三)SpringAMQP五种消息类型（Basic Queue）

一、Spring AMQP 简介 SpringAMQP是基于RabbitMQ封装的一套模板&#xff0c;并且还利用SpringBoot对其实现了自动装配&#xff0c;使用起来非常方便。 SpringAmqp的官方地址&#xff1a;https://spring.io/projects/spring-amqp SpringAMQP提供了三个功能&#xff1a; - 自动…
阅读更多...
唐布拉不是家，而我途径它（一）

唐布拉不是家，而我途径它（一）

唐布拉不是家&#xff0c;而我途径它 旅途是一本书&#xff0c;风吹哪页读哪页&#xff0c;笔搁哪句写哪句。 最后一站在唐布拉的尼勒克&#xff0c;晚上11点才到&#xff0c;车停在门口&#xff0c;打开车门就看到这句话&#xff1a; 希望你快乐 今天 明天 天天刚下完雨&am…
阅读更多...
2024年诺贝尔物理学奖揭晓：AI背后的“造梦者”是谁？

2024年诺贝尔物理学奖揭晓：AI背后的“造梦者”是谁？

想象一下&#xff0c;你早上醒来&#xff0c;智能音箱为你播放天气和新闻&#xff0c;中午你用手机刷视频&#xff0c;精准的推荐内容简直和你心有灵犀&#xff0c;晚上回家&#xff0c;自动驾驶汽车安全地把你送回家。这一切看似理所当然&#xff0c;背后却有一双无形的手推动…
阅读更多...
双向链表常见接口实现

双向链表常见接口实现

一 . 链表的分类 链表的结构非常多样,以下情况组合起来就有8种( 2 * 2 * 2 ) 链表结构 : 1.1 单向/双向 1 . 单向 : 只能往一个方向遍历 (仅有一个指针 --> 指向下一个结点的地址), 如下图 : 只能从d1找到d2 , d2 找不到d1 2 . 双向 : 能从两个方向遍历 ( 有指向下一个结点…
阅读更多...
Leetcode 841. 钥匙和房间

Leetcode 841. 钥匙和房间

1.题目基本信息 1.1.题目描述 有 n 个房间&#xff0c;房间按从 0 到 n – 1 编号。最初&#xff0c;除 0 号房间外的其余所有房间都被锁住。你的目标是进入所有的房间。然而&#xff0c;你不能在没有获得钥匙的时候进入锁住的房间。 当你进入一个房间&#xff0c;你可能会在…
阅读更多...
深度解析服务级别协议（SLA）：保障业务稳定性的关键承诺

深度解析服务级别协议（SLA）：保障业务稳定性的关键承诺

前言&#xff1a; 在当今数字化时代&#xff0c;企业的业务连续性和稳定性至关重要。服务级别协议&#xff08;SLA&#xff09;作为服务提供商与客户之间的正式承诺&#xff0c;是确保服务质量、可用性、责任的重要工具。SLA不仅定义了服务提供商应达到的服务指标&#xff0c;还…
阅读更多...
华为ENSP Truck命令指南：从入门到精通的全方位解析 引言

华为ENSP Truck命令指南：从入门到精通的全方位解析 引言

博客标题&#xff1a;华为ENSP Truck命令指南&#xff1a;从入门到精通的全方位解析 引言 在网络工程的世界里&#xff0c;华为ENSP&#xff08;Enterprise Network Simulation Platform&#xff09;作为一款强大的网络模拟工具&#xff0c;为我们提供了在虚拟环境中实践和学习…
阅读更多...
MySQL程序介绍＜一＞

MySQL程序介绍＜一＞

目录 MySQL程序简介 mysqld - MySQL 服务器 ​编辑 mysql - MySQL 命令⾏客⼾端 MySQL程序简介 1.MySQL安装完成通常会包含如下程序&#xff1a; Linux系统程序⼀般在 /usr/bin⽬录下&#xff0c;可以通过命令查看 windows系统⽬录&#xff1a; 你的安装路径\MySQL Server…
阅读更多...
【Linux-基础IO】软硬链接+动静态库

【Linux-基础IO】软硬链接+动静态库

一、软硬链接 见一见 软连接 硬连接 通过观察我们发现以下几点&#xff1a; 1.ll - i后&#xff0c;软连接形成的文件有指向&#xff0c;并且软连接的Inode编号与对应文件的Inode编号不一样 2.ll - i后&#xff0c;硬连接形成的文件与对应的文件Inode编号一样 3.软连接…
阅读更多...
从零开始在Windows系统上搭建一个node.js后端服务项目

从零开始在Windows系统上搭建一个node.js后端服务项目

目录 一、下载node.js及配置环境 二、搭建node.js项目及安装express框架 三、集成nodemon&#xff0c;实现代码热部署 四、Express 应用程序生成器 一、下载node.js及配置环境 网上很多安装教程&#xff0c;此处就不再赘述了 版本信息 C:\Users\XXX>node -v v20.15.0…
阅读更多...
一个纹理分割的例子

一个纹理分割的例子

纹理是图像分割常用的特征&#xff0c;即使不是纹理分割。Rafael Gonzalez和Richard Woods的《数字图像处理》中这部分内容片面了。 给一个利用简单的统计特征——熵进行纹理分割的例子。这个例子是说明阈值分割不是仅适用于灰度值的情况&#xff0c;也可以用于纹理&#xff…
阅读更多...
【into outfile写文件】

【into outfile写文件】

简介 select * from user into outfile C:/Users/ichunqiu/Desktop/PhpStudy2018/PHPTutorial/WWW/1.txt;用法的意思就是把user表中查询到的所有字段都导出到1.txt文件中 我们之前还有学到dumpfile&#xff0c;单是它只能导出一条数据 写入shell 测试注入点 usernameadmin&…
阅读更多...
最新文章

Copyright @ 2022~2023