前端面试题复习（3）- css

css基础

CSS选择器及其优先级

内联样式（1000）>id（100）>类=属性=伪类（10）>标签=伪元素（1）>相邻兄弟选择器=子选择器=后代选择器=通配符选择器（0）

可继承、不可继承

无继承性属性

1. display
2. 文本属性

• vertical-align：垂直文本对齐
• text-decoration：规定添加到文本的装饰
• text-shadow：文本阴影效果
• white-space：空白符的处理
• unicode-bidi：设置文本的方向

3. 盒子模型的属性：width、height、margin、border、padding
4. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
5. 定位属性：float等
6. 生成内容属性
7. 轮廓样式属性
8. 页面样式属性
9. 声音样式属性

有继承性的属性

1. 字体系列的属性
2. 文本系列属性
3. 元素可见性
4. 列表布局属性
5. 光标属性

display

none、block、inline、inline-block、list-item、table、inherit

display的block、inline和inline-block的区别

行内元素

设置宽高无效；可以设置水平方向的margin、padding。不能设置垂直方向的padding和margin；不会自动换行

块级元素

可以设置宽高；设置margin和padding都有效；可以自动换行；多个块状，默认排列从上到下。

隐藏元素的方法有哪些？

display:none visibly: hidden opacity: 0 position:absolute z-index:负值 clip/clip-path transform:scale(0,0)

link和@import的区别

link是XHTML标签，除加载css之外，还可以定义RSS @import是css范畴，只能加载css

link引用css页面可以同时加载；@import需要页面网页完全载入以后加载。

link是XHTML标签，无兼容问题；@import 需要网页完全载入以后加载。 link支持使用js控制DOM去改变样式，而@import不支持。

transition 和 animation 的区别

• transition：过度属性
• animation：动画属性

display：none 与 viisiblily：hidden区别

1. 渲染树中，前者会消失，后者不会
2. 前者是非继承属性，后者是继承属性

伪元素和伪类的区别

1. 优先级不同，伪元素>伪类
2. 是否显示新的元素，前者会、后者不会

对requestAnimationframe的理解

该方法属于宏任务，在下次重绘之前执行；H5提供的执行动画的方法 优点 CPU节能、函数节流、减少DOM操作

对盒模型的理解

标准盒子模型（content-box）：设置宽高，包含content IE盒子模型（border-box）：设置宽高，包含 border、padding、content

为什么有时候用 translate 来改变位置而不是定位

translate不会重绘、定位会重新布局

li和li之间看不见的空白间隔是什么

inline内联元素的空白符（空格、换行、tab）渲染成一个空格。

css3新特性

1. css选择器
2. 圆角
3. 多列布局
4. 阴影和反射
5. 文字特效
6. 文字渲染
7. 线性渐变
8. 旋转、缩放、定位、倾斜、动画、背景

替换元素的概念及计算规则

常见的图片格式及使用场景

1. BMP：无损，文件大小较大
2. GIF：无损，LZW压缩算法，文件小色彩适配度不高，可以支持动态图片
3. JPEG： 有损，色彩丰富，文件大小比GIF大
4. PNG-8：无损，文件体积比GIF小，支持透明调节
5. PNG-24：无损，文件比BMP小，比JPEG、GIF、PNG-8大
6. SVG：无损，矢量图。放大不失真。
7. WebP：无损有损都支持，文件体积更小，支持透明度；兼容性不高。 文件大小排序 svg < webp < PNG-8 < GIF < JPEG < PNG-24 < BMP

CSSSprites 精灵图

将所有icon放在一张大图里，使用背景定位、是否重复、背景图片来进行背景定位

优点

• 减少页面请求
• 减少图片字节

缺点

• 维护图片麻烦
• 开发麻烦，位置要精确

什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到

物理像素就是 手机实际尺寸 逻辑像素就是 手机的元素宽度

像素密度就是 物理/逻辑

因为为了让图片不失真，一个逻辑像素最少要对应一个物理像素； 可以用media 媒体判断

my-image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }
}

margin 和 padding的使用场景

