什么是回流 什么是重绘？
出现频率： 50%
掌握难度：50分
作用：
参考答案：
-
回流
- render树中一部分或全部元素需要改变尺寸、布局、或着需要隐藏而需要重新构建，这个过程叫做回流
- 回流必将引起重绘
-
重绘
- render树中一部分元素改变，而不影响布局的，只影响外观的，比如颜色。该过程叫做重绘
-
页面至少经历一次回流和重绘（第一次加载的时候）
实际使用场景：
常见的行内元素和块级元素都有哪些？
出现频率： 50%
掌握难度：20分
作用：
参考答案：
行内元素 inline
不能设置宽高，多个元素共享一行，占满的时候会换行
span、input、img、textarea、label、select
块级元素block
可以设置宽高，一个元素占满一整行
p、h1/h2/h3/h4/h5、div、ul、li、table
inline-block
可以设置宽高，多个元素共享一行，占满的时候会换行
实际使用场景：
布局模式
出现频率： 80%
掌握难度：50分
作用：
参考答案：
flex布局⭐⭐⭐⭐⭐
这个我就不例举了，看看阮一峰老师的文章叭！Flex 布局教程
容器属性：
display：flex;
flex-direction:row/row-reverse/column/column-reverse;
flex-wrap:no-wrap/wrap/wrap-reverse;
flex-flow:flex-directation和flex-wrap复合简写属性；
justify-content: flex-start | flex-end | center | space-between | space-around;;
align-items:flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
子项目属性：
order:数字，排序号；
align-self:auto | flex-start | flex-end | center | baseline | stretch;align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
flex-grow:放大比例；
flex-shrink:缩小比例；
flex-basis：项目将占据固定空间尺寸；
flex：复合简写属性；
grid布局⭐⭐⭐⭐
同样是阮一峰老师的，CSS Grid 网格布局教程
实际使用场景：
请说明px,em,rem,vw,vh,rpx等单位的特性
出现频率： 50%
掌握难度：30分
作用：
参考答案：
-
px
- 像素
-
em
- 当前元素的字体大小
-
rem
- 根元素字体大小
-
vw
- 100vw是总宽度
-
vh
- 100vh是总高度
-
rpx
- 750rpx是总宽度
实际使用场景：
常见的替换元素和非替换元素？
出现频率： 0%
掌握难度：0分
作用：
参考答案：
-
替换元素
- 是指若标签的属性可以改变标签的显示方式就是替换元素，比如input的type属性不同会有不同的展现，img的src等
- img、input、iframe
-
非替换元素
- div、span、p
实际使用场景：
first-of-type和first-child有什么区别
出现频率： 20%
掌握难度：30分
作用：
参考答案：
-
first-of-type
- 匹配的是从第一个子元素开始数，匹配到的那个的第一个元素
-
first-child
- 必须是第一个子元素
实际使用场景：
什么是BFC？
出现频率：50%
掌握难度：50分
作用：
参考答案：
BFC是一个独立渲染区域，它丝毫不会影响到外部元素 BFC特性
同一个BFC下margin会重叠
计算BFC高度时会算上浮动元素
BFC不会影响到外部元素
BFC内部元素是垂直排列的
BFC区域不会与float元素重叠
如何创建BFC
position设为absolute或者fixed
float不为none
overflow设置为hidden
display设置为inline-block或者inline-table或flex
实际使用场景：
如何清除浮动
出现频率：
掌握难度：
作用：
参考答案：
额外标签clear:both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fahter{
width: 400px;
border: 1px solid deeppink;
}
.big{
width: 200px;
height: 200px;
background: darkorange;
float: left;
}
.small{
width: 120px;
height: 120px;
background: darkmagenta;
float: left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
</body>
利用BFC
overflow:hidden
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
使用after(推荐)
<style>
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
</style>
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
实际使用场景：
link标签和import标签的区别
出现频率： 10%
掌握难度：30分
作用：
参考答案：
- link属于html，而@import属于css
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
- link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
- link方式样式的权重高于@import的。
实际使用场景： # css实现元素居中的6种方法
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：# ****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
