《Web前端技术H5+CSS3》笔记--第六章 盒子模型[云图智联]

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

1.1 盒子模型

在学习盒子模型之前，先来看一个生活中的例子。假如墙上排列着几幅画。对于每幅画来说，都有一个边框，在英文中称为border；每个画框中，画和边框通常都会有一定的距离，这个距离称为内边距，在英文中称为padding；每一幅画间也不是紧挨着的，也存在一些距离称为外边距，在英文中称为margin。

在CSS中，一个独立的盒子模型由content（页面内容）、border（边框）、padding（内边距）、margin（外边距）四部分组成

1.content：位于最中间，页面的主要显示内容，也就是这幅画的本身
2.border：位于内边距外面，如果没有内边距就是包着内容的外框。它一般具有一定的厚度，也就是这幅画的画框
3.padding：位于边框内部的空隙，是内容与边框的距离，也就是画框和图之画之间的空隙
4.margin：位于边框内部空隙，边框外面周围的距离，也就是每幅画之间的空隙

1.1.1 边框

边框（border）有三个属性，分别是color（颜色）、width（粗细）和style（样式）。在网页中设置边框样式时，尝尝需要将这三个属性很好地配合起来，才能达到良好的页面效果。在使用CSS设置边框时，分别使用border-color、border-width和border-style设置边框的颜色、粗细和样式

border-color

border-color的设置方法与文本的color属性或背景颜色bancground-color属性的设置方法完全一样，也是使用十六进制设置边框的颜色，如红色为#FF0000，也可以使用RGBA的颜色表示方法。

由于盒子模型分为上、下、左、右四个边框，因此在设置边框颜色时，可以按上、右、下、左的顺序来设置四个边框颜色，也可以同时设置四个边框的颜色。border-color属性设置方法如下：

属性	说明	举例
border-top-color	设置上边框颜色	border-top-color:#369
border-right-color	设置右边框颜色	border-right-color:#369
border-bottom-color	设置下边框颜色	border-bottom-color:#FAE45B
border-left-color	设置左边框颜色	border-left-color:#EEFF34
border-color	设置四个边框颜色为同一个颜色	border-color:#EEFF34

当使用border-color属性同时设置四条边框颜色时，设置顺序按顺时针方向上、右、下、左设置边框颜色，属性值之间以空格隔开。没有设置属性值的找对边

例如：border-color:#369 #000 #F00 #00F;四个属性按上、右、下、左依次对号入座。

例如：border-color:#369 #000 #F00;三个属性值按上、右、下、左依次对号入座。#369对应上边框，#000对应右边框，#F00对应下边框，发现到“左”的时候没有属性值了，这时候找它的对边。因为“左”的对边是“右”所以#000对应左边框

以后无论给出几个属性值都按照“上、右、下、左”“没有找对边”的方式来对应

border-width

border-width用来指定border的粗细程度，它的值有thin、medium、thick和像素值

thin ：设置细的边框

medium：默认值，设置中等的边框一般的浏览器都将其解析为2px

thick：设置粗的边框

像素值：表示具体的数值，自定义设置边框的宽度，如1px、5px等

border-style

border-style用来指定border的样式，它的值有none、hidden、dotted、dashed、solid、double、groove、ridge和outset，其中none、dotted、dashed、solid在实际网页制作中是经常用到的值。none表示无边框，dotted表示点线边框，dashed表示虚