和大家分享一个学习盒子模型的小妙招，快来康康吧！

简单的盒子模型元素组成及分类：

div 盒子的元素组成和写法：

margin 外边距
padding 内边距
border 边框
内容

盒子模型

元素的总宽度  =  width  +  padding-left+padding-right + margin-left + margin-right + border-left + border-right

重新计算盒子模型

作用：  重新制定元素盒子的计算模式

样式： box-sizing

布局

1、 普通流（文档流）
        块级元素独占一行   行内元素不独占一行
    问题：如何让多个块级元素摆成一排呢？
    
    浮动布局：float ：  left（左浮动）    right（右浮动）

浮动流

1. 浮动的概念
    元素浮动起来之后会脱离文档流，不再占有之前的空间，其他未浮动浮动的元素会上前补位。
    浮动元素会停靠在父元素的左边或者右边，或者停靠在已经浮动元素的边缘上
    浮动元素只会在当前行浮动
    浮动元素依然位于父元素之内

2、浮动引发的特点
    父元素的宽度不够时，最后一个元素会自动换行
    元素一旦浮动起来之后，会变成块级元素（可以设置宽高）
    margin auto会失效
    文本  行内元素和行内块元素 采用文字环绕的方式进行排列是不会被浮动元素压在底下

清除浮动

clear  清除浮动
清除浮动：不是去掉浮动效果，而是清除上方元素因为浮动所对自己产生的影响。

left:当前元素不会向前占位并且左边不允许有浮动元素
right:当前元素不会向前占位并且右边不允许有浮动元素
both:同时清空左右

浮动元素对父元素带来的影响

由于浮动元素脱离文档流 ，所以导致元素不占有父元素的页面空间所以会带来影响
    如果一个元素中所有的子元素全部浮动了，父元素的高度为0
如何解决：
    1.设置固定的高度
        缺点：必须要知道父元素准确高度
    2.使用父元素也浮动
        缺点：对后续的元素有影响
    3.为父元素设置溢出隐藏
        缺点：如果子元素需要溢出父元素，那么也会被隐藏
    4.在元素后面添加一个空子元素 并且给这个元素设置clear：both




<style>
    .father{
        width: 400px;
        border: 1px solid red;
        margin: 0 auto;
    }   

    .top_span1{
        font-size: 30px;
        float: left;
        margin-left: 20px;
    }
    .top_img{
        float: left;
        margin-top: 10px;
        margin-left: 3px;
    }
    .top_span2{
        font-size: 15px;
        color: grey;
        /* margin-top: -10px; */
        line-height: 45px;
        float: left;
        margin-left: 3px;
    }
    .bot_img1{
        margin-top: 10px;
        margin-left: 20px;
    }
    .bot_img2{
        margin-top: 10px;
        margin-left: 20px;
    }
    .bot_img3{
        margin-left: 5px;
    }
</style>

<div class="father">
    <div class="top">
        <span class="top_span1">京东超市</span>
        <img src="京东/尖括号.png" alt="" class="top_img">
        <span class="top_span2">精选超值好物</span>
        <div style="clear: both;"></div>
    </div>
    <div class="bot">
        <img src="京东/1.jpg" alt="" class="bot_img1">
        <img src="京东/2.jpg" alt="" class="bot_img2">
        <img src="京东/3.jpg" alt="" class="bot_img3">
    </div>
</div>
</div>

盒子模型：整理老师笔记，认真分析盒子模型的构成，理解每一个细节所表现的功能，进而用盒子模型在页面上做出更多好看的样式图。