大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

盒模型

timg.jpg

网页都是有盒模型组成,每个盒子都有自己的 width,height,padding,margin,border等组成

  • width:宽度,在CSS中是指内容的宽度,并不是盒子的宽度
  • height:高度,和宽度一样的原理
  • padding:内边距
  • border:变框
  • margin:外边距
  • 注意:以后我们所说的宽度是指内容宽度


    width.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">

        div{
            width: 200px;
            height: 200px;
            padding: 100px;
            border: 1px solid red;
            background-color: pink;

        }
    </style>
</head>
<body>

    <div>
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容

    </div>
</body>
</html>

案例.png
padding 内边距
  • padding是有方向的
    • padding-left: ,padding-top: ,padding-right: , padding-bottom: ,等 四个方向
    • 复合属性
      • 按照顺时针排序,上,有,下,左
      • padding:30px 20px 40px 100px;
      • padding: 20px 30px 40px; 表示上是20 ,右做是30,下是40
      • padding: 30px 40px; 表示上下是30 左右是40
      • 小属性可以层叠大属性
        • padding: 20px;
        • padding-left: 30px;
        • 上面的 左边的属性会变成30px
border边框
  • 边框有三个要素:粗细,线型,颜色
  • border: 1px solid red;
  • 按要素拆开
    • border-width:1px; → 边框宽度
    • border-style:solid; → 线型
    • border-color:red; → 颜色。
  • 线型分类
    • solid 实线
    • dashed 虚线
    • dotted 有点的


      线类型.png
margin
  • 用来设置盒子之间的距离
  • margin的赋值和padding一样的
  • 外边距合并现象:两个盒子是并列关系,给上面盒子设置margin-bottom,给下面的盒子设置margin-top,它们两个的值不会相加,而是发生了合并现象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">

        .div1{
            width: 200px;
            height: 200px;
            padding: 100px;
            border: 2px dotted red;
            background-color: pink;
            margin-bottom: 50px;
        }

        .div2{
            margin-top: 30px;
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

    <div class="div1">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容

    </div>
    <div class="div2">
    </div>
</body>
</html>

合并.png
  • margin塌陷现象:两个盒子是包含关系,如果让子盒子在父盒子之内向下平移
    • 在给盒子设置margin-top(这里有一个bug,如果父盒子没有边框,那么将来给子盒子设置以后父盒子也会随着子盒子一起向下掉)
      • 解决方式
        • 给父盒子添加边框 border
        • 给父盒子设置属性:overflow(溢出),hidden(隐藏)