1.扩展String的原型方法，实现trim,删除空格
if(!String.prototype.trim){
Sting.prototype.trim = function(){
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
}
}
2.考察函数声明提前，以及JS分解析和执行阶段
var a =1;
function A(){
a =3;
return;
function a(){}
}
A();
console.log(a)//1
如果此时改为
var a =1;
function A(){
a =3;
return;
}
A();
console.log(a)//3
3.考察作用域
var arr1=[1,2,3,4,5],arr2=[];
fot(var i=0;i<arr.length;i++){
arr2.push(function(){alert(i)});
}
console.log(arr2[3]());//5
4.左定宽，右自适应
1⃣️position +margin
//html
<div class='left'>定宽</div>
<div class='right'>自适应</div>
//css
.left{
width:200px;
height:660px;
position:absolute;
top:0;
left:0;
}
.right{
height:660px;
margin-left:200px;
}
2⃣️float + margin
//html
<div class='left'>定宽</div>
<div class='right'>自适应</div>
//css
.left{
width:200px;
height:660px;
float:left;
}
.right{
height:660px;
margin-left:200px;//或者overflow:hidden;
}
3⃣️flex布局
//html
<div class="parent">
<div class='left'>定宽</div>
<div class='right'>自适应</div>
</div>
//css
.parent{
display:flex；
}
.left{
width:200px;
height:660px;
}
.right{
height:660px;
flex:1;
}
5⃣️table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--5 table-->
<style>
* {
padding: 0;
margin: 0;
}
/*table 的显示特性为 每列的单元格 宽度和 一定等于 表格宽度。
table-layout: fixed 可加速渲染，也是设定布局优先。
table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距*/
.parent {
/*必须有100%宽度*/
display: table;
table-layout: fixed;
width: 100%;
}
.left {
width: 200px;
height: 600px;
background: red;
text-align: center; /*文字水平居中*/
line-height: 600px; /*文字垂直居中*/
color: #fff;
display: table-cell;
}
.right {
height: 600px;
background: yellow;
text-align: center; /*文字水平居中*/
line-height: 600px; /*文字垂直居中*/
display: table-cell;
}
</style>
</head>
<body class="parent">
<div class="left">定宽</div>
<div class="right">自适应</div>
</body>
</html>
网友评论