2022面试实战篇----css

1.什是bfc，为什么会产生bfc；

BFC(Block Formatting Context)直译为"块级格式化上下文"。它是一个独立的渲染区域,让处于BFC内部的元素与外部的元素隔离开来。

BFC会在以下几种情况下产生:

1. float 除 none 以外的值

2. overflow 除 visible 以外的值 (hidden、auto、scroll)

3. display 为 inline-block、table-cell、flex

4. position 为 absolute 或 fixed

BFC的特点:

1. BFC内部的元素会在垂直方向上一个挨一个地放置

2. BFC内部的元素不会与外部元素发生 margin 重叠

3. BFC计算高度的时候,浮动元素也会参与计算

4. BFC只会包含普通流内的元素,不会包含浮动元素

举例:

html
<div class="outer">
  <div class="inner">inner</div>
</div>

<style>
.outer {
  overflow: hidden; /* 触发BFC */
  background: red;
}  

.inner {
  width: 100px;
  height: 100px;
  background: blue;
  margin-bottom: 100px; 
}
</style>

这里,outer 元素触发 BFC,导致内部的 margin 不会和外部发生重叠,所以 inner 元素 margin-bottom 生效,而不会撑起 outer 元素。如果去掉 BFC 触发的 overflow: hidden,margin 就会发生重叠,inner 元素的 margin-bottom 会撑起 outer 元素,影响布局。

我们可以通过 box-sizing 属性来设置元素采用哪种盒模型。

## box-sizing: content-box

默认值,采用标准盒模型,width/height 只包含内容区(content)

## box-sizing: border-box

采用 IE 盒模型,width/height 包含内容区、内边距和边框

2.css盒模型；

CSS 盒模型是 CSS 中最重要的概念之一。它定义了元素可以占用多少空间,以及元素的内容、内边距、边框、外边距等与元素空间的关系。

CSS 提供两种盒模型:

1. 标准盒模型: content + padding + border + margin

2. IE 盒模型: content + padding + border + margin 的宽度和高度直接设置到元素上

这两种盒模型的区别在于 comomputing box model 的方式不同。

## 标准盒模型

内容区(content)宽高可设置 width/height 属性,内边距(padding)可以设置 padding,边框(border)可以设置 border,外边距(margin)可以设置 margin。

一个元素的实际占用空间为:宽度/高度 = 内容区宽度/高度 + 内边距 + 边框 + 外边距

css
.box {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 5px solid #000;
  margin: 20px;
}

这个 .box 元素实际占用的空间为:
width = 300px + 20px(左右内边距) + 10px(左右边框) + 40px(左右外边距)= 370px
height = 200px + 20px(上下内边距) + 10px(上下边框) + 40px(上下外边距) = 270px

## IE 盒模型

IE 盒模型设置的 width 和 height 会包含 content + padding + border,而 margin 则会另外设置。

一个元素的实际占用空间为:宽度/高度 = width/height + 外边距在 IE 中,上例 .box 元素的设置会变为:
width = 300px(包含内边距和边框)
height = 200px(包含内边距和边框)
margin: 20px;所以实际占用空间:
width = 300px + 40px(左右外边距) = 340px 
height = 200px + 40px(上下外边距) = 240px

理解 CSS 盒模型的区别和计算方式对学习 CSS 布局非常重要。IE盒模型目前已经很少使用,大多采用标准盒模型。

3.css优先级；

CSS 优先级决定了多个规则作用于同一个元素时,哪个规则的样式最终会被应用到元素上。

CSS 优先级按照以下标准排序:

1. 行内样式 > 内嵌样式 > 外部样式表

2. id > class > tag

3. 重要性 !important > 任何选择器

4. 后定义的样式 > 先定义的样式

具体规则:

1. 样式类型:行内样式 > #id 选择器 > .class 选择器 > tag 选择器 > 继承的样式 > *通用选择器

2. 特殊性: id 选择器 = 100,class 选择器 = 10,tag 选择器 = 1,* 通用选择器 = 0

3. 计算选择器的特殊性:选中元素的特殊性值相加得到最终特殊性。

4. 特殊性相同时,就近原则:后定义的样式会被采用

5. !important 赋予的样式特殊性值为:∞,高于任何选择器举例:

css
h1 {  /* 特殊性=1 */
  color: blue;  
}

.content h1 { /* 特殊性=11 */
  color: red;
}

#intro h1 {   /* 特殊性=101 */
  color: green; 
}

h1 {           /* 特殊性=1 */
  color: orange !important;  /* 特殊性=∞ */ 
}

对 h1 元素生效的样式是 color: orange,因为 !important 具有最高优先级。

4.position各个值得区别，使用场景；

