刘家姥姥

人间的真话本来就不多,一个女子的脸红胜过一大段长话。

CSS的基本布局模型

CSS的基本布局模型有三种:Flow(流动)、Layer(层)、Float(浮动)。

  1. Float模型(默认)

    块状元素在所在处的包含元素内自上而下按顺序垂直延伸分布;

    内联元素在所在处的包含元素内从左到右水平分布。

  2. Float模型

    float:left;

  3. 层模型

    让html元素能在网页中精确定位。

    层模型有三种形式:absolute、relative、fixed。

    (1)绝对定位:设置position:absolute;将元素从文档流中拉出来,然后使用left、right、top、bottom属性相对于其最近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,就相对于body。

    (2)相对定位:设置position:relative;然后通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位的完成过程是先按照static(float)方式生成一个元素,然后相对于以前的元素移动,偏移前的位置不变(也就是说,后面的元素还是在原位置的后面)。

    (3)固定定位:与绝对定位类似,但他的相对移动的坐标是视图(屏幕内的网页窗口),不熟文档流的影响,这与background-attachment:fixed;属性功能相同。

    (4)通过relative和absolute结合定位

    #box3{
        width:200px;
        height:200px;
        position:relative;       
    }
    #box4{
        width:99%;
         position:absolute;
        bottom:0;
        right:0;
        left:0;    
    }


    <div id="box3">
        <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
        <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>

    效果如下:



评论
©刘家姥姥 | Powered by LOFTER