HTML
🈶1. 你是如何理解HTML的语义化的
- 举例法 HTML 语义化就是使用正确的标签（总结）段落就写 p 标签，标题就写 h1 标签，文章就写article标签，视频就写video标签，等等。这样做使代码更具可读性，便于团队开发和维护
- 阐述法 首先讲以前的后台开发人员使用table布局，然后讲美工人员使用div+css布局，最后讲专业的前端会使用正确的标签进行页面开发。
🈶2. 你常用哪些HTML语义化的标签和HTML5的新标签
🈶3. 你知道H5是什么吗
移动端页面
详情点击预览
🈶4. meta viewport是做什么用的，怎么写
- viewport(视口)，是用户网页的可视区域 手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
- 举例一个然后翻译它的意思
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
宽度跟默认宽度一样，默认的缩放比例是一倍，最小的一倍，最大的是一倍，用户不准缩放
更多meta资料点击
___________________________
CSS
1. CSS3 你用过哪些新属性
🈶2. BFC 是什么？
BFC它的意思是 块格式化上下文
简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局
举例：如果我们给一个div写一个overflow：hidden，那么这个div里面的浮动元素就会被他包裹起来
🈶3. 如何垂直居中
🈶4. 垂直居中之 flex
<div class="parent">
<div class="child">
图片
</div>
.parent{
border: 1px solid red;
height: 200px;
width: 200px;
display:flex;
justify-content:center;
align-items:center;
}
.child{
border: 1px solid green;
width: 100px;
height:100px;
}
🈶5. 垂直居中之 绝对定位和-maigin值
<div class="parent">
<div class="child"></div>
</div>
.parent {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.child {
position: absolute;
width: 100px;
height: 100px;
background: yellow;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
🈶6. flex怎么用，常用属性有哪些
🈶7. 两种盒模型区别
-
content-box(默认值): 标准盒模型
宽度 = 内容的宽度
高度 = 内容的高度
不会包含border, padding
-
border-box: 怪异模式
width = border + padding + 内容的width，
height = border + padding + 内容的height
2. 🈶8. 为什么要使用border-box
-
content-box缺点（标准盒模型）
当你想让两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，一切想的挺美好，然而你发现结果并不是这么美好，因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，于是，width就不能50%了，只能是50%再减去padding的像素值
-
border-box的优势（IE盒模型）
border-box的诞生，主要就是解决content-box的最大缺点。border-box意味着子容器的padding和border的厚度都算在50%之内，这样，你可以随意的修改padding和border的厚度值，根本不用担心父容器被撑爆。
参考链接点击
🈶9. 什么是清除浮动
背代码
.clearfix:after{
content: '';
display: block; /*或者 table*/
clear: both;
}
.clearfix{
zoom: 1; /* IE 兼容*/
}
将.clearfix加到容器上，里面的子元素的浮动就被清除了
6. 🈶10. css选择器优先级
CSS 7 种基础的选择器：
- ID 选择器， 如 #id{}
- 类选择器， 如 .class{}
- 属性选择器， 如 a[href="segmentfault.com"]{}
- 伪类选择器， 如 :hover{}
- 伪元素选择器， 如 ::before{}
- 标签选择器， 如 span{}
- 通配选择器， 如 *{}
- 越具体优先级越高
- 写在后面的，覆盖写在前面的
- important 最高，少用
🈶11. CSS权重与优先级
权重等级
- 內联样式 1000
- ID选择器 0100
- 类选择器、属性选择器、伪类选择器 0010
- 元素选择器、伪元素选择器 0001
- 通配符选择器 0000
优先级计算
- !important > 內联样式 > 高权重 > 低权重
- !important > id > class > tag
- 同权重：內联样式 > 嵌入样式表 > 外部样式表
