【面试篇】前端点滴（CSS/CSS3）---倾尽所有

面试小问答
- css基础
- css盒模型
- css选择器
- BFC
- css（float）
- css（position/z-index）
- css（display，opacity，visiblity）
- css（text）
- css（link）
- css单位
- css布局，编写题
- css3
- css优化
- css扩展

面试小问答

css基础

行内元素和块级元素举几个例子，特点？

行内元素：span,a,var,em,input,img,textarea,i,strong,select,lable
块级标元素：div,p,h1-h3,ul,ol,li,dl,dd,dt,table,td,tr,th
行内块元素：img

行内元素特征：

(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间（上、下无实际效果）
(3)不会自动进行换行

块状元素特征：

(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下

行内块状元素特征：

(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右

写出ul、ol、dl、table的html结构？

ul列表：

<ul><li></li>
</ul>

ol列表：

<ol><li></li>
</ol>

dl列表：

<dl><dt>1</dt><dd>hello</dd><dt>2</dt><dd>hello</dd>
</dl>

table表格：

<table border="1" cellspacing="0/%/num"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr>
</table>

src、href、url的解释与区别？

1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
2、src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
3、统一资源定位符(或称统一资源定位器/定位地址、URL地址等，英语：Uniform Resource Locator，常缩写为URL)，有时也被俗称为网页地址(网址)。如同在网络上的门牌，是因特网上标准的资源的地址(Address)。

请求资源类型不同
(1)href 指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的联系。
(2)在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片;
作用结果不同
(1)href 用于在当前文档和引用资源之间确立联系;
(2)src 用于替换当前内容;
浏览器解析方式不同
(1)若在文档中添加，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
(2)当浏览器解析到，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

css盒模型

css盒模型基本概念？

参考：https://blog.csdn.net/Errrl/article/details/103743641
margin、border、padding、content。在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域。4个部分一起构成了css中元素的盒模型。可以分为标准模型、IE模型

说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。

CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的padding、border和margin区域。

CSS 盒模型负责计算：

块级元素占用多少空间。
边框是否重叠，边距是否合并。
盒子的尺寸。

标准盒模型有以下规则：

块级元素的大小由width、height、padding、border和margin决定。
如果没有指定height，则块级元素的高度等于其包含子元素的内容高度加上padding
如果没有指定width，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的padding。
元素的height是由内容的height来计算的。
元素的width是由内容的width来计算的。
默认情况下，padding和border不是元素width和height的组成部分。

标准模型和IE模型的区别？

盒子宽度、高度计算方式不同；
标准盒子模型的盒子宽度：width
IE盒子模型的盒子宽度：左右border+左右padding+width

css如何设置这两种模型？

box-sizing:content-box;/*标准模型*/
box-sizing:border-box; /*IE模型*/

{ box-sizing: border-box; }会产生怎样的效果？

元素默认应用了box-sizing: content-box，元素的宽高只会决定内容（content）的大小。
box-sizing: border-box改变计算元素width和height的方式，border和padding的大小也将计算在内。
元素的height = 内容（content）的高度 + 垂直方向的padding + 垂直方向border的宽度
元素的width = 内容（content）的宽度 + 水平方向的padding + 水平方向border的宽度

设置padding与margin的作用？

padding用于撑开盒子，margin用于分开盒子

对于不同元素设置padding与margin会有什么表现？

对于块元素：宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
对于行内元素：宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。
以下说明情况：
html

<span class="span">123</span>

css

.span{padding:20px 30px;
border:1px solid red;
margin-bottom:30px;
}body{border:1px solid red;
}
*{margin:0;
padding:0;
}

效果：

说明：padding对于行内元素top、bottom虽然能撑开盒子，但是没有实际效果，因为行内元素的内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变。

js如何设置获取盒模型对应的宽和高？

1、dom.style.width/height // 只能取到内联样式
2、dom.currentStyle.width/height // 取到渲染后的样式（只有IE支持）
3、window.getComputedStyle(dom).width/height // 兼容firefox，chrome，兼容性更好
4、dom.getBoundingClientRect().width/height // 运行后的宽度

在什么情况下发生边距重叠，怎么计算？

父子元素（同向边距重叠），兄弟元素，空元素分别设置了上下边距。
在 margin 都是正数的情况下，取其中 margin 较大的值为最终 margin 值
在 margin 都是负值的时候,取的是其中绝对值较大的,然后从零开始,负向位移
在 margin中有正值有负值的时候,要从所有负值中选出绝对值最大的,所有正值中选择绝对值最大的,二者相加

请简要描述margin重合问题，及解决方式

1、同向margin的重叠（父子）：
父层的margin-top与子层的margin-top发生重叠，父层的margin-bottom与子层的margin-bottom发生重叠。这时候重叠之后的margin值由发生重叠两片的最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。
解决同向重叠的方法：
（1）在父层的div中加入overflow:hidden;zoom:1
（2）在父层加入padding:1px;属性
（3）在父层加入：border:1px solid #cacbcc;
2、异向重叠问题（兄弟）：
兄弟1的margin-bottom与兄弟2的margin-top发生重叠，这时候重叠之后的margin值同样遵循上述规则。
解决异向重叠问题：
（1）BFC格式化上下文

#father的子元素是.child,请说出#father的高度是多少？并说明原因

#father{background:#000;}
.child{background:#CCC;height:100px;margin-top:30px;}

#father的高度是100px，原因是父子盒子margin垂直方向的重叠

#father{background:#000;overflow:hidden;}
.child{background:#CCC;height:100px;margin-top:30px;}

#father的高度是130px，原因是父盒子中设置了overflow:hidden;破坏了margin的重叠，因此margin不重叠，造成高度为子盒子高度+子盒子margin-top=130px

#father{background:#000;padding-bottom:30px;}
.child{background:#CCC;height:100px;padding-top:30px;}

#father的高度是160px,原因是由于标准模型下盒子为content-box，实际高度= #father.height（.child.height+.child.padding）+#father.padding = 160px

#father{background:#000;margin-bottom:30px;overflow:hidden}
.child{background:#CCC;height:100px;padding-top:30px;margin-bottom:20px}

#father的高度是150px,原因是由于overflow:hidden破坏了边距的重叠，标准模型下盒子为content-box，实际高度= #father.height（.child.height+.child.padding+.child.margin） = 150px

css选择器

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li: nth - child）

可继承属性
（1）所有元素可继承：visibility、cursor
（2）块级元素可继承：text-indent、text-align
（3）内联元素可继承：
- ①字体系列属性：font、font-family、font-size、font-style、font-variant、font-weight、font-stretch、font-size-adjust
- ②除text-indent、text-align之外的文本系列属性：
  letter-spacing、word-spacing、white-space、line-height、color、text-transform、direction
不可继承的样式属性：
1、display
2、文本属性：vertical-align、text-decoration、text-shadow、unicode-bidi
3、盒子模型属性：border、padding、margin、width、height
4、背景属性：background
5、定位属性：float、clear、position
6、生成内容属性：content
7、轮廓样式属性：outlien-style
8、页面样式属性：size
9、声音样式属性：pause-before

优先级为:

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
注意：同一级别中后写的会覆盖先写的样式

优先级算法：

每个规则对应一个初始"四位数"：0、0、0、0
若是行内选择符，则加1、0、0、0
若是 ID选择符，则加0、1、0、0
若是类选择符/伪类选择符，则分别加0、0、1、0
若是元素选择符，则分别加0、0、0、1

算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。

CSS3新增伪类举例：

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

伪元素和伪类的区别？

1、伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；

伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。
2、伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）；

伪类是给页面中已经存在的元素添加一个类。

::before 和 :after中双冒号和单冒号有什么区别？

双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
对于CSS2之前已有的伪元素，比如:before和:after，单冒号和双冒号的写法::before和::after作用是一样的。
如果只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序:L(link)OV(visited)E and H(hover)A(active)TE

解释浏览器如何确定哪些元素与 CSS 选择器匹配。

浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。

例如，对于形如p span的选择器，浏览器首先找到所有<span>元素，并遍历它的父元素直到根元素以找到<p>元素。对于特定的<span>，只要找到一个<p>，就知道’`已经匹配并停止继续匹配。

BFC

什么是BFC？

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

形成 BFC 的条件有什么？

浮动元素，float 除 none 以外的值
定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-block，table-cell，table-caption
overflow 除了 visible 以外的值（hidden，auto，scroll）

BFC的布局规则?

内部的 Box 会在垂直方向上一个接一个的放置。
垂直方向上的距离由 margin 决定
bfc 的区域不会与 float 的元素区域重叠。
计算 bfc 的高度时，浮动元素也参与计算
bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

BFC的使用场景？

1、利用BFC避免margin重叠
2、BFC不与float重叠，可以使用于自适应布局
3、清除浮动：子元素是浮动元素的时候，把外层元素设置成BFC的时候，子元素的浮动元素也会参与到父级元素的高度计算上来。

css（float）

什么是css浮动，原来是什么？

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

浮动元素引起的问题（浮动的负效应）？

1、背景不能显示
2、父系高度坍塌，父系边框不能撑开，影响与父元素同级的元素
3、与浮动元素同级的非浮动元素（内联元素）会跟随其后
4、margin padding设置值不能正确显示
5、造成其他元素的显示问题

详细可以点击查看float负效应问题

css如何清除浮动？

1.使用额外标签法（不推荐使用）
2.设置父级元素为BFC元素，overflow:hidden;清除浮动（不推荐使用）
3.使用伪元素清除浮动(用的最多)

详细可以点击查看清除浮动问题

inline-block和float的共性和区别?

两者共同点是都可以实现元素在一行显示，并且可以自由设置元素大小。

区别是
inline-block: 水平排列一行（但会产生空白节点），即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。所以还需设置line-height、vertical-align…。

float: 让元素脱离当前文档流，呈环绕状排列，如遇上行有空白，而当前元素大小可以挤进去，这个元素会在上行补位排列。默认是顶部对齐。脱离文档流，还得清除浮动。

position:absolute和float共性和区别?

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float仍会占据位置（注意：不代表没有脱离文档流），absolute会覆盖文档流中的其他元素。

float定位的工作原理?

浮动（float）是 CSS 定位属性。浮动元素从网页的正常流动中移出，但是保持了部分的流动性，会影响其他元素的定位（比如文字会围绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全从文档流中脱离。

CSS 的clear属性通过使用left、right、both，让该元素向下移动（清除浮动）到浮动元素下面。

如果父元素只包含浮动元素，那么该父元素的高度将塌缩为 0。我们可以通过清除（clear）从浮动元素后到父元素关闭前之间的浮动来修复这个问题。

有一种 hack 的方法，是自定义一个.clearfix类，利用伪元素选择器::after清除浮动。另外还有一些清除浮动的方法，比如添加空的<div></div>和设置浮动元素父元素的overflow属性。与这些方法不同的是，clearfix方法，只需要给父元素添加一个类，定义如下：

.clearfix::after {content: "";display: block;clear: both;
}

值得注意的是，把父元素属性设置为overflow: auto或overflow: hidden，会使其内部的子元素形成块格式化上下文（Block Formatting Context），并且父元素会扩张自己，使其能够包围它的子元素。
例子与上述#father高度计算实例相结合

行内元素 float:left 后是否变为块级元素？

行内元素设置成浮动之后变得更加像是 inline-block
行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100%（而是取决于内容宽度），块元素默认 100%宽度占据一行
这时候给行内元素设置 padding-top 和 padding-bottom 或者 width、height 都是有效果的

css（position/z-index）

position 的值， relative 和 absolute 分别是相对于谁进行定位的？

absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老 IE 不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

relative，fixed，absolute和static总体定位有什么区别？

static：定位定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时上，右，下，左和z-index属性无效。
relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的下方下调整元素位置（因此会在此元素未添加定位时所在位置保留空白）。
absolute：不为元素增量空间（脱离文档流），通过指定元素相对于最近的非静态定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（边距），并且不会与其他边距合并。
fixed：不为元素缩放空间，或者通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的当元素祖先的变换属性非none时，容器由视口替换该祖先。
static：盒位置根据正常流计算（这称为正常流动中的位置），然后相对于该元素在流中的流根（BFC）和包含块（最近的块级祖先元素）定位。在所有情况下（被即便定位元素为table时），该元素定位均不对后续元素造成影响。当元素乙被粘性定位时，后续元素的位置仍按照乙未定位时的位置来确定。position: static对table元素的效果与position: relative相同。

请阐述z-index属性，并说明如何形成层叠上下文（stacking context）

CSS 中的z-index属性控制重叠元素的垂直叠加顺序。z-index只能影响position值不是static的元素。

没有定义z-index的值时，元素按照它们出现在 DOM 中的顺序堆叠（层级越低，出现位置越靠上）。非静态定位的元素（及其子元素）将始终覆盖静态定位（static）的元素，而不管 HTML 层次结构如何。

层叠上下文是包含一组图层的元素。在一组层叠上下文中，其子元素的z-index值是相对于该父元素而不是 document root 设置的。每个层叠上下文完全独立于它的兄弟元素。如果元素 B 位于元素 A 之上，则即使元素 A 的子元素 C 具有比元素 B 更高的z-index值，元素 C 也永远不会在元素 B 之上.

每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父层叠上下文中按顺序进行层叠。少数 CSS 属性会触发一个新的层叠上下文，例如opacity小于 1，filter不是none，transform不是none。

css（display，opacity，visiblity）

display有什么值？说明他们的作用

display:none、inline、block、inline-block、table、inline-table、table-caption、table-cell、table-row、table-row-group、table-column、table-column-group、table-header-group、table-footer-group、run-in、box、inline-box、flexbox、inline-flexbox、flex、inline-flex

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

display：inline-block什么时候会显示间隙？

间距产生的原因是因为，换行或间隔会占用一定的位置，所以inline-block布局的元素在编辑器里写在同一行就不会显示间隙
推荐解决方法：

父元素中设置font-size：0;letter-spacing：-4px;使用 margin 负值，设置letter-spacing，word-spacing
详细可以参考https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）,以及适用场景？

flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }。Webkit 内核的浏览器，必须加上-webkit前缀。

对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。
设置属性可以参考上述的flex（弹性）布局。

rgba()和 opacity 的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度。

而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）。

设置了float浮动后，该元素的display会产生什么效果？

自动变成 display:block，表现却像是display:inline-block。

CSS隐藏元素的几种方法，区别?（至少说出三种）

opacity：元素本身依然保留它自己的位置位置网页的布局设置（未脱离文档流）。它也将响应用户交互；
visiblity：与opacity唯一不同的是它不会响应任何用户交互。转化，元素在读屏软件中也会被隐藏，占据原有位置；
display，显示没有任何该元素直接打用户交互操作都无法实现。读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在（从文档中脱离，不占据原有位置）；
position：不会影响布局，有助于元素保持可以操作;

css（text）

css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height

水平方向：letter-spacing

letter-spacing 的作用还可以用于消除 inline-block 元素间的换行符空格间隙问题。

Vertical-Align的作用是什么？

vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。也就是说，对于块级元素，vertical-align是不起作用的。

对哪些元素可以使用Vertical-Align?

inline
inline-block
inline-table
没有设置float和position: absolute
其中，行内元素（inline element）就是包含文本的标签。
而行内块元素（inline-block element），顾名思义，就是位于行内的块元素。可以有宽度和高度（可以由其内容决定），也可以有内边距、边框和外边距。

vertical-align的各类属性值？

线类，如 baseline、top、middle、bottom；
文本类，如 text-top、text-bottom；
上标下标类，如 sub、super；
数值百分比类，如 10px、1em、5%；
详细参考：深入理解css之vertical-align

CSS文本溢出显示省略号

单行省略：

 overflow:hidden;text-overflow:ellipsis;white-space:nowrap

多行省略（适用于移动端）：

  overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

使用伪类进行文本省略

html

<div id="con"><span id="txt">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略</span><span class="t"></span>
</div>

css

#txt{display: inline-block;height: 40px;width: 250px;line-height: 20px;overflow: hidden;font-size: 16px;
}
.t:after{display: inline;content: "...";font-size: 16px;}

跨浏览器兼容的方案

p {position:relative;line-height:1.4em;/* 3 times the line-height to show 3 lines */height:4.2em;overflow:hidden;
}
p::after {content:"...";font-weight:bold;position:absolute;bottom:0;right:0;padding:0 20px 1px 45px;background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}

JavaScript 方案

1.Clamp.js
js

var module = document.getElementById("id");
$clamp(module, {clamp: 3});

6.line-height的应用?

大部分时候，我们设置line-height，都是为了垂直居中对齐。但这里的居中，只能说是近似居中。line-height除了可以作为单行文本的居中对齐外，多行文本也是可以的。

vertical-align与line-height的关系?

vertical-align的百分比值是根据line-height来计算的。但实质上，只要是内联元素，这两个元素都会同时在起作用。

请解释下面代码发生了什么，为什么会这样，怎么解决？

.box {line-height: 32px;
}
.box > span {font-size: 24px;
}
<div class="box"><span>文本</span>
</div>

效果：

从代码上看，好像.box的高度会是32px，但实质上.box的高度会比32px还要高。原因是"strut"继承了line-height: 32px，span也继承了line-height: 32px，但两者的font-size不一样，这就导致了"strut"的font-size比较小，而span的font-size比较大，也就是说它们的基线不在同一位置上，"strut"偏上一点，而span默认又是基线对齐，为此，span总体会往上移以便跟"strut"基线对齐，.box元素就是这样被撑高了

解决方案：

span元素不使用基线对齐，可以改为top对齐
span元素块状化
line-height设置为0

看不见的空白间隔是什么原因引起的？有什么解决办法？

浏览器的默认行为是把 inline 元素间的空白字符（空格换行 tab）渲染成一个空格,也就是说换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
解决方案：

排成一列
父系元素设置font-size:0px;
父系元素修改字符间隔，子元素字符间隔设为默认

css（link）

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

Link 属于 html 标签，而@import 是 CSS 中提供的

在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS

@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题

Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

css单位

px 和 em 的区别。

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。

浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。

清说一说单位rem

使用 rem 单位进行相对布局，通过根元素进行适配，它好比是一个中介，通过它计算出页面真正要展示的大小，达到自适应效果。（有时需要配合媒体查询），常用于移动端开发。

vw、vh 与 % 百分比的区别

% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

请说明rem的用法，rem布局关键是什么？

实现 rem 的核心，就是通过js代码针对并监听不同尺寸的手机屏幕计算出相应的比例，具体如下：

(function(factory){factory();window.addEventListener('resize',factory,false);}(function(){var width = document.documentElement.clientWidth;width = width > 稿宽 ? 稿宽 : width;document.documentElement.style.fontSize = width / （稿宽/100） + 'px';}))

详细请看https://blog.csdn.net/Errrl/article/details/103775419#rem_548

什么是设备像素比，产生的原因，dpr的解释？

移动端设备分为非视网膜屏幕和视网膜屏幕。
为说明二者区别，举个例子：
非视网膜屏幕是指，屏幕可视区域宽度是320像素，就只能显示320像素的内容。
视网膜屏幕是指，屏幕可视区域宽度是320像素，却能够显示640像素、960像素的内容。
其中，屏幕可视区宽度叫设备独立像素，device independent pixels，简称dip或dp。屏幕能够显示的显示的实际像素数叫做物理像素。

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
实例如下面的：移动端 1px 问题的解决办法

css布局，编写题

实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>

怎么样实现边框 0.5 个像素？

1、采用meta viewport的方式

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2、利用渐变

background-image: linear-gradient(0deg, #f00 50%, transparent 50%);

3、transform:scaleY(.5)

-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(.5, .5);
transform: scale(.5, .5);

如何垂直居中一个元素？

方法一：绝对定位居中+margin:auto法

.inner{position: absolute;/*父元素需要相对定位*/top: 0;left: 0;right: 0;bottom: 0;margin:auto;/*高宽auto*/border:1px solid yellow;height: 100px;width: 100px;}

方法二：绝对定位居中+margin负值法

.inner{position: absolute;/*父元素需要相对定位*/top: 50%;left: 50%;margin-top:-50px;/*自身高度的一半*/margin-left: -50px;/*自身宽度的一半*/border:1px solid yellow;height: 100px;width: 100px;}

方法三：绝对定位居中+偏移法

.inner{position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%); /*在水平和垂直方向上各偏移-50%*/border:1px solid yellow;height: 100px;width: 100px;}

方法四：table-cell+vertical-align+text-align居中

.outer{width: 500px;height: 500px;border: 1px solid red;position: relative;display: table-cell;vertical-align: middle;/*子元素必须设置为行内元素、行内块元素*/text-align: center;}
.inner{display:inline-block;}

方法五：flex布局居中

/*统一设置在父元素中*/
.outer{width: 500px;height: 500px;border: 1px solid red;display: flex; /*设置外层盒子display为flex*/justify-content: center;/*设置内层盒子的水平居中*/align-items: center; /*设置内层盒子的垂直居中*/}

几种常见的 CSS 布局

单列布局
两列自适应布局
圣飞布局和双飞翼布局（三栏、多栏布局）
flex布局

两栏布局，一列定宽一列自适应？

<div class="content"><div class="div1"></div><div class="div2"></div>
</div>

.content{display: flex;justify-content: space-between;
}
.div1 {min-width: 200px;
}
.div2 {width: 100%;/*flex:1;*/background: #e6e6e6;
}
html,
body,
div {height: 100%;margin: 0;
}

三栏布局：左右各300px,中间自适应,并说说各自的优缺点？

①浮动布局：需要清除浮动，兼容性比较好。

<style type="text/css">*{margin: 0;padding: 0;}.left{width: 300px;height: 300px; background: yellow; float: left;    }.right{width: 300px; height: 300px; background: blueviolet; float: right;}.middle{height: 300px; background: goldenrod; margin-left: 320px; margin-right: 320px;}</style><body><div class="left">左栏</div><div class="right">右栏</div><div class="middle">中间栏</div></body>

②绝对定位：快捷，布局已经脱离了文档流，导致下面的元素也要脱离文档流，使用性较差，没有设置margin:0;有位移差。（不推荐使用）

<style type="text/css">.left{background: skyblue;width: 300px;height: 300px;position: absolute;top: 0;left: 0;}.middle{height: 300px;margin: 0 320px;background: yellow;}.right{height: 300px;width: 300px;position: absolute;top: 0;right: 0;background: violet;}</style><body><div class="left">左栏</div><div class="middle">中间栏</div><div class="right">右栏</div></body>

③flex布局：解决了浮动和绝对定位的缺点，移动端基本已经支持了兼容性。（推荐）

 <style type="text/css">.wrapper{display: flex;}.left{width: 300px;height: 300px;background: green;}.middle{width: 100%; /*flex:1;*/background: red;marign: 0 20px;}.right{width: 3000px;height: 300px;background: yellow;}</style><body><div class="wrapper"><div class="left">左栏</div><div class="middle">中间</div><div class="right">右栏</div></div></body>

④表格布局：表格布局的兼容性非常好

<style>.content{width:100%;display:table;height:100px;}.content>div{display:table-cell;}.content .left{width:300px;background:red;}.content  .center{background:yellow;}.content  .right{width:300px;background:blue;}</style><body><div class = "content"><div class="left">左</div><div class="center">中</div><div class="right">右</div></div></body>

⑤网格布局：新出的（后期作用很大）

 <style>.content{display:grid;width:100%;grid-template-rows:300px;grid-template-columns:300px auto 300px;}.content .left{background:red;}.content .center{background:yellow;}.content .right{background:blue;}</style><body><div class = "content"><div class="left">左</div><div class="center">中</div><div class="right">右</div></div></body>

三栏布局：上下各300px,中间自适应

①绝对定位：快捷，布局已经脱离了文档流，导致下面的元素也要脱离文档流，使用性较差，没有设置margin:0;有位移差。（不推荐使用）

<style type="text/css">div{width：100%}.top{background: skyblue;height: 300px;position: fixed;   /*固定在头部*/top: 0;}.middle{top: 300px;bottom: 300px;background: yellow;position:absolute;overflow: auto;  /*当文本内容超出自定义高度时，出现自定义滚动条*/}.bottom{height: 300px;position: fixed;/*固定在尾部*/bottom: 0;background: violet;}</style><body><div class="top">上栏</div><div class="middle">中间栏</div><div class="bottom">下栏</div></body>

②flex布局：解决了浮动和绝对定位的缺点，移动端基本已经支持了兼容性。（推荐）

 <style type="text/css">.wrapper{display: flex;flex-direction: column;}.wrapper>div{width:100%;}.top{height: 300px;background: green;}.middle{height: 100%; /*flex:1;*/background: red;marign:  20px 0;}.bottom{height: 300px;background: yellow;}</style><body><div class="wrapper"><div class="top">上栏</div><div class="middle">中间</div><div class="bottom">下栏</div></div></body>

③表格布局：表格布局的兼容性非常好

<style>.content{width:100%;display:table;}.content>div{display:table-row;}.content .top{height:300px;background:red;}.content  .center{background:yellow;}.content  .bottom{height:300px;background:blue;}</style><body><div class = "content"><div class="top">左</div><div class="center">中</div><div class="bottom">右</div></div></body>

④网格布局：新出的（后期作用很大）

 <style>.content{display:grid;width:100%;grid-template-rows:100px auto 100px;}.content .top{background:red;}.content .center{background:yellow;}.content .bottom{background:blue;}</style><body><div class="content"><div class="top">左</div><div class="center">中</div><div class="bottom">右</div></div></body>

圣杯布局？原理？

<style>.container{padding-left: 50px; /*设置左右padding，防止main的字被左右两块遮挡*/padding-right:100px;}.main{float:left;width:100%;height:200px;background-color:blue;}.left{float:left;width:50px;height:200px;margin-left:-100%; /*左栏移到第一行的首部*/position:relative;left:-50px; /*抵消container的左padding*/background-color:red;}.right{float:left;width:100px;height:200px;margin-left:-100px; /*右栏移到和左中一行*/position:relative;right:-100px;background-color:yellow;}</style><body>
<div class="container"><divclass="main">111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div><div class="left"></div><div class="right"></div>
</div>
</body>

1、圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。
2、.left， .right的margin-left是为了让.main .left .right在同一行。
3、.container的padding-left,padding-right，.left的position和left, . right的position和left是为了防止文字被遮挡。

双飞翼布局？

 <style>.content{float:left;width:100%;}.main{height:200px;margin-left:100px;margin-right:200px;background-color:green;}.content::after{display:block;content: '';font-size: 0;height:0;clear: both;zoom:1;}.left{float:left;width:100px;height:200px;margin-left:-100%; /*左栏移到第一行的首部*/background-color:red;}.right{float:left;width:200px;height:200px;margin-left:-200px; /*右栏移到和左中一行*/background-color:yellow;}</style><body><div class="content"><div class="main"></div></div><div class="left"></div><div class="right"></div></body>

1、双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同。
2、既然content部分的内容会被遮挡，那么就在content内部再加一个main，通过设置其margin来避开遮挡，问题也就可以解决了。
3、需要注意的是，需要在main后面加一个元素来清除浮动。

实现纯 CSS 创建一个三角形并说明原理？

span {width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000;
}

利用伪元素实现

.info-tab {position: relative;
}
.info-tab::after {content: "";border: 4px solid transparent;border-top-color: #2c8ac2;position: absolute;top: 0;
}

采用的是均分原理,把矩形分为4等份,这4等份其实都是边框

实现纯 CSS 创建正方体？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective</title>
<style>
.wrapper{width: 50%;
float: left;
}
.cube{font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style:preserve-3d;
transform:rotateX(-35deg) rotateY(30deg);
}
.side{position: absolute;
width: 2em;
height: 2em;
background: rgba(255,99,71,0.6);
border: 1px solid rgba(0,0,0,0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front{transform:translateZ(1em);
}
.bottom{transform:rotateX(-90deg) translateZ(1em);
}
.top{transform:rotateX(90deg) translateZ(1em);
}
.left{transform:rotateY(-90deg) translateZ(1em);
}
.right{transform:rotateY(90deg) translateZ(1em);
}
.back{transform:translateZ(-1em);
}
</style>
</head>
<body>
<div class="wrapper w1">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
</body>
</html>

移动端 1px 问题的解决办法?

使用媒介查询的方法+transfrom，如果是二倍屏，就缩放0.5；三倍屏就缩放0.33。具体如下：

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {.border-bottom::after {-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {.border-bottom::after {-webkit-transform: scaleY(0.33);transform: scaleY(0.33);}
}

响应式布局中除了screen，你还能说出一个 @media 属性的例子吗？

all 适用于所有设备。
print 为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。
screen 主要适用于彩色的电脑屏幕
speech speech 这个合成器. 注意: CSS2 已经有一个相似的媒体类型叫 aural.

css3

css3 有哪些新特性

选择器
E:last-child 匹配父元素的最后一个子元素 E。
E:nth-child(n)匹配父元素的第 n 个子元素 E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。
RGBA（关于背景透明的问题）

多栏布局

<div class="mul-col"><div><h3>栏一</h3><p>123</p></div><div><h3>栏二</h3><p>546</p></div><div><h3>栏三</h3><p>789</p></div>
</div>
.mul-col {column-count: 3;column-gap: 5px;column-rule: 1px solid gray;border-radius: 5px;border: 1px solid gray;padding: 10px;
}

多背景图

/* background-image:url('1.jpg),url('2.jpg') */

CSS3 word-wrap 属性

p.test {word-wrap: break-word;/*属性允许长单词或 URL 地址换行到下一行*/
}

文字阴影

text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);

@font-face 属性
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face {font-family: myFamily;src: url(XXX.ttf);
}
p{font-size: 110px;color: black;font-family: "myFamily";
}

圆角

border-radius: 15px;

边框图片
CSS3 border-image 属性

盒阴影

/* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 */

盒子大小
CSS3 box-sizing 属性

媒体查询
CSS3 @media 查询（重点）

CSS3 动画
@keyframes

@keyframes donghua{from {transform: rotate(0);}50% {transform: rotate(180deg);}to {transform: rotate(360deg);}
}

animation 属性

/* animation ： name duration timing-function delay interation-count direction play-state */

渐变效果

background-image: -webkit-gradient(linear,0% 0%,100% 0%,from(#2a8bbe),to(#fe280e)
);

CSS3 弹性盒子模型

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSS3 过渡

div {transition: width 2s;-moz-transition: width 2s; /* 适用于Firefox 4 */-webkit-transition: width 2s; /* 适用于Safari 和 Chrome */-o-transition: width 2s; /* 适用于Opera */
}

CSS3 变换（transfrom）

rotate()旋转
translate()平移
scale( )缩放
skew()扭曲/倾斜
变换基点
3d 转换

CSS3 动画（简单动画的实现，如旋转等）

1、 transition+js

html

<div></div>

css

div {margin: 50px auto;width: 200px;height: 200px;background-color: pink;
}
div.rotate {/* 旋转360度 */transform: rotate(360deg);/* all表示所有属性,5s表示在一秒的时间完成动画 */transition: all 1s;
}

transition: property duration timing-function delay;

property: 规定应用过渡的 CSS 属性的名称。
duration: 定义过渡效果花费的时间。默认是 0,单位是 s。
timing-function: 规定过渡效果的时间曲线。默认是 “ease”。匀速’linear’,加速’ease-in’,减速’ease-out’,先快后慢’ease-in-out’。
delay: 规定过渡效果何时开始。默认是 0。单位 s。

/*给 div 元素设置鼠标移入时旋转,也就是给它加上.rotate 类名.鼠标移出时移除类名*/
$(function() {$("div").mouseenter(function() {$(this).addClass("rotate");}).mouseleave(function() {$(this).removeClass("rotate");});
});

2、@keyframes+animation

html

<div class="rotate"></div>

css

@keyframes donghua{from {transform: rotate(0);}50% {transform: rotate(180deg);}to {transform: rotate(360deg);}
}
div {margin: 50px auto;width: 200px;height: 200px;background-color: pink;
}
div.rotate {animation: donghua 5s infinite;
}

animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线默认是 “ease”。匀速’linear’,加速’ease-in’,减速’ease-out’,先快后慢’ease-in-out’。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数默认1，n|infinite。
animation-direction 规定是否应该轮流反向播放动画 normal|alternate。

过渡与动画的区别是什么?

transition 可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性
animation 可以制作类似 Flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

transition／translate／transform／animation 的区别（易混淆）

1、首先要明确的是transition、transform、animation这三个都是css属性，而translate是2D转换的一种方法是transform的一个属性值
2、transform是2D、3D变换的属性，只是因为他经常与transition同时使用导致直观上认为动画（过渡）就是transform，但其实transform是动画（过渡）可用的一种属性就像height、opacity一样（值得注意的是动画中之所以常用transform而不直接使用height，是因为使用transform不会引起页面的重排，可以提高性能）
3、transition、animation才是在动画（过渡）中必备的两个属性

animation和transition的区别
1、transition更适用于简单状态的过渡
2、animation可以没有触发条件但是transition不可以，所以在例如页面刚加载时的动画可以使用animation
3、animation可以通过更多的参数实现更复杂的动画效果，包括关键帧数、速度曲线、播放的次数、是否逆向播放等，（官方介绍中animation是transition属性的扩展）

5.说下 CSS3 中一些样式的兼容，分别指兼容哪些浏览器

CSS3中-moz、-ms、-webkit和-o分别代表什么意思
1、-moz-：代表FireFox浏览器私有属性
2、-ms-：代表IE浏览器私有属性
3、-webkit-：代表safari、chrome浏览器私有属性
4、-o-：代表opera浏览器私有属性

css优化

png、jpg、gif 这些图片格式解释一下，分别什么时候用？，webp 呢

gif 图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有 256 种颜色

jpg 支持上百万种颜色，有损压缩，压缩比可达 180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画

png 为替代 gif 产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8 简单说是静态 gif，也只有 256 色，png24 不透明，但不止 256 色。

webp 谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是 jpeg 的 2/3，有损压缩。高版本的 W3C 浏览器才支持，google39+，safari7+

2.style 标签写在 body 后与 body 前有什么区别？

从上向下加载，加载顺序不同

css sprite（雪碧图）是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。

优点：

减少 HTTP 请求数，极大地提高页面加载速度。
增加图片信息重复度，提高压缩比，减少图片大小。
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。

缺点：

图片合并麻烦。
维护麻烦，修改一个图片可能需要从新布局整个图片，样式。

PNG,GIF,JPG 的区别及如何选?

1、GIF：
1：256 色
2：无损，编辑保存时候，不会损失。
3：支持简单动画。
4：支持 boolean 透明，也就是要么完全透明，要么不透明

2、JPEG：
1：millions of colors
2：有损压缩，意味着每次编辑都会失去质量。
3：不支持透明。
4：适合照片，实际上很多相机使用的都是这个格式。

3、PNG：
1：无损，其实 PNG 有好几种格式的，一般分为两类：PNG8 和 truecolor PNGs；
与 GIF 相比：它通常会产生较小的文件大小，支持阿尔法（变量）透明度，无动画支持
与 JPEG 相比：文件更大，无损，因此可以作为 JPEG 图片中间编辑的中转格式。

结论：JPEG 适合照片，GIF 适合动画，PNG 适合其他任何种类——图表，buttons，背景，图表等等。

5.CSS 在性能优化方面的实践?

内联首屏关键 CSS（Critical CSS）
内联 CSS 能够使浏览器开始页面渲染的时间提前，只将渲染首屏内容所需的关键 CSS 内联到 HTML 中
异步加载 CSS
文件压缩
去除无用 CSS

CSS 合并方法?

@import url(css 文件地址)

base64 的原理及优缺点?

1.什么是 Base64

Base64 是一种基于 64 个可打印字符来表示二进制数据的编码方式，是从二进制数据到字符的过程。原则上，计算机中所有内容都是二进制形式存储的，所以所有内容（包括文本、影音、图片等）都可以用 base64 来表示。

2.适用场景

1.Base64一般用于在HTTP协议下传输二进制数据，由于HTTP协议是文本协议，所以在HTTP写一下传输二进制数据需要将二进制数据转化为字符数据，网络传输只能传输可打印字符，在ASCII码中规定，0-31、128这33个字符属于控制字符，32~127这95个字符属于可打印字符,那么其它字符怎么传输呢，Base64就是其中一种方式。
2.将图片等资源文件以Base64编码形式直接放于代码中，使用的时候反Base64后转换成Image对象使用。
3.偶尔需要用这条纯文本通道传一张图片之类的情况发生的时候，就会用到Base64，比如多功能Internet 邮件扩充服务（MIME）就是用Base64对邮件的附件进行编码的。

3.优缺点

优点:可以将二进制数据转化为可打印字符，方便传输数据，对数据进行简单的加密，肉眼安全。
缺点：内容编码后体积变大，编码和解码需要额外工作量。
具体可以参考博客：http://www.fly63.com/article/detial/3790

精灵图和 base64 如何选择？

Css Sprites（雪碧图或 css 精灵），是网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

原理：将许多的小图片整合到一张大图片中，利用 css 中的 background-image 属性，background-position 属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。

优点：减少网页的 http 请求，提升网页加载速度。合并多张小图片成大图，能减少字节总数（大图大小<=多张小图大小）.

缺点：前期需要处理图片将小图合并，多些许工程量。对于需要经常改变的图片维护起来麻烦。

base64：是网络上最常见的用于传输 8Bit 字节代码的编码方式之一，要求把每三个 8Bit 的字节转换为四个 6Bit 的字节，Base64 是网络上最常见的用于传输 8Bit 字节代码的编码方式之一。

通俗点讲：将资源原本二进制形式转成以 64 个字符基本单位，所组成的一串字符串。比如一张图片转成 base64 编码后就像这样，图片直接以 base64 形式嵌入文件中。

生成 base64 编码：图片生成 base64 可以用一些工具，如在线工具，但在项目中这样一个图片这样生成是挺繁琐。特别说下，webpack 中的 url-loader 可以完成这个工作，可以对限制大小的图片进行 base64 的转换，非常方便。

优点： base64 的图片会随着 html 或者 css 一起下载到浏览器,减少了请求. 可避免跨域问题

缺点：(低版本）的 IE 浏览器不兼容。体积会比原来的图片大一点。 css 中过多使用 base64 图片会使得 css 过大，不利于 css 的加载。

适用场景：应用于小的图片几 k 的，太大的图片会转换后的大小太大，得不偿失。用于一些 css sprites 不利处理的小图片，如一些可以通过 background-repeat 平铺来做成背景的图片

编写高效的 CSS 应该注意什么？

首先，浏览器从最右边的选择器，即关键选择器（key selector），向左依次匹配。根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作，去判断这些元素的父元素们是否匹配。

原则上建议为独立的 CSS 类命名，并且在需要层级关系时，将关系也体现在命名中，这自然会使选择器高效且易于覆盖。

搞清楚哪些 CSS 属性会触发重新布局（reflow）、重绘（repaint）和合成（compositing）。在写样式时，避免触发重新布局的可能。

详细可以参考，提升css选择器性能

使用 CSS 预处理的优缺点分别是什么？

优点：

提高 CSS 可维护性。
易于编写嵌套选择器。
引入变量，增添主题功能。可以在不同的项目中共享主题文件。
通过混合（Mixins）生成重复的 CSS。
将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。

缺点：

需要预处理工具。
重新编译的时间可能会很慢。
方法可以参考：https://blog.csdn.net/Errrl/article/details/103721482

CSS 预处理器有哪些，区别？

less，scss，stylus

1、后缀名不同
默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名，Stylus 默认使用 .styl 的文件扩展名

2、语法不同

3、声明变量不同

sass 变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和 css 属性是一样的
Less css 中变量都是用@开头的，其余与 sass 都是一样的
stylus 对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，但是在 stylus 中不能用@开头

为什么要初始化 CSS 样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。

CSS优化，提高性能的方法有哪些？

1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。
2，减少css嵌套，最好不要套三层以上。
3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。
4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。
5，减少通配符*或者类似[hidden=“true”]这类选择器的使用，挨个查找所有…这性能能好吗？当然重置样式这些必须的东西是不能少的。
6，巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。
7，拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里，这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。
8，不用css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的。
9，少用css rest，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要不友好的，有需求有兴趣的朋友可以选择normolize.css
10，cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种十分实用的技巧，极大减少了http请求。
11，当然我们还需要一些善后工作，CSS压缩(这里提供一个在线压缩 YUI Compressor ，当然你会用其他工具来压缩是十分好的)，
12，GZIP压缩，Gzip是一种流行的文件压缩算法，详细做法可以谷歌或者百度。

如何解决不同浏览器的样式兼容性问题？

在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
使用已经处理好此类问题的库，比如 Bootstrap。
使用 autoprefixer 自动生成 CSS 属性前缀。
使用 Reset CSS 或 Normalize.css。

css扩展

对偏移、卷曲、可视的理解

偏移
offsetWidth width + padding + border
offsetHeight height + padding + border
offsetLeft
offsetTop
offsetParent
注意：没有offsetRight和offsetBottom

卷曲
scrollWidth width + padding
scrollHeight 当内部的内容溢出盒子的时候，顶边框的底部，计算到内容的底部；如果内容没有溢出盒子，计算方式为盒子内部的真实高度（边框到边框）
scrollLeft 这个scroll系列属性不是只读的
scrollTop
scroll()

此函数可以获取卷曲的高度和卷曲的宽度

function myScroll() {return {top: window.pageYOffset  || document.documentElement.scrollTop  || document.body.scrollTop  || 0,left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0};}

滚动滚动条的时候触发事件

window.onscroll = function () {}

可视
clientWidth 获取的是元素内部的真实宽度 width + padding
clientHeight 边框之间的高度
clientLeft 相当于左边框的宽度如果元素包含了滚动条，并且滚动条显示在元素的左侧。这时，clientLeft属性会包含滚动条的宽度17px
clientTop 相当于顶边框的宽度
client()

此函数可以获取浏览器可视区域的宽高

function myClient() {return {wid: window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth  || 0,heit: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0};
}

@offsetHeight和style.height的区别

demo.style.height只能获取行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获取
style.height是字符串（而且带单位），offsetHeight是数值
demo.style.height可以设置行内样式，offsetHeight是只读属性
因此，一般用demo.offsetHeight来获取某元素的真实宽度/高度，用style.height来设置宽度/高度

@offsetLeft和style.left的区别

一、style.left只能获取行内样式
二、offsetLeft只读，style.left可读可写
三、offsetLeft是数值，style.left是字符串并且有单位px
四、如果没有加定位，style.left获取的数值可能是无效的
五、最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准

@scrollHeight和scrollWidth

标签内部实际内容的高度/宽度
不计算边框，如果内容不超出盒子，值为盒子的宽高（不带边框）
如果内容超出了盒子，就是从顶部或左部边框内侧一直到内容a的最外部分

@scrollTop和scrollLeft

被卷去部分的顶部/左侧到可视区域顶部/左侧的距离

2.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

postcss是什么？

postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：
1 . 使用下一代css语法
2 . 自动补全浏览器前缀
3 . 自动把px代为转换成rem（rem不熟悉的，点这）
4 . css 代码压缩等等
postcss 只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer 就是其一。
具体可以参考，https://www.jianshu.com/p/288963680642

知道 css 有个 content 属性吗？有什么作用？有什么应用？

css 的 content 属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。

after 伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用 clear:both 清除浮动。那么问题继续还有，知道 css 计数器（序列数字字符自动递增）吗？如何通过 css content 属性实现 css 计数器？
css 计数器是通过设置 counter-reset 、counter-increment 两个属性、及 counter()/counters()一个方法配合 after / before 伪类实现。
详细可以参考https://blog.csdn.net/haoyanyu_/article/details/80238583

标准模式与怪异模式的区别

浏览器解析 CSS 的两种模式：标准模式(strict mode)和怪异模式(quirks mode)

标准模式：浏览器按 W3C 标准解析执行代码；

怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。

浏览器解析时使用标准模式还是怪异模式，与网页中的 DTD 声明直接相关，DTD 声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相关的方式加载网页并显示，忽略 DTD 声明，将使网页进入怪异模式（quirks mode）。

区别是：

1、盒模型：
在怪异模式下，盒模型为 IE 模型
而在 W3C 标准的盒模型中为：标准盒子

2、图片元素的垂直对齐方式
对于 inline 元素和 table-cell 元素，标准模式下 vertical-align 属性默认取值是 baseline；在怪异模式下，table 单元格中的图片的 vertical-align 属性默认取值是 bottom。因此在图片底部会有及像素的空间。

3、<table>元素中的字体 CSS 中，对于 font 的属性都是可以继承的。怪异模式下，对于 table 元素，字体的某些元素将不会从 body 等其他封装元素继承中的得到，特别是 font-size 属性。

4、内联元素的尺寸
标准模式下， inline 元素无法自定义大写；
怪异模式下，定义这些元素的 width、height 属性可以影响这些元素显示的尺寸。

5、元素的百分比高度
CSS 中对于元素的百分比高度规定：百分比为元素包含块的高度，不可为负值；如果包含块的高度没有显示给出，该值等同于 auto，所以百分比的高度必须是在元素有高度声明的情况下使用。
当一个元素使用百分比高度是，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被准确应用

6、元素溢出的处理
标准模式下，overflow 取值默认为 visible；在怪异模式在，该溢出会被当做扩展 box 来对待，即元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容。

6.什么是CSS hack，原理？

针对不同的浏览器或浏览器不同版本写相应的CSS的过程，就是CSS hack
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

CSS hack分类？

条件hack、属性级hack、选择符hack。
具体用法，请点击参考

svg和canvas的区别？

1、canvas时h5提供的新的绘图方法；svg已经有了十多年的历史
2、canvas画图基于像素点，是位图，如果进行放大或缩小会失真；svg基于图形，用html标签描绘形状，放大缩小不会失真
3、canvas需要在js中绘制；svg在html绘制
4、canvas支持颜色比svg多
5、canvas无法对已经绘制的图像进行修改、操作；svg可以获取到标签进行操作

【面试篇】前端点滴（css/css3）相关推荐

第五十一篇前端之CSS内容
心得:哪里有什么心得,在我这个年纪真的睡不着觉,知道什么是觉醒吗?不后悔自己踏出的每一步. 一.什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显 ...
【理论面试篇】收集整理来自网络上的一些常见的经典前端、H5面试题 Web前端开发面试题...
##2017.10.30收集面试技巧 5.1 面试形式 1) 一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2) 面试官喜欢什么样的人 ü 技术好. ...
2018前端开发面试备忘录（1年以上经验初中级别前端开发）-面试篇
2018前端开发面试备忘录-面试篇 -面试篇 -简历篇 -跳槽选择篇 18年过年之前离职了,在家闲着也没事就去面试了下,试试水. 2018前端开发面试备忘录,主要是查漏补缺,我自己的面试作答,后面会在 ...
02前端入门HTML5 +CSS3+电商网页制作：CSS
02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...
前端自学 - CSS总结篇（一）
CSS 总结一.CSS 的简介二.CSS 的引入 (一)行内样式 (二)内联样式 (三)外联文件三.CSS 语法四.选择器 (一)选择器命名规范 (二)基本选择器 1. 元素选择器 2. ...
前端 | （十一）CSS3简介及基本语法（上） | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
【前端】HTML5+CSS3 CSS浮动（四)
文章目录 [前端]HTML5+CSS3 CSS浮动(四) 1.浮动的简介 2.浮动的特点 3.脱离文档流的特点 4.页面简单布局 5.实战小练习 [前端]HTML5+CSS3 CSS浮动(四) 1.浮 ...
CSS基础篇--CSS/CSS3中的原生变量var详解
使用语法首先我们先来看一个例子: html代码: <div class="element">这是一段文字</div> css代码: .element {w ...
送给前端的你，推荐几篇前端汇总文章。(来自知乎专栏)
送给前端的你,推荐几篇前端汇总文章.(来自知乎专栏) 来源:https://zhuanlan.zhihu.com/p/22229868 作者:路人甲链接:https://zhuanlan.zhihu ...

【面试篇】前端点滴（css/css3）

【面试篇】前端点滴（CSS/CSS3）---倾尽所有

面试小问答

css基础

css盒模型

css选择器

BFC

css（float）

css（position/z-index）

css（display，opacity，visiblity）

css（text）

css（link）

css单位

css布局，编写题

css3

css优化

css扩展

【面试篇】前端点滴（css/css3）相关推荐

最新文章

热门文章