CSS盒子模型入门学习

CSS盒子模型

• 内容区(Content)
  存放在body之间的元素
• 内边距(Padding)
  padding内边距指的是盒子的内容区与盒子边框之间的距离，一共有四个方向的内边距
  分别是padding-top、padding-left、padding-bottom、padding-right,需要注意的是内边距会影响盒子可见框的大小。

<div class="c1">
</div>

.c1 {
   width: 100px;
   height: 100px;
   background-color: blue;
   border: red solid 10px;
   border-right: none;
}

出现效果如下图所示：

当我CSS中设置上内边距为50px如下所示：

效果如下图所示：可以很清晰看到元素变大。

为了更清晰验证内边距对内容区的影响，可以在原div的元素上在创建一个子Div元素如下所示：

<div class="c1">
   <div class="c2"></div>
</div>

.c1 {
   width: 200px;
   height: 200px;
   background-color: blue;
   border: red solid 10px;
   padding-top: 100px;
   padding-bottom: 100px;
   padding-left: 100px;
   padding-right: 100px;
}

.c2 {
   width: 100%;
   height: 100%;
   background-color: gold;
}

然后页面可见框模型如下图所示：

• 边框(Border)
  为一个元素设置边框必须设置以下属性：

1. 边框宽度
2. 边框颜色
3. 边框样式
   一个简单的边框元素设置如下所示：

<div class="div1">
</div>

.div1 {
    /**
    若属性设置四个值即为
    设置边框上、右、下、左长度
    若设置为三个值则为
    设置边框上 左右 下 长度
    若设置两个值则为
    设置边框上下 左右
    若设置一个值
    则设置所有方向的值长度

    除此之外还提供有border-bottom-width
    border-left-width
    border-right-width
    border-top-width
    */
    border-width: 10px 20px 30px 40px;


    border-color: red;
    /**
        实线边框样式
     */
    border-style: solid;
    width: 100px;
    height: 100px;
    background-color: black;
}

效果如下图所示：

• 外边距(margin)
  外边距指的是当前盒子与其他盒子之间的距离，不会影响盒子的大小，但是会影响此盒子在页面的位置。

<div class="c1"></div>

.c1 {
    width: 200px;
    height: 200px;
    border: aqua solid 10px;
    background-color: gold;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 100px;
    margin-left: 100px;
    /**
    以上需要注意的是
    margin-top与margin-left改变的是元素本身的位置
    而margin-right与margin-bottom改变的是其他元素的位置
     */
}

页面效果如下所示：这里设置的外边距指的是当前div元素距离父元素body元素的距离

新建一个div元素作为c1类的兄弟元素，页面及css设置如下所示：

<div class="c1"></div>
<div class="c2"></div>

.c2 {
    width: 200px;
    height: 200px;
    border: yellow solid 10px;
    background-color: red;
}

页面效果如下图所示：

以上需要注意的是 margin-top与margin-left改变的是元素本身的位置而margin-right与margin-bottom改变的是其他元素的位置，而margin还可以设置为auto。一般只设置水平方向即margin-left与margin-right，若设置auto则外边距最大值，例如设置margin-left为auto，css设置元素如下所示：

.c1 {
    width: 200px;
    height: 200px;
    border: aqua solid 10px;
    background-color: gold;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: auto;
}

可以看到 margin-left设置外边距最大值的效果。

若是margin-left与margin-right 都设置auto则元素水平居中如下所示：

CSS盒子垂直外边距垂直问题

• 相邻元素垂直外边距
  请看下面页面元素以及css样式设置如下所示：

<div class="c1"></div>
<div class="c2"></div>

.c1 {
    background-color: red;
    width: 200px;
    height: 200px;
    border: yellow solid 10px;
    margin-bottom: 100px;
}

.c2 {
    background-color: gold;
    width: 200px;
    height: 200px;
    border: fuchsia solid 10px;
    margin-top: 100px;
}

此时的页面效果如下所示：

当设置c2元素margin-top 100px 结果发现页面元素位置没有任何变化，这个现象就是由于垂直外边距的重叠。这是因为兄弟两个元素发生垂直外边距重叠时候不是取两个元素外边距之和而是取两者之中的最大值。

• 父子元素垂直外边距离
  新增两个div元素，c3与c4。

<div class="c3">
    <div class="c4"></div>
</div>
<div class="c1"></div>
<div class="c2"></div>

.c3 {
    height: 400px;
    width: 400px;
    background-color: brown;
}

.c4 {
    height: 200px;
    width: 200px;
    background-color:gray;
}

页面效果显示如下所示：如果要使c4向下移动200px距离二c3保持位置不变如何做呢？

我们修改c4的css代码为其上外边距移动200px

页面效果如下所示：我们发现c4确实向下移动了200px单位，但是父元素c3也跟着向下移动了200px，造成这个原因是垂直外边距外边距具有传递性的缘故，相当于父元素也同样设置了margin-top: 200px,所以当我们为父元素c3也同样设置了margin-top: 200px，页面依然是下面这样的效果。
我们可以让c3元素增加其盒子长度，即c3向上延伸200px，然后在对c3本身的高度进行减少1/2长度即可如下所示：

.c3 {
    height: 200px;
    width: 400px;
    background-color: brown;
    padding-top: 200px;
}

页面实现效果如下所示：