行内/块级元素
行内元素：a或span等，padding/margin只能改宽度，不能改高度。
块级元素：div或p等，可以内嵌块级或行内元素。
行内块级元素：例如input等，默认宽度为内容宽度。
三栏布局
1.flex布局：左右固定宽度，中间flex:1。
2.grid布局：grid-template-columns:200px 1fr 200px;grid-template-row:1fr
3.左右使用绝对布局并且left/right为0，中间使用margin
4.float设置左右浮动，中间
4.table布局
.container{
display:table;
}
.left,.content.right{
display::table-cell;
}
圣杯布局
圣杯布局是特殊的三栏布局,即结构为先有main再有其它.
1.flex布局:在三栏布局基础上增加order属性即可,order可以改变视觉上的位置.
2.grid布局:同样在前面基础上增加grid-column属性即可,可以直接改变视觉上的列数
3.使用float浮动实现,首先box元素内左右padding设为200px,并将main,left,right都设为float:left,然后main设置为width:100%,最关键是使用margin-left和left将left和right元素精确定位到目标位置.
.box{
padding:0 200px;
}
.main,.left,.right{
float: left;
position: relative;
}
.main{
width: 100%;
background-color: cadetblue;
}
.left{
width: 200px;
margin-left: -100%;
left: -200px;
background-color: aqua;
}
.right{
width: 200px;
margin-left: -200px;
right: -200px;
background-color: blueviolet;
}
回流重绘
dom元素的变动引起了元素的宽高位置等属性的变化后，导致浏览器重新构建渲染树，称为重排。一个元素发生外观上比如颜色背景的变化就会重绘。重排一定会导致重绘，尽量不出现重排的方式如下：
1.transform进行形状位置变化。
2.先将多次变更属性的元素设置为display:none，操作完再显示。
3.尽可能一次性操作完成，而不是每次去操作一个特定元素。
4.通过将复杂元素以absolute脱离文档流进行单独操作，然后再放回去。
5.避免多次读取属性。
URL输入到呈现
1.首先浏览器检查是否存在缓存。
2.无缓存则根据三次握手请求服务器。
3.下载js文件和css文件，构建渲染树.
浏览器进程
每一个页面都是一个渲染进程（gui线程，定时器线程，事件侦听线程，js引擎线程，网络请求线程），网络进程，gpu进程，浏览器进程。
innerHTML和innerText,outerText的区别
outerText和outerHTML设置时会将标签也一起替换掉。textContent设置/返回指定节点文本值，与innerText的主要区别是，innerText只能对可视的文本起作用。nodeValue适用于文本节点和属性节点，即对于注释的文本也适用。
href和src的区别
src（可加载的替换）和alt（不可加载的替换）都是对链接内容的替换，而href主要是链接的跳转。
defer和async的区别
1.正常script标签，下载执行都阻碍html解析。
2.defer script标签，下载不阻碍，但执行阻碍。
3.async script标签，下载执行都不阻碍。
HTML中childNodes和children的区别
childNodes返回NodeList，而children返回HTMLCollection，Node类型（NodeList)包含了文本，注释，标签等类型节点，而element元素(HTMLCollection)仅仅包含了标签类型节点。
水平居中，垂直居中的方法
行内元素：text-align为center，line-height设置行高为height。
块级元素：
1.flex布局设置justify-content及align-item为center.
2.abosolute绝对布局left和top为50%再分别减去自身宽高的一半。(使用calc函数或tranasform）
3.相对定位的margin为auto。
使元素消失的方法
1.display:none使得元素消失，空间，事件都不行。
2.visibility:hidden，元素仍然存在，只是隐藏元素，不能触发事件，占据空间。
3.opacity:0，元素透明度为0，区别是能触发事件。
4.position：absolute，top：-1000px,left:-1000px;
link方式与@import引入CSS的区别
link是载入时同时加载，@import在页面完全加载后载入，只能用于CSS，link方式权重大于@import。
盒子模型
盒子模型的box-sizing有两个值：border-box和content-box，主要区别是宽高的计算范围。
CSS渲染优先级
内联>ID>类>标签,后来高于先来，！important在同组中权重最高。
移动端适配
<meta name="viewport" content="width=device-width, initial-scale=1.0">//适配基础
1.媒体查询@media
2.flex/grid布局
3.百分比
4.vw/vh适配
5.rem方案（屏幕分成10份，每份为1rem,使用js实现）
flex布局
1.flex-flow为flex-direction flex-wrap,flex为flex-grow,flex-shrink,flex-basis
2.flex-basis为auto时，优先使用元素指定的宽度/高度，否则使用max-content内容的宽度/高度
3.flex:initial为flex: 0 1 auto ,flex:auto 为1 1 auto,flex:none为flex: 0 0 auto,而flex:1为 1 1 0。
4.align-items为交叉轴的对齐，有flex-start,flex-end,stretch(默认),center，而justify-content为主轴的对齐，除了和align-item同样的，还有space-around（元素左右间隔相同），space-between（元素间 间隔相同），剩余空间的分配这两个属性优先级低于flex-grow和flex-shrink。
5.align-self相对于align-items为单个flex项目设置对齐属性，align-content也可用于交叉轴的对齐，同样有space-around和space-between等值。
6.direction设置为rtl可以强行让元素从右到左对齐，order可以用于指定显示的顺序。
grid布局
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;//grid使用举例,或1fr 1fr 1fr或repeat(3, 1fr)，minmax(100px, 1fr) 表示最小100px，最大1fr。
}
定义网格线开始结束：
.item {
grid-column-start: 1;
grid-column-end: 3; /* 占据从第1条列线到第3条列线之间的区域（即第1列和第2列） */
grid-row-start: 1;
grid-row-end: 2; /* 占据第1条行线到第2条行线之间的区域（即第1行） */
}
上面等价于
.item{
grid-column:1/3;
grid-row:1/2;
grid-column:1/span 2;
}
grid-template-areas的使用：
.grid-container{
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap:10px;
}
.header{
grid-area:header;
background:lightblue;
}
