CSS 浮動 定位 學習

2021-10-12 18:53:55 字數 1539 閱讀 9748

回顧理解塊級元素:

◎ address - 位址

◎ blockquote - 塊引用

◎ center - 居中對齊塊

◎ dir - 目錄列表

◎ div - 常用塊級容器,也是css layout的主要標籤

◎ dl - 定義列表

◎ fieldset - form控制組

◎ form - 互動表單

◎ h1 - 大標題

◎ h2 - 副標題

◎ h3 - 3級標題

◎ h4 - 4級標題

◎ h5 - 5級標題

◎ h6 - 6級標題

◎ hr - 水平分隔線

◎ isindex - input prompt

◎ menu - 選單列表

◎ noframes - frames可選內容,(對於不支援frame的瀏覽器顯示此區塊內容)

◎ noscript - 可選指令碼內容(對於不支援script的瀏覽器顯示此內容)

◎ ol - 排序表單

◎ p - 段落

◎ pre - 格式化文字

◎ table - **

◎ ul - 非排序列表(無序列表)

浮動、定位

display: block;   把當前元素 轉換成塊級元素

display: inline-block; 轉換為塊元素,但可以內聯元素

display: inherit; 轉換為 內聯元素

display: none; 消失

float: left; 左浮動

clear: left; 左側不允許有浮動

clear: both; 左右都不允許有浮動,否則向下丹起一行

clear: none;

父元素塌陷
增加乙個空div  清除其clear: none;

overflow: hidden; 超出內容隱藏

overflow:auto; 超出父元素 出現滾動條

/* 給父元素增加乙個偽類  清除塌陷 */

#first:after

定位

相對定位

position: relative;  開啟相對定位,相對於原來的位置上 進行偏移

top: -20px; 上部偏移

right: ; 右側偏移

left: ; 左側偏移

bottom: ; 下部偏移

絕對定位
position: absolute;  開啟絕對定位

left: 20px; 距離父元素 向左偏移20px 父級元素需要開啟定位(如果沒有父元素 就是相對於瀏覽器)

固定定位
position: fixed;  開啟固定定位 ,固定在指定位置不變
z-index
z-index: 1;  層級設定, 數值越大 層級越高

opacity: 0.5; 透明度 0-1

CSS定位 浮動定位

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

css浮動定位

請看下圖,當把框 1 向右浮動時,它脫離文件流並且向右移動,直到它的右邊緣碰到包含框的右邊緣 如果把所有三個框都向左移動,那麼框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前乙個浮動框。在 css 中,我們通過 float 屬性實現元素的浮動。浮動框旁邊的行框被縮短,從而給浮動框留出空間...

CSS浮動定位

left 左浮動,左邊沒有任何元素 right 右浮動,右邊沒有任何元素 none 不浮動 清空左右的浮動元素 both 清除左右兩邊的浮動 left和right 只清除乙個方向的浮動 none是預設值 只在需要移除一直盯的清除值時用到 如果乙個元素的子元素都浮動起來,那麼他的父元素的高度自動坍塌到...