盒子模型

一、块级元素

1、默认显示在父标签的左上角

2、块级元素默认占满一行（整个文档流）

3、常见的块级元素：p、h1~h6、ol li、ul li、div、table、hr、center

二、行内元素特点

1、大小受到文字区域影响，不受到width、height影响

2、行内元素不单独占满一行

3、常见的内联元素（行内元素）：a、img、span、input

三、元素之间转换

1、行内元素变成块元素：display：block；

2、块元素变成行内元素：display：inline;

3、display：inline-block；手height和width影响但不占满一行

四、浮动

1、float:left;(左漂浮，使元素在同一行）

2、清除左右浮动：clear:both;

五、盒子模型

1、padding内间距（上、右、下、左）

     特点：padding:10px;四方各撑开10PX，如果要修改height和width那么只有下边和右边分别减少20PX

　　特点：padding对于行内元素是有作用的

　　总结：padding的各种情况都支持

2、块与块之间的间距

margin外间距（上、右、下、左）

　　特点：margin行内元素只支持左右不支持上下，但对于块级元素都支持

六、定位

1、绝对定位：position：absolute；

    特点1：设置绝对定位脱离文档流，不会占满一行，不会受到浮动的影响

    特点2：当设置据对定位，元素的方位就受到窗体的上、下、左、右的影响

2、相对定位：position：relative；

     特点1：设置相对定位不脱离文档流，会占满一行，会受到浮动的影响

     特点2：当设置相对定位，元素的方位就受到父标签的上、下、左、右的影响（四周标签占着位置呢，简单说就是相对定位就是自己走位）

3、固定定位：position：fixed；top,left,right,bottom等等，狗皮膏药

　　特点：脱离文档流