rem em vw 区别
实现一个长宽比4:3的元素
// w3c提案，尚在草案阶段
.wrapper {
width: 40vw;
height: auto;
aspect-ratio: 4 / 3;
background: orange;
}
// 使用垂直方向上padding控制, padding相对父元素定位
// 因为设置了height:0， 实际的内容需求需要做绝对定位处理
.wrapper {
width: 40vw;
}
.intrinsic-aspect-ratio-container {
width:100%;
height: 0;
position: relative;
padding-top: 75%;
background-color: orange;
}
#content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="wrapper">
<div class="intrinsic-aspect-ratio-container">
<div id="content">content</div>
</div>
</div>
flex
flex-basis
flex-basis: 项目占据主轴的宽度， 在分配多余空间之前会判断这个属性大小， 默认值auto
- auto: 即项目本身的大小，取决于item自身的宽度或高度
- 0%： 不暂居主轴宽度，item的宽度和高度无意义 当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。
flex-grow
flex-grow: 用于瓜分”父容器“剩余空间 。定义项目的放大比例， 默认值0，即存在剩余空间，也不会放大
- 如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。(如果有的话)
- 如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink
定义了项目的缩小比例， 默认值1。 即项目空间不足，item将弱小， 负值对该属性无效。
flex-shrink: 计算元素宽度（包含标准盒模型、怪异盒模型）总和超出父容器部分。
然后按照 盒宽度 - (目标元素width) * shrink / (目标元素width * shrink + 其他元素 * shrink + 其他元素二 * shrink + ....)) * 超出部分宽度 ， 计算缩放后的实际宽度
flex: 1 代表什么含义
p {
flex: 1
}
// 等于下面
p {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
示例
{ flex: flex-grow | flex-shrink | flex-basis }
#container {
display: flex;
width: 1000px;
}
/* 瓜分父元素剩余空间 */
/* 实际宽度 300 + (1000 - 500) * 2 / 3 = 633.33 */
.left {
width: 300px;
height: 200px;
flex-grow: 2;
}
/* 实际宽度 200 + (1000 - 500) * 1 / 3 = 366.66 */
.right {
width: 200px;
height: 200px;
flex-grow: 1;
}
/* flex-shrink 测评 */
/*
分配比例为： 超出宽度 400 + 300 = 700 - 500 = 200
left和right 分配比例为 400*2:300*1= 8/3
left = 400 - 200*8/11 = 254.54
right = 300 - 200*3/11 = 245.45
计算缩放比例：用width，要考虑到盒模型，标准和模型和怪异盒模型
超出宽度 = 盒子宽度+padding+border - 外部容器宽度
*/
#container {
display: flex;
width: 500px;
}
.left {
width: 400px;
height: 200px;
flex-shrink: 2;
}
.right {
width: 300px;
height: 200px;
flex-shrink: 1;
}
css 百分比属性有哪些
line-height: 相对于自身fontSize
font-size width height 相对于父元素
padding margin 相对于父元素宽度
top/left/right/bottom 相对于父元素宽度/高度
transform：translate(百分比,百分比） 相对于自身宽度/高度
移动端的 1px 是基于什么计算的
重绘&&重排
页面在生成过程中至少会渲染一次，并且在用户访问过程中，可能还会不断渲染
重排一定会重绘，重绘不一定会重排
页面生成过程
- 从服务器拉取html、css、js资源
- html被html解析器解析成DOM树
- css被css解析器解析cssom树
- 结合DOM树和css树生成渲染树(render tree)
- 生成布局flow，将渲染树的所有节点进行平面合成<耗时, 重绘少了这一步><Layout布局阶段>
- 将平面合成后的节点，绘制在屏幕上<耗时>
重排：简称回流
当DOM变化，例如删除元素、添加元素， 影响了元素的几何位置、浏览器需要重新生成元素几何位置，将其放置在正确位置的过程叫做重排
触发条件： 重新生成布局、重新排列元素
- 窗口大小改变
- 添加、删除元素
- 改变元素位置、改变元素尺寸
- 内容变化(例如：用户在input中输入内容)
重绘
当元素外观发生改变，未改变布局(几何位置)，重新把元素外观绘制的过程，叫做重绘
重绘后，dom树未改变，cssomtre改变，跳过布局阶段，直接绘制
- 元素的某些外观改变，style_change
script的async、defer区别
正常情况下，script没有任何引入属性情况下，有以下特性， 立即加载，解析，执行脚本文件
- js脚本分为加载(Fetch)、解析（Execution）、执行(Execution)
- js脚本的加载。解析、执行会阻塞DOM树渲染，因此一般会放置在尾部
defer 和 async有下面异同
- 都是属于异步加载脚本
- defer加载完成后，到DOM解析完成后才会执行，但是会发生在documentContentLoaded之前
async
对脚本的请求是异步，不会阻塞html解析，一旦网络请求结果出来了，hmtl就会暂停解析，让js解析并执行相关代码
如果在async 请求发出来之后，html解析已经完成，那么对async不产生任何影响
defer
脚本异步加载，获取脚本的请求的异步的，不会阻塞浏览器解析hmtl,一旦请求返回结果后，如果html解析还未完成，浏览器并不会解析并执行该返回结果脚本js代码，而是等到浏览器完全把hmtl解析完成在执行js代码
如果存在多个多个defer标签，会按照引入顺序解析执行，这样并不会影响相互执行U依赖关系
使用场景
- 如果脚本是模块化，不存在依赖关系，那么请使用async
- 如果脚本依赖另一个脚本，那么请使用defer
- 如果脚本是很小，并且异步脚本依赖他，那么请使用一个没有任何属性的内联脚本
什么是BFC
BFC: 块级格式化上下文，BFC决定了元素如何对其内容进行定位，以及与其他元素关系和相互作用，简单来说BFC就是一个密闭空间，空间内的元素的不会影响到空间外元素
形成BFC条件
- float 不为none
- overflow 不为visible
- position不为static 和 relative
- display: 为flex， table-cell, inline-block等
使用BFC场景
- 清除浮动
- 防止margin塌陷
- 自适应两栏布局
-
扩展: 自适应三栏布局<style> /********* flex布局 *********/ #root { height: 100%; display: flex; } #left { width: 200px; background: green; } #right { width: 300px; background: blue; } #main { background: red; flex-grow: 1; // flex-grow 默认是0，不瓜分剩余空间 } /****** 左右两边position: absolute, 内容区设置margin:left/right *******/ body { padding: 0; margin: 0; } .left { background-color: gray; width: 100px; height: 200px; position: absolute; left: 0; top: 0; } .right { float: right; background-color: gray; width: 200px; height: 200px; position: absolute; right: 0; top: 0; } .main { height: 200px; background-color: lightgray; margin-left: 100px; margin-right: 200px; } </style> <body> <div id="root"> <div class="left">left</div> <div class="main">content</div> <div class="right">right</div> </div> </body><head> <title>Document</title> <style> body { width: 100%; position: relative; overflow: hidden; } .left { width: 100px; height: 150px; float: left; background: green; } .main { height: 200px; background: black; margin-left: 100px; margin-right: 200px; } // 或者这样行为BFC .main { height: 200px; background: black; overflow: hidden; } .right { width: 200px; height: 150px; float: right; background: red; } </style> </head> <body> // 浮动前提都是元素靠前 <div class="left">left</div> <div class="right"></div> <div class="main">zzz</div> </body>
-
BFC特性
BFC内部盒子垂直的从顶部一个一个的排序BFC的区域不会与浮动的盒子产生交集，而是紧贴浮动边缘BFC是一个独立容器，容器内部元素不会影响到容器外部元素计算BFC的高度时，也会检测浮动盒子的高度，它是一个独立的渲染区域盒子垂直方向的距离由margin决定，属于同一个BFC的两个盒子的margin会发生重叠
实现吸底效果，底部footer在内容没有铺满可视区，始终固定在顶部，当内容超出可视区高度，跟随内容后面展示
html,
body {
height: 100%;
position: relative;
}
.wrapper {
position: relative;
min-height: 100%;
}
.header {
height: 100px;
background-color: red;
}
.content {
padding-bottom: 80px;
background: blue;
height: 400px;
}
.footer {
width: 100%;
height: 80px;
left: 0;
right: 0;
bottom: 0;
background: green;
position: absolute;
}
/* 方法二， 利用css计算 calc */
html,
body {
height: 100%;
position: relative;
}
.wrapper {
position: relative;
/* 这步骤关键 设置高度100%， 不能是min-height */
height: 100%;
}
.header {
height: 100px;
background-color: red;
}
.content {
background: blue;
/* 计算父级高度， 减去header&&footer高度；注意加px */
min-height: calc(100% - 180px);
}
.footer {
height: 80px;
background: green;
}
解释一下CSS的盒子模型？
标准的盒模型：border--sizing: content-box
盒子总宽度/高度=width/height（内容区宽度/高度）+ 2 * padding + 2 * border
IE盒模型(怪异盒模型)：border-sizing: border-box
盒子总宽度/高度 = width/height(内容区高度/宽度 + 2 * padding + 2 * border)
请你说说CSS选择器的类型有哪些，并举几个例子说明其用法？
首先说主要都有哪些选择器
- 标签选择器（如：body,div,p,ul,li）
- 类选择器（如：class="head",class="head_logo"）
- ID选择器（如：id="name",id="name_txt"）
- 组合选择器（如：.head .head_logo,注意两选择器用空格键分开）
- 继承选择器（如：div p,注意两选择器用空格键分开）
- 伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。 :after，:before）
要动态改变层中内容可以使用的方法 && innerHtml/ innerText区别
- innerHmtl: 当前标签内全部内容，包括html标签
- innerText： 当前标签内除非html标签内容
const wrapper = document.getElementById('wrapper');
wrapper.innerHTML = `<p style="color:red">111111</p>`; // div内容 111 且颜色是红色
wrapper.innerText = `<p style="color:red">111111</p>`; // div内容 <p style="color:red">111111</p>
请列举几种清除浮动的方法(至少两种)?
- 父级div定义 height
- 结尾处加空div标签 clear:both
- 父级div定义 伪类:after {content:” ”,height:0; display:block; overflow:hidden; cleat:both;}
- overflow:hidden;
你有哪些性能优化的方法？
- 使用CDN CDN优缺点
- 可缓存的AJAX
- 减少HTTP请求次数
- 把JS放到底部
- 把CSS放到顶部
- 为文件头指定Expires
- 路由懒加载
- 压缩相关图片等资源, esbuild,min-css-extract-plugins
- 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
- 优化首屏加载资源，骨架屏（从webpack分包）
如何解决多个元素重叠问题？
使用z-index属性可以设置元素的层叠顺序
position的值relative和absolute的定位原点是？
- relative（相对定位）：定位原点是元素本身所在位置<left:0, right:0>；
- absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的
CSS3有哪些新特性
- 阴影和反射
box-shadow - 文字特效
text-shadow - 圆角
border-radius - 旋转
transform - 过渡
transition - 动画
animation - 颜色
rgba - 栅格布局
gird - 弹性布局
flex
display:inline-block 什么时候不会显示间隙？(携程)
- 元素使用
margin负值 - 父级使用
font-size:0
垂直居中的几种方式
- flex 布局
div {
display: flex;
align-items: center
justify-content: center;
}
- 百分比集合transform
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- margin移动： 必须确定了元素的宽高度(宽高度的一半)
#t1 {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 200px;
margin-left: -50px;
margin-top: -100px;
}
- 绝对定位和0
#t1 {
position: absolute;
width: 20%;
height: 32%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
float 和position一起用是什么效果
float: 是元素脱离文档流，浮动在文档流上， 可以用padding和margin进行定位 postion： 元素相对自身或父元素定位，<relative: 相对自身左上角(0, 0), static: 默认属性， absolted: 相对父元素设置relative(0, 0)位置> 2者同时使用，并不冲突, 当设置 absolute和fixed 会是元素脱离文档流， 可以使用top,left定位
经实战发现，无论postion和float谁前谁后，都是postion在起到作用
- 当postion设置absolute、fixed. 元素已脱离文档流，float不起到作用
- 当position设置 relative/static， 元素扔处于文档流中， float将起到作用
实现一个垂直居中的div，左右边距10px，高度是宽度的一半,里面内容也是垂直居中
.container {
width: calc(100vw - 20px);
height: calc(50vw - 10px);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
position: absolute;
top: 50%;
transform: translateY(-50%);
/* 或者
left: 50%;
transform: translate(-50%, -50%); */
}
scrollWidth/scrollHeight/offsetWidth/offsetHeight/clientWidht/clientHeight
clientWidth / clientHeight
该属性指的是元素可视区内宽度和高度，即padding+width,如果元素没有滚动条，那么就是元素设置的宽度和高度，如果出来滚动条 那么滚动条会遮盖元素宽高，该属性就是元素宽高减去滚动条的宽高
offsetWidth / offsetHeigt
该属性和其内部的内容是否超出元素大小无关，只和本来设定的border+padding、width有关，包含滚动条的宽/高度
scrollWidth / scrollHeight
这两个属性指的是当元素内容超出其宽度和高度的时候，元素内部内容的实际宽度和高度,包含padding， 总宽度/高度 = width/height+padding
当元素内容没有超出设置的宽度和高度时候， clientWidth/clientHieght ==== scrollWidth/scrollHeight
scrollTop / scrollLeft
设置向上向下滚动距离
offsetTop / offsetLeft
距离上一层元素 postion设置不为static距离， 如果上一层没有，则向上上层获取，直接body元素
