3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1、块级元素

　　A:特点：

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

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

　　B：常见的块级元素

　　　　P   h1--h6   ul  li    ol  li   div  hr    table

2、行内元素(内联元素)

　　　A:常见的=行内元素有

　　　　a  span  img   input

　　　B:行内元素的特点

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

　　　　B.2 行内元素不会单独占满一行

3、 行内元素和块级元素相互转换

　　A:  行内元素转换成块级元素    display:block;

　　B:  块级元素转换成行内元素    display:inline;

4、padding

　　A: padding 是内边距，结果是撑开外框相应的宽度

　　　A.1 padding 10px 20px 30px 40px ; 表示撑开的顺序是   上10    右20  下30   左40

　　　A.2 padding 10px 20px 30px ;  表示撑开的顺序是  上10    左右20   下30

　　　A.3 padding 10PX 20PX ;    表示撑开的顺序是   上下10   左右20

　　　A.4 padding 10PX ;    表示撑开的是四周各10

5、margin

　　A: margin  是外边框的距离，

6、在边框大小固定之后增加了 Padding ，而后又改变原来边框大小时，则是对于DIV right  和 bottom 操作，改变的是右边和下边的距离。

7、padding的各种情况，行内元素是支持的，margin行内元素只支持左右，不支持上和下。

8、定位（绝对定位、相对定位）

　　A：绝对定位 position:absolute

　　　A.1  当位置设置为绝对定位之后，脱离文档流，不会单独占满一行，不受float 影响

　　　A.2  当设置为绝对定位后，元素的方位收到窗体的top left right bottom 影响。

　　B: 相对定位 positon:relative

　　　B.1 当设置为相对定位时候没有脱离文档流，float 对其有影响

　　　B.2 当设置为相对定位时候，方位是相对于元素父标签；由于标签没有脱离文档流所以它是占着位置

　　C:固定 positon:fixed

　　　C.1 设置固定之后，DIV 不受float影响，会固定在设定的位置不变

#d1  /*这个DIV则紧紧贴在右下角*/
{
  width:200px;
  height:200px;
  border:1px #808080 solid;
  position:fixed; 　right:0px;　bottom:0px;　
}