HTML+CSS+JavaScript基礎學習筆記1---CSS基礎

CSS

1.css樣式權值：
標籤權值爲1，類選擇符權值爲10，id選擇符權值最高爲100，繼承的權值最低（0.1）。當相同權重的樣式存在時，會根據css樣式的前後順序來決定，處於最後面的css樣式會被應用。
內聯樣式表（標籤內部）>嵌入樣式表（當前文件中）>外部樣式表（外部文件中）。
!important優先級樣式最高。eg.p{color:red !important;}
!important>用戶自己設計的樣式>網頁製作者樣式>瀏覽器默認樣式.

2.css格式化排版
文字字體font-family, 字號font-size, 顏色color, 粗體font-weight:bold; 斜體font-style:italic; 下劃線text-decoration:underline; 刪除線text-decoration:line-through;
段落縮進：text-indent:2em; (2em指文字2倍大小）； 行間距（行高）：line-height:2em; 中文字間隔/字母間隔：letter-spacing; 單詞間距：word-spacing;

3.元素分類：
常用塊狀元素：div, p, h1~h6, ol, ul, dl, table, address, blockquote, form…
常用內聯(行內)元素：a, span, br, i, em, strong, label, q, var, cite, code…
常用內聯塊狀元素：img , input…
將元素顯示爲塊狀元素：display:block; 顯示爲內聯元素：display:inline; 內聯塊狀元素：display:inline-block;

4.盒子模型
（1）邊框border:width(thin/medium/thick/像素) style(dashed虛線/dotted點線/solid實線) color;
（2）寬度=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

填充：上右下左（順時針）

5.css佈局模型
（1）流動模型（Flow)：默認的網頁佈局模式。塊狀元素都會在所處的包含元素自上而下按順序垂直延伸分佈，寬度爲100%；內聯元素都會在所處的包含元素內從左到右水平分佈顯示。
（2）浮動模型（Float）：讓塊狀元素並排顯示。float:left/right.
（3）層模型（Layer）：讓html元素在網頁中精確定位。position:absolute/relative/fixed.
絕對定位（absolute)：將元素從文檔流中拖出來，使用top/bottom/right/left相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。
相對定位（relative)：相對於以前的位置移動，移動方向由top,left,bottom,right決定，偏移前的位置保留不動。
固定定位(fixed)：始終位於瀏覽器內視圖的某個位置，不受文檔流動或滾動條影響。
relative與absolute組合使用：1》參照定位的元素必須是相對定位元素的前輩元素；

<div id="box1"><!--參照定位的元素-->
    <div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>

2》參照定位的元素必須加入position:relative.

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

這樣box2就可以相對於父元素box1定位了（這裏注意參照物就可以不是瀏覽器了，而可以自由設置了）。

6.水平居中顯示
（1）定寬塊狀元素：width=…px; //定寬，寬度必須有； margin:…px auto;
(2)不定寬塊狀元素：
1》加入table標籤。第一步：爲需要設置的居中的元素外面加入一個 table 標籤 ( 包括 、、 )。第二步：爲這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。 2》改變塊級元素的display爲Inline類型，然後使用text-align實現居中。3》給父元素設置float;position:relative;left:50%; 子元素設置position:relative;left:-50%;

7.垂直居中
（1）父元素高度確定的單行文本：height與line-height一致。
（2）父元素高度確定的多行文本：1》插入table,同時設置vertical-align:middle;(td默認vertical-align:middle). 2》設置塊級元素的屬性
display:table-cell;/IE8以上及Chrome、Firefox/
vertical-align:middle;/IE8以上及Chrome、Firefox/

8.隱形改變display類型
1. position : absolute
2. float : left 或 float:right
簡單來說，只要html代碼中出現以上兩句之一，元素的display顯示類型就會自動變爲以 display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且默認寬度不佔滿父元素。