欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端基础复习--10CSS 定位? PC端的布局?

程序员文章站 2022-06-15 19:08:09
1. CSS 定位? position : static(默认) relative absolute fixed sticky relative: 如果没有定位偏移量,对元素本身没有任何影响 不使元素脱离文档流 不影响其他元素布局 left、top、right、bottom是相对于当前元素自身进行偏移的 absolute: ......

1. CSS 定位?

    position : 
        static(默认)
        relative
        absolute
        fixed
        sticky

    relative:
        如果没有定位偏移量,对元素本身没有任何影响
         不使元素脱离文档流
        不影响其他元素布局
        left、top、right、bottom是相对于当前元素自身进行偏移的

    absolute:
        使元素完全脱离文档流
         使内联元素支持宽高 (让内联具备块特性)
        使块元素默认宽根据内容决定(让块具备内联的特性)
        如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)

    fixed:
        使元素完全脱离文档流
        使内联元素支持宽高 (让内联具备块特性)
        使块元素默认宽根据内容决定(让块具备内联的特性)
        相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响

    sticky黏性定位:
        在指定的位置,进行黏性操作。

    z-index定位层级。

2. PC端的布局?
    通栏 : 自适应浏览器的宽度。
    版心 : 固定一个宽度,并且让容器居中。  

本文地址:https://blog.csdn.net/m0_37483148/article/details/107280592