CSS中的盒模型

web.jpeg

我们看到的网页是由有一个盒子模型一个盒子模型组成的,那么什么盒子模型，盒子模型包括哪些呢?
我们通常使用的 div nav section sapn都可以认为是盒模型

盒模型的组成

• 每一个盒模型都包含 一下几个内容
  • width：宽度,在CSS中是指内容的宽度，并不是盒子的宽度
  • height：高度，和宽度一样的原理
  • padding:内边距，内容和边框之间的距离
  • border：变框
  • margin:外边距 盒子和盒子之间的距离

width.png

image.png

1. border边框属性

从上面的图中我们可以知道 边框是真实存在的 ，那么边框有哪些属性？

• border-width 边框的宽度
• border-style边框的样式
• border-color 边框的颜色

 div{
            width: 200px;
            height: 200px;
            background-color: aliceblue;
            padding: 10px;
            /* 边框宽度 */
            border-width: 1px;
            /* 边框颜色 */
            border-color: blue;
            /* 边框样式 solid实线 dash虚线 dotted点线 double 双实线 */
            border-style: solid;
        }

综合属性: border: 1px solid orange;

image.png

2. padding内边距（内容区域和边框之间的距离）

• padding是有方向的
  • padding-left: ,padding-top:,padding-right: , padding-bottom: ,等 四个方向
  • 复合属性

    • 按照顺时针排序，上，右，下，左

    • padding:30px 20px 40px 100px;

    • padding: 20px 30px 40px; 表示上是20 ，左右是30，下是40
      

      image.png

    • padding: 30px 40px; 表示上下是30 左右是40

    • 小属性可以层叠大属性

      • padding: 20px;
      • padding-left: 30px;
      • 上面的 左边的属性会变成30px

注意:如果盒子没有设置宽度和高度，那么padding是不起作用的

image.png

  <style>
        *{
            padding: 0;
            margin: 0;
        }
        .demo{
            width: 380px;
            height: 263px;
            border: 1px solid #cccccc;
            margin: 100px;
            padding: 20px 15px 0;

        }
        .demo h4{
            color: #202026;
            font-size: 22px;
            border-bottom: 1px solid #cccccc;
            padding-bottom: 5px;
        }
        .demo ul li{
            height: 38px;
            line-height: 38px;
            /* 取出小圆点 */
            list-style: none;
            border-bottom: 1px dashed #cccccc;
            text-indent: 2em;
            
            
        }
        .demo li a {
            color: #333333;
            text-decoration: none;
        }
        .demo ul{
            margin-top: 12px;
        }

    </style>

image.png

image.png

3.margin外边距(盒子与盒子之间的距离)

• 设置margin的 左边和上边距 自身位置发生变化， 右边距和下边距 相邻盒子发生变化

  <style>
        div{
           width: 200px;
           height: 200px;
           border: 10px solid yellowgreen; 
           margin-left: 100px;
           margin-top: 100px; 
           /* margin 左边和上边距 自身位置发生变化， 右边距和下边距 相邻盒子发生变化 */
        }
    </style>

image.png

• 设置margin的auto属性, 一般之设置水平方向的margin，
  如果指定 左或者右外边距 则设置左或者有边距设置最大

 div{
           width: 200px;
           height: 200px;
           border: 10px solid yellowgreen; 
       
           /* 
            margin auto自动发生变化 一般之设置水平方向的margin，
            如果指定 左或者右外边距 则设置左或者有边距设置最大
            */
            margin-left: auto;
     
       
        }

image.png

• 如果设置margin的左右边距都是auto那么盒子是居中的
• margin: 100px auto;
• 注意:必须是块级元素,盒子指定了宽度

 <style>
        div{
           width: 200px;
           height: 200px;
           border: 10px solid yellowgreen; 
            /* 
            垂直方向 设置外边距auto ,则外边距默认是 0；
             */
             margin: 100px auto;
        }
    </style>

image.png

margin的合并现象(盒子与盒子之间是兄弟关系)

• 垂直方向上的 盒子与盒子之间的距离 取 最大值

image.png

image.png

• margin塌陷现象:两个盒子是包含关系，如果让子盒子在父盒子之内向下平移

  • 在给盒子设置margin-top(这里有一个bug，如果父盒子没有边框，那么将来给子盒子设置以后父盒子也会随着子盒子一起向下掉)
    • 解决方式
      • 给父盒子添加边框 border
      • 给父盒子设置属性：overflow(溢出),hidden(隐藏)

• 盒子居中对齐

  • 1.必须是块级元素
  • 2.盒子必须指定了宽度
  • 3. 设置 左右的外边距是 auto

• 注意：行内元素的margin上下不起作用的