line-height

一行文本高度

赋值：

1. px是固定值，em根据父元素font-size计算自身的行高
2. 纯数字：会把比例传给后代。父元素行高1.5，子元素字体18px 子元素行高为 1.5*18 = 27
3. 百分比：计算的值传给后代

css优化和提高性能的方法

加载性能：

1. css压缩
2. css单一样式
3. 减少使用@import，建议使用link

选择器性能

1. 属性不要重复指定
2. 关键选择器
3. 尽量不要使用通配符
4. 尽量不要超过3级

渲染性能

1. 减少重绘
2. 慎重使用高性能属性
3. 属性为0时不加单位
4. 浮动数时0.xx 可以去掉0
5. 去除空规则

可维护性、健壮性

预处理/后处理

预处理：less、sass、stylus、 后处理器：在完成的样式标中根据css处理规范；如给样式加浏览器前缀，解决兼容性

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

注意： :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。

display：inline-block为什么有间隙

单行多行溢出

sass、less是什么

预处理器，可编译成css

对媒体查询的理解

<!-- link元素中的CSS媒体查询-->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询-->
<style>
  @media (max-width: 600px) {
    .facet_sidebar {
    display: none;
    }
  }
</style>

对css工程化的理解

预处理器： 类css代码 =》 css代码 postCss： css代码 ==》 新的css代码 webpack在裸奔的情况下是不能处理css的，loader可以处理css

css-loader(编译)、style-loader（写入style标签中） css-loader要在style-loader之前

如何判断元素是否到达可视区域

innerHeight 是浏览器可视区高度 offsetTop < innerHeoght + scrollTop

zindex属性什么情况下会失效

position为relative；解：父元素改为absolute或static 元素属性为static；解：position为relative，absolute或是 fixed 设置了float；解：float去除，改为display：inline-block

css3中的transform有哪些属性

页面布局

单位

1. 像素：屏幕所能显示的最小区域；
   1. css像素：css中使用的一个抽象单位
   2. 物理像素：与设备的硬件密度有关，任何设备的物理像素都是固定
2. 百分比：相对于直接父元素的百分比
3. em相对于父元素，如果行内文本字体未设置、则相对于浏览器默认字体尺寸
4. rem相对于html跟元素；利用rem可以实现响应式布局，利用html字体大小和屏幕的比值来设置font-size的值。
5. vw/vh；相对于视图窗口的高度，vw和vh外，还有vmin和vmax的相关单位
   1. vw：相对于视图宽度，
   2. vh：相对于视图宽度
   3. vmin：vw和vh较小值
   4. vmax：vw和vh较大值

px、rem、em的区别： px: 是固定像素、 em: 相对于父元素设置大小、 rem：相对于跟元素

两栏布局

1. 浮动布局

heigh
.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
background: tomato;
}
.right {
margin-left: 200px;
width: auto;
background: gold;
}

2. 利用浮动触发BFC

利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

3. flex布局

.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}

4. 绝对定位

利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

5. 绝对定位

利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

三栏布局

1. 绝对定位

2. flex布局

3. 浮动

4. 圣杯

5. 双飞翼

水平垂直居中

绝对定位，左上角变成页面中心，translate再调整元素中心

.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

绝对定位，四个方向都是0，margin：auto；适用于有宽高的情况

.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

绝对定位，左上角top 50%和left 50%定位到页面的中心，然后margin负值；适用于有宽高的情况

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 自身 height 的一半 */
margin-left: -50px; /* 自身 width 的一半 */
}

flex布局，通过align-items:center和justify-content:center

.parent {
display: flex;
justify-content:center;
align-items:center;
}

移动端适配

移动端适配的两个维度

1. 适配不同像素密度，
2. 适配不同屏幕大小

方法：

1. view meta标签，控制放大缩小等
2. 相对单位： rem em %
3. 媒体查询
4. 图片适配：响应式图片或给图片加最大宽度

flex布局

概念

弹性布局，增加flex属性的父元素，其子元素都是各自的项目，子元素的float clear vertical-align 会失效；存在两条主轴，纵轴、横轴

