css--盒子模型--塌陷问题及处理

盒子模型　　

1 绝大多数标签都可以看作盒子，可以设置宽高或设置内容；在CSS中，"box model"这一术语是用来设计和布局时使用。

　　CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

　　盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

　　下面的图片说明了盒子模型(Box Model)：

css--盒子模型--塌陷问题及处理

content 盒子的内容

padding 内边距内容到边框的距离

border 边框

margin 外边距元素与元素的间距

2 盒子模型的属性

　　1) width 宽 height高均指内容放入宽高，而非盒子的

　　2) padding 内边距内容到边框的距离

　　　　padding:10px; 一个值相当于四个方向值相同（上右下左）

　　　　padding:10px 20px; 上10px 右20px 下10px 左20px

　　　　padding:10px 20px 30px; 上右下左20px

　　　　padding:10px 20px 30px 40px; 上右下左

　　　　上 padding-top

　　　　右padding-right

　　　　下 padding-bottom

　　　　左padding-left

　　2)border 边框

　　按三要素：border-width 边框宽度

　　　　　　 border-style 边框样式 solid实线 dashed虚线

　　　　　　 border-color 边框颜色　　　　

　　按方向：border:10px solid blue 四个方向均同样设置

　　　　　　border-top

　　　　　　border-right

　　　　　　border-bottom

　　　　　　border-left

　　　　　　background-color:#000;黑

　　　　　　border-width:20px;

　　　　　　border-style:solid dashed dotted doble; 上右下左

　　　　　　border-color:red green blue pink; 上右下左

　　　　　　border-bottom:5px solid blue; 下边框设置3个样式

　　　3）margin 外边距元素与元素的间距

　　　　margin:20px 30px 上右下左同padding

　　　　margin-top

　　　　margin-right

　　　　margin-bottom

　　　　margin-left

　　　　水平居中： text-align:center;

　　　　　　　　　margin: 0 auto; 上下边距为0 auto让有宽度的块级元素水平居中 eg:div p

3 margin塌陷问题及解决

　　父子塌陷问题
          父亲没有设置padding border 内容时，子元素垂直方向的margin会叠加给父亲
          一旦发生塌陷，叠加规则：父亲最终垂直方向的margin为父子中最大的margin值，并非相加

          解决方法： 1 把儿子的margin转换成父亲的padding 注意盒子总高度变化问题
2 给父亲增加一个属性 overflow:hidden;    //触发了BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        /*margin 父子塌陷问题
          父亲没有设置padding  border 内容时，子元素垂直方向的margin会叠加给父亲
          一旦发生塌陷，叠加规则：父亲最终垂直方向的margin为父子中最大的margin值，并非相加      
        
          解决方法：  1 把儿子的margin转换成父亲的padding 注意盒子总高度变化问题
                    2 给父亲增加一个属性 overflow:hidden;    //触发了BFC
        */

        .box1{
            width: 150px;
            height: 150px;
            background-color: pink;
           /* padding: 20px; */   
           /* overflow: hidden; */
        }
        .p1{
            width: 50px;   /*内容的宽*/
            height: 50px;   /*内容的高*/
            background-color: aqua;

            padding: 10px  20px; /*内边距   内容到边框的距离  上下为10px 左右20px*/
            border: 2px dashed red;
            border-bottom: 2px solid blue;
            margin: 20px;
        }

    </style>
</head>
<body>
 <div class="box1">
     <p class="p1">这是内容1</p>
 </div>

</body>
</html>

margin父子塌陷