H5 盒子模型

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

1. div标签：div是division的缩写，意为“分割，区域”。

也就是一个区块容器；可以将网页分割为独立的，不同的部分，来实现网页的规划和布局；大多数HTML的标签都可以嵌套在

中，而且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（“图像”）平铺  定位   固定；

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

块元素：通常是占一行，或者多整行；例如：

~

 

 

 

 
 
1. 等；

   行内元素:一般不可以设置宽度，高度，对齐等属性；  例如：        删除线   (下划线)  下划线；  ;是最典型的元素

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

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