边距及盒模型

一. 地址

网页上引入或链接到外部文件，需要定义文件的地址，常见引入或链接外部文件包括以下几种：

<!-- 引入外部图片   -->
<img src="images/001.jpg" alt="图片" />

<!-- 添加一个图片 -->
<img src="C:\course5\03day\images\001.jpg" alt="图片" />


<!-- 链接到另外一个网页   -->
<a href="002.html">链接到网页2</a>

<!-- 链接到另外一个网页   -->
<a href="C:\source2\002.html">链接到网页2</a>


<!-- 外链一个css文件   -->
<link rel="stylesheet" type="text/css" href="css/main.css" />

<!-- 外链一个js文件   -->
<script type="text/javascript" src="js/jquery.js"></script>

这些地址分为相对地址和绝对地址:

1. 相对地址

相对于引用文件本身去定位被引用的文件地址，相对地址的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

2. 绝对地址

相对于磁盘的位置去定位文件的地址:
例如:<img src="C:\course5\images\001.jpg" alt="图片" />

相对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，绝对地址就没有这个问题。

二. 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;

1. CSS盒子模型

盒子模型解释

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

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

设置宽高 width height

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

设置边框 border

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

border-top:10px solid red;

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

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

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

border:10px solid red;

设置内间距 padding

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

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

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

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

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

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

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

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

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

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

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

CSS 边距及盒模型