標籤按照規定預設方式排列
多個塊級元素同行顯示
/*選擇器；*/
div/*向一邊移動直到左邊緣或右邊緣觸及包含塊或另乙個浮動框*/
多盒子設定浮動，按屬性值一行內顯示並且頂端對齊排列
浮動元素會有行內塊特性
浮動的盒子只影響後面的標準流
最初產生是為了做文字環繞效果
div
定位=定位模式+邊偏移（定位模式：元素在文件中的定位方式；邊偏移：確定元素最終位置）
position: static;
/*屬性值：static(靜態定位)|relative(相對定位)|absolute(絕對定位)|
fixed(固定定位)|sticky(粘性定位)*/
/*靜態定位：預設，無偏移，標準流*/
/*相對定位：相對原來位置移動，不脫標準流，原來位置繼續占有*/
/*絕對定位：根據位置父元素移動位置，無父元素根據瀏覽器定位，父元素無定位
以最近一級祖先元素位置定位，*絕對定位不占有原來位置*/
/*固定定位：以瀏覽器可視視窗區域定位*/
/*粘性定位：以可視視窗為參照，占有原來位置，必須新增其中乙個偏移才生效（ie不支援）*/
/*行內元素新增絕對定位或固定定位，可直接設定寬高*/
/*塊級元素新增絕對定位或固定定位，不設定寬高，預設大小是內容大小*/
top: 100px;
left: 80px;
bottom: 100px;
right: 30px;
z-index: 1;
/*數值為正整數、負整數或0，數值越大，盒子越靠上*/
*多個塊級元素縱向排列標準流，橫向排列浮動
*標準流父元素排列上下位置，內部子元素浮動左右排列
*脫標元素不會觸發外邊距合併問題
*脫標的浮動不會壓住盒子中的內容與，定位會
/*隱藏元素*/
/*隱藏後不占有原位置*/
display: none;
/*none隱藏；block顯示*/
/*overflow針對溢位部分(超出盒子部分內容)*/
overflow: hidden;
/*hidden隱藏；visible顯示；scroll新增滾動條；auto需要時新增滾動條*/
/*隱藏後占有原位置*/
visibility: hidden;
/*hiddden隱藏；visible可視*/
bacground-position: 10px 10px;
/*x向右為正，y向下為正*/
divcursor: default;
/*default(預設箭頭)|pointer(小手)|move(移動)|text(文字)|not-allowed(禁止)*/
/*清除表單輪廓線*/
outline: 0|none;
/*防止拖拽文字域,擾動布局*/
resize: none;
/*對齊*/
vertical-align: baseline;
/*baseline(基線)，bottom(底線)，middle(中線)，投票(頂線)*/
vertical-align: bottom;
/*基於底線對齊*/
display: block;
/*轉換為塊級元素*/
/*單行*/
/*1.先強制一行內顯示文字*/
white-space: nowrap;(預設normal自動換行)
/*2.超出部分隱藏*/
overflow: hidden;
/*3.文字用省略號代替超出部分*/
text-overflow: ellipsis;
/*多行*/
overfow: hidden;
text-overflow: ellipsis;
/*彈性伸縮盒子模型顯示*/
display: -webkit-box;
/*限制在乙個塊元素顯示的文字的行數*/
-web-line-clamp: 2;
/*設定或檢索伸縮盒子物件的子元素的排列方式*/
-webkit-box-orient: vertical;
/*推薦後端控制*/
css3學習筆記
1.為什麼分許多模組進行管理？為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點 第一，class屬性本身沒有語義，褚翠是用來為css樣式服務的，屬於多餘屬性。第二，使用屬性的話，並沒有把樣式與元素繫結起來，針對同乙個class屬性文字框，下拉框，按鈕都可使用。這樣很...
CSS3學習筆記
一.選擇符 二.屬性 溢位隱藏 div4 p文字陰影 text shadow 2px 1px rgba 255,255,255,1 圓角效果 border radius邊框陰影 box shadow 2px 2px 5px 5px inset 內陰影透明度 div for ie8 and earli...
css3學習筆記
1，transition是過度效果，一般是和hover一起用，transition的屬性有height，width常用屬性，在hover裡面就是會覆蓋原來的屬性，屬性由逗號間隔，各個屬性之間沒有先後關係，webkit transition width 2s ease in,height 2s,web...