CSS position 属性用于设置元素的定位类型。它有 5 个可能的值:

1. static: 默认值。元素按照正常文档流的位置出现。

2. relative: 相对定位。

元素先按照正常文档流的位置出现,然后相对自身原先位置进行定位。

3. absolute: 绝对定位。

元素脱离正常文档流,相对父元素或浏览器窗口进行定位。

4. fixed: 固定定位。

元素脱离正常文档流,相对浏览器窗口进行定位。

5. sticky: 粘性定位。

元素按照正常文档流的位置出现,然后相对自身原先的flow root(BFC)进行定位。

## position: static

默认值,不进行任何定位。元素出现在正常文档流中当前的布局位置。

## position: relative

元素先按照正常文档流的位置显示,然后可以通过 top, right, bottom, left 进行相对偏移。相对于自身原来的位置进行定位,并且该元素原先的位置依然保留。

通常用于:微调元素位置,避免影响其他元素。

## position: absolute

元素脱离正常文档流,通过 top, right, bottom, left 进行绝对定位。

相对于父元素或浏览器窗口进行定位。通常用于:精确定位元素,用于具有浮动元素的容器内。

## position: fixed

元素脱离正常文档流,通过 top, right, bottom, left 进行固定定位。相对于浏览器窗口进行定位。

通常用于:实现类似于客服或者返回顶部等悬浮工具栏。

## position: sticky

元素先按照正常文档流的位置显示,然后在跨越一定阈值(默认 threshold 为 0)时,位置固定在 BFC  establishes的 flow root(该元素的 containing block)。通常用于:实现类似于锚链接效果。当元素到达预定位置时会固定,而不影响其他元素的位置。

5. css布局，两栏布局，实现方式；

两栏布局是 web 布局中的典型场景之一。我们可以通过以下几种方式实现:

1. 浮动 float + margin

css
.left {
  float: left;
  width: 200px; 
}

.right {
  margin-left: 210px;  /* left 宽度 + margin */
}

2. 绝对定位 absolute + margin

css 
.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px; 
}

.right {
  margin-left: 210px;  
}

3. flex 布局

css
.container {
  display: flex; 
}

.left {
  width: 200px; 
}

4. 网格布局 grid

css
.container {
  display: grid;
  grid-template-columns: 200px auto; 
}

.left { 
} 

5. 浮动 float + 负 margin

css
.left {
  float: left;
  width: 200px; 
}

.right {
  margin-left: -210px;  
}

6. 相对定位 relative + 绝对定位 absolute

css
.left {
  position: relative;
  width: 200px; 
}

.right {
  position: absolute;
  left: 210px;
  right: 0;
}

  这些都是实现两栏布局常用的方法。浮动float方法和 flex/grid 布局可能更加简单易读。

6.块级元素里边包裹两个行内元素，怎么进行垂直居中；

要在块级元素内垂直居中两个行内元素,我们可以使用以下几种方法:

1. line-height 方法

为块级元素设置 line-height 与其高度相等,并将两个行内元素作为其子元素,这两个行内元素就会垂直居中。

css
.parent {
  height: 100px;
  line-height: 100px;
}

.child1, 
.child2 {
  display: inline;  /* 行内元素 */ 
}

2. 绝对定位 absolute + transform

将两个行内元素以绝对定位的方式插入块级元素,再通过 transform 属性垂直移动 50% 实现居中效果。

css
.parent {
  position: relative;
  height: 100px; 
}

.child1,
.child2 {
  display: inline;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);  
}

3. flexbox

利用 flexbox 的 align-items: center 对行内元素进行垂直居中。

css
.parent {
  height: 100px;
  display: flex;
  align-items: center; 
}

4. viewport 单位vh

设置两个行内元素的高度为 50vh,即可垂直居中。

css
.child1,  
.child2 {
  height: 50vh;  
  display: inline;
}

这些都是在块级元素内实现多个行内元素垂直居中的常用方法。

7.水平垂直居中的场景；

水平垂直居中是 web 开发中非常常见的布局需求。常见的应用场景有:

1. 单个块级元素居中

我们经常需要一个盒子或其他块级元素在页面完全居中。这时可以使用绝对定位+transform 方法或 flexbox 实现。

css
.parent {
  position: relative;
}

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

或者

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

2. 图片居中

图片作为块级元素,也经常需要垂直居中或水平垂直居中。同样可以使用上述方法实现。

3. 文字居中

无论是标题还是段落,文字内容垂直居中也是常见需求。这时主要使用 line-height 方法:

css
.text {
  height: 100px;
  line-height: 100px;  
}

4. 多个块级元素居中有时我们需要同时将多个块级元素或行内块元素居中显示。这时 flexbox 方法会非常高效:

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

