概述

本章介绍css内外边距的定义，并引入盒子模型的概念

1.CSS–内外边距

margin: 用于控制元素与元素之间的距离, margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到互相隔开的目的
padding: 用于控制内容与边框之间的距离
border(边框): 围绕在内边距和内容外的边框
content(内容): 盒子的内容, 显示文本和图像.

重要提示:

当你指定一个CSS元素的宽度和高度属性时, 你只是设置内容区域的宽度和高度.

完全大小的元素, 你还必须加上内边距, 边框和外边距.

<style>
    .div1 {
        width: 100px;
        height: 100px;
        background-color: pink;
        border: 40px solid blue;
        padding: 40px;
    }
    .div2 {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        border: 1px solid red;
    }
</style>


<div class="div1">hello div1</div>
<div class="div2">hello div222</div>

如果上下两个元素都有设置相对的margin值, 则选择大的添加, 小的不添加.这个称谓margin兄弟塌陷

margin父子塌陷问题:

如果父级 div 中没有 border, padding, inline content(文本), 子级 div 的 margin 会一直往上找,直到找到某个标签包括 border, padding, inline content(文本) 中的其中一个, 然后按此 div 进行 margin.

<style>
    .div1 {
        width:200px;
        height:200px;
        background-color: pink;
        border: 20px solid red;
        padding: 5px;
        margin-bottom: 40px;
    }
    .div2 {
        width:200px;
        height:200px;
        background-color: blue;
        border: 20px solid red;
        padding: 5px;
        margin-top: 40px;
    }
    .outer {
        height: 1000px;
        background-color: lightblue;
    }
    .box {
        width:100px;
        height:100px;
        background-color: orange;
    }
</style>



<div class="box"></div>

<div class="outer">
    <div class="div1">hello div1</div>
    <div class="div2">hello div2</div>
</div>

补充说明:

background-color 背景颜色

background-image 背景图片

background-repeat 背景重复

我们可以对上面的代码进行合并书写:

background: url(bgimg.gif) no-repeat 5px 5px;

2.CSS盒子模型

盒子模型解释

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

盒子模型

把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

设置宽高 width height

1
2

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

设置边框 border

设置一边的边框，比如顶部边框，可以按如下设置：

1	border-top:10px solid red;

其中10px表示线框的粗细；solid表示线性。

设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

1	border:10px solid red;

设置内间距 padding

设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

1 2	/* 四个值按照顺时针方向，分别设置的是上右下左四个方向的内边距值。 */ padding：20px 40px 50px 30px;

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

1
2
3

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。

外间距居中技巧
如果子元素是块元素，且它的宽度小于父元素，可以将子元素左右设置auto来水平居中子元素

1 2	/* 子元素上下外边距设为0，左右设置为auto */ margin:0px auto;

盒子的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

不忘初心

CSS简明教程（三）

概述

1.CSS–内外边距

2.CSS盒子模型