前端笔/面试题整理【css】

HTML/CSS：对web标准的理解（结构、表现、行为）、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法 、层次关系、常用属性、布局、选择器、权重、盒模型、Hack、CSS预处理器、Flexbox和Grid布局、CSS Moudules、Document flow、BFC、HTML5（离线&存储&history）、多媒体、webGL、SVG、Canvas

1.什么是BFC，形成BFC的条件有哪些？

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

条件：

1.html根元素

2.float：left、right

3.position：absolute、fixed

4.display：

flow-root是很好的选择，生成一个块级元素盒，简历一个新的块级格式化上下文，定义格式化上下文的根元素。

flex、inline-flex、grid、inline-grid

inline-block！

5.overflow不是visible。【overflow：hidden，scroll，auto（一般用）】

能解决外边距折叠和合并的情况。

2.如何解决父元素高度坍塌（如何清除浮动）？

1.给父元素设置一个跟子元素一样的高度（不推荐）。

2.使用浮动元素后添一个兄弟元素，设置属性clear：both。

3.给父元素内最后一个设置一个伪元素清除浮动。

父元素::after{display:block;content:"";clear:both}

4.把父元素变成BFC。

3.标准盒和怪异盒子

设置box-sizing属性。

标准盒子content-box：盒子大小就是boder+content+padding

怪异盒子border-box：盒子大小就是宽高height、width

4.css样式优先级算法

1.就近原则，后加样式优于前面的而央视

2.内嵌样式>内联样式>外联样式

3.！important大于一切样式

权重计算的规则：

• 内联--1000
• ID选择器--100
• 类、伪类、属性选择器--10
• 类型选择器和伪元素--1
• 继承的样式没有权重

5.position的值

relative、absolute、fixed、static、inherit

6.伪类和伪元素的区别，分别有哪些

伪类：给元素添加特殊效果，:【active、focus、hover、link、visted、first-child、first-of-type、last-of-type、lang】

伪元素：给元素前面或者后面添加内容或者样式，::【after、before、first-letter文本首字母、first-line文本首行】

7.css3新特性

boder-radius、box-shadow

text-shadow、line-gradient、transform

rgba

boder-image

媒体查询、多栏布局

8.如何居中div

水平居中：margin：0 auto

垂直居中：

1.

position:absolute
top:50%
left:50%
transform:translate（-50%）

2.上面的1的transform改成margin-left：宽的一半

3.

position:absolute
top:0
left:0
bottom:0
right:0
margin:auto

4.

display:flex
justify-content:center
align-items:center

5.

display:table-cell //【表格单元格】
text-align:center
vertical-align:middle

6.垂直居中可以用：line-height

7.display：grid

[1]place-self：center【justify-self和align-items】-子元素

[2]place-items：center-父元素的

[3]place-content：center-父元素的

9.flex布局及常用属性

父元素：

flex-direction：主轴的方向

flex-wrap：排列方式【换行】

justify-content：主轴的对齐方式

align-items：交叉轴的对齐方式【stretch：未设置高度或auto就占满整个容器的高度；baseline：基线对齐】

align-content：多跟轴线的对齐方式。只有一根轴线就不起作用。

子元素：

order：排列顺讯，数值越小越靠前，默认0

flex-grow：项目放大比例，默认0

flex-shrink：项目缩小比例，默认为1

flex-basis：项目占据主轴空间，浏览器根据这个计算主轴是否有多余空间

flex：上面三个的简写，默认0,1，auto

align-self：单个项目和其他项目不一样的对齐方式

10.css动画和js动画的差异

1.js动画代码复杂一些

2.动画运行时，js能让动画开始暂停停止，但是css动画不能添加事件。

3.动画性能的话js动画多了一个js解析的过程，性能没css好。

11.css预处理器（sass和less）用过吗？

css预处理器，便于组织和维护，减少重复的代码。

less优势：

1.结构清晰，便于扩展。

2.可以屏蔽浏览器私有语法差异。

3.可以轻松实现多重继承。

4.完全兼容css代码，可以用于老项目中，老css代码可以和less代码一起编译。

缺点：必须要编译。产生额外的花销。

scss优势：sass的一种语法，引入了很多功能和特性，使样式表的编写更灵活、可维护、可扩展。

1.嵌套规则：scss允许在一个选择器里嵌套另一个选择器，使得样式层级更清晰。

2.变量和计算：scss支持变量的定义和使用，可以在样式里创建变量来存储颜色、尺寸等值。支持数学计算。

3.混合：将一组样式块定义为一个混合，在其他选择器里重复使用，提高代码的可维护性。@mixin定义，@include调用。

4.继承：将选择器样式继承到另一个选择器中。

5.条件语句：根据不同情况应用不同样式，根据特定条件调整样式时使用。

6.模块化和导入：@import导入多个模块，将样式表分解为更小的部分，提高可维护性。

7.注释：scss支持单行和多行注释。

12.em和rem的区别

都是相对单位，但是em是基于父元素字体大小，rem是基于根元素也就是html元素的字体大小，比如16px的字体大小，1em或者1rem都是16px，2em、2rem是32px。

13.px和rpx的区别

1.px是固定长度单位，表示屏幕上的实际像素点，rpx是相对长度单位，主要用于微信小程序中，适配不同尺寸的手机屏幕，屏幕宽度为750rpx的话1rpx在任何屏幕都占据屏幕宽度的1/750.

2.rpx可以根据屏幕宽度自适应调整，保证不同尺寸的设备上都能良好的展示。

3.在微信小程序中，1rpx等于0.5px。