掌握盒模型轻松DIV CSS网页布局

盒模型是指在一个网页元素的周围，有边框(Border)、内边距(Padding)、外边距(Margin)和内容(Content)这四个组成部分，这四个部分被称为盒子模型(Box Model)。

掌握盒模型是CSS网页布局的基础，下面是完整的攻略。

了解盒模型

在进行DIV CSS网页布局前，需要先了解盒模型的概念和组成部分，边框、内外边距、内容等部分都会影响盒模型元素的大小和表现。

设置盒模型

设置盒模型可以通过在CSS中添加box-sizing属性和对应的值进行设置，常用的两个值是content-box和border-box，分别表示默认盒模型和IE盒模型。

content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 2px solid #ccc;
  margin: 20px;
}

border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid #ccc;
  margin: 20px;
}

使用块级元素和内联元素

块级元素和内联元素都是HTML中的元素，块级元素可以在页面中创建一个矩形区域，而内联元素则不能。

常用的块级元素有div、h1、p等，常用的内联元素有a、span、img等，可以根据具体需求选择不同的元素实现网页布局。

例如，在下面的示例中，使用div实现了左右两栏布局。

<style>
  .container{
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
  }

  .left{
    width: 30%;
    float: left;
  }

  .right{
    width: 70%;
    float: right;
  }
</style>

<div class="container">
  <div class="left">左栏内容</div>
  <div class="right">右栏内容</div>
</div>

使用布局框架

布局框架可以帮助开发者快速搭建网页布局，常用的布局框架有Bootstrap、Foundation等。

例如，下面是一个使用Bootstrap框架实现的网页布局。

<style>
  .container-fluid{
    padding: 0;
  }
  .row{
    margin: 0;
  }
  .left{
    background-color: #f2f2f2;
  }
</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 left">左栏内容</div>
    <div class="col-sm-9">右栏内容</div>
  </div>
</div>

以上就是掌握盒模型轻松DIV CSS网页布局的完整攻略，通过深入学习盒模型和使用不同的布局方法，可以快速实现网页布局。