css布局學習

2021-09-05 10:15:28 字數 582 閱讀 9938

絕對定位

position: absolute
1、絕對定位是基於最近的乙個定位了的父容器

2、如果沒有父容器沒有定位的情況:

正常文字a

正常文字b

正常文字c

正常文字d

正常文字e

正常文字f

正常文字g

這個div沒有定位

絕對定位的文字

出現結果

通過絕對定位可以把乙個元素放在另乙個元素上,這樣位置就重複了。重複了,就存在乙個誰掩蓋誰的問題。 這個時候就可以使用z-index屬性, 當z-index的值越大,就表示放上面,z-index:越小就表示放下面。

相對定位

與絕對定位不同的是,相對定位不會把該元素從原文件刪除掉,而是在原文件的位置的基礎上,移動一定的距離

浮動

CSS布局學習

css 規定的定位機制有三種 標準文件流 normal flow 浮動 floats 絕對定位 absolute positioning 標準文件流 normal flow 特點 1.從上倒下,從左到右,輸出文件內容 2.有會計元素和航跡元素組成。塊級元素 特點 1.從左到右撐滿頁面,獨佔一行 2....

學習css布局

1 display block inline 塊級元素,行內元素 包裹一些文字,不會打亂布局 2 main 設定自動居中 左右外邊距 main 3 盒子模型 margin padding border content 設定 box sizing border box後,元素的內邊距和邊框不會再改變元...

《學習CSS布局》學習筆記

近幾天做了乙個小的企業展示 雖然頁面是在模板的基礎上改的,但改的多了不熟悉css也很麻煩。正好我看到了學習css布局這個 於是補習了一下css知識。css的元素分為兩類 塊級元素和行內元素。display屬性就是控制元素的表現形式,它的值包括inline block和none等。none通常用於在不...