1. 程式人生 > >css(三)佈局模型

css(三)佈局模型

  1. 流動模型 (Flow)
    特徵:(1)塊狀模型水平分佈,佔據整行,自上而下(2)內斂元素自左而右
  2. 浮動模型(Float)
    div{
    float:left;
    }

    可以設定塊狀元素在同一行顯示,上述語句是靠左
  3. 層模型(Layer)
    1. 絕對定位(position: absolute) //相對父塊
    2. 相對定位(position: relative)//生成一個新的元素,相對於以前的進行移動,塊內的子元素不動
    3. 固定定位(position: fixed)//相對於檢視(即視窗位置)固定
    4. relative中的absolute
  4. 顏色值的表示
    (1)p{color:red;}(2)p{color:rgb(133,45,200);}或p{color:rgb(20%,33%,25%);}(3)p{color:#00ffff;}
    注:#off表示#ooffff
  5. 長度值
    (1)px,即pixel畫素(2)em表示字型(3)%
  6. 設定文字等居中
    水平居中:text-align:center
    垂直居中:
    height:100px;
    line-height:100px;
    水平和垂直居中都可以利用table,具體參見相關教程
  7. 隱性改變display型別
    position : absolute
    float : left 或 float:right
    自動改為:display:inline-block