CSS筆記3 布局 居中 定位 浮動 展示

2021-10-03 14:15:18 字數 754 閱讀 6241

css筆記3

1.居中

可以使用

2.定位

position 表示定位

2.1絕對定位

position:absolute;

left:100px; //該元素所在的塊的位置位於這個絕對定位顯示的左上方

top:50px;

//絕對定位的元素不會干擾到其他元素的位置

position:absolute;

left:100px; //相對該元素所在塊中的位置

top:50px;

z-index:1;//z-index越大 元素位置越靠外 會顯示在上方。

2.2相對定位
p.a相對定位的元素佔據了原文本的乙個位置 只不過是相對其原位置發生了移動
3.浮動 float

可以用來修飾div排列 使之不換行。多用於選單欄中

p.a

q.b

4.展示display
display:none;//不展示

display:block;//乙個塊,前後自動加上換行效果。

display:inline;//內聯元素,表示大小由內容決定且不允許換行。

display:inline-block; //不換行塊級,可以設定寬度(有點像windowsphone)

visibility:hidden://隱藏的元素

CSS 浮動布局與定位布局

布局常用的方法 用float設計浮動布局 float預設值為none,可根據頁面需要設定為左浮動left,或右浮動right 瀏覽器中效果 因為 div 是區塊元素,每個 div 獨佔一行,要想讓三個 div 在同一行裡顯示,就需要給三個子元素設定浮動,但浮動會使元素脫離文件流,父元素高度崩塌,所以...

css課程講解3 浮動 定位 居中問題

一.浮動 float 1.文件流 是指盒子按照 html 標籤編寫的順序依次從上到下,從左到右排列,塊元素佔一行,行內元素在一行之內從左到右排列,先寫的先排列,後寫的排在後面,每個盒子都佔據自己的位置.2.浮動的概念 所謂的浮動就是指元素脫離文件流,漂浮到文件流的上方,不會佔據位置。3.浮動的特性 ...

css浮動於定位 布局的基礎

浮動 div是塊級元素,塊級元素獨自占用一行,除非新增display為inline block或者float left right 浮動可以讓塊級元素脫離標準文件流 定位 定位可以分為四種 relative 相對定位 absolute 絕對定位 fixed 固定定位 static。當我們不對元素應用...