1.BFC的理解
BFC及块级格式化上下文。特性：
- 计算bfc的高度时，浮动元素的高度也会计算在内。可用来解决浮动塌陷问题。
- 同一个bfc里面的盒子垂直方向上外边距会发生重叠。可生成多个bfc解决重叠问题。
- BFC的区域不会与float的元素区域重叠（float的元素也会生成bfc）。
bfc的产生条件：
- 浮动元素
- 绝对定位元素absolute和fixed
- overflow不为visible
- display为flex、inline-block、table、grid等。
2.flex等宽布局最后一行不左对齐怎么解决。
当使用flex布局设置主轴为space-between时，如果子元素的个数不足以沾满最后一列，则最后一列元素之间的间距会变大，导致对不齐。解决方法就是在末尾添加元素补齐个数使界面对齐。
1）对于pc端的不知道列数的可以在最后添加多个等宽，高度为0的元素。但考虑到pc端的元素之间的间距会变，不好看，可以改用float布局。
2）对于手机端的通常都是三列布局，只需在最后补一个等宽元素就可以。
3.了解meta标签吗，用过哪些。
meta是一个辅助性的标签，定义为metadata元数据。可方便SEO、告知浏览器如何加载页面。定义属性如下：
-
charset定义编码格式，通常都是utf-8.
-
name描述网页，方便SEO。常用的有keyword关键字、description描述、viewport移动端窗口（通常设置禁止缩放）、author作者、copyright版权。
-
http-equiv定义一个编译指示指令，值都是一些特定http头部的值。常用的有：
1：content-security-policy内容策略主要指定允许的服务器源和脚本端点，可防止跨站点攻击。下面的设置可在https中发http请求。
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
2：x-ua-compatible告知浏览器以何种版本渲染界面。通常都是定义最新的。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
3：refresh定时重新加载或者重定向界面。
- content用来说明http-equiv和name的值。
4.对BOM了解多少。
BOM是指的浏览器对象模型（Browser Object Model）。它有多个对象组成。
- window对象。浏览器的实例，其他的对象都是它的子对象。
- location对象。加载文档的信息和常用导航功能实例。
属性 | 值 | 说明 |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
|
location.hash| "#contents" | URL 散列值（井号后跟零或多个字符）可为空 | |location.host| "www.baidu.com:80" | 服务器名及端口号 | |location.hostname| "www.baidu.com" | 服务器名 | |location.href| "[www.baidu.com:80/xxx/?search…]" | 完整 URL 字符串 | |location.pathname| "/xxx/" | URL 中的路径和（或）文件名 | |location.port| "80" | 请求端口号 | |location.protocol| "http:" | 页面使用的协议 | |location.search| "?search=111" | 查询字符串，以问号开头 | |location.username| "www" | 域名前指定的用户名 | |location.password| "xxx" | 域名前指定的密码 | |location.haoriginsh| "www.baidu.com" | 源地址，只读 |
常用方法：
location.href（） 用于跳转。 location.replace（）用于重载到新页面，不增加历史记录。
- history对象。导航历史记录。
常用方法：
go() 参数为整数。正数向前跳转，负数向后跳转，0刷新当前页。
back() 相当于go(-1)。
forword相当于go(1)。
pushStatus(status,title,url)向当前记录添加一个状态。
replaceStatus(status,title.url)替换当前的记录。很多中间的地址跳转不想留记录可用此方法先替换再跳转。界面操作复杂，刷新界面想回到菜单页的也可用这个方法。
history不允许修改历史记录。
-
navigator对象。客户端信息实例，用来检测浏览器和设备信息。常用属性：userAgent
-
screen对象。客户端显示器实例。常用width、height看屏幕的分辨率。
5.H5有哪些新特性
1）语义化标签：header、footer、section、nav、aside等
2）表单类型增加：
- color颜色选择器
- number数字
- email电子邮箱
- url网址
- data日期等
3）音视频标签
4）localstorage 、sessionstorage
5）canvas
6）新事件：ondrag、onscroll、onmousewhile等
6.CSS3有哪些新特性
1）边框
- border-radius圆角设置
- box-shadow盒子阴影 box-shadow: h-shadow（水平位置） v-shadow（垂直位置） blur（模糊半径） spread（扩展大小） color inset（投影方式默认为outset，inset表示投在背景上，内容下）;
- text-shadow文字阴影。 text-shadow: h-shadow（水平位置） v-shadow（垂直位置） blur（模糊半径） color;
2）背景
- background-size
- background-origin
- background-clip
3）渐变
- line-gradient线性渐变 linear-gradient(direction, color-stop1, color-stop2, ...)
- radial-gradient径向渐变
4）2d、3d转换
属性
- transform
- transform-origin定义转换的原点，默认为中心。
- transform-style定义3d转换中如何展示子元素 transform-style: flat默认不保留位置|preserve-3d保留位置;
转换方法
- translate(x,y) translateX() translateY()
- translate3d(x,y,z) translateX() translateY() translateZ()
- rotate(angle) rotete3d(x,y,z,angle)
- scale(x,y) scaleX() scaleY()
- scale3d(x,y,z) scaleX() scaleY() scaleZ
- matrix(n,n,n,n,n,n)
5）过渡transition transition: property属性名称 duration过度时间 timing-function时间曲线 delay延迟;
6）动画@keyframe+animation
animation: name动画名称 duration时间 timing-function时间曲线 delay延迟 iteration-count执行次数 direction轮播;
7）媒体查询@media
8）选择器
- not否定选择器
- p:first-child选择父元素中第一个元素为P的元素
- p:first-of-type选择父元素中出现的第一个p元素
- p:last-child选择父元素中最后一个元素为P的元素
- p:last-of-type选择父元素中最后一个出现的p元素
- p:nth-child(n)匹配父元素中第n个p元素。n这里也可以写公式，常用的又奇数n+1和偶数2n
- p:nth-of-type(n)匹配父元素中出现的第n个p元素
// 总结：-child是匹配固定的第几个且为p的元素，而-type是指出现的第几个且为p。
- 【type=""】类型选择
- :enabled和:disabled、:checked表单常用
- ::selection鼠标选择的文本样式，默认为蓝色背景，白色字体。
- ::before、::after伪元素
