前端面试题整理 [css部分]

1. 盒子水平垂直居中?

• 父盒子开启flex,并设置主轴居中,侧轴居中
• 父盒子开启flex,子盒子设置margin:auto
• 子绝父相,子盒子设置top和left值为50%,利用transform基于自身回去-50%
• 子绝父项,子盒子设置上下左右均为0,在设置margin:auto也可以

2. 盒模型

• 四部分: 内容+内边距+外边距+边框
• 盒模型可以进行切换: box-sizing: border-box; ie盒模型/c3盒模型/怪异盒模型, 宽高定死,不受边框内间距撑开
• 默认是content-box: 标准盒模型, width+内间距+边框

3. flex:1

flex:1原理实际上是几个三个属性

• flex-grow: 1用户增大盒子
• flex-shrink: 1用来缩小盒子
• flex-basis: 0%覆盖width

4. c3新属性

• c3盒模型box-sizing
• flex布局
• transition过渡
• transform2D转换
• background-size背景缩放
• border-radius圆角
• 等等，不用都说说一些常用的就ok

5. bfc

概念: 块级格式化上下文,说白了,bfc是一种属性,拥有bfc会拥有独立的渲染区域,从而不会影响外界

触发bfc: position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible

bfc的应用:

外边距重叠: 触发bfc

浮动导致高度丢失: 触发bfc

清除浮动: 触发bfc

盒子重叠: 触发bfc

6. less/scss的特性

css预处理语言

• less/scss的异同或区别

1. 变量声明:

• less: @
• scss: $

2. 混入:类似js的函数

• less: 定义混入通过点(.),使用混入也是通过点,如果没有参数可以省略小括号

• scss:定义通过@mixin,使用通过@include
• 

3 .变量插值

less: @{},scss变量插值通过${}

4. 嵌套

5. 运算

6. 导入

7. 作用域

8. 颜色函数

• LESS 使用名为 spin() 的函数调整色相；
• SCSS 使用名为 adjust_hue() 的函数调整色相

9. 条件语句循环语句

• less: 不支持
• scss: 支持

后缀名为.sass的sass3.0之前,比较恶心, 不用花括号,固定的缩进格式3.0之后后缀scss,和less差不多

7. vw/vh/px/em/rem/vmin/vmax区别

• vw和vh: 相对于视口的大小,100vh等于视口的高度,100vw等于视口的宽度
• px: 固定大小
• em: 大小相对于父元素的font-size: 20px 1em = 20px
• rem: 大小相对于html的font-size
• vmin: 大小等于最小的视口: 100vmin等于最小的视口
• vmax: 大小等于最大的视口

8. 让Chrome支持小于12px 的文字方式有哪些?

pc端的浏览器,字体默认最小只能显示12px

• transform: scale(0.5)
• -webkit-text-size-adjust: none; 字体就可以按照font-size去显示

谷歌27版本之后就不能使用了

• 使用图片

9. 移动端适配方案

• rem
• 百分比
• vw/vh, vmin/vamx
• flex
• 栅格布局

10. 重绘/回流（重排）

1. 重绘（repaint）

• 概念：即重新绘制
• 导致重绘：外观、风格发生变化即发生重绘，例如color、background、box-shadow、background-size
• 影响：重绘不一定回流

1. 回流（重排）：

• 概念：当渲染树中元素的尺寸大小、布局等属性改变时,浏览器的布局需要调整,则需要重新渲染DOM。这个过程就叫回流。回流也叫重排(对整个页面进行重新排版)。
• 影响：回流必然会重绘
• 导致重排：width、height、margin、padding、font-size、position等等

1. 避免重绘和回流

• 多个样式修改不要一个一个更改，可以通过操作类名，一次统一修改

// js width
// js height 
// js color

.active {
  width: 100px;
  height: 100px;
  color: red;
}

• 先将元素display：none，修改后在显示
• top修改为translate（不会引起重排）
• 避免使用table用div替换

11.flex常用的容器属性

1. flex-direction: 设置容器中的主轴方向
2. flex-wrap: 项目在主轴方向上是否换行显示
3. justify-content: 设置容器中的项目在主轴上的对齐方式
4. align-items: 单行项目在侧轴上的排列方式
5. align-content: 多行项目侧轴上的对齐方式
6. flex-flow: 是flex-direction和flex-wrap的合写, 默认值为row nowrap

12.css选择器的优先级

!important>行内样式>id选择器>类/属性/伪类选择器>伪元素/标签选择器>通配符选择器*

13.css写一个三角形

div {
      width: 0;
      height: 0;
      border: 20px solid transparent;
      border-width: 40px 20px 0 0;
      border-right-color: #f99;
    }

14.px em  rem的区别

    px是固定单位,  
    em是相对单位,相当于当前文字的大小,如果没有就找父元素
    rem也是相对单位,相对于html的fontsize的大小

css3和css的区别

CSS3（Cascading Style Sheets 3）是CSS的最新版本，相对于CSS2而言新增了很多新特性，可以更方便地实现更加丰富、复杂的页面效果。

下面列出CSS3和CSS之间的主要区别：

1. 功能增强：CSS3比CSS2更强大，包含了更多的属性、选择器和伪类，如圆角、阴影、渐变、动画、媒体查询等，这些新特性让设计师可以更加方便地实现更加丰富、复杂的页面效果。
2. 兼容性：由于CSS3是新的标准，一些老版本的浏览器不支持CSS3的新属性，而CSS2具有更好的兼容性。为了解决这个问题，可以使用CSS前缀来实现不同浏览器的兼容性。

具体属性

CSS3相对于CSS2，新增了很多新的属性、选择器和伪类。下面列出一些主要的新特性：

1. 属性：

• 边框属性：border-radius（圆角）、box-shadow（阴影）、border-image（边框图像）等。
• 背景属性：background-size（背景尺寸）、background-origin（背景位置）、background-clip（背景剪裁）等。
• 文本属性：text-shadow（文字阴影）、text-overflow（文本溢出）、word-wrap（单词换行）等。
• 字体属性：@font-face（字体嵌入）、font-size-adjust（字体大小调整）等。
• 动画属性：animation（动画）、transition（过渡）等。
• 2D/3D转换属性：transform（转换）、perspective（透视）等。

1. 选择器：

• 属性选择器：[attr=value]、[attr~=value]、[attr|=value]、[attr^=value]、[attr$=value]、[attr*=value]等。
• 伪类选择器：:first-child、:last-child、:nth-child、:only-child、:first-of-type、:last-of-type、:nth-of-type、:only-of-type等。
• 相对选择器：+、>、~等。
• UI状态伪类选择器：:hover、:active、:focus、:checked、:disabled等。

1. 伪类：

• :nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()：用来选择元素的位置。
• :first-child、:last-child、:first-of-type、:last-of-type、:only-child、:only-of-type：用来选择元素的父级。
• :checked、:disabled、:enabled、:target：用来选择元素的状态。
• :before、:after：用来在元素前后插入内容。

以上是CSS3新增的一些主要特性，还有很多其他的新属性、选择器和伪类，可以更加方便地实现更加丰富、复杂的页面效果。