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

雨点打透心脏的1/2处 2022-11-09 12:48 140阅读 0赞

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

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

margin 外边距  
padding 内边距  
border 边框  
内容  
![在这里插入图片描述][20210315131042793.png_pic_center]

## 盒子模型 ##

元素的总宽度  =  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>

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

[20210315131042793.png_pic_center]: /images/20221023/7163784cc4b540af97484177c8a6944b.png