CSS学习篇核心之——盒子模型

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

概述

关于CSS的一些基础知识我们在前面文章中已经有所了解，这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识。

盒子模型

元素框的最内部分是实际的内容（element），直接包围内容的是内边距（padding），内边距呈现了元素的背景，内边距的边缘是边框（border），外边距（margin)默认是透明的，因此不会遮挡其后的任何元素，对于这个图边框外的部分就是margin，边框内内容外地部分就是padding。

在CSS中我们一般习惯性的将外边距和内边距设置为0，即

* {
margin: 0;
padding: 0;
}

element元素

在CSS中，width和height是element区域的宽度和高度，对padding、border、margin增加尺寸不会影响element的宽度和高度，只会增加整个框的尺寸。

下面我们看个例子：假设框的每个边上有 10个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素

#box {
width: 70px;
margin: 10px;
padding: 5px;
}

这样的话对于element、padding、border、margin的尺寸就更加的一目了然了，这里需要注意下的是，padding、border、margin即可以应用于一个元素的所有边，也可以应用于单独的边，还有一点就是，margin可以是负值。

内边距（Padding）

元素的内边距是再边框和内容区之间，padding属性设置用长度值或者百分比值，但不允许用负值。关于用百分比的话，有一点需要注意是，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

对于padding的设置，可以设置它的上下左右这四个边距。

h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}

h1 {padding: 10px0.25em 2ex 20%;}

上述这两种方法实现的效果是一致地，如果我们的四个边距是一样的话可以用下面这句话。

h1 {padding: 10px;}

边框（border）

元素的边框（border)是围绕元素内容和内边距的一条或多条线，可以规定元素边框的样式、宽度和颜色，这样可以创建出效果更佳出色的边框。

样式

样式是边框的最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

border可以先设置样式，设置样式的顺序为op-right-bottom-left，设置样式的属性为border-style；

如果想设置单边样式则为：

border-top-style

border-right-style

border-bottom-style

border-left-style

宽度

边框宽度属性设置用border-width设置；

如果想单独设置各边的宽度则用：

border-top-width

border-right-width

border-bottom-width

border-left-width

对于同一个边框宽度我们可是用三种方式来设置如下，效果是一样的。

p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}

p {border-style:solid; border-width: 15px 5px 15px 5px;}

p {border-style:solid; border-width: 15px 5px;}

颜色

设置边框颜色的原理与设置设置边框宽度的原理是相同的，设置颜色用border-color;

如果设置个边宽度则用：

border-top-color

border-right-color

border-bottom-color

border-left-color

外边距（margin）

margin围绕在元素边框外地空白区域就是margin，设置margin会在元素外创建额外的“空白”，margin属性接收任何长度单位、百分数值甚至负值。

在这里先讲解一个值复制的规则，就是如果缺少左外边距的值，则使用右外边距的值；如果缺少下外边距的值，则使用上外边距的值；如果缺少右外边距的值，则使用上外边距的值。

换句话说，如果为外边距指定了 3个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。

如果我们想设置单边外边距属性，可以用下面的属性

margin-top

margin-right

margin-bottom

margin-left

下面这两种方式效果是一致地

h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}

p {margin: 20px 30px30px 20px;}