# CSS 部分

# 介绍一下标准的 CSS 盒模型？与低版本 IE 的盒模型有什么不同？

• 有两种：IE盒模型、W3C标准盒模型
• 盒模型： 内容(content)、填充(padding)、边框(border)、边界(margin)
• 两者的区别在于content的不同，IE 盒模型的content包括padding、border

# CSS 优先级算法如何计算？

• 优先级就近原则，同权重情况下样式定义最近者为准
• 载入样式以最后载入的定位为准
• 优先级为:!important > 内联 > id > class > tag|伪类|属性选择 > 伪对象 > 继承 > 通配符
• !important 优先级最高，高于上面一切。* 选择器最低，低于一切。（非继承情况下）

# 水平垂直居中，这是一道面试必考题

# 仅居中元素定宽高适用

• absolute + 负margin
• absolute + margin auto
• absolute + calc

# 居中元素不定宽高适用

• absolute + transform
• writing-mode
• lineheight
• table
• css-table
• flex
• grid

# 总结

• PC 端有兼容性要求，宽高固定，推荐absolute + 负margin
• PC 端有兼容要求，宽高不固定，推荐css-table
• PC 端无兼容性要求，推荐flex
• 移动端推荐使用flex

# 为什么要初始化 CSS 样式？

• 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
• 弊端：初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

# 对 BFC 的理解？

• BFC(Block formatting context)直译为"块级格式化上下文"，它是一个独立的渲染区域
• 满足下列条件之一就可触发 BFC：
  • 根元素，即 HTML 元素
  • 浮动元素（float不是none）
  • overflow不是visible的元素
  • display取值为inline-block,table-cell,table-caption,flex,inline-flex之一的元素
  • 绝对定位元素（position取值为absolute或fixed）
• 作用：
  • 自适应两栏布局
  • 不被浮动元素覆盖
  • 可以包含浮动元素——清除内部浮动
  • 分属于不同的 BFC 时可以阻止margin重叠

# css sprite 是什么,有什么优缺点

• 概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
• 优点：
  • 减少HTTP请求数，极大地提高页面加载速度
  • 增加图片信息重复度，提高压缩比，减少图片大小
  • 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
• 缺点：
  • 图片合并麻烦
  • 维护麻烦，修改一个图片可能需要从新布局整个图片，样式

# display: none与visibility：hidden的区别？

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

# link与@import的区别

1. link是HTML方式，@import是 CSS 方式
2. link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
3. link可以通过rel="alternate stylesheet"指定候选样式
4. 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
5. @import必须在样式规则之前，可以在 css 文件中引用其他文件
6. 总体来说：link优于@import

# 什么是 FOUC?如何避免

• Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。
• 解决方法：把样式表放到文档的head

# display,float,position 的关系

• 如果display为none，那么position和float都不起作用，这种情况下元素不产生框
• 否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
• 否则，如果float不是none，框是浮动的，display根据下表进行调整
• 否则，如果元素是根元素，display根据下表进行调整
• 其他情况下display的值为指定值
• 总结起来：绝对定位、浮动、根元素都需要调整display

# 清除浮动的几种方式，各自的优缺点

• 父级div定义height
• 结尾处加空div标签clear:both
• 父级div定义伪类:after和zoom
• 父级div定义overflow:hidden
• 父级div也浮动，需要定义宽度
• 结尾处加br标签clear:both
• 比较好的是第 3 种方式，好多网站都这么用

# CSS3 有哪些新特性

• 1.CSS3 实现圆角（border-radius），阴影（box-shadow），
• 2.对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）
• 3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); // 旋转,缩放,定位,倾斜
• 4.增加了更多的 CSS 选择器 多背景 rgba
• 5.在 CSS3 中唯一引入的伪元素是 ::selection.
• 6.媒体查询，多栏布局
• 7.border-image

# 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>元素。
• :after在元素之前添加内容,也可以用来做清除浮动。
• :before在元素之后添加内容
• :enabled
• :disabled控制表单控件的禁用状态。
• :checked单选框或复选框被选中

# 谈谈浮动和清除浮动

• 浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

# position 的值， relative 和 absolute 定位原点是

• absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
• relative：生成相对定位的元素，相对于其正常位置进行定位
• static默认值。没有定位，元素出现在正常的流中
• inherit规定从父元素继承position属性的值

# display:inline-block 什么时候不会显示间隙？(携程)

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

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

• GIF
  • 8位像素，256色
  • 无损压缩
  • 支持简单动画
  • 支持boolean透明
  • 适合简单动画
• JPEG
  • 颜色限于256
  • 有损压缩
  • 可控制压缩质量
  • 不支持透明
  • 适合照片
• PNG
  • 有PNG8和truecolor PNG
  • PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
  • 适合图标、背景、按钮

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

• 浮动后，行内元素不会成为块状元素，但是可以设置宽高。行内元素要想变成块状元素，占一行，直接设置display:block;。但如果元素设置了浮动后再设置display:block;那就不会占一行。

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

• 偶数。
• 一、UI 设计师的原因：多数设计师用的设计软件（如：ps）大多数都是偶数，所以前端工程师一般都是用偶数字体
• 二、浏览器的原因：ie6 会把定义为 13px 的字渲染成 14px；偶数宽的汉字，比如 12px 宽的汉字，去掉 1 像素的间距，填充了像素的实际宽是 11px，这样汉字的中竖线左右是平分的，以“中”这个字为例，在 12 像素时，竖线在中间，左右各 5 像素，显得均衡。像谷歌一些比较流行的浏览器一般会有个默认的最小字体，而且对奇数字体渲染的不太好看
• 三、实际应用：偶数字号相对更容易和 web 设计的其他部分构成比例关系。比如：当我用了 14 px 的正文字号，我可能会在一些地方用

# ::before 和 :after 中双冒号和单冒号 有什么区别？解释一下这 2 个伪元素的作用

• 单冒号(:)用于 CSS3 伪类，双冒号(::)用于CSS3伪元素
• 用于区分伪类和伪元素

# CSS 合并方法

• 避免使用@import引入多个css文件，可以使用CSS工具将CSS合并为一个CSS文件，例如使用Sass\Compass等

# CSS 不同选择器的权重(CSS 层叠的规则)

• ！important规则最重要，大于其它规则
• 行内样式规则，加1000
• 对于选择器中给定的各个ID属性值，加100
• 对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加10
• 对于选择其中给定的各个元素标签选择器，加 1
• 如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则

# 列出你所知道可以改变页面布局的属性

• position、display、float、width、height、margin、padding、top、left、right

# CSS 在性能优化方面的实践

• css压缩与合并、Gzip压缩
• css文件放在head里、不要用@import
• 尽量用缩写、避免用滤镜、合理使用选择器

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

• 依靠CSS3中提出的三个属性：transition、transform、animation
• transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
• transform：定义元素的变化结果，包含rotate、scale、skew、translate。
• animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

# base64 的原理及优缺点

• 优点可以加密，减少了http请求
• 缺点是需要消耗CPU进行编解码

# stylus/sass/less 区别

• 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
• Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系
• Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念
• Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS、NPM下载相应库后进行编译；

# postcss 的作用

• 可以直观的理解为：它就是一个平台。为什么说它是一个平台呢？因为我们直接用它，感觉不能干什么事情，但是如果让一些插件在它上面跑，那么将会很强大
• PostCSS提供了一个解析器，它能够将CSS解析成抽象语法树
• 通过在PostCSS这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer
• postcss可以对 sass 处理过后的css再处理 最常见的就是autoprefixer

# css 样式（选择器）的优先级

• 计算权重确定
• !important
• 内联样式
• 后写的优先级高

# 自定义字体的使用场景

• 宣传/品牌/banner等固定文案
• 字体图标

# 如何美化 CheckBox

• label（for）和id
• 隐藏原生的input
• :checked + label

# 伪类和伪元素的区别

• 伪类表状态
• 伪元素是真的有元素
• 前者单冒号，后者双冒号

# base64的使用

• 用于减少HTTP请求
• 适用于小图片
• base64的体积约为原图的4/3

# 自适应布局

思路：

• 左侧浮动或者绝对定位，然后右侧margin撑开
• 使用div包含，然后靠负margin形成bfc
• 使用flex

# 什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin-collapse

• 在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 折叠结果遵循下列计算规则：
• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

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

• rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
• 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

# px 和 em 的区别

• px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
• 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。

# Sass、LESS 是什么？大家为什么要使用他们？

• 他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
• 例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数.LESS既可以在客户端上运行 (支持IE 6+,Webkit,Firefox)，也可一在服务端运行 (借助Node.js) 为什么要使用它们？
• 结构清晰，便于扩展。
• 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对- 浏览器语法差异的重复处理，减少无意义的机械劳动。
• 可以轻松实现多重继承。
• 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只- 是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译

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

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

/**一种常见利用伪类清除浮动的代码**/
.clearfix:after {
  content: '.'; //这里利用到了content属性
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

.clearfix {
  *zoom: 1;
}

# 如何使用 CSS 实现硬件加速？

硬件加速是指通过创建独立的复合图层，让 GPU 来渲染这个图层，从而提高性能，

• 一般触发硬件加速的CSS属性有transform、opacity、filter，为了避免 2D 动画在 开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)

# 重绘和回流（重排）是什么，如何避免？

• DOM 的变化影响到了元素的几何属性（宽高）,浏览器重新计算元素的几何属性，其他元素的几何
• 属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受到影响的部分
• 重新绘制到屏幕上的过程称为重绘。引起重排的原因有
  • 添加或者删除可见的 DOM 元素，
  • 元素位置、尺寸、内容改变，
  • 浏览器页面初始化，
  • 浏览器窗口尺寸改变，重排一定重绘，重绘不一定重排

减少重绘和重排的方法：

• 不在布局信息改变时做DOM查询
• 使用cssText或者className一次性改变属性
• 使用fragment
• 对于多次重排的元素，如动画，使用绝对定位脱离文档流，让他的改变不影响到其他元素

# 说一说 css3 的 animation

• css3 的animation是 css3 新增的动画属性，这个 css3 动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义
• 每一帧动画元素的状态，通过animation-name来引用这个动画，同时 css3 动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式，
• 这些相关的动画子属性有：animation-name定义动画名、animation-duration定义动画播放的时长、animation-delay定义动画延迟播放的时间、animation-direction定义 动画的播放方向、animation-iteration-count定义播放次数、animation-fill-mode定义动画播放之后的状态、animation-play-state定义播放状态，如暂停运行等、animation-timing-function
• 定义播放的方式，如恒速播放、艰涩播放等。

# 左边宽度固定，右边自适应

左侧固定宽度，右侧自适应宽度的两列布局实现 html 结构

<div class="outer">
  <div class="left">固定宽度</div>
  <div class="right">自适应宽度</div>
</div>

在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度 方法 1：左侧 div 设置成浮动：float: left，右侧 div 宽度会自拉升适应

.outer {
  width: 100%;
  height: 500px;
  background-color: yellow;
}
.left {
  width: 200px;
  height: 200px;
  background-color: red;
  float: left;
}
.right {
  height: 200px;
  background-color: blue;
}

# 方法 2：对右侧:div 进行绝对定位，然后再设置 right=0，即可以实现宽度自适应

绝对定位元素的第一个高级特性就是其具有自动伸缩的功能，当我们将width设置为auto的时候（或者不设置，默认为auto），绝对定位元素会根据其left和right自动伸缩其大小

.outer {
  width: 100%;
  height: 500px;
  background-color: yellow;
  position: relative;
}
.left {
  width: 200px;
  height: 200px;
  background-color: red;
}
.right {
  height: 200px;
  background-color: blue;
  position: absolute;
  left: 200px;
  top: 0;
  right: 0;
}

# 方法 3：将左侧 div 进行绝对定位，然后右侧 div 设置 margin-left: 200px

.outer {
  width: 100%;
  height: 500px;
  background-color: yellow;
  position: relative;
}
.left {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
}
.right {
  height: 200px;
  background-color: blue;
  margin-left: 200px;
}

# 方法 4：使用 flex 布局

.outer {
  width: 100%;
  height: 500px;
  background-color: yellow;
  display: flex;
  flex-direction: row;
}
.left {
  width: 200px;
  height: 200px;
  background-color: red;
}
.right {
  height: 200px;
  background-color: blue;
  flex: 1;
}

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

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

# CSS 参考手册

# CSS 参考手册