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

时间:2022-07-31 18:12:20

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 # solid;
position:fixed;
 right:0px;
 bottom:0px; 
}