登录
原创

css布局模型

发布于 2020-11-10 阅读 413
  • CSS
原创

1.流动模型

流动(Flow)是默认的网页布局模式。流动布局的特征:

  • 块状元素会在所处的包含元素内自上而下按顺序垂直延伸分布,因为再默认状态下,块状元素的宽度都为100%,以行的形式占据位置。
  • 在流动模式下,内联元素都会在所处的包含元素内从左到右平均分布显示。

2.浮动模式

div{
    float:left;    
}

3.层模型

层模型的三种形式:

  • 绝对定位(absolute)

    如果想为元素设置层模型中的绝对定位,需要设置position:absolute,这条语句的作用将元素从文档流中拖出来,然后使用left/right/top/bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位,如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

div{
   background-color: #00ffff;

   width:1000px;

   height: 100px;        
}
#div2 {

   position: absolute;

   left:80px;

   top:50px;

}
<div id="div1">原来的样子</div>
<div id="div2">绝对定位之后</div>

如上代码执行后的效果:

b355ce725f7b4eaaefd162e9bd1aefa.png
上面的#div2,是相对于body进行的绝对定位。

  • 相对定位(relative)

    相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动起来),然后相对于以前的位置移动,移动的方向和幅度由left,right,top,bottom属性确定,偏移前的位置保留不动。

     div{
         background-color: #00ffff;     
         width:1000px;
         height: 100px;        
    }
    #div2 {
        position: absolute;
        left:80px;
        top:50px;
    
    }
    #div3 {
        position: relative;
        left:200px;
        top:50px;
    }
    
     <div id="div1">原来的样子</div>
    <div id="div2">绝对定位之后</div>
    <div id="div3">相对定位</div>
    <span>偏移前的依然被占用</span>
    

    如上代码执行结果:

    0db1621d6bc571a0c936bde7463fd83.png

    绝对定位是相对于上一个具有定位性质的父体,上面的例子是相对于body,也就是#div2没有偏移的话,absolute之后,位置就跟#div1是重合的。

    但是相对定位是与自己本来位置的偏移,如上图,本来位置用红色框表示出来,偏移之后,原来的位置依然保持占用。

  • 固定定位(fixed)

    与absolute定位类型类似,但他的相对移动的坐标是视图(屏幕内的网页窗口)本身。

    由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小

    344062822c5427feb060c1569e49806.png

如上代码执行的结果:

48e7009cdb07c71d2e43e1974e08876.png

移动滚动条之后:

3ff23499c74bfeb5a25461852e2b205.png
如上图,#div4固定位置是根据整个视图,而不是根据body或者其他参考对象。

  • 绝对定位和相对定位一起使用

    position:absolute可以实现被设置元素相对于浏览器(body)设置定位,也可以相对于其他元素。但是需要遵循以下规范:

    • 参照定位的元素必须是相对定位元素的前辈元素:

      <div id="div1">
          <div id="div2">
              内容
          </div>
      </div>
      

      如上,div2是div1的子元素,所以div1是div2的前辈元素。

    • 参照定位的元素必须加入position:relative

      #div1{
          width:100px;
          height:50px;
          position:relative;
      }
      
    • 定位元素加入position:absolute

      #div2{
          width:100px;
          position:absolute;
          left:20px;
          top:10px;
      }
      

评论区

励志做一条安静的咸鱼,从此走上人生巅峰。

0

0

0

举报