初學css(定位)

2021-09-25 01:16:14 字數 1057 閱讀 5481

相對定位最重要的一點是,它可以通過邊偏移移動位置,但是原來的所佔的位置,繼續占有。

其次,每次移動的位置,是以自己的左上角為基點移動(相對於自己來移動位置)

就是說,相對定位的盒子仍在標準流中,它後面的盒子仍以標準流方式對待它。(相對定位不脫標)

絕對定位最重要的一點是,它可以通過邊偏移移動位置,但是它完全脫標,完全不佔位置。

子級是絕對定位,父親只要是定位

固定定位的元素跟父親沒有任何關係,只認瀏覽器。

固定定位完全脫標,不占有位置,不隨著滾動條滾動。

普通的盒子是margin 設定為 auto就可, 但是對於絕對定位就無效了

定位的盒子:1.首先left 50% 父盒子的一半大小

2.然後設定成寬度負的一半值就可以了 margin-left。

z-index的預設屬性值是0,取值越大,定位元素在層疊元素中越居上。

如果取值相同,則根據書寫順序,後來居上。

後面數字一定不能加單位。

只有相對定位,絕對定位,固定定位有此屬性,其餘標準流,浮動,靜態定位都無此屬性,亦不可指定此屬性。

display 顯示

display 設定或檢索物件是否及如何顯示。

display : none 隱藏物件 與它相反的是 display:block 除了轉換為塊級元素之外,同時還有顯示元素的意思。

特點: 隱藏之後,不再保留位置。

visibility 可見性

設定或檢索是否顯示物件。

visible :  物件可視

hidden :  物件隱藏

特點: 隱藏之後,繼續保留原有位置。(停職留薪)

overflow 溢位

檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。

visible :  不剪下內容也不新增滾動條。

auto :   超出自動顯示滾動條,不超出不顯示滾動條

hidden :  不顯示超過物件尺寸的內容,超出的部分隱藏掉

scroll :  不管超出內容否,總是顯示滾動條

css 定位連線 css絕對定位

定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...

CSS定位 浮動定位

css定位機制 浮動定位 float屬性 進行浮動定位 left,right clear屬性 清除浮動 left,right,both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...

初學CSS樣式

今天學了三個樣式表,邊學邊練正好給了我喘息的時間,這樣的節奏我還是挺適應的,學會使用這些方法等,內部樣式表 內嵌式是將css 集中寫在html文件的head頭部標籤中,並且用style標籤定義,其基本語法格式如下 行內式 內聯樣式 標籤名 style 屬性1 屬性值1 屬性2 屬性值2 屬性3 屬性...