必看：104道 CSS 面试题，助你查漏补缺blog.51cto.com/u_15315508/…

div+css布局有什么优点？

可以实现HTML结构和css的表现分离，这样使HTML文档更加精简、清晰、可读性高，加载速度也会更快。
想要使HTML文档拥有不同的呈现，实现会更方便，因为我们只需要引入不同的css文档就可以了。这样提高了，我们整个文档的可复用性和设计的灵活性。
浏览器会缓存静态文件，比如说可以缓存css文件，这样有助于提高网站的性能和seo的评估
因为实现了结构和表现分离，所以整个代码再上线后可维护性会更好

盒模型宽度offsetWidth包括？

offsetWidth = （内容+padding+边框）

first-child与first-of-type的区别

A>B : first-child ：父元素下的第一个子元素为A标签的第一个孩子（first-child）B设置样式，若A标签的第一个孩子是B标签，则设置成功，否则（A的第一个孩子不是B），则失败，即该CSS失效

A > B:first-of-type：父元素下的某个类型的第一个子元素为A标签的孩子们中，第一个为B标签（B标签是A的孩子，但不一定是A的第一个孩子）设置样式，若A标签的孩子中有B标签，则设置成功，否则（A的孩子中没有B标签），则失败，即改CSS不生效

不同之处： first-child强调的是父元素中的第一个元素，并不关心其类型；first-of-type强调的是①必须为子元素②必须是某个类型③第一个

vertical-align：

两个元素都是行盒或者行内块的时候可以利用它去将两个元素调成一条线

例如：vertical-align：2px

margin

margin负值问题

margin-top和margin-left负值，元素向上、向左移动

margin-right负值，右侧元素左移，自身不受影响

margin-bottom负值，下方元素上移，自身不受影响

margin纵向重叠问题

答案

说说z-index有什么需要注意的地方，z-index: 0 和z-index：1的区别，z-index为0和1哪个元素在上面？

overflow

overflow-x:auto无效

子元素用了浮动
父元素自动换行了
父元素不能使用flex布局
父元素没有添加：white-space: nowrap

overflow：hidden作用

超出变宽部分隐藏
清除浮动
解决外边距塌陷问题

答案：

实操手写

两栏布局

blog.csdn.net/weixin_4416…

www.bilibili.com/video/BV1A8…

三栏布局

blog.csdn.net/weixin_3831…

www.bilibili.com/video/BV1A8…

手写clearfix清除浮动

圣杯布局

双飞翼布局

画骰子-三点

实现一个宽高自适应的正方形

/*1.第一种方式是利用vw来实现*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: "";
  display: block;
  margin-top: 100%;
}

link.zhihu.com/?target=htt…

画一个三角形

用边框画（border）,例如：
{
    width: 0;
    height: 0;

    border-left:100px solid transparent;
    border-right:100px solid transparent;
    border-top:100px solid transparent;
    border-bottom:100px solid #ccc;
}
/*三角形的实现原理是利用了元素边框连接处的等分原理。*/
.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomatotransparenttransparenttransparent;
}

一个自适应矩形，水平垂直居中，且宽高比为 2:1

/*实现原理参考自适应正方形和水平居中方式*/
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;

  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}

什么是优雅降级和渐进增强

渐进增强：在网页开发中，渐进增强认为应该专注于内容本身，一开始针对低版本的浏览器构建页面，满足最基础功能后，再针对高级浏览器进行效果交互，追加各种功能以达到更好的用户体验；即以最低的要求实现最基本的功能，向上兼容

优雅降级：指一开始针对高版本/高级浏览器进行页面构建，先完善所有功能后，再针对各个不同的浏览器进行测试，修复，保证低版本浏览器也有进本功能；即以高要求，高版本浏览器为准，向下兼容

文字超出省略

单行文本溢出显示省略号

overflow: hidden;（文字长度超出限定宽度，则隐藏超出的内容）

white-space: nowrap;（设置文字在一行显示，不能换行）

text-overflow: ellipsis;（规定当文本溢出时，显示省略符号来代表被修剪的文本）

多行文本溢出显示省略号

-webkit-line-clamp: 2;（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）

display: -webkit-box;（和 1 结合使用，将对象作为弹性伸缩盒子模型显示）

-webkit-box-orient: vertical;（和 1 结合使用，设置或检索伸缩盒对象的子元素的排列方式）

overflow: hidden;（文本溢出限定的宽度就隐藏内容）

text-overflow: ellipsis;（多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

px、%、em、rem、vw、vh有什么区别？

px是基本单位，绝对单位，其他都是相对单位

%是相对于父元素的宽度比例

em是相对于自己的font-size，如果自己没设置就会继承父元素的font-size

场景：给文字设置首行缩进text-indent：2em

rem是相对于根结点（html）的font-size

vw是屏幕宽度的1%

vh是屏幕高度的1%

vmin两者的最小值

vmax是两者的最大值

meta标签的作用

标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器搜索引擎（关键词）或其他 web 服务。

供机器解读的，告诉机器该如何解析这个页面
设置utf-8解决乱码问题

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

禁止百度的自动转码

<meta http-equiv="Cache-Control" content="no-siteapp" />

seo：设置页面的关键词、描述内容、作者

viewport 移动端页面布局的，例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport视口

width=device-width 视口宽度等于设备宽度

initial-scale=1.0 （在初始化的时候）设置视口宽度能否缩放 1.0不能缩放

maximum-scale=1.0 允许视口缩放的最大倍率 1.0不缩放

user-scalable=0 是否允许用户手动缩放 0不能

做移动端的一些限制

当有http-equiv或name属性的时候，一定要有content属性对其进行说明。

详见：blog.csdn.net/yc123h/arti…

如何用css实现两栏布局（左边栏固定宽，右边栏自适应）

方法一：float:left + margin-left

左边div：设置宽度、float:left

右边div：margin-left = 左边div的宽度

方法二：float:left + overflow:hidden

左边div：设置宽度、float:left

右边div：overflow:hidden

给要自适应的盒子加overflow：hidden；会触发块级格式化上下文（BFC），利用了BFC 不会重叠浮动元素的特点。

方法三：position: absolute + margin-left

左边div：设置宽度、position: absolute