5. 已知高度的 viewport 居中

当我们需要一个定高的 viewport 滚动容器完全居中显示时,可以设置其高度为 100vh,并添加 padding 作为 viewport的高度。

css
.parent {
  height: 100vh;
  padding: 70vh 0;  /* viewport 高度的padding */ 
}

8.移动端是怎么进行适配处理的；

移动端适配主要依靠以下几种方法:

1. Viewport

通过设置 viewport,使得网页宽度等于设备宽度,达到最佳视觉效果。

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

2.  rem 布局

rem 单位相对于根元素(html)字体大小来计算长度单位。我们可以通过仅设置 html 字体大小来控制整个页面的大小配比。

css
html {
  font-size: 62.5%;  /* 10÷16=62.5% */ 
}

/* 其他选择器使用rem单位 */
body {
  font-size: 1.4rem;  
} 

然后只需要根据视口宽度动态设置 html 字体大小,整个页面元素就会等比例缩放。

js
function resizeHtml() {
  var viewportWidth = document.documentElement.clientWidth
  if (viewportWidth >= 750) {  //以750为分界
    document.getElementsByTagName('html')[0].style.fontSize = '100px'
  } else {
    document.getElementsByTagName('html')[0].style.fontSize = viewportWidth / 7.5 + 'px'  //7.5是根据设计稿确定的一个比例 
  }
}
resizeHtml()  //初始化调用
window.addEventListener('resize', resizeHtml)  //监听屏幕变化

3. 媒体查询

媒体查询可以根据视口宽度设置不同的 CSS 样式,实现响应式效果。

css
@media (min-width: 750px) {  /* 大于等于750 */
  html {
    font-size: 100px;  
  }
}

@media (max-width: 750px) {
  html {
    font-size: calc(100vw / 7.5);  /* 7.5按设计稿比例设置 */ 
  }
}

4. Flexible.js

Flexible.js 是一款针对移动端的适配方案,主要使用 rem 布局 + 媒体查询 实现页面适配。

5. 响应式框架

使用 Bootstrap、Foundation 等响应式框架也可以简单实现页面在不同设备上的适配。

9.flex布局中flex:1是哪几个css的简写形式，分别用来做什么；

flex: 1 是 flex-grow, flex-shrink, flex-basis 三个属性的简写形式。

- flex-grow: 定义项目的放大比例,默认为0,即不放大。
- flex-shrink: 定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
- flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间,浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目本身的大小。

所以:flex: 1;等同于:

css
flex-grow: 1;  /* 放大比例为1,即占据剩余空间 */
flex-shrink: 1;  
flex-basis: 0%;  /* 首先分配0%空间,剩余空间再根据flex-grow: 1设置来分配 */

可以简单理解为:

- flex-grow: 获取剩余空间
- flex-shrink: 缩小空间
- flex-basis: 分配基准空间 

而 flex: 1 则同时设置这三个属性,让元素既可以获取剩余空间,也可以在空间不足时缩小,并优先分配最小空间。这三个属性配合使用可以灵活控制 flex 子元素的大小变化。例如:

css 
.item1 {
  flex: 1 1 0; 
}

.item2 {
  flex: 0 1 auto;  
}

- item1: 首先占据0空间,然后平分剩余空间,在空间不足时按比例缩小。
- item2: 不放大也不缩小,始终按auto大小显示。

10.vw、vh使用过吗；

vw 和 vh 是 Viewport Width 和 Viewport Height 的简写,表示视口大小单位。

- vw:1vw 等于视口宽度的 1%
- vh:1vh 等于视口高度的 1%

这两个单位主要用于:

1. 响应式布局

我们可以使用 vw 和 vh 单位设定元素大小,当视口大小变化时,元素大小也会等比例变化,实现响应式效果。

css
.box {
  width: 50vw;  /* 视口宽度的50% */
  height: 50vh; /* 视口高度的50% */
}

2. 视口单元剩余空间布局

通过设置 padding/margin 等属性为视口单元,可以基于视口剩余空间进行布局。

css 
.container {
  height: 100vh;
  padding: 10vh 0;  /* 上下内边距为视口高度的10% */
}

 3. 视口内容滚动

当内容超出视口大小时,我们也可以使用滚动条显示完整内容。

css
.scroll {
  overflow-y: scroll; 
  height: 100vh;  /* 视口高度 */
}

4. 视口百分比动画

我们可以基于视口大小设定动画元素的开始和结束位置,实现视口百分比的动画效果。

css
@keyframes slidein {
  from {
    transform: translateY(100vh); 
  }
  to {
    transform: translateY(0);
  } 
} 

vw 和 vh 单位的使用为响应式布局和视口相关布局带来了更多可能性。

