常见的div布局

1、一列固定宽度且居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .nav,.banner,.main,.footer {
            width: 960px;
            height: 50px;
            border: 1px dashed rgb(22, 14, 14);
            margin: 0 auto;
        }
        .banner{
            height: 250px;
            margin: 10px auto;
        }
        .main {
            height: 300px;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
    <div class="banner"></div>
    <div class="main"></div>
    <div class="footer"></div>
</body>
</html>

2、两列左窄右宽

<body>
    <div class="nav"></div>
    <div class="banner"></div>
    <div class="main">
        <div class="main-left"></div>
        <div class="main-right"></div>
    </div>
    <div class="footer"></div>
</body>

<style>
        .nav, .banner, .main, .footer {
            width: 960px;
            height: 50px;
            border: 1px dashed #000;
            margin: 0 auto;   
        }
        .banner {
            height: 100px;
            margin: 10px auto;
        }
        .main {
            height: 300px;
            margin-bottom: 10px;
        }
        .main-left {
            width:240px;
            height: 300px;
            background: rgb(153, 27, 27);
            float: left;

        }
        .main-right {
            width: 720px;
            height: 300px;
            background: rgb(30, 32, 155);
            float: right;
        }
    </style>

3、通栏平均分布

<body>
    <div class="w">
        <div class="nav"></div>
    </div>
    <div class="main">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
    <div class="w">
        <div class="footer"></div>
    </div>
</body>

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .w {
            height: 100px;
            background: rgb(231, 221, 221);
        }
        .nav{
            width: 960px;
            height: 100px;
            background: rgb(163, 138, 138);
            margin: 0 auto;
        }
        .main{
            width: 960px;
            height: 300px;
            background: rgb(122, 62, 62);
            margin: 10px auto;
        }
        .box1, .box2, .box3, .box4 {
            width: 232px;
            height: 300px;
            float: left;
            background: rgb(32, 24, 148);
        }
        .box2{
            background: rgb(173, 84, 84);
            margin: 0 10px;
        }
        .box3{
            background: rgb(49, 5, 5);
            margin-right: 10px;
        }
        .box4{
            float: right;
            background: rgb(42, 185, 23);
        }
        .footer{
            width: 960px;
            height: 100px;
            background: rgb(224, 126, 126);
            margin: 0 auto; 
        }
    </style>

相关阅读:
SpringMVC（四）-- 文件下载、自定义拦截器、异常处理
 SpringMVC（三）-- 视图和视图解析器、数据格式化标签、数据类型转换、SpringMVC处理JSON数据、文件上传
 SpringMVC（二）--处理数据模型、ModelAndView、Model、Map、重定向、@ModelAttribute、
SpringMVC（一）--基础、REST、@RequestParam、POST请求乱码等
 反射
 servlet基础
 eclipse为项目设置jdk
mysql创建表时符号``的作用
 redis进阶
 相对路径和绝对路径的区别
原文地址：https://www.cnblogs.com/EricZLin/p/8745212.html