右边div：margin-left = 左边div的宽度

方法四：flex

父div：display：flex

左边div：设置宽度

右边div：margin-left = 左边div的宽度

CSS 选择符有哪些？

（1）id选择器（#myid）

（2）类选择器（.myclassname）

（3）标签选择器（div,h1,p）

（4）后代选择器（h1p）

（5）相邻后代选择器（子）选择器（ul>li）

（6）兄弟选择器（li~a）

（7）相邻兄弟选择器（li+a）

（8）属性选择器（a[rel="external"]）

（9）伪类选择器（a:hover,li:nth-child）

（10）伪元素选择器（::before、::after）

（11）通配符选择器（*）

css的优先级（选择器）

!important

内联样式

ID 选择器（#id{}）

类选择器（.class{}） = 属性选择器（a[href="segmentfault.com"]{}） = 伪类选择器（ :hover{}）

标签选择器（span{}） = 伪元素选择器（ ::before{}）= 后代选择器（.father .child{}）

子选择器（.father > .child{}） = 相邻选择器（ .bro1 + .bro2{}）

通配符选择器（*{}） ...

权值：标识当前选择器的重要程度，权值越大，优先级越高

!important >1000

内联样式 1000

id选择器 100

类选择器 10

元素选择器 1

*通用选择器 0

继承的样式无

权值的特点

1.当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加，然后比较，权值大的优先显示

2.权值相同，就近原则

3.群组选择器的权值，单独各算各的，不能相加

4.样式后面追加！important直接获取最高优先级

内联样式不能加！important

5.选择器的权值计算，结果不会超过自己的最大数量级

important的缺点

使用!important对于性能并没有什么负面影响。但是从可维护性角度考虑还是少用这个规则

伪类选择器

a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；

a标签，没有访问的状态a: link

a标签，被访问过的状态a:visited

:hover 鼠标悬停在元素上时，元素的样式

:active匹配元素被激活时的状态

:focus匹配元素获取焦点时的状态

注意：多个伪类选择器作用在同一个元素上时

必须按照一定的顺序编写，不然会冲突

link visited hover active

当链接未访问过时：

（1）当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪

类后面声明；

（2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），

必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。当链接访问过时，情况基本同上，只不过需要将:link换成:visited。这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

CSS3新增伪类：

（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数

值，也可以接受函数。

（2）elem:nth-last-child(n)作用同上，不过是从后开始查找。

（3）elem:last-child选中最后一个子元素。

（4）elem:only-child如果elem是父元素下唯一的子元素，则选中之。

（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。

（6）elem:first-of-type选中父元素下第一个elem类型元素。

（7）elem:last-of-type选中父元素下最后一个elem类型元素。

（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。

（9）elem:empty选中不包含子元素和内容的elem类型元素。

（10）elem:target选择当前活动的elem元素。

（11）:not(elem)选择非elem元素的每个元素。

（12）:enabled 控制表单控件的禁用状态。

（13）:disabled 控制表单控件的禁用状态。

(14) :checked单选框或复选框被选中。

伪元素VS伪类：

作用：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

CSS3尝试区分伪类和伪元素，伪元素使用了两个冒号（::），伪类使用了一个冒号（:）

由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

伪元素

伪元素一般匹配的特殊的位置，比如after、before等。

想让插入的内容出现在其它内容前，使用::before，否者，使用::after；

在代码顺序上，::after生成的内容也比::before生成的内容靠后。

如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

深度选择器 >>> /deep/ ::v-deep

样式穿透，用于局部修改UI组件库的默认样式

区别：

只作用于css，在less和sass中无法识别。

Vue3之前用/deep/

Vue3之后用::v-deep

CSS 中哪些属性可以继承？

有继承性的属性：

（1）字体系列属性

font、font-family、font-weight、font-size、font-style（字体样式：是否倾斜）、font-variant（设置小型大写字母的字体显示文本）

（2）文本系列属性

text-indent（首行文本的缩进）、text-align、text-shadow、line-height、word-spacing（英文单词与单词之间的间距，对中文无效）、letter-spacing（制定字母与字母之间的间距，对中文有效）、

