一、position：fixed

????鎖定位置（相對于瀏覽器的位置），例如有些網(wǎng)站的右下角的彈出窗口。

示例：

?

二、position：absolute

????1.外層沒有position：absolute（或relative）；那么div相對于瀏覽器定位，如下圖中b（距離瀏覽器右邊框為50像素，距離下邊框為20像素）。

????2.外層有position：absolute（或relative）；那么div相對于外層邊框定位，如下圖中bb（距離d的右邊框50像素，距離d的下邊框為20像素）。

示例：

三、position：relative

????相對位置。

????如下圖，相對于把此div包含住的div的某個位置進行固定。如果外層沒有包含他的，那就相對于瀏覽器進行相對位置的固定。

示例：

?

四、分層（z-index）

????在z軸方向分層，可以理解為分成一摞紙，層數(shù)越高越靠上。

????在上面relative的示例中，我們看到了aa遮住了a，這是因為后寫代碼的顯示級別越靠前，那么在不改變代碼順序的情況下如何讓a蓋住aa？如下：

示例：

?

?

五、float：left、right

Left、right時不用給他規(guī)定位置（left、top），直接相對于瀏覽器。若外部被包裹，相對于外部div的除去一行的位置的左上或右上顯示。

????overflow：hidden；??? //超出部分隱藏；scroll，顯示出滾動條；

????<div style="clear:both"></div>?? //截斷流

設(shè)置超鏈接的樣式示例：

?

?

附：cursor：pointer??? 鼠標(biāo)指到上面時的形狀

???? ???????????????????版權(quán)符號?

?

半透明效果：

????<div class="box">透明區(qū)域<div>

在樣式表中的代碼為：

.box

{

opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

}

input里placeholder樣式

input::-webkit-input-placeholder {
/* placeholder位置 */
text-align: center;
}

?

轉(zhuǎn)載于:https://www.cnblogs.com/1711643472qq/p/5856690.html

總結(jié)

以上是生活随笔為你收集整理的HTML CSS样式表布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。