欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css 水平居中,垂直居中,自適應(yīng)寬度的代碼

  發(fā)布時(shí)間:2012-06-14 13:09:40   作者:佚名   我要評(píng)論
寬度自適應(yīng):就是元素的寬度根居里面的內(nèi)容來(lái)變化
一、寬度自適應(yīng)的元素水平居中:

  1.寬度自適應(yīng)的元素可以是:絕對(duì)位定、浮動(dòng)元素、行內(nèi)元素。而我們通常布局,肯定不會(huì)用行內(nèi)元素,所以會(huì)選擇,絕對(duì)定位或浮動(dòng)。
  2.居中:這里我們應(yīng)該會(huì)想到1/2、50%、一半等這些東西。  

  上圖中:黑色為body,深綠色需要在body中水平居中,并且寬度是自適應(yīng)的。亮綠色,是一個(gè)多余的DIV,就是為了讓深綠色的DIV水平居中。

  以下是實(shí)現(xiàn)代碼:

  pos元素的float:left或都用position:absolute;都可以,因?yàn)檫@兩個(gè)屬可以寬度自適應(yīng)。

  先這個(gè)多余的DIV亮綠色,水平50%移動(dòng)(移動(dòng),可以用margin-left 或者 left)

  再讓其內(nèi)容深綠色向右水平移動(dòng)50%(只能用right屬性移動(dòng));

  那么這個(gè)深綠色,就會(huì)在黑色的body里居中了!


復(fù)制代碼
代碼如下:

<body>
<div class="pos">
<div class="boxA">測(cè)試用的內(nèi)內(nèi)容測(cè)測(cè)試用的內(nèi)容</div>
</div>
</body>
*{ margin:0; padding:0;}
body{background:#000000;}
.pos{float:left;margin-left:50%; background:#33CC33; padding:10px;}
.boxA{position:relative;right:50%;background:#096;}

總結(jié):外層的定位:需要是自適應(yīng)寬度的;(float:left 或者 position:absolute;)
   內(nèi)層的位定:需要是自動(dòng)100%寬度的(相對(duì)于外層100%);
  并且是可以移動(dòng)出外層范圍的;

(所以只能用position:relative;別無(wú)選擇?。?

相關(guān)文章

最新評(píng)論