text-transform(定义字母大小写规则）、direction（文字书写方向：右到左）、color

（3）表格布局属性

caption-sideborder-collapseempty-cells

（4）列表属性

list-style-type、list-style-image、list-style-position、list-style

（5）光标属性

cursor

（6）元素可见性

visibility

当一个属性不是继承属性时，可以使用inherit关键字指定一个属性应从父元素继承它的值，inherit关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。

line-height如何继承

答案是40px，20px*200%=40px，p标签继承了40px的行高

1.如果写的是具体数值，如30px，则继承这个值

2.如果写的是比例2或者1.5，就继承这个比例。。当前元素的行高就是2或者1.5*当前元素的font-size

3.写百分比，200%，则继承计算出来的值

常见的元素隐藏方式？

-（1）使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

-（2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。

-（3）使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

-（4）通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

-（5）通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。

-（6）通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

-（7）通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

link.zhihu.com/?target=htt…

visibility: hidden 和 display: none 的区别

一、隐藏元素

元素设置为 display: none; 时，元素隐藏，元素在结构中不占据位置。

元素设置为 visibility: hidden; 时，元素隐藏，元素在结构中依旧占据位置。

二、对子元素的影响

父元素设置为 display: none; 时，子元素设置 display: block; 无效。

父元素设置为 visibility: hidden; 时，子元素设置 visibility: visible; 元素再次显示。

BFC——块级格式化上下文

内部的元素无论如何改动，都不会影响其他元素的位置

触发BFC的条件

根节点
float：left/right
overflow：auto/scroll/hidden
display：inline-block/table/table-row/table-cell
display：flex/grid的直接子元素
position：absolute/fixed

BFC的作用：

清除浮动，解决塌陷问题

margin重叠

IFC 是什么

IFC指的是行级格式化上下文，它有这样的一些布局规则：

（1）行级上下文内部的盒子会在水平方向，一个接一个地放置。

（2）当一行不够的时候会自动切换到下一行。

（3）行级上下文的高度由内部最高的内联盒子的高度决定。

GFC（GrideLayout formatting contexts）：

网格布局格式化上下文。当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。

FFC（Flex formatting contexts）：

自适应格式上下文。display值为flex或者inline-flex的元素将会生成自适应容器。

网页视口尺寸

Clientheight 可兰嗨特

响应式布局有几种方式？

媒体查询
百分比

百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕

包含块：

1. 有父元素相对于父元素

2. 无父元素相对于视口

3. 或者继承于父元素

vw/vh

vw/vh是视口单位，即根据浏览器的窗口大小进行适配

rem（font size of the root element）是指相对于根元素的字体大小的单位，rem只是一个相对单位

rem弊端是阶梯型的

rem和em的区别及原理

em是参照父元素字体的大小，rem是参照根目录HTML字体大小。

rem布局实际上就是实现等比缩放

移动端适配

前端视频的方法：百分比、em、rem、媒体查询、flex布局、vw、vh

适配方法：

只有移动端设备，需要设置视口

viewport视口

width=device-width 视口宽度等于设备宽度

initial-scale=1.0 （在初始化的时候）设置视口宽度能否缩放 1.0不能缩放

maximum-scale=1.0 允许视口缩放的最大倍率 1.0不缩放

user-scalable=0 是否允许用户手动缩放 0不能

响应式布局@media（咪迪尔）实现一套html配合多套css实现适配

通过rem或者vw，vh等实现不同的设备有相同的比例进而实现适配

设置html的font-size为视口宽度的十分之一，1rem=视口宽度的十分之一（750的话就是75）

下载vs code的px to rem 插件

输入px，可以选择转好的rem

设置成插件默认的rem值，创建cssrem文件

使用rem的弊端：

如果发现某个元素明显宽度不对，但是我们无法从rem的值来判断是否正确

一般会保留px源码，同时通过第三方工具动态监听转换，比如gulp

直接写rem计算很复杂。。

同时采用媒体监听和rem等比适配

使用postcss-px-to-viewport库

使用这个库，代码只许写px，会自动转化成vw

创建postcss.config.js文件

根据设计稿宽度配置viewport宽度

vant-ui也是推荐使用

postcss-px-to-viewport这个库缺点：

不支持PostCSS8（支持PostCSS7），

不能动态设置宽（750,375）。

字体默认不转换，保持px。如果需要转换字体大小需要把配置那删除fontsize

如果想要动态设置宽度。需要使用postcss-px2vp库

使用postcss-pxtorem库

用于将 px 单位转化为 rem 单位

lib-flexible 用于设置 rem 基准值
需要安装postcss-pxtorem和amfe-flexible库
字体默认不转rem

移动端0.5px边框

方案1：直接设置0.5px边框

（兼容性很差，不推荐）

方案2：伪元素 transform

给容器内设置伪元素，设置绝对定位，宽、高是200%，圆角2倍，边框是1px，然后使用transform: scale(0.5) 让伪元素缩小原来的一半，这时候伪元素的边框和容器的边缘重合，视觉上宽度只有0.5px。这种方法兼容性最好，4个边框都能一次性设置，能正常展示圆角，推荐使用。

方案3：伪元素，设置绝对定位，高度为1px

给容器设置伪元素，设置绝对定位，高度为1px，背景图为线性渐变，一半有颜色，一半透明。视觉上宽度只有0.5px。这种方法适合设置一条边框，没法展示圆角。

方案4: box-shadow

用阴影代替边框，设置阴影box-shadow: 0 0 0 0.5px red; 使用方便，能正常展示圆角，兼容性一般。

移动端适配安全区域

媒体查询

=1200px xl

1200~992 lg

991~768 md

767~576 sm

<576 xs

@media screen and (min-width:992px){大于992

#content{color:#f00;background:#000;}

}

@media screen and (min-width:768px) and (max-width:991px) {大于7768，小于等于991

#content{color:#ff0;background:#f00;}

}

@media screen and (max-width:767px){小于等于767px

#content{color:#000;background:#0ff;}

}

HTML中默认的block inline inline-block元素有哪些？

block： div、p、h1-h5、form、hr、header等语义化标签

inline：span、a、b、img

inline-block： input、button

flex布局display:flex

子元素属性

flex-shrink:0; // 子元素宽度不缩小

position的属性（细化，讲清作用的对象）

1、static：（si1da1dei1）默认值

2、relative：相对定位。在使用top或者left进行位置移动的时候，参考的位置是自己原先（没有定位时）所在的位置。在文档（页面）中占位置。

3、absolute：绝对定位。在没有父元素（直接书写在body下面），或者有父元素，但是父元素没有设置position的值，就是没有定位时（static属性称无定位）在进行top或者left等偏移位置时，参考的偏移位置为浏览器，就是页面的左上角为top = 0，left =0 的位置。在网上为top负值。再往左为left负值。在使用偏移量的时候，相反，right = 0 ，bottom = 0时为页面可视窗口的右下角。但是当top偏移过后，距离可视页面底部的值，大于bottom偏移量的值得时候，bottom的偏移量是无效的。其他等同。在文档中不占位置。

4、fixed：固定定位。固定在当前可视窗口，不管页面怎么上下，左右滑动，固定在窗口，都不会进行移动。脱离文档流，当与其他位置的元素发生重叠是，一直在其他元素上方。

5、sticky：粘性定位，即当元素在页面中，网页向上滑动，页面顶部与元素刚开始想重叠是，就可以设置吸顶效果，随后就像固定定位一定定位在页面顶部。为c3新增加的属性。兼容性不好

absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？

（1）内联元素也可以作为“包含块”所在的元素；

（2）“包含块”所在的元素不是父块级元素，而是最近的position不为static的祖先元素或根元素；

（3）边界是paddingbox而不是contentbox。

重绘和回流（重排）

1、html被html解析器解析成DOM树
2、css被css解析器解析成CSS规则树
3、将HTML和CSS合成render树
4、生成布局(flow),即将所有渲染树的所有节点进行平面合成
5、将布局绘制(repaint)到屏幕上

重绘(repaint)：当元素样式的改变不影响页面布局时，浏览器将对元素进行的更新，称之为重绘
回流(reflow)：也叫做重排。当元素的尺寸或者位置发生了变化，就需要重新计算渲染树，这就是回流，比如元素的宽高、位置，浏览器会重新渲染页面，称为回流，又叫重排（layout）。
关系：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。
如何减少回流和重绘？
使用class类名来控制样式的改变;
对于复杂的动画效果可以使其脱离文档流;
免循环操作DOM/避免循环读取offsetLeft等属性

网页重绘repaint和重排reflow有什么区别

动态网页，随时都会重绘、重排，比如网页动画、dialog弹窗、增加/删除一个元素，显示/隐藏一个元素

重绘：

元素外观改变，如颜色、背景色

但元素的尺寸、定位不变，不会影响其他元素的位置

重排：

重新计算尺寸和布局，可能会影响其他元素的位置，如元素高度增加，可能会使相邻元素位置下移

区别：

重排比重绘要影响更大，消耗也更大

所以，要尽量避免无意义的重排

减少重排的方法：

方法一：

集中修改样式，或直接切换css class

修改之前先设置display：none，脱离文档流

使用BFC特性，不影响其他元素位置

方法二：

频繁触发（resize scroll）使用节流和防抖

使用createDocumentFragment批量操作DOM

优化动画，使用CSS3和requestAnimationFrame

Less和sass的区别？你在项目中用到的哪些sass的方法，怎么用的？

编译环境不同

less是通过js编译是在客户端处理 sass同通过ruby 是在服务器端处理

编写变量的方式不同。（变量符不一样）

Sass使用$，而Less使用@。

在Less中，仅允许循环数值。

在Sass中，我们可以遍历任何类型的数据，支持条件语句，可以使用if{}else{},for{}循环等等。但在Less中，我们只能使用递归函数循环数值。

Sass有Compass，Less有Preboot

Sass和LESS有可用于集成mixins的扩展（在整个站点中存储和共享CSS声明的能力）。

Sass有适用于mixins的Compass，其中包括所有可用的选项以及未来支持的更新。

LESS有Preboot.less，LESS Mixins，LESS Elements，gs和Frameless。LESS的软件支持比Sass更加分散，导致许多不同的扩展选项可能不会以相同的方式运行。对于项目，我们可能需要所有列出的扩展以获得与Compass类似的性能。

less没有输出设置，sass提供4种输出选项：nested, compact, compressed ,expanded。

输出样式的风格可以有四种选择，默认为nested

nested：嵌套缩进的css代码

expanded：展开的多行css代码

compact：简洁格式的css代码

compressed：压缩后的css代码

Sass和Less的工具库不同

Sass有工具库Compass, 简单说，Sass和Compass的关系类似于像Javascript和jQuery的关系,Compass在Sass的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。

CSS3 有哪些新特性？

新增各种CSS选择器（:not(.input)：所有class不是“input”的节点）

圆角（border-radius:8px）

多列布局（multi-columnlayout）

阴影和反射（Shadow\Reflect）

文字特效（text-shadow）

文字渲染（Text-decoration）

线性渐变（gradient）

旋转（transform）

缩放，定位，倾斜，动画，多背景

例如：transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:

flex布局

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为Flex

项目（flexitem），简称"项目"。

容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis），项目默认沿主轴排列。

以下6个属性设置在容器上。

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上。

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow默认值为0，属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink默认值为1，属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。——flex中的剩余空间的大小（auto 默认值：长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。如果设置了值，会覆盖元素的width ）

它的初始值是 auto，此时浏览器会检查元素是否设置了 width 属性值。如果有，则使用 width 的值作为 flex-basis 的值；如果没有，则用元素内容自身的大小。如果 flex-basis 的值不是 auto，width 属性会被忽略。

flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为01auto。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父

元素的align-items属性，如果没有父元素，则等同于stretch。

flex：1

flex: 1; 等同于 flex: 1 1 0%; 代表均匀分配元素

flex: 1 实际上是三个属性的缩写：flex-grow: 1; flex-shrink: 1 flex-basis: auto;

默认情况下 flex 等于 flex 0 1 auto

子元素全部设置flex：1的话。代表所有子元素平分宽度

flex布局中flex:1和flex:auto的区别

从上面可以看到flex:auto和flex:1的区别只在于flex-basis这个属性，auto表示基准值(也就是设置的width)，0%表示0无尺寸

flex:none;   // flex : 0,0,auto; 按子元素设置的比例来，不放大不缩小，溢出也不管，空着一块也不管
flex:auto;  // flex:1,1,auto;
flex:1;    //  flex:1,1,0%;

尺寸不足时：

在flex:1 时在尺寸不足时会优先最小化尺寸，flex:auto在尺寸不足时优先最大化内容尺寸。

效果如下所示：

flex：1 的尺寸是较长的尺寸优先牺牲自己的尺寸，而flex:auto 中是较长的尺寸优先扩展自己的尺寸。

所以，flex:1 更适合在等比例列表时使用，flex：auto适用于元素充分利用剩余空间，比如头部导航文字多少不一致时使用

尺寸过多时：

在flex:1 时会平分全部尺寸，flex:auto会平分剩余尺寸。

常规盒子和IE盒子的区别？

1.标准流盒子模型

当在CSS中给盒子设置height时，该高度为盒子的content的高度。

使用padding时，盒子会被撑大，即盒子宽度等于padding+content

使用border时，盒子也会被撑大，即盒子宽度等于padding+content+border

使用margin时，盒子不会变大，但会影响周围盒子的布局。

综上，标准模型的盒子宽度为content+padding+border。

2.怪异盒子模型(IE盒子)

给盒子设置的width、height就是盒子的宽度和高度。

当给盒子设置padding属性时，盒子的大小不会变化，content内容会缩小。

当给盒子设置border属性时，盒子大小不会变化，content内容会缩小 .

给设置margin属性时，盒子大小不会变化，会影响周围盒子的布局。

line-height和heigh区别

line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）。
height是一个死值，就是这个盒子的高度。

绘制一个三角形

.uptriangle{
    width:0;
        height:0;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
        border-bottom:100px solid black;
}

一个满屏品字布局怎么设计？

简单的方式：

上面的div宽100%，

下面的两个div分别宽50%，

然后用float或者inline使其不换行即可

blog.csdn.net/sjinsa/arti…

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

（1）对于一般的元素，它的表现跟visibility：hidden;是一样的。元素是不可见的，但此时仍占用页面空间。

（2）但例外的是，如果这个元素是table相关的元素，例如table行，tablegroup，table列，tablecolumngroup，它的表现却跟display:none一样，也就是说，它们占用的空间也会释放。

在不同浏览器下的区别：

在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。

在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

width:auto 和 width:100%的区别

width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。

width:auto；会将元素撑开至整个父元素width，但是会减去子节点自己的margin，padding或者border的大小。

width:100%会使元素box的宽度等于父元素的contentbox的宽度。 width:100%；会强制将元素变成和父元素一样的宽，并且添加额外的空间到这个元素的width上。就是因为这个，会导致很多问题。

使用width:100%永远都不是一个好主意。这个属性容易让人产生你正在定义一个元素可视大小，其实，你是在对这个元素的状态做了巨大的改变。块元素会填满其父元素的整个width，因为块元素默认的是width:auto;的。

'display'、'position'和'float'的相互关系？

（1）首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。

（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被

设置为table或者block，具体转换需要看初始转换值。

（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display

的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对

于浮动后的最终位置定位。

（4）如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是，

则保持指定的display属性值不变。

总的来说，可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在

的时候，浮动不起作用，'display'的值也需要调整；其次，元素的'float'特性的值不是"none"的时候或者它是根元素

的时候，调整'display'的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display'特性值同设置值。

CSS 多列等高如何实现？

（1）利用padding-bottom|margin-bottom正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow:hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

padding-bottom: 9999px;

margin-bottom: -9999px;

（2）利用table-cell所有单元格高度都相等的特性，来实现多列等高。

（3）利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度或设为auto，将占满整个容器的高度

的特性，来实现多列等高。

初始化样式代码

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend

,button,input,textarea,th,td{margin:0;padding:0;}

body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

address,cite,dfn,em,var{font-style:normal;}

code,kbd,pre,samp{font-family:couriernew,courier,monospace;}

small{font-size:12px;}

ul,ol{list-style:none;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

sup{vertical-align:text-top;}

sub{vertical-align:text-bottom;}

legend{color:#000;}

fieldset,img{border:0;}

button,input,select,textarea{font-size:100%;}

table{border-collapse:collapse;border-spacing:0;}

单行溢出隐藏和多行溢出隐藏显示...

// 单行
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  // 多行
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical; /*设置对其模式，纵向对齐*/
  -webkit-line-clamp: 2; /*设置多行的行数*/

高度坍塌,清除浮动

形成：

（1）父元素不写高，靠子元素撑起高度

（2）所有子元素都浮动

解决：在父元素中追加一个块级元素，这个块级元素，没有内容不写高。只写clear:both.就可以让父元素在文档流中找到内容的高度，解决高度坍塌问题

#d1:after{
        content:"";
        display:block;
        clear:both;
}

清除浮动的方法

清除浮动的要求：

1.父级没有高度，2子盒子浮动了，3影响下面的布局

清除浮动的本质：

清除浮动的本质就是清除浮动元素造成的影响

清除浮动的策略是：

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动的方法：

1.额外标签法(隔墙法)

额外标签法会在浮动元素末尾添加一个空标签。例如：

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

注：需要是块级元素，不能是行内元素

2.父级添加overflow属性

可以给父级添加overflow属性，将其属性值设置为hidden,auto或scroll

优点：代码简洁

缺点：无法显示溢出的部分

3.:after伪元素清除浮动

:after方式是额外标签法的升级版，也是给父元素添加

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
/*为了兼容IE6,7清除浮动的一种写法 */
    *zoom: 1;
}

优点：没有增加标签，结构更简单

缺点：需要照顾低版本浏览器 IE6，IE7

网易，百度，淘宝都是使用这种写法

4：双伪元素清除浮动

也是给父元素添加

clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
            /*转换为表格*/
        }

        .clearfix:after {
            clear: both;
        }

          .clearfix:after {
            *zoom: 1;
        }