父元素属性

flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

子元素

1. order：数值越小、排名越前
2. flex-grow：定义项目的放大比例，默认为0
3. flex-shrink：缩小比例、默认为1
4. flex-basis：分配多余空间之前、项目占据的主轴空间
5. flex 默认为1:flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
6. align-self属性允许单个项目有与其他项目不一样的对齐方式

响应式设计的基本原理

根据不同设备、屏幕大小自动适配页面功能

方法

1. 弹性网格布局 （Grid）
2. 媒体查询
3. 弹性图片/媒体
4. 流式布局
5. 可伸缩字体

定位与浮动

清除浮动

浮动出现的特征：高度塌陷

引起的问题：父元素高度无法撑开、同级元素的位置、

方法：

1. 父级设置高度
2. 最后一个浮动元素之后加clear：both
3. 父级元素加overflow: hidden
4. :after元素里加clear：both

clear:both原理

clear：none|left|right|both 设置为left的时候right无效，反之亦然，both是都可以的

官方解释：元素盒子的边不能和前面的浮动元素相邻，不是真的清除了浮动

BFC：块格式化上下文

BFC是个独立容器，触发后，元素内部的布局不受外部影响

创建BFC条件

1. 跟元素 body
2. 元素设置float
3. 元素定位 position
4. display
5. overflow

BFC的特点

1. 在BFC中相邻的容器margin会重叠
2. 计算BFC的高度需要计算浮动元素的高度
3. BFC不会和浮动元素重叠
4. 每个元素的左元素的margin值和左border相接触
5. 自上而下排列和文档流的排列方式一致

BFC解决的问题

1. 由于容器相对独立，解决margin的重叠问题
2. 解决高度塌陷问题
3. 创建自适应的两列布局

margin 重叠问题

现象

1. 上边距和下边距重叠展示。取相对较大的那个；
2. 浮动元素和绝对定位不会出现margin重叠

最后的margin计算规则

1. 都正、选择相对较大的
2. 正负：｜正-负｜
3. 都负：｜0-负｜（max）

解决办法

1. 兄弟之间
   1. 底部元素变为行内元素
   2. 底部元素设置float
   3. 底部元素position = fixed ｜ absolute
2. 父子之间
   1. 父元素 overflow：hidden
   2. 父元素 透明边框
   3. 子元素变行内盒子
   4. 子元素加入浮动或绝对定位

元素的层叠顺序

position

1. absolute：
2. relavtive
3. fixed
4. static
5. inherit

display、float、position

position优先级最高，position为absolute、position为fixed 存在的时候浮动不起作用、display值会变；

float不为none，displat值会变

非根元素、非浮动元素、非绝对定位的元素，'display'特性值同设置值。

absolute与fixed共同点与不同点

共同点：

1. 改变行内元素的呈现方式，将display置为inline-block
2. 使元素脱离普通文档流，不再占据文档物理空间
3. 覆盖非定位文档元素

不同点：

1. abuselute与fixed的根元素不同，abuselute的根元素可以设置，fixed根元素是浏览器。
2. 在有滚动条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置。

对 sticky 定位的理解

1. 粘性定位。
2. top: 30px
3. 30px之前是relative；之后是fixed

应用

实现一个三角形

倒着的三角形高度是border的高度

▪️

div {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: orange blue red green;
}

▶️

div {
  width: 0;
  height: 0;
  border: 0;
  border-left: 100px solid white;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

直角：正方形对折的直角

div {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

扇形

三角形基础上加border-radius

宽高自适应的正方形

画一条0.5px的线

transform: scale(0.5,0.5);

meta viewport

chrome字体设置12px以下

1. -webkit-text-size-adjust：none;27版本后不支持
2. -webkit-transform:scale(0.5)；整个元素的大小
3. 切成图片

0.5px怎么做

1. 直接写0.5

<div id="container" data-device={{window.devicePixelRatio}}></div>
#container[data-device="2"] {
border:0.5px solid #333
}

2. 用伪元素，先放大后缩小
3. viewport meta