前端面试——CSS相关

css 盒子模型

w3c盒模型：width不包含border和padding

IE盒模型：width包含border和padding

能够经过css去设置盒模型，经过box-sizing去设置，content-box为w3c盒模型，border-box为IE盒模型。

css position？

static: 默认值，位于文档流之中，正常布局

relative：位于文档流之中，可使用top和left等属性，使其相对于原位置进行偏移

absolute：绝对定位，元素脱离文档流，相对于其包含块定位（第一个非static值的父元素）

fixed：与absolute相似，不过其包含块为页面（相对于浏览器界面进行定位）。

inherit：从父元素那继承position属性

sticky：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

css 居中有几种方法？

1) 如果行内元素, 给其父元素设置 text-align:center,便可实现行内元素水平居中.

2) 如果块级元素, 该元素设置 margin:0 auto便可.

3) 若元素是单行文本, 则可设置 line-height 等于父元素高度

4) 使用flex实现居中, 子元素设置以下:

.father{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
复制代码

5）使用CSS3中新增的transform属性, 子元素设置以下:

son{ 
    position:absolute; 
    left:50%; 
    top:50%
    transform:translate(-50%,-50%); 
} 复制代码

6) 使用绝对定位方式, 以及负值的margin-left, 子元素设置以下:

.son{ 
    position:absolute; 
    width:固定; 
    left:50%; 
    top:50%;
    margin-left:-0.5宽度; 
    margin-top:-0.5宽带;
} 复制代码

CSS的权重，结合实例具体分析

!important > 行内样式>ID选择器 > 类选择器/属性/伪类 > 标签 > 通配符 > 继承 > 浏览器默认属性

!important :无穷

Style:1000

id:0100

Class/伪类:0010

标签:0001

通配符：0000

若是设置background-color: red，那么盒子模型各个部分的背景是什么状况？

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。若是边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

px、em、rem、vw的区别

vw：视窗宽度的百分比（1vw 表明视窗的宽度为 1%）

vh：视窗高度的百分比

vmin：当前 vw 和 vh 中较小的一个值

vmax：当前 vw 和 vh 中较大的一个值

Rem: 大小继承根元素的大小；

Em：继承父元素对的大小； 

在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例？

兄弟元素合并：当一个元素出如今另外一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

父子间合并：当一个元素包含在另外一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

空元素：假设有一个空元素，它有外边距，可是没有边框或填充。在这种状况下，上外边距与下外边距就碰到了一块儿，它们会发生合并。

如何合并：

一、两个相邻的外边距都是正数时，合并结果是它们二者之间较大的值。

二、两个相邻的外边距都是负数时，合并结果是二者绝对值的较大值。

三、两个外边距一正一负时，合并结果是二者的相加的和。

解决办法：

一、对于兄弟元素：设置浮动，display：inline-block或使其父元素均造成BFC可防止边距合并（如overflow:hidden）

二、对于父子间的元素：能够给父元素设置border或padding属性来防止合并。

三、对于空元素：设置border或padding属性或overflow：hidden等（造成BFC）来防止合并。

单行文本溢出加 ... 如何实现？

text-overflow: ellipsis;

BFC 是什么？如何生成 BFC？BFC 有什么做用？举例说明。

BFC即块状格式化上下文，BFC 是一个独立的布局环境,能够理解为一个容器,在这个容器中按照必定规则进行物品摆放,而且不会影响其它环境中的盒子。若是一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

建立BFC的方法：

一、浮动元素 (元素的 float 不是 none)

二、绝对定位元素 (元素具备 position 为 absolute 或 fixed)

三、内联块 (元素具备 display: inline-block)

四、表格单元格 (元素具备 display: table-cell，HTML表格单元格默认属性)

五、表格标题 (元素具备 display: table-caption, HTML表格标题默认属性)

六、具备overflow 且值不是 visible 的块元素

七、弹性盒（flex或inline-flex）

BFC的约束规则：

一、内部的盒会在垂直方向一个接一个排列（能够看做BFC中有一个的常规流）

二、处于同一个BFC中的元素相互影响，可能会发生外边距重叠

三、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

四、计算BFC的高度时，考虑BFC所包含的全部元素，连浮动元素也参与计算

五、浮动盒区域不叠加到BFC上

BFC能够解决的问题：

一、垂直外边距重叠问题

二、去除浮动

三、自适用两列布局（float + overflow） 

伪元素清除浮动

方法一：使用带clear属性的空元素

.clear{clear:both;}

优势：简单，代码少，浏览器兼容性好。

缺点：须要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

方法二：使用CSS的overflow属性

overflow:hidden;

overflow:auto;

方法三：使用CSS的:after伪元素

结合 :after 伪元素（注意这不是伪类，而是伪元素，表明一个元素以后最近的元素）和 IEhack ，能够完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，而后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.clearfix :before, clear :after{
	content: " ";
	display:table;
}
.clearfix:after{
	clear:both;

//触发BFC，BFC能够清除浮动
}
.clearfix {
	zoom:1;
//触发haslayout，这个属性只有2个值，true表明有本身的布局，false表明继承至父元素
}复制代码