优点：代码更简洁

缺点：需要照顾低版本浏览器

小米，腾讯再使用这种方法清除浮动

外边距溢出

给父元素的第一个子元素的位置添加一个空的table元素

父元素::before{
                                content:"";
                                display:table;
                        }

margin 重叠问题的理解

margin合并的3种场景：

（1）相邻兄弟元素margin合并。

解决办法：

•设置块状格式化上下文元素（BFC）设置其中一个元素为BFC来解决

（2）父级和第一个/最后一个子元素的margin合并。

解决办法：

对于margin-top合并，可以进行如下操作（满足一个条件即可）：

•父元素设置为块状格式化上下文元素；

•父元素设置border-top值；

•父元素设置padding-top值；

•父元素和第一个子元素之间添加内联元素进行分隔。

对于margin-bottom合并，可以进行如下操作（满足一个条件即可）：

•父元素设置为块状格式化上下文元素；

•父元素设置border-bottom值；

•父元素设置padding-bottom值；

•父元素和最后一个子元素之间添加内联元素进行分隔；

•父元素设置height、min-height或max-height。

（3）空块级元素的margin合并。

解决办法：

•设置垂直方向的border；

•设置垂直方向的padding；

•里面添加内联元素（直接Space键空格是没用的）；

•设置height或者min-height。

