面试答案

时间 2019-11-08

标签面试答案栏目快乐工作繁體版

原文原文链接

1.css盒子模型css

2.子元素宽高固定，css水平居中html

<!DOCTYPE html>

<head>

<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>

</body>

</html>

1、子元素设置 margin-left:auto;margin-right:auto;

#children{

background: red;

width: 200px;

height:200px;

margin-left:auto;

margin-right:auto;

}

2、子元素设置 position: absolute和margin负值

#children {

background: red;

width: 200px;

height: 200px;

position: absolute;//父元素设置position：relative

left: 50%;

margin-left: -100px;

}

3、子元素设置position: absolute和margin:auto

#children {

background: red;

position: absolute;//注意父元素要加position：relative

width: 200px;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

4、子元素position: absolute和transform: translateX(-50%);

#children {

background: red;

width: 200px;

height: 200px;

position: absolute;//父元素设置position：relative

left: 50%;

transform: translateX(-50%);

}

5、父元素设置dispaly:flex

#parent {

background: gray;

width: 400px;

height: 400px;

display: flex;

justify-content: center;

align-content: center;

}

6、父元素设置dispaly:flex子元素设置margin:auto

#parent {

background: gray;

width: 400px;

height: 400px;

display: flex;

}

#children {

background: red;

width: 200px;

height:200px;

margin: auto;

}

3vue

浮动产生的缘由是由于元素使用了float：left；或者position：absolute；position：fixed。致使元素脱离标准文档流。而向上浮动。react

为了避免让父元素发生高度坍塌，布局不混乱，须要清除浮动。浏览器

常见的清除浮动方法:cookie

<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>

1、父元素添加伪元素
.topDiv::after {
content: "";
display: block;
clear: both;
}
2、父元素结束标签以前插入清除浮动的块级元素

<div class="topDiv">
<div class="textDiv">...省略若干文字</div>
<div class="floatDiv">float left</div>
<div style="clear: both;"></div>
</div>
3、父元素利用overflow非visible清除浮动
.topDiv {
width: 500px;
border: 2px solid black;
overflow: auto; //只要能构建出建构出BFC均可以

}
其余一些方法根据实际条件环境处理（主要仍是在须要清除浮动的元素上加clear:both/left/right）：
1.若是子元素都浮动，那么父级设置固定高度可不发生高度坍塌
2.父元素也一块儿浮动

4.session

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)。对于
复杂的布局，推荐使用。

js的基本数据类型

js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object：Function,Array，Date等）。布局

经常使用的typeof会返回一个变量的基本类型，只有如下几种：number,boolean,string,object,undefined,function；学习

6flex

经常使用sessionStorage和localStorage以及cookie三种浏览器端的数据存储

具体区别省略……

react.js

vue.js

angular.js

对react.js有点了解。正在学习中……