高频CSS面试题

给大家推荐一个实用面试题库

1、前端面试题库（面试必备）推荐：★★★★★

地址：web前端面试题库

BFC

块级格式上下文(block format context)是页面一块独立的渲染区域，具有一套独立的渲染规则

内部的盒子会在垂直的方向上一个接一个地放置
同一个bfc内部相邻的盒子margin会发生重叠，与方向无关
每个元素的左外边距和包含块的左边界相接触（从左到右），即使浮动元素也是如此（bfc的子元素不会超出包含块，但绝对定位可以）
清除浮动只能清除同一BFC在它前面的元素的浮动
BFC就是页面上的一个隔离的独立容器，里面的元素和外部的元素互不影响
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
bfc的区域不会与float的元素区域重叠目的是为了形成一个相对于外界完全独立的空间，让里面的元素和外部的元素互不影响

如何创建 bfc

html 根元素
浮动 float不为none
绝对定位 position为absolute/fixed
行内块元素 display为inline-block
overflow 不为 visible或者clip(auto/hidden)
diplay为flow-root
弹性元素 display为flex或flex-inline
表格单元格 display为table-cell
表格标题 display为table-caption
匿名表格单元格元素 display为table、table-row、table-row-gr藕片、table-header-group、table-footer-group、inline-table
contain的值为layout、content、paint
网格元素 display为grid或grid-inline
多列容器column-count或column-width值不为auto，且含有column-count：1的元素
column-span值为all的元素会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中

bfc 的作用

清除内部或者外部的浮动
防止同一 bfc 容器中的相邻元素间的外边距重叠问题

使用场景

高度坍塌（内部浮动导致的问题）

<style>.father{background-color:red;/* 解决 *//* display:flow-root *//* overflow:auto */}.son1{background-color: blue;width: 100px;height: 200px;float: left;}.son2{background-color: green;width: 200px;height: 100px;}</style>
</head>
<body><div class="father"><div class="son1"></div><div class="son2"></div></div>
</body>

截屏2023-08-19 下午11.06.19.png

2. 外边距折叠

外边距合并
三栏布局

<html><style type="text/css">.left{float: left;width: 200px;height: 100px;background-color: green;}  .right{float: right;width: 200px;height: 100px;background-color: pink;}.center{overflow: hidden;/* 如果不写，center的width和wrapper的width一样 */height: 100px;background-color: yellow;}</style></head><body><div class="wrapper"><div class="left"></div><div class="right"></div><div class="center"></div></div></body>
</html>

截屏2023-08-20 上午3.00.23.png

居中

定宽高

absolute+负margin
absolute+margin auto
absolute+calc 不定宽高
absolute+transform
lineheight
writing-mode
table
css-table
flex
grid

absolute+负margin

<div class="father"><div class="son"></div>
</div>

.father {position: relative;
}
.son {position: absolute;left: 50%;top: 50%;margin-left: -(父元素宽度-子元素宽度)/2 px;margin-top: -(父元素高度-子元素高度)/2 px;
}

absolute+auto

<div class="father"><div class="son"></div>
</div>

   .father{position: relative;width: 200px;height: 200px;background-color: red;}.son{background-color: black;position: absolute;width: 100px;height: 100px;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}

absolute+cale

<div class="father"><div class="son"></div>
</div>

.father {width: 200px;height: 200px;position: relative;
}
.son {width: 100px;height: 100px;position: absolute;top:cale(50% - 50px);left:cale(50% - 50px);
}

absollute+transform

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

flex

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

grid

.father {display: grid;
}
.son {justify-self: center;align-self: center;
}

一些概念

屏幕尺寸：用对角来计算。1英寸=2.54厘米
像素：硬件和软件所能控制的最小单位。
屏幕分辨率：一个屏幕具体由多少个像素点组成
物理像素：设备的像素点个数
逻辑像素：让n个像素当一个像素使用
视觉视口
理想视口：所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有iphone的理想视口宽度都为320px，安卓设备的理想视口有320px、360px等等。 width=device-width 宽度等于屏幕宽度 initial-scale=1缩放等于1 maximum-scale=2最大缩放等于2 minimum-scale=0.5最小缩放等于0.5 user-scalable=no不允许缩放

<meta name="viewport" content="width=device-width,initial-scale=1" />

移动端适配方案

rem

<head><meta name="viewport" content="width=device-width,initial-scale=1.0" user-scalable="no"/><style>.box{width:10rem;}</style><script>function setRootRem(){const root = document.documentElement;const scale = root.clientWidth / 10;root.style.fontSize = scale + 'px'}setRootRem()window.addEventListener('resize', setRootRem)</script>
</head>

但这样我们会发现在写布局的时候会非常复杂，也就是你需要自己手动去计算一下对应的rem值，比如上面的font-size设计稿上是20px，那我们就要计算一下20px对应的rem是多少，按我们上面的规则，1px = 1/37.5rem，所以20px应该对应20/37.5 = 0.53rem。所以这种方案我们通常搭配着CSS预处理器使用。 rem.less

@device-width:375;
@rem:(@device-width/10rem)

然后将@rem配置成less全局变量

font-size:(24/@rem)

特点

适配原理稍复杂
需要使用JS
设计稿标注的px换算到rem
方案灵活，既能实现整体缩放，又能实现局部不缩放

vw、vh适配

rem.less

@device-width:375;
@vw:(100vm/@device-width)

font-size: 16*@vw

特点

适配原理简单
不需要JS即可适配
设计稿标注的px换算到vw
方案灵活，既然实现整体缩放，又能实现局部不缩放

px

export function initViewport() {const width = 375;  // 设计稿宽度const scale = window.innerWidth / width// console.log('scale', scale)let meta = document.querySelector('meta[name=viewport]')let content = `width=${width}, init-scale=${scale}, user-scalable=no`if(!meta) {meta = document.createElement('meta')meta.setAttribute('name', 'viewport')document.head.appendChild(meta)}meta.setAttribute('content', content)
}

适配原理简单
需要JS
无需转换
方案死板，只能实现页面级别肢体缩放

CSS3动画

CSS3动画分为transition、animation、transform

transition（过度）

transition: transition-property transition-duration transitino-timing-function transition-delay

包含四个属性 transition-property:执行变换的属性 transition-duration：变换延续的时间 transitino-timing-function：在延续的时间段变换的速率变化 transition-delay：变换延迟时间

transitino-timing-function具体值

linear 缺点：
不能重复
height：auto不会产生动画效果
不支持所有的属性

支持的属性

background-color
background-position
border-color
border-width
border-spacing
bottom
clip
color
font-size
font-weight
height
left
letter-spacing
line-height
margin
max-height
max-width
min-height
min-width

animation

keyframes规则用于定义动画的每个阶段。通过keyframe规则，可以指定动画的每个关键帧。

@keyframes example{0%   {left: 0; top:0px;}50%  {left:200px; top:200px;}100% {left: 0px; top:0px;}
}
div {animation-name: example;animation-duration: 5s;animation-iteration-count: infinite;animation-direction:alternate;animation-play-state:running;
}