实现水平垂直居中的方法

未知宽高的情况：

弹性flex布局

display: flex;             佛莱克斯
justify-content: center;（扎斯特fai）
align-items: center;（额赖-items）

网格布局

display: grid;
justify-items: center;
align-items: center;

table-cell

display: table-cell;
vertical-align: middle;   咪都
text-align: center;

position

父：
position: relative;     ruai了替屋
子：
position: absolute;            阿波涩露的 
top: 0;             
right: 0;             
bottom: 0;             
left: 0;             
margin: auto;

position + transform

父容器相对定位，子容器绝对定位，left为50%，top为50%，translate(-50%,-50%)

父：
position: relative;
子：
position: absolute;             
top: 50%;             
left: 50%;             
transform: translate(-50%, -50%);

已知宽高：

父容器相对定位，子容器绝对定位，left为50%，top为50%，margin-left为子容器宽度的一半（负值），margin-top为子容器高度的一半（负值）

已知高度的情况：

已知高度的情况下

text-align: center; 行内元素选用
margin：0 auto； 块级元素选用
line-height：行内元素选用；

隐藏元素的 background-image 到底加不加载？

根据测试，一个元素如果display计算值为none，在IE浏览器下（IE8～IE11，更高版本不确定）依然会发送图片请求，Firefox浏览器不会，至于Chrome和Safari浏览器则似乎更加智能一点：如果隐藏元素同时又设置了background-image，则图片依然会去加载；如果是父元素的display计算值为none，则背景图不会请求，此时浏览器或许放心地认为这个背景图暂时是不会使用的。

