CSS的經常使用屬性(三)

本文轉載於:猿2048網站CSS的經常使用屬性(三)php

靜態定位

position: static (默認) 標準流瀏覽器

 

絕對定位

position: absolute字體

特色:網站

  1. 元素使用絕對定位以後,不佔據原來的位置(脫標)
  2. 元素使用絕對定位,位置是從瀏覽器出發
  3. 嵌套的盒子,父盒子沒有使用定位,子盒子使用絕對定位,子盒子位置是從瀏覽器出發
  4. 嵌套的盒子,父盒子使用定位,子盒子絕對定位,子盒子位置是從父元素出發
  5. 行內元素使用絕對定位,轉化成行內塊元素

注意: 使用絕對定位的元素能夠覆蓋到其餘元素上面,使用z-index屬性來控制堆放次序spa

 

相對定位

position: relativeblog

特色:get

  1. 使用相對定位,位置從自身出發
  2. 還佔據原來的位置
  3. 行內元素使用相對定位,不能轉成行內塊元素

補充: 經常使用的定位方式爲子絕父相(子元素絕對定位,父元素相對定位)it

 

固定定位

position: fixedio

特色:margin

  1. 位置從瀏覽器出發
  2. 固定定位以後,不佔據原來的位置(脫標)
  3. 元素使用固定定位,會轉化成行內塊元素

 

隱藏元素

overflow: hidden 溢出隱藏

visibility: hidden 隱藏元素(隱藏以後還佔據原來位置)

display: none 隱藏元素(隱藏以後不佔據原來的位置)

補充:內容移除:text-indent: -5000em 或者 將元素高度設置爲0,使用內邊距將盒子撐開,給盒子使用overflow: hidden

 

元素垂直對齊方式

vertical-align: baseline 設置元素的垂直對齊方式 

baseline(默認)  元素放置在父元素的基線上

text-top  把元素的頂端與父元素字體的頂端對齊

text-bottom  把元素的底端與父元素字體的底端對齊

middle  把此元素放置在父元素的中部

相關文章
相關標籤/搜索