CSS定位布局

写在之前

  • 固定布局
    • 优势:可以精准定位页面中的任何元素。
    • 劣势:当屏幕大小不确定时会出现一些问题。
  • 浮动布局
    • 优势:定位灵活。
    • 劣势:不容易控制,当对两个元素同时设置float属性时,会出现问题,需要使用clear属性。

定位布局

  • position属性用于实现定位布局,position属性一共有4种属性值。
属性 作用
fixed 用于固定布局
relative 用于相对布局
absolute 用于绝对布局
static 用于静态布局,是默认值

固定布局

  • CSS使用 {position : fixed; }来定义固定布局,使用固定布局的元素会一直固定在那里,不会因下滑等操作改变位置。
  • fixed属性值配合top属性、left属性来使用,用于定义固定的位置。
  • 固定布局通常用来定义“回到顶部”功能。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            #div1{
     background-color:pink;width:100px;height:800px;}
            #div2{
     background-color:blue;width:120px;height:120px;position:fixed;top:50px;left:200px}
        </style>
    </head>
    <body>
        <div id="div1">未定义固定布局</div>
        <div id="div2">固定布局</div>
    </body>
</html>

CSS定位布局_第1张图片
CSS定位布局_第2张图片
通过两张图片对比,我们可以看到,尽管鼠标下滑,但是固定布局的元素的位置不会改变。

相对布局

  • { position : relative; }用于定义相对定位,相对布局是指根据浏览器默认布局来计算相对布局位置。
  • 常配合top、left属性来定义相对布局的位置,top和left是相对于浏览器默认位置的。

CSS定位布局_第3张图片
上图显示了浏览器默认布局位置,下面对box1定义相对布局。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            #div1{
     background-color:pink;margin-bottom:20px;padding:20px;width:100px;position:relative;top:20px;left:30px;}
            #div2{
     background-color:blue;padding:20px;width:100px;}
        </style>
    </head>
    <body>
        <div id="div1">box1</div>
        <div id="div2">box2</div>
    </body>
</html>

CSS定位布局_第4张图片

fixed和absolute的区别

  • fixed一般用于实现,回到顶部,所以它的位置不会因鼠标滚动滚轮而改变,不管如何向下滑页面,都看得到fixed的元素。
  • absolute定位的盒模型脱离了文档流,它是不占据位置的,absolute定位的元素位置是会因为向下滑页面而改变的。

你可能感兴趣的:(笔记,css)