如果不是background-image，而是元素，则设置display:none在所有浏览器下依旧都会请求图片资源。

还需要注意的是如果设置的样式没有对应的元素，则background-image也不会加载。hover情况下的background-image，在触发时加载。

转换过渡动画

CSS3的兼容问题如何解决？

CSS3动画和js动画的区别？

CSS引入的方式有哪些？

使用“”引入css样式；

在网页的标签对中使用标记来引入外部样式表文件，使用html规则引入外部css (用得比较多) :

使用“@import"css文件地址"”引入css样式；

<style type="text/css">
   @import"mystyle.css"; 此处要注意.css文件的路径
</style>

link引用和import引用区别是： link是html加载前就引用，而import是html加载后才引用。举例，采用impor引用，会先显示无样式的页面，然后再把样式放进去。如果用JavaScript动态引用CSS，得使用link引用方式才可实现。

在style标签里写css样式（内联css文件，直接在header 里面写css）

优点：速度快，所有的CSS控制都是针对本页面标签的，没有多余的ＣＳＳ命令；再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。

缺点：就是改版麻烦些，单个页面显得臃肿，ＣＳＳ不能被其他ＨＴＭＬ引用造成代码量相对较多，维护也麻烦些。但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。

在元素标签里使用style属性写css样式。

不经常改的地方。可以一用，但是还是谨慎使用，很不符合大众。

link和@import的区别

引入的内容不同

link属于html标签，link引入样式文件、图片资源等

@import在css中使用表示导入外部样式表；只引入样式文件

加载的顺序不同

link在页面加载的同时加载，@import在页面加载以后加载

兼容性不同

link是HTML标签，没有兼容性问题，@import在css2.1提出，低版本的浏览器不支持，只在IE5以上才能识别

权重不同

link方式的样式的权重高于@import的权重

对js的支持不同

link 支持使用javascript改变样式（document.styleSheets），@import则不能支持

三栏自适应布局

z-index属性失效的情况：

元素本身没有设置position属性。需要设置为relative、absolute、fixed中的一种
设置z-index的同时设置了浮动float，需要去除浮动
当前元素的层叠效果受祖先元素的z-index影响，如果父元素的z-index值很小，那么当前元素的z-index再大也不起作用，需要提高祖先元素的z-index

CSS如何实现黑白主题切换

可以使用css var

选择黑色时，给html加black的样式名。选择白色时，移除样式名

html {
    --color: #333;
}
html.black{
    --color: #fff;
}
p {
    color: var(--color)
}

可以使用vue-press去配置-通过配置css var 修改主题的颜色：黑，蓝

CSS实现抽屉效果

题目：

用伪类写一个分隔符

颜色的alpha通道（读音：阿尔法）

颜色的透明度。0是完全透明，1是完全不透明

rgba的最后一个值

写法：rgba（0，0，0，0.5）或 rgba（0，0，0 / 50%）

rgba的透明度 VS opacity透明度

rgba设置背景，是背景透明

opacity是整个元素的透明度，元素里的文字也会透明

尺寸的百分比

百分比是一个相对单位，其相对于元素的参考系，比如：

普通元素的参考系为父元素的内容区域（content区域）
绝对（固定）定位元素的参考系为父元素中第一个定位元素的padding+content区域

下面罗列常见的百分比情况：

css属性	百分比相对于	备注

width	参考系的宽度
height	参考系的高度	参考系高度受本身宽度影响时，设置无效
padding	参考系的宽度
border	参考系的宽度
margin	参考系的宽度

设置height为百分比是要父元素的高度是确定的

最大最小宽高

最大宽度：max-width，最大高度：max-height
最小宽度：min-width，最小高度：min-height

当一个元素的尺寸会自动变化时，设置最大最小宽高，可以让它不至于变得过小或过大。

在实际开发中，我们通常为PC端的页面设置一个最小宽度，通常此宽度为设计稿的宽度

html { min-width: 1226px;}

又或者，我们会为页面中的所有图片设置一个最大宽度，让其不至于超过容器

img { max-width: 100% ;}

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

加载性能：

（1）css压缩：将写好的css进行打包压缩，可以减少很多的体积。

（2）css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top0bottom0;但margin-bottom:bot

tom;margin-left:left;执行的效率更高。

（3）减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能：

（1）关键选择器（keyselector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。

（3）避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择。

（4）尽量少的去对标签进行选择，而是用class。

（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：

（1）慎重使用高性能属性：浮动、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

（4）属性值为0时，不加单位。

（5）属性值为浮动小数0.**，可以省略小数点之前的0。

（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。

（7）不使用@import前缀，它会影响css的加载速度。

（8）选择器优化嵌套，尽量避免层级过深。

（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。

（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。webfonts通常体积庞大，而且一些浏览器在下载webfonts时会阻塞页面渲染损伤性能。

可维护性、健壮性：

（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。

（2）样式与内容分离：将css代码定义到外部css中。

更具体深入的看：（该链接内容与上述文本不一样）

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

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。

试想一下，如果采用从左至右的方式读取CSS规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，

最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。

在网页中应该使用奇数还是偶数的字体？为什么呢？

（1）偶数字号相对更容易和web设计的其他部分构成比例关系。比如：当我用了14px的正文字号，我可能会在一些地方用14×0.5=7px的margin，在另一些地方用14×1.5=21px的标题字号。

（2）浏览器缘故，低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px。

（3）系统差别，早期的Windows里，中易宋体点阵只有12和14、15、16px，唯独缺少13px。

怎么让 Chrome 支持小于 12px 的文字？

在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。

解决办法：

（1）可以使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size

-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。

