盒子模型

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

记得刚学习前端的时候，HTML+CSS以及让我沉迷其中，今天我将给大家带来通过盒子模型的一些布局基础。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

开始布局

我们新增一个盒子，给定一个宽、高！

<div class="box">

</div>

<style>
.box{
    width:300px;// 宽度300像素
    height:100px;// 高度100像素
    border:1px solid red; // 给盒子来个边框 1像素 solid实线 red即边框的颜色
}
</style>

给定一个子盒子，在父盒子容器内

<div class="box">
    <div class="sub_box">

    </div>
</div>
<style scoped lang="less">
.box {
    width: 300px;
    height: 100px;
    border: 1px solid red;
    .sub_box{
        width:100px;
        height: 100px;
        border: 1px solid black; // 子盒子给一个 宽高都为100px，并且边框为黑色
    }
}
</style>

如何让子盒子在父盒子容器的中间呢？我们只需要给子盒子添加一行样式即可！

margin: 0 auto;

如上是一些简单的布局，大家是否觉得非常容易，接下来带大家理解一下块级元素和行内元素！

块级元素和行内元素

块级元素 每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。
行内元素（内联元素）： 不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。

常见的块级元素有：h1 h6 p div ul ol li

我们的div属于块级元素，当我们的父容器包含两个子盒子的时候会出现什么情况？因为div属于块级元素，所以会被挤在下方。

如何让盒子排列在同一行上？

这个时候我们会用上 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

.box {
    .sub_box {
        float: left; // 子盒子往左边浮动
    }

    .sub_box1{
        float: right;// 子盒子往右边浮动
    }
}

这样就实现了两个子盒子并行排列啦，是不是非常简单！

两个盒子的边距如何调整？

咱们可以使用外边距，即在下面盒子添加一行样式

margin-top:10px;

hello存在于子盒子中，如何让hello下来20像素呢？

这就涉及到内边距了，即Padding

padding-top:20px;

总结

在学习CSS+html布局之前，咱们可以先来了解一下盒子模型，了解了解块级元素与行内元素，了解了特性之后能让我们更加灵活的布局，本文偏向于基础偏，从基础学起，后面了解一些布局才能游刃有余！

CSS 布局基础 | DIV + CSS

盒子模型

开始布局

块级元素和行内元素

总结