Css格式與布局

標籤：flow   自身   更改   位置   就會   idt   技術分享   使用   bsp   

 

一、位置

1、絕對位置

position:absolute：絕對位置。

絕對位置的意思就是相對於瀏覽器邊框的位置，迴歸到它應有的位置。也就是說，一個div使用絕對位置後是在瀏覽器邊框的最左上方位置。而此時，可以利用上下左右的標籤變更位置。

            #a1{                width: 200px;                height: 200px;                background-color: burlywood;                position:absolute;                top: 10px;                left: 10px;            }        </style

 

 

2、固定位置

position:fixd：固定位置

同樣的，固定位置也是相對有瀏覽器邊框而定。但注意的是，值不可為負。

position:fixed;

 

 

3、相對位置

position:relative:相對位置

相對於自身原來出現的位置，進行移動。

            #a1{                width: 200px;                height: 200px;                background-color: burlywood;                position: relative;                top: 50px;                    }

 

 

二、流

1、float：流

往哪個方向流，那麼元素就跟著全部往哪個方向去。

→

            #liu{                width: 900px;                height: 50px;            }            .lift{                    float: left;                            }            

→

 

2、清流

不管是float還是position，都是浮在上面一層。當我們都使用float流的時候，下面的一層就會覆蓋住上面一層。而這個時候避免出現問題，我們就需要清流。

Bug：

 

這個時候就需要我們清除一個流：

clear:both：清除所有

→

 

 

三、文字樣式置中

            .lift{                    float: left;                width: 100px;                height: 50px;                text-align: center;                vertical-align: middle;                line-height: 50px;                margin-left: 7px;                background-color: cornflowerblue;                            }

 

 

四、Z-index分層

相當於Z軸的一個序號。

屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

Z-index 只能在定位元素上有效果（例如 position:absolute;）

 

            #no1{                width: 200px;                height: 100px;                background-color:black;                position: absolute;                z-index: 2;            }            #no2{                width: 300px;                height: 50px;                background-color: yellow;                position: absolute;                z-index: 1;            }            

 

 

 

Z-index的值越大越靠上

→

 

Css格式與布局