（2）还可以使用css3的transform缩放属性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.

75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/...；

（3）使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

让页面里的字体变清晰，变细用 CSS 怎么做？

webkit内核的私有属性：-webkit-font-smoothing，用于字体抗锯齿，使用后字体看起来会更清晰舒服。

在MacOS测试环境下面设置-webkit-font-smoothing:antialiased;但是这个属性仅仅是面向MacOS，其他操作系统设置后无效。

font-style 属性中 italic 和 oblique 的区别？

italic和oblique这两个关键字都表示“斜体”的意思。

它们的区别在于，italic是使用当前字体的斜体字体，而oblique只是单纯地让文字倾斜。如果当前字体没有对应的斜体字体，则退而求其次，解析为oblique，也就是单纯形状倾斜。

margin 和 padding 分别适合什么场景使用？

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。

margin用于布局分开元素使元素与元素互不相干。

padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。

何时应当使用margin：

•需要在border外侧添加空白时。

•空白处不需要背景（色）时。

•上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

何时应当时用padding：

•需要在border内测添加空白时。

•空白处需要背景（色）时。

•上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

我的理解是把常用的css样式单独做成css文件……通用的和业务相关的分离出来，通用的做成样式模块儿共享，业务相关的，放进业务相关的库里面做成对应功能的模块儿。

简单说一下 css3 的 all 属性

all属性实际上是所有CSS属性的缩写，表示，所有的CSS属性都怎样怎样，但是，不包括unicode-bidi和direction

这两个CSS属性。支持三个CSS通用属性值，initial,inherit,unset。

initial是初始值的意思，也就是该元素元素都除了unicode-bidi和direction以外的CSS属性都使用属性的默认初始

值。

inherit是继承的意思，也就是该元素除了unicode-bidi和direction以外的CSS属性都继承父元素的属性值。

unset是取消设置的意思，也就是当前元素浏览器或用户设置的CSS忽略，然后如果是具有继承特性的CSS，如color，则使用继承值；如果是没有继承特性的CSS属性，如background-color，则使用初始值。

为什么不建议使用统配符初始化 css 样式

采用*{pading:0;margin:0;}这样的写法好处是写起来很简单，但是是通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式。

出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即可，并不需使用通配符*来初始化。

对于 hasLayout 的理解？

hasLayout是IE特有的一个属性。很多的IE下的cssbug都与其息息相关。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

元素竖向的百分比设定是相对于容器的高度吗？

如果是height的话，是相对于包含块的高度。

如果是padding或者margin竖直方向的属性则是相对于包含块的宽度。

全屏滚动的原理是什么？用到了 CSS 的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，容器及容器内的页面取当前可视区高度，同时容器的父级元素overflow属性值设为hidden，通过更改容器可视区的位置来实现全屏滚动效果。主要是响应鼠标事件，页面通过CSS的动画效果，进行移动。

overflow：hidden；transition：all1000msease；

视差滚动效果，如何给每页做不同的动画？

（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？

视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

如何修改 chrome 记住密码后自动填充表单的黄色背景？

chrome表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

{

background-color:rgb(250,255,189)!important;

background-image:none!important;

color:rgb(0,0,0)!important;

}

对chrome默认定义的background-color，background-image，color使用important是不能提高其优先级的，但是

其他属性可使用。

使用足够大的纯色内阴影来覆盖input输入框的黄色背景，处理如下

input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{

-webkit-box-shadow:000px1000pxwhiteinset;

border:1pxsolid#CCC!important;

}

设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？

设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不可变的。

css像素和设备独立像素是等价的，不管在何种分辨率的设备上，css像素的大小应该是一致的，css像素是一个相对单位，它是相对于设备像素的，一个css像素的大小取决于页面缩放程度和dpr的大小。

dpr指的是设备像素和设备独立像素的比值，一般的pc屏幕，dpr=1。在iphone4时，苹果推出了retina屏幕，它的dpr为2。屏幕的缩放会改变dpr的值。

ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。

layoutviewport、visualviewport 和 idealviewport 的区别？

如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做layoutviewport。

layoutviewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，ppk把这个viewport叫做visualviewport。

idealviewport是最适合移动设备的viewport，idealviewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元

素的宽度设为idealviewport的宽度（单位用px），那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。idealviewport的意义在于，无论在何种分辨率的屏幕下，那些针对idealviewport而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

移动端一共需要理解三个viewport的概念的理解。

第一个视口是布局视口，在移动端显示网页时，由于移动端的屏幕尺寸比较小，如果网页使用移动端的屏幕尺寸进行布局的话，那么整个页面的布局都会显示错乱。所以移动端浏览器提供了一个layoutviewport布局视口的概念，使用这个视口来对页面进行布局展示，一般layoutviewport的大小为980px，因此页面布局不会有太大的变化，我们可以通过拖动和缩放来查看到这个页面。

第二个视口指的是视觉视口，visualviewport指的是移动设备上我们可见的区域的视口大小，一般为屏幕的分辨率的大小。visualviewport和layoutviewport的关系，就像是我们通过窗户看外面的风景，视觉视口就是窗户，而外面的风景就是布局视口中的网页内容。

第三个视口是理想视口，由于layoutviewport一般比visualviewport要大，所以想要看到整个页面必须通过拖动和缩放才能实现。所以又提出了idealviewport的概念，idealviewport下用户不用缩放和滚动条就能够查看到整个页面，并且页面在不同分辨率下显示的内容大小相同。idealviewport其实就是通过修改layoutviewport的大小，让它等于设备的宽度，这个宽度可以理解为是设备独立像素，因此根据idealviewport设计的页面，在不同分辨率的屏幕下，显示应该相同。

position:fixed;在 android 下无效怎么处理？

因为移动端浏览器默认的viewport叫做layoutviewport。在移动端显示时，因为layoutviewport的宽度大于移动端屏幕的宽度，所以页面会出现滚动条左右移动，fixed的元素是相对layoutviewport来固定位置的，而不是移动端屏幕来固定位置的，所以会出现感觉fixed无效的情况。

如果想实现fixed相对于屏幕的固定效果，我们需要改变的是viewport的大小为idealviewport，可以如下设置：

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca

le=1.0,user-scalable=no"/>

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

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

