css样式之 浮动-盒子模型-定位

1.块级元素

1.1 常用的块级元素

    div p h1~h6 ul ol li hr table

1.2 块级元素的特点

    1.2.1 块级元素默认显示在父标签的左上角。

    

    1.2.2 块级元素默认沾满一行（沾满整个文档流）

    1.2.3 块级元素可以变为行内元素 

display:inline;/*变为行内元素*/

　 1.2.4 块级元素可以通过下面属性，同时拥有行内元素和块级元素的特点（width、height受到影响，不会单独占满一行）　

display:inline-block;/*同时具有块级元素和行内元素的特点*/

2.行内元素（内联元素）

    2.1 常用的行内元素有哪些

<a></a> 
<span></span>
<img />
<input />

　 2.2 行内元素的特点

　     2.1 行内元素影响的范围是文字区域大小，不受到width，height影响。

        2.2 行内元素不会单独占满一行（不会占满文档流）

        2.3 行内元素可以变为块级元素

 display:block

3.浮动（float）

    3.1 float使得当前块级元素脱离文档流，通过left、right属性来控制此元素的漂浮方向

    3.2 清除浮动(清除对当前元素的影响)

clear:both/*清除左右浮动*/
clear:left/*清除左浮动*/
clear:right/*清除右浮动*/

4.内间距、外边距（padding、margin）

    4.1 padding的属性

padding:10px; /*上下左右都为10px*/
padding:10px 20px /*上下10px 左右为20px*/
padding:10px 20px 30px/*上10px 左右为20px 下30px*/
padding:10px 20px 30px 40px/*上右下左*/


/*单一使用时，可单独操作4个方向*/
padding-left
padding-top
padding-right
padding-bottom

　4.2 margin的属性与padding相同，都支持对于块级元素，但是margin对于行内元素只支持左右的外边距，不支持上下的外边距。

5.三种定位方式（relative、absolute、fixed）

  5.1、绝对定位（absolute）

     5.1.1 设置为绝对定位时候，会脱离文档流，不会单独占满一行，不会受到浮动的影响。

     5.1.2 当设置为绝对定位的时候，元素的方位就会受到窗体的top、left、bottom、right的影响

  5.2、相对定位（relative）
     5.2.1当设置为相对定位的时候，并没有脱离文档流，此时浮动是会对他产生影响的。
     5.2.2当设置为相对定位的时候，元素的方位是相对于元素的父标签，由于标签并没有脱离文档流，所以它四周的标签是占着位置的。

  5.3、固定定位（fixed）
     在给定的位置不动。