H5 盒子模型

在学习盒子模型中学习到的标签：

1. div标签：div是division的缩写，意为“分割，区域”。<div>也就是一个区块容器；可以将网页分割为独立的，不同的部分，来实现网页的规划和布局；大多数HTML的标签都可以嵌套在<div>中，而且div还可以嵌套多层<div>;

2.border-style: none (默认值)：没有边框，也就是忽略了所有的边框的宽度； solid：边框为实线；dashed：边框为虚线；

dotted：边框为点线；double ：边框为双实线；这个可以分别设置边框的上右下左；即一个值为四边，两个值为上下/右左，三个值为上/左右/下；

3.border-width:即一个值为四边，两个值为上下/右左，三个值为上/左右/下；

（注意：再设置边框宽度的时候，必须同时设置边框样式，如果未设置样式或者设置样式为none，这样就会无效）

4.border-color:即一个值为四边，两个值为上下/右左，三个值为上/左右/下；

小总结：上面的设置方式中，宽度、样式、颜色顺序任意，不分先后，可以只指定需要设置的属性，省略的部分为默认值；

例如： border:3px double red;

边框为3像素宽，红色，双实线；

5.padding 属性用于设置内边距，同边框属性border一样，padding也是复合属性；在上面的设置中，padding属性的取值可为auto自动（默认值），实际中最常用的是怕px，不允许使用负值；一个值为四边，两个值为上下/右左，三个值为上/左右/下；

6.margin 是外边距，属性同padding的用法类似；

7.background-color：背景颜色；

8.background-image:设置网页的背景图像；平铺：repeat 沿水平和竖直两个方向平铺，no-repeat ：不平铺；repeat-x:只延水平方向平铺；repeat-y:只沿竖直方向平铺；

9.background-position 属性通常为2个，中间用空格隔开，用来定义背景图像在元素的水平和垂直方向的坐标；

     水平方向值：left center  right ；垂直方向值：top center  bottom  ；如果只有一个值，则另一个值和这个值默认相同；

可以使用单位预定义关键字；使用百分比；

10.设置背景图像的固定  background-attachment  ：有两个属性值，scroll：图像随页面元素一起滚动，fixed：图像固定在屏幕上，不随页面元素滚动；

11.综合设置元素的背景  background  ：背景色  url（“图像”）平铺  定位   固定；

上面的语法格式中，各个样式顺序任意，中间用空格隔开，不需要的样式可以省略

块元素：通常是占一行，或者多整行；例如：<h1>~<h6>  <p>  <div>  <ul>  <ol>  <li>等；

行内元素:一般不可以设置宽度，高度，对齐等属性；  例如：<strong>  <b>  <em>  <i>  <del> 删除线 <s>  <ins>(下划线)  <u> 下划线；<a>  <span>;<span>是最典型的元素

12.<span>  标记常用于定义网页中某些特殊显示的文本

13.元素的转换   inline：此元素显示为行内元素；  block 此元素显示为块元素；  inline-block、：此元素显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行