回顧理解塊級元素:
◎ 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-indexz-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是預設值 只在需要移除一直盯的清除值時用到 如果乙個元素的子元素都浮動起來,那麼他的父元素的高度自動坍塌到...