標準文件流組成
塊級元素(block level)
、、列表 獨佔一行,可設定寬高,寬度預設和父級元素相同
內聯元素(inline)
、、、…
水平排列,不可設定寬高,寬度根據內容而定
display 用於塊級元素和行內元素的轉化
隱藏元素:(none/block)
display:none; 所在的位置被清空
opacity: 0; 透明度為0,位置還在
visibility: hidden; 同上
行內和塊級元素轉化
display:block;
display:inline;
行內元素水平間距(margin)不會重疊
float
float會脫離文件流
float:left/right;
margin不會摺疊
高度塌陷:容器子元素浮動導致容器高度變為零
float可以實現文字環繞的效果
總結浮動元素脫離標準文件流
浮動元素的位置空出來,由非浮動元素佔據
浮動元素不論是塊級還是行級元素,都可以水平排列,同時設定寬度和高度
浮動元素具有相互貼靠特點
浮動元素具有文字圍繞特點
浮動元素不設定寬度時具有收縮特點
父級元素的寬度是所有浮動子元素的寬度之和
清除浮動的方法
clear:both
.seperator1
2
3
4
在塌陷的容器中加入overflow: hidden;
overflow:visible/hidden/scroll/auto
只要值不是visible就可以清除浮動
postion
static 預設,元素處於標準文件流中
relative
居中margin:0 auto;
left: 50%;
margin-left: -自身寬度的一半;
參考點是元素自己原來位置
偏移設定:top、left、right、bottom
absolute
偏移設定: left、right、top、bottom
居中不可以用margin:auto
參考點是非static父元素的左上角,一般會把父元素設定為relative
當position: absolute;但是沒有指定left或者top時,元素不動
fixed
固定定位的參考點是瀏覽器視窗
固定定位元素脫離標準文件流
ie低版本不支援
會脫離文件流的是:float,position:absolute,postition:fixeddd
CSS樣式屬性
position用來設定元素的定位型別,有absolute 絕對定位 relative 相對定位 static 靜態定位,預設值 fixed 固定定位 四種。static 預設。位置設定為 static 的元素,它始終會處於頁面流給予的位置 static 元素會忽略任何 top bottom lef...
css樣式屬性
這個屬性設定字型名稱,如arial,tahoma,courier等。例句如下 s1演示示例 這個屬性可以設定字型的大小。字型大小的設定可以有多種方式,最常用的就是pt和px pixel 例句如下 s2演示示例 這個屬性有三個值可選 normal,italic,oblique。normal是預設值,i...
CSS樣式屬性
css cascading style sheets css通常稱為css樣式表或層疊樣式表 級聯樣式表 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局等外觀顯示樣式。使用html時,需要遵從一定的規範。1.選擇器用於指定css樣式作用的...