CSS基础复习笔记5---css布局

1.HTML中三种布局方式:

1)标准流:网页中默认的布局方式

· 块级元素:如

    等,总是独占一行的。

    · 内联元素:如等,

    2)浮动

    3)定位

    position:static/relative(相对定位,可通过left/top/right/bottom:50px进一步进行相关设置)/absolute(绝对定位,也可通过left/top/right/bottom:50px进一步进行相关设置)/fixed/inherit

    注意:

    · relative相对定位解释:left/top属性设置后将以网页的左上角为原点,按下图所示方向进行相对移动:

    CSS基础复习笔记5---css布局_第1张图片

    而修改right和bottom属性则会按下图所示方向进行移动:

    CSS基础复习笔记5---css布局_第2张图片

    · absolute绝对定位解释:left和top属性一起设置后将以网页的左上角为原点,按下图所示方向进行相对移动:

    CSS基础复习笔记5---css布局_第3张图片

    而left和bottom属性一起设置后将以网页的左下角为原点,按下图所示方向进行移动:

    CSS基础复习笔记5---css布局_第4张图片

    而right和bottom属性一起设置后将以网页的右下角为原点,按下图所示方向进行移动:

    CSS基础复习笔记5---css布局_第5张图片

    而right和top属性一起设置后将以网页的右上角为原点,按下图所示方向进行移动:

    CSS基础复习笔记5---css布局_第6张图片

    · inherit 继承父元素的定位属性

    例子:

    定义子元素和父元素的样式

      CSS基础复习笔记5---css布局_第7张图片

    结果如图:

    CSS基础复习笔记5---css布局_第8张图片

    修改子元素和父元素的属性如图:

    CSS基础复习笔记5---css布局_第9张图片

    结果如图:

    CSS基础复习笔记5---css布局_第10张图片

    解释: 子元素继承了父元素的固定定位属性,所以位置没有受影响

     

    你可能感兴趣的:(CSS基础复习笔记5---css布局)