1.html新标签及标签语义化？
新增标签（header，footer，nav）、新增表单（data，url，email），新增选择器（querySelector），新增json方法json.parse()和json.stringify(),新增本地存储，画布（canvas），音频视频标签，弹性盒子
标签语义化的作用
对人来说：增强了代码的可读性，在我们日后维护的时候可以更清楚地判断，那部分是什么的，也便于团队其他成员阅读你的代码
对机器来说：可以使搜索引擎爬取有效信息，而语义类还可以支持读屏自动生成目录
2. 块级元素和行级元素？
块级元素，可以修改宽高(div,p,h)
行级元素，不能修改宽高(span,em ,a,b)
行级块元素，两者都可以
分别用display设置
none，block，inline ，inline-block，flex
3.doctype作用
声明类型用的用于声明文档的解析标准类型，怪异（不声明）和标准
4. 选择器及其权重？
id 类 标签 后代 子代 兄弟 伪类 伪元素 属性 通配符
选择器权重
!important > style 内联> id > class|伪类|属性 >标签|伪元素|后代>子代|兄弟>通配符
5.伪类选择器和伪元素选择器区别？
伪类是一个冒号，为元素是两个冒号（后来也改成了单引号）
伪类是给文本好像添加一个类一样比如说a:hover可以让变色，指定状态下样式改变
伪元素是创建一些不在文档树的元素比如说：：before或：：after
6.浮动，定位，bfc
浮动float可以right|left|none
脱离文档流，浮动塌陷
position 定位relative,absolute,fixed,static,sticky
BFC独立的块级作用域不受外界影响
bfc的触发条件
1.浮动(不能是none）
2.定位（必须是absolute或fixed）
3.display（inline-block，flex，inline-flex，table-cell，table-caption）
4.overflow（不能是visible）、
应用
1.防止margin重叠
2.清除浮动
3.自适应两栏布局
清除浮动的方式
1.浮动元素末尾加一个style=‘’clear：both''
2.父元素添加overflow：hidden
3.父元素加伪元素父元素清除浮动伪元素法：after
双伪元素清除
防止浮动塌陷
1.清除浮动
2.overflow :hidden 触发BFC
7.盒模型?
标准和模型，怪异盒模型
盒子整个的大小都是四个相加
width=element
ie6以下不写doctype会使怪异盒模型
width= border+padding+element
即标准盒模型的element区域为200 * 200, 而怪异盒模型则是element、padding、border三个区域加起来才是200 * 200
8.弹性盒子？
弹性盒子是css3新增
把display设置成flex适合移动端开发
⽅向：flex-direction: row | row-reverse | column | column-reverse
⾏或者多⾏： flex-wrap：nowrap | wrap | wrap-reverse
主轴排列：justify-content：flex-start | flex-end | center | space-between | space-around
垂直轴对⻬： align-content：flex-start | flex-end | center | space-between | space-around
垂直对⻬： align-items：flex-start | flex-end | center | baseline | stretch
⼦元素 flex:1
order：值越小越靠前
<' flex-grow '>⽤来指定扩展⽐率
<' flex-shrink '>：⽤来指定收缩⽐率
<' flex-basis '>：
元素基础长度
-如果主轴是横向的，则该值指定的就是元素的宽度
-如果主轴是纵向的，则该值指定的就是元素的高度
-默认值是auto,表示参考元素自身的高度或宽度
-如果传递了一个具体的数值，则以该值为准
9.display：none和visibility ：hidden和opacity？、
10.过度与动画？
transition是过度属性，强调过度，他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。他也类似于flash的补间动画，但是他可以设置多个关键帧（用@keyframe定义）完成动画。
过渡
transition属性设置过渡transition-duration:制定过渡效果的持续时间，单位s/ms
transition-timeing-function：ease 默认值，慢速开始，先加速，在减速，linear 匀速，ease-in 加速运动 ，ease-out减速运动
ease-in-out 先加速 后减速
transition-delay：过渡效果的延迟，等待一段时间后在执行
动画
animation属性设置动画animation-duration：动画执行时间
animation-delay：动画的延时
animation-timing-function：ease-in-out；时序函数
animation-iteration-count ：动画执行次数：可选值：次数/infinite无限执行
animation-direction 指定动画运行方向：可选值：
normal，默认值，从from向to运行
reverse 从to向from运行，每次都是这样
变形
使用transform属性可以使元素变形，设置transformX/Y/Z，使元素在三个坐标轴方向上移动应用一：使不确定大小的元素实现水平居中
设置left top 50%，在设置transfrom：x，y （-50%）可以实现元素水平居中
应用二：设置Y方向的平移变形实现动画效果
设置伪类事件，鼠标移入，使元素y方向偏移，配合阴影实现动画效果
应用三：设置Z方向的视距效果
要想实现z方向的可见效果，必须设置视距perspective：800px；并且要在没有进行旋转的情况下可以完成
11url到渲染过程？
1.输入url，进行url地址解析，发送url请求
2.先查看本地缓存，如果有直接返回资源，没有则向服务器知道返回ip地址
3.获取ip地址后在发送http请求前要建立TCP连接
4.建立连接后发送http请求
请求行
请求头
空行
请求数据
5.服务器返回响应
状态行
响应头
空行
相应数据
然后
6.渲染
1.html解析器构建dom树
2.css解析器解析出cssom树
3.两者结合形成渲染树
4.布局
阻塞渲染
1.css不会阻止dom解析会阻塞渲染
2.js会阻止dom解析
3.注意只要浏览器遇到 script 标记，唤醒 JavaScript解析器， 就会进行暂停 (blocked )洲览器解析HTML，并等到
CSSOM 构建完毕，才去执行js脚本4.deferdefer 与相比普通 script ，有两点区别：载入 JavaScript 文件时不阻塞 HTML 的解析，执行阶段被放到 HTML 标签解析完成之后。asyncasync 属性表示异步执⾏引⼊的 JavaScript ，与 defer 的区别在于，如果已经加载好，就会开始执⾏，⽆论此刻是HTML 解析阶段还是
12.重排和重绘？
重排(reflow)：当渲染树的⼀部分必须更新并且节点的尺⼨发⽣了变化，浏览器会使渲染树中受到影响的部分失
效，并重新构造渲染树。重绘( repaint )：是在⼀个元素的外观被改变所触发的浏览器⾏为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。⽐如改变某个元素的⽂字颜⾊、背景⾊等。重绘不⼀定会引发回流，回流必然导致重绘。
12.未知宽高水平垂直居中和左边固定右边自适应？
水平垂直居中
1.定位加平移
2.弹性盒子
左侧固定右侧自适应
1.弹性盒子
左侧固定宽度右侧flex=1
2.左侧浮动固定右侧100%
3.左侧右侧都左浮右侧100%，右侧marge-left
4.右侧百分百左侧定位
5.触发bfc也可以
两侧固定中间自适应
1定位
2.弹性盒子
3.圣杯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11.圣杯布局</title>
<style>* {
margin: 0;
padding: 0;
}.header {
background-color: cyan;
height: 10vh;
text-align: center;
}.container {
background-color: gray;
overflow: hidden;
padding: 0 200px 0 300px;
}.container div {
float: left;
height: 80vh;
}.middle {
width: 100%;
background-color: red;
text-align: center;
}.left {
width: 300px;
background-color: #ff4d4f;
margin-left: -100%;
position: relative;
left: -300px;
}.right {
width: 200px;
background-color: #2e6da4;
margin-left: -200px;
position: relative;
right: -200px;
}.footer {
background-color: green;
height: 10vh;
text-align: center;
}
</style>
</head>
<body><div class="header">header</div>
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div></body>
</html>4.双飞翼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.双飞翼布局</title>
<style>* {
margin: 0;
padding: 0;
}.header {
background-color: cyan;
height: 10vh;
text-align: center;
}.container {
background-color: gray;
overflow: hidden;
}.container .column {
float: left;
height: 80vh;
}.center {
width: 100%;
background-color: red;
text-align: center;
}.left {
width: 300px;
background-color: #ff4d4f;
margin-left: -100%;
}.right {
width: 200px;
background-color: #2e6da4;
margin-left: -200px;
}.content {
margin-left: 300px;
margin-right: 200px;
}.footer {
background-color: green;
height: 10vh;
text-align: center;
}
</style>
</head>
<body><div class="header">header</div>
<div class="container">
<div class="center column">
<div class="content">middle</div>
</div>
<div class="left column">left</div>
<div class="right column">right</div>
</div>
<div class="footer">footer</div></body>
</html>圣杯布局的实现，先浮动先设置外面的padding 然后marge然后定位
双飞翼布局
圣杯与双飞翼都是这种，而且注意中间的div要写在上面，会被优先加载，提高性能，都浮动
区别在于解决中间挡住部分，
圣杯：
左、中、右三个盒子在一个同一个盒子中，设置外侧盒子的padding，从而留出两侧盒子位置
双飞翼：
左、中、右三个盒子同级，在中间盒子里放一个小盒子，设置小盒子的margin，从而留出两侧盒子位置2023/03/20插入一个h5和css3新增
1.h5
语义化标签
表单控件如email data
存储loca sessio storan
视频音频标签
2.css3
边框圆角阴影
背景图
过度，变形，动画
弹性盒子
1069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
