前端常见面试题（1）

原创

wx62ca408a2c56b 2022-07-11 16:11:40 博主文章分类：前端 ©著作权

©著作权归作者所有：来自51CTO博客作者wx62ca408a2c56b的原创作品，请联系作者获取转载授权，否则将追究法律责任

三列布局

要求两边定宽，中间自适应
看到这个题目，相信大家在学css的时候一定接触过圣杯布局和双飞翼布局

圣杯布局

<div class="bd>
    <div class="main">main</mian>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

下面是css样式

.main {
    float: left;
    width: 100%;
}
.left {
    float: left;
    width: 100px;
    margin-left: -100%;
}
.right {
    float: left;
    width: 100px;
    margin-left: -100px;
}
.pd {
    padding: 0 100px 0 100px;
}
//上面的能让main回到他该有的位置，但是left和right就出现问题，这时我们可以使用相对定位了

代码改进如下：

.left {
    float: left;
    width:100px;
    margin-left:100%;
    position: relative;
    left:100px;
}
.right {
    float: left;
    width:100px;
    margin-left:100px;
    position: relative;
    right:100px;
}

为什么这个叫圣杯布局呢，我个人理解是因为他是把父盒子用padding给挤进去了，两边是定位加负边距，感觉是一个圣杯。

双飞翼布局

<div class="main">
    <div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

样式如下

.main {
    float: left;
    width:100%;
}
.left {
    float: left;
    width:100px;
    margin-left:100%; 
}
.right {
    float: left;
    width:100px;
    margin-left:100px;
}
.content {
    margin:0 100px 0 100px;
}

为什么叫双飞翼布局
把main看做是鸟的身体，把left和right看作是鸟的两翼，先把身体对好，然后把两翼放在该有的位置。

可以发现在布局的时候常用的有三种
* 浮动
* 负边距
* 相对定位
这是是实现布局的三个最基本的原子组合，只要巧妙组合，就可以实现各种布局。

ajax的原生实现

现代浏览器均内置 XMLHttpRequest 对象（IE7+、Firefox、Chrome、Safari 以及 Opera），如果要兼容到ie6甚至更早版本就需要使用

var xht = new ActiveObject("Microsoft.XMLHTTP");

下面来写get请求的原生实现

var xhr = new XMLHttpRequest();
xhr.open("GET","demo_get.php?id=1&name=lemoo&t=" + Math.random(),true);
xhr.send();

上面open方法第二个参数是请求的URL地址，第三个参数是true是异步的意思，false不是异步的意思。如果不是异步的话就不需要写onreadystatechange 函数

传递参数直接在?后指定，多个参数用&分隔
GET请求同一URL时会有缓存，通过参数是否一致来判断
解决缓存问题，加个时间戳使每次参数不一致，上例中的t=Math.random()

post的实现

var xhr = new XMLHttpRequest();
xhr.open("POST","ajax_test.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fanm=su&name="fu");
xhr.onreadystatechaget = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById('mydiv').innHTML = xhr.responseText;
    }
}

post的特点