11.rem、em区别；

rem 和 em 都是 CSS 中的长度单位,主要区别在于:

- rem:相对长度单位,相对于根元素<html>的字体大小。
- em:相对长度单位,相对于父元素的字体大小。

## rem

rem 单位可以利用根元素的字体大小作为参考单位,调整整个页面的大小。

css
/* 设置根元素<html>的字体大小 */
html {
  font-size: 62.5%;  /* 62.5%的16px = 10px */  
}

body {
  font-size: 1.4rem; /* 1.4 * 10px = 14px */ 
}

然后我们只需要改变<html>的 font-size,整个页面的元素大小都会等比例变化,非常适合用于响应式布局。

## em

em 单位则是相对于父元素的字体大小,如果用在<body>上,则相对于浏览器的默认字体大小。

css
body {
  font-size: 16px;  
}

.box {
  font-size: 2em;  /* 2 * 16px = 32px */ 
}

由于 em 是相对单位,在嵌套元素中使用时,可能会造成尺寸的叠加效果。

css
body {
  font-size: 16px; 
}

.outer {
  font-size: 1.2em;  /* 1.2 * 16px = 19.2px */ 
}

.inner {
  font-size: 1.2em;  /* 1.2 * 19.2px = 23.04px */ 
}

  .inner 的字体大小是在 .outer 的基础上计算的,这可能不是我们期望的结果。所以通常我们会在父元素上使用 em,在子孙元素上使用 rem 来避免这种尺寸叠加问题。

举个例子:

css
/* 父元素使用em */ 
.parent {
  font-size: 2em;  
}

/* 子元素使用rem */
.child {
  font-size: 1.2rem;
}

/* 孙元素也使用rem */ 
.grandchild {
  font-size: 0.8rem;
}

 这里 .parent 使用 em 单位,其子元素 .child 和 .grandchild 使用 rem 单位。

- 如果浏览器默认字体大小为 16px
- .parent 的字体大小为 2em = 32px 
- .child 的字体大小为 1.2rem = 12px (相对于html的字体大小)
- .grandchild 的字体大小为 0.8rem = 8px你可以看到,尽管 .child 和 .grandchild 嵌套在使用 em 的父元素内,但它们的大小计算都是相对于根元素的字体大小,因此不会出现尺寸叠加的问题。

12. css3动画接触的多嘛；

CSS3 动画可以为元素提供复杂的动画效果,无需使用 Flash 动画或 JavaScript。主要通过 @keyframes 规则定义动画,然后使用 animation 属性将动画应用到元素上。

## @keyframes 规则

@keyframes 规则用于指定动画的关键帧及中间状态。其语法为:

css
@keyframes animationName {
  from { property: value; }
  50%  { property: value; }
  to   { property: value; }
}

也可以使用百分比来定义关键帧:

css
@keyframes animationName {
  0%   { property: value; }
  50%  { property: value; }
  100% { property: value; } 
}

## animation 属性

animation 属性用于将 @keyframes 定义好的动画应用到元素上,其语法为:

css
animation: name duration timing-function delay iteration-count direction;

各个参数代表的含义为:

- name:调用@keyframes定义的动画名
- duration:动画持续时间
- timing-function:动画的速度曲线,可选的值有:ease、linear、ease-in、ease-out、ease-in-out等
- delay:动画延迟开始时间
- iteration-count:动画的播放次数,infinite为无限循环
- direction:动画的方向,可选的值有:normal、reverse、alternate、alternate-reverse等 

## 实例

下面是一个基本的动画实例:

HTML:

html
<div class="box"></div>

CSS:

css
.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 2s infinite; 
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0); 
  } 
}

这里我们定义了一个 move 动画,让 .box 元素在 2 秒内来回移动 200px,并且无限循环。

13.flex布局实现类似栅格布局：3:2:7布局

flex 布局可以很轻松地实现类似栅格布局的3:2:7布局。

HTML 结构:

html
<div class="parent">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>

CSS 代码:

css
.parent {
  display: flex;
}

.item1 {
  flex: 3;
}

.item2 {
  flex: 2; 
}

.item3 {
  flex: 7;
}

- 给父元素 .parent 设置 flex 布局
- 通过 flex 属性分别给三个子元素设置 flex-grow,指定其放大比例
- item1 的 flex-grow 为 3,即所占比例为 3 / (3 + 2 + 7) = 3/12 = 25%
- item2 的 flex-grow 为 2,即所占比例为 2 / 12 = 16.7%
- item3 的 flex-grow 为 7,即所占比例为 7 / 12 = 58.3%所以最终这三个子元素会按照 25% : 16.7% : 58.3% 的比例布局,实现 3 : 2 : 7 的栅格效果。