Z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素老是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）

LESS和SASS相对CSS有什么优点

LESS

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 

如何实现左侧宽度固定，右侧宽度自适应的布局

利用float + margin实现 

.box { 
height: 200px; 
} 
.box > div { 
  height: 100%; 
} 
.box-left { 
  width: 200px; 
  float: left; 
  background-color: blue; 
} 
.box-right { 
  margin-left: 200px; 
  background-color: red; 
} 复制代码

利用calc计算宽度 

.box { 
height: 200px; 
} 
.box > div { 
  height: 100%; 
} 
.box-left { 
  width: 200px; 
  float: left; 
  background-color: blue; 
} 
.box-right { 
  width: calc(100% - 200px); 
  float: right; 
  background-color: red; 
} 复制代码

利用float + overflow实现 

.box { 
height: 200px; 
} 

.box > div { 
  height: 100%; 
} 
.box-left { 
  width: 200px; 
  float: left; 
  background-color: blue; 
} 
.box-right { 
  overflow: hidden; 
  background-color: red; 
} 复制代码

利用flex实现 

.box { 
  height: 200px; 
  display: flex; 
} 
.box > div { 
  height: 100%; 
} 
.box-left { 
  width: 200px; 
  background-color: blue; 
} 
.box-right { 
  flex: 1; // 设置flex-grow属性为1，默认为0 
  overflow: hidden; 
  background-color: red; 
} 

复制代码

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

1. display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）

2. visibility: hidden（占据空间，不能点击）（场景：显示不会致使页面结构发生变更，不会撑开）

3. opacity: 0（占据空间，能够点击）（场景：能够跟transition搭配）

fixed定位是什么意思，父级标签设置什么可让子标签fixed定位失效？

答案：transform

伪类和伪元素的区别：

一、伪类的操做对象是文档树中已有的元素，而伪元素则建立了一个文档数外的元素；

二、CSS3规范中要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类。

tramsform 和translate 以及animation

translate:移动，transform的一个方法

transform:变形。改变

transition: 容许CSS属性值在必定的时间区间内平滑的过渡，（过渡动画）

与transition不一样的是：

1. Animation能够经过keyframe显示控制当前帧的属性值，而 transition只能隐式来进行（不能指定每帧的属性值），因此相对 而言Animation的功能更加灵活。

2. Animation经过模拟属性值改变来实现动画，动画结束以后元素的属性没有变化；而Transiton确实改变了元素的属性值，动画结束以后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别。

translate和top/left的比较

translate是transform的一个方法，top、left是基于父元素的： translate的参数：left（x 坐标） 和 top（y 坐标） 位置参数 ， 若是是百分比，会以自己的长宽作参考top/left是布局类的样式，

top/left是布局类样式 这个样式的变化会致使重排（reflow/relayout），所谓重排即指对这些节点以及受这些节点影响的其它节点，进行CSS计算->布局->重绘过程，这个过程的前2步是消耗大量资源的

translate变化会致使重绘（repaint），即在屏幕上从新画一下，不会进行CSS计算和布局这2个性能大户，因此认为translate性能上要明显好于top/left。

translate3D由于走的是3D，因此能获得更完整的GPU加速的支持，在GPU中还有贴图缓存等手段帮你优化性能，因此更快。

viewport

• width: 设置viewport宽度，为一个正整数，或字符串 device-width

• device-width: 设备宽度

• height: 设置viewport高度，通常设置了宽度，会自动解析出高度，能够不用设置

• initial-scale: 默认缩放比例（初始缩放比例），为一个数字，能够带小数

• minimum-scale: 容许用户最小缩放比例，为一个数字，能够带小数

• maximum-scale: 容许用户最大缩放比例，为一个数字，能够带小数

• user-scalable: 是否容许手动缩放

延伸提问：怎样处理 移动端 1px 被渲染成 2px 问题？

一、局部处理

meta 标签中的 viewport 属性 ，initial-scale 设置为 1

rem 按照设计稿标准走，外加利用 transfrome 的 scale(0.5) 缩小一倍便可；

二、全局处理

meta 标签中的 viewport 属性 ，initial-scale 设置为 0.5

rem 按照设计稿标准走便可

谈谈CSS中link和@import的区别是

1）link属于HTML标签，而@import是CSS提供的； 2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载； 3）import只在IE5以上才能识别，而link是HTML标签，无兼容问题；

4）link方式的样式权重高于@import的权重。

CSS三角形绘制

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}复制代码

scoped 的缺陷。

若是你子组件的根元素上有一个类已经在这个父组件中定义过了，那么这个父组件的样式就会泄露到子组件中 咱们在父元素中定义wrapper类边框为蓝色，在子组件中定义同一个名字的类wrapper类边框为橙色，结果会致使子组件中既有父元素的蓝色边框又有本身的橙色边框。

所以，咱们要避免在父组件中书写和子组件同名的css类。

CSS文件没下载完会影响DOM树吗？

