1.如何理解CSS盒子模型
标准盒模型：宽度=内容宽度()++
低版本IE盒子模型：宽度=内容宽度(++)
2、BFC
1.如何理解CSS盒子模型 标准盒子模型：宽度=内容宽度() + + 低版本IE盒子模型：宽度=内容宽度(++)
2、BFC
1）什么是BFC
BFC（Block）格式化上下文是网页中盒模型布局的CSS渲染模式，指的是一个独立的渲染区域或者一个隔离的独立容器。
2) 形成BFC的条件
* 浮动元素，float是none以外的值
* 定位元件，（，固定）
* 是以下之一的值 -block、table-cell、table-
* (, auto,) 以外的值
3）BFC的特点
* 内盒将在垂直方向上一个接一个地放置。
* 垂直方向的距离由下式确定
* bfc的面积不会与float的元素面积重叠。
* 计算bfc高度时，浮动元素也参与计算
* bfc是页面上的独立容器，容器内部的子元素不会影响外部元素。
3. 标签语义
代码结构更加清晰
知道名字就知道意思了，没有基础的人也能知道这部分代码是做什么的
方便团队开发和维护，代码可读性更强
有利于 SEO 优化，爬虫依靠标签来确定上下文
4.元标签
meta 标签提供有关 html 文档的元数据。 它不会显示在页面上，但机器可读。 它告诉浏览器如何解析页面并告诉搜索引擎关键词（SEO优化）
meta功能：告诉机器浏览器如何解析页面，描述页面的主要内容，设置服务器发送给浏览器的http头内容
="utf-8" 设置页面使用的字符编码
设置、移动端的适配
5、css和设置标签的引入一般放在body的末尾，以避免脚本过大，加载时间长，页面长时间空白。
这是因为渲染进程和js进程是互斥的，脚本会阻塞页面的渲染，脚本之间的加载是同步进行的，并且按照引入的顺序执行，但是下面两个属性会影响脚本执行和页面渲染的顺序
defer：不会阻塞渲染，所以即使放在内部，也不会阻塞页面加载，而是js会在加载前完成，不会影响脚本的执行顺序，会按照介绍
async：和defer一样，解决阻塞渲染，但是是在加载完成后执行，其执行顺序是根据谁先加载完成，所以对文件顺序有要求，有前置的就不要使用-back 依赖
6、HTML的块级元素、行内元素、行内块元素是什么，有什么区别？
块级元素：div、h1-h6、p、ul、ol、dl、li、hr、dt、dd、form、table
特点：块元素占单行，宽高生效，默认宽度与父元素相同，内容高度展开后，全部生效
行内元素：em、i、del、small、、ins、span、a
特点：宽高不生效，左右不生效，上下不生效，排成一行，大小根据内容而定，都生效
内联块元素：img、input（表单元素、移除表单）
特点：排成一排，宽高生效，，生效
7. CSS3有哪些新特性
- 圆角
-图像边框图像
-image: url() 右上角 左边
-宽度：右上角左上
盒子-盒子-阴影：x，y，大小，
文本-文本阴影-线性渐变
：-（到，颜色，颜色，...，颜色）
- 径向渐变
：-（形状尺寸为，
颜色，颜色，...，颜色）
2D/3D转换：（旋转）缩放（缩放）（位移）
@media媒体查询，根据屏幕宽度设置，用于解决移动适配，使对应的css根据屏幕尺寸生效
弹性布局（弹性框）
8. 实现元素隐藏
: none 不占空间，源码可见
: 0 占位符，源代码可见，透明度 0
: 占位符，源码可见
: top:-,left:- 使用定位将元素移出窗口
9、如何实现元素水平居中
行内元素：文本对齐：
块元素: : 0 自动
：左：50%； ：（-50%）
10.如何实现元素垂直居中
= 线-
-对齐：
：顶部：50%； : (0,-50%)
11.
默认
相对定位，不脱标签，偏离自身位置，不影响元素本身的特性，z-index升级级别
绝对定位、脱标签、相对已定位的父元素有偏差，相对于body无偏差
固定 固定定位、标签外、相对于窗口的偏移
12.定位元素水平和垂直居中
固定宽度和高度: top:0,left:0,right:0,:0,:auto
固定宽度和高度：顶部：50%，左侧：50%，-左侧：-width/2px，
顶部：-/2px
： 柔性; -: ,align-items: (强烈推荐)
：左：50%，上：50%； : (-50%,-50%)
13. 清除浮子
不清楚浮动会在高度上塌陷：浮动元素的父元素的高度是自适应的（当父元素不写时，子元素写入float后，父元素的高度就会塌陷）
*clear清除浮动（添加空div方法）在浮动元素下方添加一个空div，并将css样式写入该元素：
{明确：两者;:0;:;}
* 设置浮动元素父级的高度
* 父元素同时浮动（需要给父元素和兄弟元素添加浮动）
* 父级设置为-block，其：0 自动居中模式无效
* 添加到父级：清除浮动方法
* 伪类清浮动后的通用清零方法（目前主流方法，推荐）
.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}14.什么是css选择器，以及选择器的优先级
- id选择器
- 类选择器
- 属性选择器
- 伪类选择器
- 选项卡选择器
- 伪元素选择器
- 通配符选择器优先级：内联样式 > ID 选择器 (100) > 类选择器 (10) = 属性选择器 = 伪类选择器 > 元素选择器 (1) = 关系选择器 = 伪元素选择器 > 通配符选择器(0)
！
后代选择器选择全部
子选择器仅选择父子
15.各种布局的优缺点
1.浮动布局
优点：比较简单，兼容性好。 只要清除浮动做得好，就没有问题。 缺点：浮动元素脱离文档流，需要清除浮动。 如果处理不好，会带来很多问题，比如高度塌陷等。
2. 绝对布局
优点：速度非常快，设置方便，不易出现问题缺点：绝对定位脱离了文档流，这意味着下面的所有子元素也会脱离文档流，这就导致了有效性和可靠性这种方法的可用性比较差。
3. 弹性布局
优点：简单快速缺点：不支持IE8及以下版本
4. 表格布局
优点：实现简单，代码少缺点：当其中一个单元格的高度超过时，两侧的单元格也会一起变高，有时这种效果并不是我们想要的。
5.网格布局
与弹性类似。
16. html5有哪些新特性以及删除了哪些元素？ HTML5新标签的浏览器兼容性问题如何处理？ 如何区分HTML和HTML5？
**新功能：**
HTML5不再是SGML的子集，它主要是增加了图像、位置、存储、多任务等功能。
拖放API
语义更好的内容标签 (,nav,,aside,,)
音频、视频API（音频、视频）
画布() API
地理() API
本地离线存储，长期保存数据，浏览器关闭后数据不会丢失；
浏览器关闭后数据自动删除
表单控件、日期、时间、电子邮件、url、
新技术，
**删除元素：**
纯粹表达的元素：、big、、font、s、、tt、u；
对可用性产生负面影响的元素：框架、、；
**兼容h5新标签：**
IE8/IE7/IE6 支持 . 方法，
您可以使用此功能使这些浏览器支持 HTML5 新标签，
当然最好的办法就是直接使用成熟的框架，目前使用最多的框架是
**如何区分：**
声明\附加结构元素\功能元素
17. CSS3中新的伪类的例子：
p:first-of-type 选择属于其父元素的第一个元素
每个元素
元素。
p:last-of-type 选择属于其父元素的最后一个元素
每个元素
元素。
p:only-of-type 选择唯一属于其父元素的类型
每个元素
元素。
p:only-child 选择作为其父级的唯一子级的每个元素
元素。
p:nth-child(2) 选择作为其父元素的第二个子元素的每个元素
元素。
: : 控制表单控件的禁用状态。
：单选按钮或复选框被选中。
18.解释一下盒子模型的宽度和高度的计算方法、边界塌陷、负值效应、盒子概念？
1.盒子模型：IE 678下（不添加）使用ie盒子模型，宽度=边框++内部
内容宽度； chrom，IE9+，（补充）使用标准盒模型，宽度=内容宽度。
2. box- ：为了解决标准太阳黑子和IE盒子的区别，CSS3增加了盒子模型属性box-、-box（默认）、-box，让元素保持IE传统的盒子模型并继承父盒子模型;
3. 边界塌陷：块元素的顶部和外边距有时会合并（塌陷）为单个边距（合并后的最大边距）。 这种现象称为边缘崩溃。
4.负值效果：负值会改变浮动元素的显示位置，即使我的元素写在DOM后面，我也可以让它显示在前面。
19、如何实现浏览器中多个标签之间的通信？
调用等本地存储
20. 解释下浮子及其工作原理？清除浮子的方法
浮动元素脱离文档流并且不占用空间。 当浮动元素碰到其包含边框或浮动元素的边框时，浮动元素就会停止。
1. 用空标签清除浮子。
这个方法是在所有浮动标签后面添加一个空标签定义:both。 缺点是添加了无意义的标签。
2.使用after伪对象清除浮动
此方法仅适用于非IE浏览器。 具体的写法可以参考下面的例子。 使用过程中应注意以下几点。 1、该方法中必须在需要清除浮动元素的伪对象中设置：0，否则该元素会比实际高出几个像素；
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}3. 设置为或自动
4. 浮动外部元素
