1.浏览器内核？
1、IE浏览器内核：Trident内核（三叉戟），IE内核
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核
2.盒子模型？
content(内容)+padding（内边距）+border（边框）+margin（外边距）
3.元素类型分类
（1）块状元素
A:块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
B:默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
C:块状元素都可以定义自己的宽度和高度。
D:块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。
*嵌套规则：p>p(错误) p>div(错误) span>p(错误) div>p(正确) p>span(正确)
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td 表格及行-单元格
pre
-（2）行内元素（内联元素）：
A:内联元素的表现形式是始终以行内逐个进行显示；
B:内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
C:内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top/bottom;margin-top/bottom;)
a –超链接（锚点）
span - 常用内联容器，定义文本内区块
br - 换行
i - 斜体
em - 强调
label - 表单标签
b - 粗体(不推荐)
strong - 粗体强调
sub - 下标
sup - 上标
u - 下划线
（3） 内联块状元素(css2.1增加)：
img - 图片
input - 输入框
textarea - 多行文本输入框
select button
（4）可变元素：
需要根据上下文关系确定该元素是块元素或者内联元素。
4.弹性盒子
display:flex
主轴对齐方式：justify-content:
flex-start
flex-end
center
space-between
space-around
交叉轴对齐方向：align-items:
flex-start
flex-end
center
baseline
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
定义一条轴线排不下，如何换行：flex-wrap:
nowrap:默认不换行
wrap:换行，第一行在上方
wrap-reverse:换行，第一行在下方
定义主轴方向：flex-direction:
row、row-reverse
column、column-reverse
flex-flow:flex-wrap与flex-direction的缩写属性
flex-flow:<flex-direction> <flex-wrap>
默认：row nowrap
以下是flex的项目属性：
align-self:允许单个项目与其他项目有不同的对齐方式，能覆盖align-items属性
默认值：auto,继承父元素的align-items，
flex-start/flex-end/center/baseline/strech
order:默认为0，数字越大越往后排，支持负数
flex：1 1 10%/px
(三项分别是：flex-grow、flex-shrink、flex-basis)
flex-grow:规定项目相对于其他灵活的项目进行扩展的量（默认为0.有空间也不放大）
flex-shrink:项目默认为1，值为0不压缩
flex-basis:在分配多余空间之前，项目占据的主轴空间，计算主轴是否有多余的空间，默认值为auto，即项目的本来大小，还可以设置px,则项目占据固定空间
默认属为：flex:0,1,auto
常用：flex:1
定义多根轴线的对齐方式：align-content:
flex-start
flex-end
center
space-between
space-around
strech
flex-wrap: wrap;
align-content: flex-start;
flex-wrap: wrap;
align-content: flex-end;
flex-wrap: wrap;
align-content: center;
flex-wrap: wrap;
align-content: space-around;
flex-wrap: wrap;
align-content: space-between;
flex-wrap: wrap;
align-content: stretch;
/* 项目不设置高 */
5.margin合并问题
描述： 处于上下位置关系的两个div容器，在分别设置margin-top、margin-bottom时，如果两个属性的值相同时，则两容器间的距离就是这个值；如果两个属性的值不同，则取较大值作为两容器间的距离；
解决：
（1）给其中一个元素设置外边距
（2）给元素外层套一个元素，给父元素设置overflow:hidden
<style>
div{
width: 30px;
height: 30px;
background:orangered;
}
.box1{
margin-bottom: 10px;
}
.box2{
margin-top: 20px;
}
h1{
overflow: hidden;
}
</style>
<body>
<h1>
<div class="box1"></div>
</h1>
<div class="box2"></div>
</body>
描述： 父级盒模型不加padding或border的时候内部文档流中第一个子元素的margin-top会将父元素向下拉去，也就是外边距转移到了父元素的外边距
解决：
（1）给父元素加overflow-hidden
（2）给父元素加border
（3）给父元素加padding
（4）添加绝对定位 、添加浮动
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background: rgb(238, 177, 155);
/* border: 1px solid #fff; */
/* overflow: hidden; */
/* float: left; */
position: absolute;
}
.box div{
width: 30px;
height: 30px;
background: palegoldenrod;
margin-top: 20px;
}
</style>
<body>
<div class="box">
<div></div>
</div>
</body>
6.margin塌陷问题(清除浮动):
描述： 父元素不设置高度时会被子元素自动撑开，但是子元素浮动后脱离布局流不占位，父元素高度消失（相当于浮动的元素在二楼、父元素在一楼）。
（上下元素，有一个浮动影响时，直接用clear:left/right/botn,clear就是避免元素受到浮动元素的影响）
解决：
（1）给父元素设置固定高度（不能自适应）
（2）父元素浮动（影响整体布局）
（3）overflow:hidden 里面的子元素溢出会有影响
（4）display:inline-block(影响后面元素 X)
（5）设置空标签，不推荐，会多添加一个标签
<div class="box">
<div></div>
<div style="clear:both"></div>
</div>
（6）after伪类：
.clearfix:after{
content: '';
display: block;
height: 0;
width: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
7.BFC规范
Formatting context(格式化上下文)
是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC 即 Block Formatting Contexts (块级格式化上下文)
它属于上述中的其中一种规范。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
触发BFC：
-
浮动元素：float 除 none 以外的值
-
绝对定位元素：position (absolute、fixed) 注意：relative不可以
-
display 为 inline-block、table-cells、flex
-
overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC的布局规则:
-
内部的Box会在垂直方向，一个接一个地放置。
-
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
-
计算BFC的高度时，浮动元素也参与计算。所以BFC的作用之一就不不让浮动元素乱跑。
应用：
解决margin合并与margin塌陷
8.实现元素水平垂直居中：
（1）定位实现居中：
<div class="box1">
<div class="box2"></div>
</div>
.box1{
width: 300px;
height: 300px;
position: relative;
background: rosybrown;
}
.box2{
width: 100px;
height: 100px;
position: absolute;
left:50%;
top:50%;
margin-top:-50px ;
margin-left: -50px;
background:royalblue;
}
(2) 子元素：始终固定居中
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width: 100px;
height: 100px;
background: salmon;
(未完…)