一、css是由单独的下载线程异步下载的。

二、css加载不会阻塞DOM树解析（异步加载时DOM照常构建）

三、但会阻塞render树渲染（渲染时需等css加载完毕，由于render树须要css信息）

IFC

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，在常规流中横着排列。

行级盒子高度是由font-size决定的 宽度等于其子行级盒子的外宽度，可是当行盒的宽度大于父宽度时会被拆分为多个行盒。

如何计算行级盒子的高度：

一、位于该行上的全部in-flow的inline-level box均参与该行line box高度的计算;

二、各inline-level box根据vertical-align属性值相对各自的父容器做垂直方向对齐;

三、最上方的box的上边界到最下方的下边界则是line box的高度。

IFC的规则

一、盒子是水平一个接一个的排列，水平的margin，内边距，边框是能够有的。

二、垂直方向的对齐，多是底部对齐，顶部对齐，也多是基线对齐（这个是默认的）；

三、行框中的内联盒子的高度小于行框的高度时，内联盒子的垂直方向的对齐方式取决于vertical-align属性

四、当一个行框水平不能容纳内联盒子时，他们将会在垂直方向上产生多个行框，他们上下一个挨着一个，可是不会重叠

五、通常来讲，行框的左边界紧挨着包含容器的左边界，行框的右边界紧挨着包含容器的右边界。

六、多个内联盒子的宽度小于包含他们的行框时，他们在水平方向的分布取决于text-align属性（默认是left）

介绍flex布局，说说align-items和align-content的区别

align-items属性适用于全部的flex容器，它是用来设置每一个flex元素在侧轴上的默认对齐方式。 align-items和align-content有相同的功能，不过不一样点是它是用来让每个单行的容器居中而不是让整个容器居中。 align-content属性只适用于多行的flex容器，而且当侧轴上有多余空间使flex容器内的flex线对齐。

position, display, float一块儿设置，会怎么样

当display: none，position和float无做用;

当position: absolute或 fixed,float为none。

图片预加载和懒加载

懒加载

场景：

对于图片过多的页面，为了加快页面加载速度，须要将页面内未出现的可视区域内的图片先不作加载，等到滚动可视区域后再去加载。

原理：

img标签的src属性用来表示图片的URL，当这个属性值不为空时，浏览器就会根据这个值发送请求，若是没有src属性就不会发送请求。因此，在页面加入时将img标签的src指向为空或者指向一个小图片（loading或者缺省图），将真实地址存在一个自定义属性data-src中，当页面滚动时，将可视区域的图片的src值赋为真实的值。

预加载

场景：

图鼠标移入一张图片时，换成另外一张图片，移出时换回原来的图片，正常作法是，鼠标移入的时候，改变图片的src，但这时就要去加载图片了，会等待一段时间，这样体验很差。预加载的作法是，在页面加载完，鼠标移入以前就经过Image对象把图片加载进缓存了，这样鼠标移入的时候直接从缓存里读取了，速度很快，解决此问题的方案就是实现图片预加载。

原理：

事先把网页的图片记载到本地，以后就直接到缓存中拿图片 实现方法通常有三种：

1）、使用CSS进行图片预加载

原理：将须要加载的图片做为标签的背景图预先加载出来，可是不显示在可视区域内 缺点：加载的图片会同页面的其余内容一块儿加载，增长了页面的总体加载时间

2）、使用CSS+JS进行图片预加载

为了解决上述问题，能够增长一些JS代码来推迟加载的时间，直到页面加载完毕

3）、使用Ajax实现预加载

使用Ajax方法实现预加载，不只仅是针对图片的预加载，还会预加载CSS、JS等相关的东西

雪碧图怎么操做的

background-position的值（默认为（0，0），也就是图片的左上角）

可继承的样式

可继承的样式： font-size, font-family, color, text-indent;

不可继承的样式：border, padding, margin, width, height ;

说一下圣杯和双飞翼布局？

转自文档：juejin.im/post/5caf40…

圣杯布局

1. 设置left、middle、right三个盒子

2. 设置float: left, 脱离文档流；

3. 给container设置overflow: hidden; 能够造成BFC撑开文档

4. left、right设置上各自的宽度

5. middle设置width: 100%;

6. 给left、middle、right设置position: relative;

7. left设置 left: -leftWidth, right设置 right: -rightWidth;

8. container设置padding: 0, rightWidth, 0, leftWidth；

双飞翼

1. 首先把left、middle、right都放出来, middle中增长inner

2. 给它们三个设置上float: left, 脱离文档流；

3. 必定记得给container设置上overflow: hidden; 能够造成BFC撑开文档

4. left、right设置上各自的宽度

5. middle设置width: 100%;

6. left设置 margin-left: -100%, right设置 right: -rightWidth;

7. container设置padding: 0, rightWidth, 0, leftWidth;

如何解决float属性引发的父元素塌陷问题？

给父元素设置 overflow: hidden属性
给父元素添加一个高度
经过伪类，给这个伪类添加 clear: both 和 display: block