介绍RAF reques tAnimateFrame

RAF reques tAnimateFrame时间不需要自己控制，浏览器会配置

如何让去除 inline-block 元素间间距？

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

overflow:scroll 时不能平滑滚动的问题怎么处理？

以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling:touch;是因为这行代码启用了硬件加速特性，所以滑动很流畅。

有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度

（1）外层div使用position：relative；高度要求自适应的div使用position:absolute;top:100px;bottom:0;

left:0;right:0;

（2）使用flex布局，设置主轴为竖轴，第二个div的flex-grow为1。

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

我了解到的一共有七种常见的图片的格式。

（1）第一种是BMP格式，它是无损压缩的，支持索引色和直接色的点阵图。由于它基本上没有进行压缩，因此它的文件体积一般比较大。

（2）第二种是GIF格式，它是无损压缩的使用索引色的点阵图。由于使用了LZW压缩方法，因此文件的体积很小。并且GIF还支持动画和透明度。但因为它使用的是索引色，所以它适用于一些对颜色要求不高且需要文件体积小的场景。

（3）第三种是JPEG格式，它是有损压缩的使用直接色的点阵图。由于使用了直接色，色彩较为丰富，一般适用于来存储照片。但由于使用的是直接色，可能文件的体积相对于GIF格式来说更大。

（4）第四种是PNG-8格式，它是无损压缩的使用索引色的点阵图。它是GIF的一种很好的替代格式，它也支持透明度的调整，并且文件的体积相对于GIF格式更小。一般来说如果不是需要动画的情况，我们都可以使用PNG-8格式代替GIF格式。

（5）第五种是PNG-24格式，它是无损压缩的使用直接色的点阵图。PNG-24的优点是它使用了压缩算法，所以它的体积比BMP格式的文件要小得多，但是相对于其他的几种格式，还是要大一些。

（6）第六种格式是svg格式，它是矢量图，它记录的图片的绘制方式，因此对矢量图进行放大和缩小不会产生锯齿和失真。它一般适合于用来制作一些网站logo或者图标之类的图片。

（7）第七种格式是webp格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用webp格式的最大的优点是，在相同质量的文件下，它拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减小，这样会提高用户的体验。这是谷歌开发的一种新的图片格式，目前在兼容性上还不是太好。

浏览器如何判断是否支持 webp 格式图片

（1）宽高判断法。通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格式的图片。

（2）canvas判断方法。我们可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持。

什么是 Cookie 隔离？（或者说：请求资源的时候不要让它带 cookie 怎么做）

网站向服务器请求的时候，会自动带上cookie这样增加表头信息量，使请求变慢。

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开，静态资源放CDN。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入WebServer，也减少了WebServer对cookie的处理分析环节，提高了webserver的

http请求的解析速度。

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

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

什么是 CSS 预处理器/后处理器？

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件。

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或lesscsssprite，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

CSS后处理器是对CSS进行处理，并最终生成CSS的预处理器，它属于广义上的CSS预处理器。我们很久以前就在用CSS后处理器了，最典型的例子是CSS压缩工具（如clean-css），只不过以前没单独拿出来说过。还有最近比较火的Autoprefixer，以CanIUse上的浏览器支持数据为基础，自动处理兼容性问题。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

阐述一下 CSSSprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的background-image，background-repeat，background-position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求，从而很好的提高页面的性能；CSSSprites能减少图片的字节。

优点：

减少HTTP请求数，极大地提高页面加载速度

增加图片信息重复度，提高压缩比，减少图片大小

更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：

图片合并麻烦

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

【CSS面试题】

div+css布局有什么优点？

盒模型宽度offsetWidth包括？

first-child与first-of-type的区别

vertical-align：

margin

margin负值问题

margin纵向重叠问题

说说z-index有什么需要注意的地方，z-index: 0 和z-index：1的区别，z-index为0和1哪个元素在上面？

overflow

overflow-x:auto无效

overflow：hidden作用

实操手写

两栏布局

三栏布局

手写clearfix清除浮动

圣杯布局

双飞翼布局

画骰子-三点

实现一个宽高自适应的正方形

画一个三角形

一个自适应矩形，水平垂直居中，且宽高比为 2:1

什么是优雅降级和渐进增强

文字超出省略

px、%、em、rem、vw、vh有什么区别？

meta标签的作用

如何用css实现两栏布局（左边栏固定宽，右边栏自适应）

CSS 选择符有哪些？

css的优先级（选择器）

important的缺点

伪类选择器

CSS3新增伪类：

伪元素VS伪类：

伪元素

深度选择器 >>> /deep/ ::v-deep

CSS 中哪些属性可以继承？

line-height如何继承

常见的元素隐藏方式？

visibility: hidden 和 display: none 的区别

BFC——块级格式化上下文

IFC 是什么

GFC（GrideLayout formatting contexts）：

FFC（Flex formatting contexts）：

网页视口尺寸

响应式布局有几种方式？

rem和em的区别及原理

移动端适配

适配方法：

响应式布局@media（咪迪尔）实现一套html配合多套css实现适配

通过rem或者vw，vh等实现不同的设备有相同的比例进而实现适配

同时采用媒体监听和rem等比适配

使用postcss-px-to-viewport库

使用postcss-pxtorem库

移动端0.5px边框

方案1：直接设置0.5px边框

方案2：伪元素 transform

方案3：伪元素，设置绝对定位，高度为1px

方案4: box-shadow

移动端适配安全区域

媒体查询

HTML中默认的block inline inline-block元素有哪些？

flex布局display:flex

position的属性（细化，讲清作用的对象）

absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？

重绘和回流（重排）

网页重绘repaint和重排reflow有什么区别

Less和sass的区别？你在项目中用到的哪些sass的方法，怎么用的？

CSS3 有哪些新特性？

flex布局

flex：1

flex布局中flex:1和flex:auto的区别

尺寸不足时：

尺寸过多时：

常规盒子和IE盒子的区别？

line-height和heigh区别

绘制一个三角形

一个满屏品字布局怎么设计？

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

width:auto 和 width:100%的区别

'display'、'position'和'float'的相互关系？

单行溢出隐藏和多行溢出隐藏显示...

颜色的alpha通道（读音：阿尔法）