盒子模型

盒子模型

一.认识盒子模型

概念：把HTML页面中的元素看作是一个矩形的盒子也就是一个呈装内容的容器。
组成：由元素的内容，外边距，边框和内边距组成。

二.盒子模型相关属性

边框属性：
1.设置边框样式：

例如：<p>只有上边为虚线dashed，其他三边为单实线solid，可以使用border-style综合属性分别设置各边样式：
p{ border-style:dashed solid solid solid;}
或综合设置4条边，然后采用上边覆盖：
p{border-style:solid;}
p{border-top-style:dashed;}
2.设置边框宽度:

单位常用px
border-top-width：上边框宽度
border-right-width：右边框宽度
border-bottom-width：下边框宽度
border-left-width：左边框宽度
border-width：上边框宽度[右边框宽度 下边框宽度 左边框宽度 ]

3.设置边框颜色：

综合设置四边颜色必须按顺时针顺序采用值复制，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
注意：设置边框颜色时必须设置边框样式，如果未设置样式或设置为none，则其他边框属性无效。

4.综合设置边框：

5.内边距属性：

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
padding：上内边距[右内边距 下内边距 左内边距]。

注：上边设置中，padding相关属性的取值可为auto自动（默认值），不同单位的数值，相对于父元素宽度的百分比%，实际工作中最常用的是像素值px，不允许使用负值。

6.外边距属性：

margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
margin：上外边距[右外边距 下外边距 左外边距]。

当对块级元素应用宽度属性width，并将左右的外边距都设为auto时，可是块级元素水平居中，代码如下：

.header{width:960px; margin:0 auto;}

7.背景属性:

(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

三.元素的类型与转换

1.元素的类型

一般分为快标记和行内标记，也称块元素和行内元素。
块元素：通常都会占据一整行或多整行，常用于网页布局和网页结构的搭建。常见的块元素有

<h1>~<h6>,<p>,<div>,<ul><ol>,<li>

行内元素：
特点为：不必在新的一行开始，同时，也不必强迫其它的元素在新的一行显示。

2.元素的转换：

使用display属性转换
inline;此元素将显示为行内元素
block：此元素将显示为块元素
inline-block;此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。
none：此元素将被隐藏，不显示，也不占用页面空间

本节构图：