作为初学者，自己简单对收集到的前端面试题的解答2

本文链接：https://blog.csdn.net/u014588555/article/details/89399630

写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式

定位方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .left,.right{
            width: 200px;
            height: 500px;
            background-color: #cccccc;
            position: absolute;
            top: 20px;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .center{
            margin: 20px 200px;
            height: 500px;
            background-color: #666666;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>
</html>

在浏览器中的结果是这样的：
在这里插入图片描述
浮动方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            height: 300px;
            background-color: #cccccc;
            float: left;
        }
        .right{
            width: 200px;
            height: 300px;
            background-color: blue;
            float: right;
        }
        .center{
            margin: 0 200px;
            height: 300px;
            background-color: #666666;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</body>
</html>

这里一定要注意：类名为center的div是放在最后的元素，之前怎么调试都不对就是因为元素的位置放置的不对。
在浏览器中的结果是：
在这里插入图片描述
我会继续努力！