蝙蝠做等级的网站,赣州大余做网站建设,手机制作表白网站,网页设计结构给大家推荐一个实用面试题库
1、前端面试题库 #xff08;面试必备#xff09; 推荐#xff1a;★★★★★
地址#xff1a;web前端面试题库
BFC
块级格式上下文(block format context)是页面一块独立的渲染区域#xff0c;具有一套独立的渲染规则
内部的…给大家推荐一个实用面试题库
1、前端面试题库 面试必备 推荐★★★★★
地址web前端面试题库
BFC
块级格式上下文(block format context)是页面一块独立的渲染区域具有一套独立的渲染规则
内部的盒子会在垂直的方向上一个接一个地放置同一个bfc内部相邻的盒子margin会发生重叠与方向无关每个元素的左外边距和包含块的左边界相接触从左到右即使浮动元素也是如此bfc的子元素不会超出包含块但绝对定位可以清除浮动只能清除同一BFC在它前面的元素的浮动BFC就是页面上的一个隔离的独立容器里面的元素和外部的元素互不影响计算BFC的高度时考虑BFC所包含的所有元素连浮动元素也参与计算bfc的区域不会与float的元素区域重叠 目的是为了形成一个相对于外界完全独立的空间让里面的元素和外部的元素互不影响
如何创建 bfc
html 根元素浮动 float不为none绝对定位 position为absolute/fixed行内块元素 display为inline-blockoverflow 不为 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-tablecontain的值为layout、content、paint网格元素 display为grid或grid-inline多列容器column-count或column-width值不为auto且含有column-count1的元素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
bodydiv classfatherdiv classson1/divdiv classson2/div/div
/body2. 外边距折叠
外边距合并三栏布局
htmlstyle typetext/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/headbodydiv classwrapperdiv classleft/divdiv classright/divdiv classcenter/div/div/body
/html 居中
定宽高
absolute负marginabsolutemargin autoabsolutecalc 不定宽高absolutetransformlineheightwriting-modetablecss-tableflexgrid
absolute负margin
div classfatherdiv classson/div
/div.father {position: relative;
}
.son {position: absolute;left: 50%;top: 50%;margin-left: -(父元素宽度-子元素宽度)/2 px;margin-top: -(父元素高度-子元素高度)/2 px;
}absoluteauto
div classfatherdiv classson/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;}absolutecale
div classfatherdiv classson/div
/div.father {width: 200px;height: 200px;position: relative;
}
.son {width: 100px;height: 100px;position: absolute;top:cale(50% - 50px);left:cale(50% - 50px);
}absollutetransform
.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等等。 widthdevice-width 宽度等于屏幕宽度 initial-scale1缩放等于1 maximum-scale2最大缩放等于2 minimum-scale0.5最小缩放等于0.5 user-scalableno不允许缩放
meta nameviewport contentwidthdevice-width,initial-scale1 /移动端适配方案
rem
headmeta nameviewport contentwidthdevice-width,initial-scale1.0 user-scalableno/style.box{width:10rem;}/stylescriptfunction 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[nameviewport])let content width${width}, init-scale${scale}, user-scalablenoif(!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 缺点不能重复heightauto不会产生动画效果不支持所有的属性
支持的属性
background-colorbackground-positionborder-colorborder-widthborder-spacingbottomclipcolorfont-sizefont-weightheightleftletter-spacingline-heightmarginmax-heightmax-widthmin-heightmin-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前端面试题库
