给大家推荐一个实用面试题库
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>
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>
居中
定宽高
- 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; }
详细属性
- animation-name:指定应用的动画名称
- animation-duration：指定动画的持续时间
- animation-timing-function：指定动画的速度曲线
- animation-delay: 指定动画开始之前的延长时间
- animation-interation-count: 指定动画应该重复的速度
- animation-direction: 指定动画的方向
- animation-fill-mode: 指定动画在执行之前和之后如何应用样式
- animation-play-state：指定动画运行或暂停
transform(变换)
旋转
2D transform:rotate(angle)顺时针 3D
transform:
- rotate(x,y,z,angle) x轴y轴z轴 angle:旋转角度
- rotateX(angle)
- rotateY(angle)
- rotateZ(angle)
缩放
2D transform:scale(x,y) 3D transform:scale3D(x,y,z) scaleX() scaleY() scaleZ()
倾斜
stransform:skew(x) stransform:skew(x,y)
移动
transform:translate(x) transform:translate(x,y) transform:translate(x,y,z) transform:translateX() transform:translateY() transform:translateZ()
给大家推荐一个实用面试题库
1、前端面试题库 （面试必备） 推荐：★★★★★
地址：web前端面试题库
