9.7

开始学习盒模型

所谓盒子，就是将html网页中的标签在网页版面中所占据的平面范围，抽象出来的一个“视觉形状”。

一个最简单的理解就是：几乎所有标签，都可以看做是一个“矩形盒子”，具有一定的宽高（区域）。

总体上来说，一个盒子，是由若干个部分构成的，从内到外依次包括：

盒子内容区，内边距区，边框，外边距区

 

 

 

记住以下几个单词：

 

content：内容

 

padding：内边距，又称为内补白，是一片空白区域

 

border：边框

 

margin：外边距，又称为外补白，也是一片空白区域

 

top，right，bottom，left：上，右，下，左

 

设置盒子的宽高属性，实际上设置的是盒子内容区的宽高。

比如：

 

div{

 

width: 100px;

 

height: 100px;

 

}

 

而盒子实际占据的区域的宽高，可以这样来计算：

 

盒子所占宽：

 

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

 

盒子所占高：

 

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

 

 

 

除了这两个基本宽高属性，还有以下4个范围限定性宽高属性，有时候也会用一用：

 

min-width：设定最小宽度

 

max-width：设定最大宽度

边框属性就是设置一个盒子的边框线的具体特性。

边框线的特性有3个：

border-style：

线型，属性值通常有：solid(实线)， dashed(虚线)， dotted(点线)

border-width：

线的粗细，长度单位，比如1px

border-color：

线的颜色，颜色值，比如red， rgb(255, 0, 0)， #FF3366

 

内边距是指在盒子结构中，盒子的边框线和内容之间的一段空白区域（内容放不进去）。

 

我们能设置的就是这个空白区域的大小（宽度）。

 

同样分4个方向，分别可以单独设置：

 

padding-top：1px；//上内边距

 

padding-right：2px；//右内边距

 

padding-bottom：4px；//下内边距

 

padding-left：8px；//左内边距

 

还有一个综合属性：

 

padding：宽度1  [宽度2]  [宽度3]  [宽度4]；//这个用的最多，推荐使用。

 

这个综合属性可以设置1-4个值，不同个数的值，其含义不同，如下所示：

 

1个值：表示4个方向都是这个值。

 

2个值：第1个表示上下边距的值，第2个表示左右边距的值。

 

3个值：第1个表示上边距的值，第2个表示左右边距的值，第3个表示下边距的值。

 

4个值：依次代表top， right， bottom， right这4个方向的内边距的值

 

外边距是指在盒子结构中，盒子的边框线，跟盒子的外部其他元素之间的一段空白区域。

 

我们能设置的就是这个空白区域的大小（宽度）。

 

它的属性设置和含义，跟内边距（padding）非常类似：

 

margin-top：1px；//上外边距

 

margin-right：2px；//右外边距

 

margin-bottom：4px；//下外边距

 

margin-left：8px；//左外边距

 

margin：宽度1  [宽度2]  [宽度3]  [宽度4]；//同时设置4个方向，用的最多，推荐使用。

 

背景是指在盒子结构中，衬托在边框线范围以内的背景颜色或背景图。

 

可以设置背景颜色，或背景图，或同时设置。其中背景图有多项参数可设置。

 

主要的背景属性设置有：

 

设置背景颜色：

 

background-color：yellow;

 

设置背景图：

 

background-image：url(图片路径);//注意，图片路径是相对于当前网页或css文件(对外部样式来说)

 

设置背景图的位置（有背景图的前提下有效）

 

background-position：水平位置[，垂直位置]

 

轮廓指的是盒子边框线外面再套一层“修饰性”线条，该线条只有视觉效果，不占版面空间。

 

实际上，如果有外边距（margin），轮廓线是可以跟margin有重叠的。

 

轮廓属性主要有：

 

outline-width：轮廓线宽度

 

outline-style：轮廓线线型

 

outline-color：轮廓线颜色

 

outline-offset：轮廓线距离边框线的距离（间隙）

 

转载于:https://www.cnblogs.com/smallnoob/p/11526254.html