盒子模型

盒子模型

 

认识盒子模型

学习盒子模型首先需要了解其概念。所谓盒子模型就是把 HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）边框（border）和外边距（margin）组成。
 

在浏览器看来，圆页就是多个盒子嵌套排列的结果。其中，内边距出现在内容区域的周围。当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中，外边距是该元素与相邻元素之间的距离、如果给元素定义边框属性，边框将出现在内边距和外边距之间。需要注意的是，虽然盒子模型拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性。

盒子模型相关属性

边框属性

为了分割页面中不同的盒子，常常需要给元素设置边框效果。在CSS中边框属性包括边框样式属性（border-style)、边框宽度属性（border-width）、边框颜色属性（border-color）单侧边框的属性、边框的综合属性。

  1.设置边框样式( border -style )
  边框样式用于定义页面中边框的风格，常用属性值如下:

●none:   没有边框即忽略所有边框的宽度(默认值)。

●solid: 边框为单实线。

●dashed: 边框为虚线。

●dotted:边框为点线。

●double:边框为双实线。
      在设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置4条边的样式，具体如下:
● border- -top-style: 上边框样式。

● border -right-style: 右边框样式。

●border- -bottom-style: 下边框样式。

●border- -left-style: 左边框样式。
●border-style: 上边框样式右边框样式下边框样式左边框样式。

●border-style: 上边框样式左右边框样式下边框样式。

●border- -style: 上下边框样式左右边框样式。

●border-style: 上下左右边框样式。
      使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即-一个值为四边，两个值为上下/左右，3个值为上/左右下。
 

2.设置边框的宽度（border -width）
属性用于设置边框宽度，其常用取值单位为像索px，同边框样式一样，边的宽度也可以针对4条边分别设置，或综合设置4条边的宽度，具体如下:
●border- -top-width:上边框宽度。

● border- right- -width: 右边框宽度。

●border-bottom-width: 下边框宽度。

● border-eft-width: 左边框宽度。
●border-width: 上边框宽度[右边框宽度下边框宽度左边框宽度]。
综合设置四边宽度必须按上右下左的顺时针顺序采用值复制，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。

3.设置边框颜色( border- -color )
border-color属性用于设置边框的颜色，其取值可为预定义的颜色值、十六进制#RRGCBB或RGB代码rgb(r.g,b),实际工作中最常用的是十六进制#RRGGBB。边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，例如只包含图像的表格，其默认边框颜色为父元素的文本颜色。

与边框样式和宽度相同，边框颜色的单边与综合设置如下:

●border-top- color: 上边框颜色。

●border-right-color: 右边框颜色。

●border -bottom-color: 下边框颜色。

● border -left-color: 左边框颜色。
●brder-color: 上边框颜色[右边框颜色 下边框颜色 左边框颜色]。
综台设置四边颜色必须按顺时针顾序采用值复制，即一个值为四边，两个值为上下左右，
三个值为上/左右/下。

      4.综合设置边框
      使用border-style、border- width border- color 虽然可以实现丰富的边框效果，但是用这种方式书写的代码烦琐，且不便于阅读。其实cSs提供了更简单的边框设置方式，具体如下:
●border-top: 上边框宽度样式颜色。

● border- right: 右边框宽度样式颜色。

●border-bottom: 下边框宽度样式颜色。

● border-left: 左边框宽度样式颜色。

●border:四边宽度样式颜色。
      上面的设置方式中，宽度、样式、颜色顺序任意，不分先后，可以只指定需要设置的属性，省略的部分将取默认值（样式不能省略）。

内边距属性
      为了调整内容在盒子中的显示位置，常常需要给元素设置内边距、所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充。下面将对内边距相关属性进行详细讲解。
     在CSS中padding属性用于设置内边距，同边框属性border 一样，padding也是复合属性，其相关设置如下:

 ●padding -top:上内边距。

●padding- right: 右内边距。

●padding-bottom:  下内边距。

●padding-left: 左内边距。
●padding:  上内边距[右内边距下内边距左内边距]。
在上面的设置中，padding 相关属性的取值可为auto自动(默认值)、不同单位的数值、相对于父元素(或浏览器)宽度的百分比%，实际工作中最常用的是像素值px.不允许使用负值。

外边距属性
      网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的的距离，合理地布局网页，就下面将对外边需要为盒子设置外边距所谓外边距指的县元东边柜与相邻九者  间的距离距相关属性进行详细进解。
      在CSS中mag属性用于设置外边距，它是一个复合属性， 与内边距pddini 的用法类似，设置外边距的方法如下:
● margin-top: 上外边距。

●margin-right: 右外边距。

●margin-botom: 下外边距。

●margin-left: 左外边距。
●margin: 上外边距[右外边距下外边距左外边距]。
      margin相关属性的值，以及复合属性margin取1~4个值的情况与padding相同。但是， 外边距可以使用负值，使相邻元素重叠，在后面的章节中将详细介绍外边距取负值的情况。

背景属性:

(1).设置背景颜色
通过background-color属性来控制。
(2).设置背景图像
通过background-image来实现
(3).设置背景图像平铺：
通过background-repeat来实现
repeat：沿水平和竖直两个方向平铺（默认值）
no-repeat：不平铺
repeat-x：只沿水平方向平铺
repeat-y：只沿竖直方向平铺
(4).设置背景图像的位置：

(5).设置背景图像固定
scroll:图像随页面元素一起滚动（默认值）
fixed:图像固定在屏幕上，不随页面元素滚动。

(6).综合设置元素的背景
格式为：
background:背景色 url(“图像”) 平铺 定位 固定;

8.盒子的宽与高：
width
height
元素的类型
      HTML提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML标记被定义成了不同的类型，一股分为块标记和行内标记，也称块元米和行内元素。了解它们的特性可以为使用CSS设置样式和布局打下基础。
      1.块元素
      块元素在页而中以区域块的形式出现，其特点是:每个块元索通常都会独自古据- - -整行_或多整行、 可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
      常见的块元素有<h1>-<h6>. <p>、<div>、<ul>. <ol>. <li>等，其中<liv>标记是最典型的块元素。
      2.行内元素
      行内元素也称内联元素或内嵌元素，其特点是:不必在新的一行开始，同时，也不强迫 其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同行中它们不占有独文的区域，仅仅整口好的字体大小和图像民才来支撑结构，般不可以设置重度、高度、对齐等属性，常用于控制页面中文本的样式。
      常见的行内元素有<strong>. <b>. <em>、 <i>. <ldel>. <s>、<ins>. <u>、 <a>、 <pans等，其中pn>标记是最典型的行内元素。
 

 

 

本节思维导图如下：