面试答案
1.css盒子模型
2.子元素宽高固定，css水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#parent {
background: gray;
width: 400px;
height: 400px;
display: flex;
}
#children {
background: red;
width: 200px;
height:200px;
margin: auto;
}
</style>
</head>
<body>
<div id="parent">
<div id="children"居中吧居中吧></div>
</div>
</body>
</html>
一、子元素设置 margin-left:auto;margin-right:auto;
#children{
background: red;
width: 200px;
height:200px;
margin-left:auto;
margin-right:auto;
}
二、子元素设置 position: absolute和margin负值
#children {
background: red;
width: 200px;
height: 200px;
position: absolute;//父元素设置position：relative
left: 50%;
margin-left: -100px;
}
三、子元素设置position: absolute和margin:auto
#children {
background: red;
position: absolute;//注意父元素要加position：relative
width: 200px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
四、子元素position: absolute和transform: translateX(-50%);
#children {
background: red;
width: 200px;
height: 200px;
position: absolute;//父元素设置position：relative
left: 50%;
transform: translateX(-50%);
}
五、父元素设置dispaly:flex
#parent {
background: gray;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-content: center;
}
六、父元素设置dispaly:flex子元素设置margin:auto
#parent {
background: gray;
width: 400px;
height: 400px;
display: flex;
}
#children {
background: red;
width: 200px;
height:200px;
margin: auto;
}
3
浮动产生的原因是因为元素使用了float：left；或者position：absolute；position：fixed。导致元素脱离标准文档流。而向上浮动。
为了不让父元素发生高度坍塌，布局不混乱，需要清除浮动。
常见的清除浮动方法:
<style> .topDiv { width: 500px; border: 2px solid black; } .floatDiv { width: 100p height: 100px; border: 2px dotted red; color: red; margin: 4px; float: left; } .bottomDiv { width: 500px; height: 100px; margin: 5px 0; border: 2px dotted black; } .textDiv { color: blue; border: 2px solid blue; } </style> <div class="topDiv"> <div class="textDiv">...省略若干文字</div> <div class="floatDiv">float left</div> <!-- <div style="clear: both;"></div> --> </div> <div class="bottomDiv">....省略若干文字.</div> 一、父元素添加伪元素 .topDiv::after { content: ""; display: block; clear: both; } 二、父元素结束标签之前插入清除浮动的块级元素 <div class="topDiv"> <div class="textDiv">...省略若干文字</div> <div class="floatDiv">float left</div> <div style="clear: both;"></div> </div> 三、父元素利用overflow非visible清除浮动 .topDiv { width: 500px; border: 2px solid black; overflow: auto; //只要能构建出建构出BFC都可以 } 其他一些方法根据实际条件环境处理（主要还是在需要清除浮动的元素上加clear:both/left/right）： 1.如果子元素都浮动，那么父级设置固定高度可不发生高度坍塌 2.父元素也一起浮动
4.
display的取值,常见有 1、none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的地方，设置visibility:hidden的元素，不会被显示，但是还是会占据原来的页面空间。 2、inline 行内元素 元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。有margin和padding，但是只能够设置左右的值，设置上下的值是无效的。 示例元素：span,b,i,a,u,sub,sup,strong,em 3、block 块级元素 会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。可以设置margin和padding上下左右的四个值，margin可以有负值，padding不允许有负值。 示例元素：div,h1-h6,ul,ol,dl,p 4、inline-block 行内块元素 与行内元素一样可以再一行内显示，而且可以设置宽高，可以设置margin和padding（上下左右都可以）。 示例元素：input,button,img 5、list-item 列表元素 示例元素：li 6、table 会作为块级表格来显示(类似于<table>)，表格前后带有换行符。 7、inline-table 会作为内联表格来显示(类似于<table>)，表格前后没有换行符。 8、flex 多栏多列布局，一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。 伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。对于 复杂的布局，推荐使用。
5.
js的基本数据类型
js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object：Function,Array，Date等）。
常用的typeof会返回一个变量的基本类型，只有以下几种：number,boolean,string,object,undefined,function；
6
常用sessionStorage和localStorage以及cookie三种浏览器端的数据存储
具体区别省略……
7
react.js
vue.js
angular.js
对react.js有点了解。正在学习中……
7
