紮實的WEB前端基礎
要搞開發，善於使用手冊，善於調試是很重要的。然後再加上紮實的基本功，就可以有所進步。下面探討幾個很基礎但很重要的問題：
1.內聯元素與塊元素的特點與區別，熟悉全局屬性，專有屬性，CSS屬性
[1]常見內聯元素[一般基於語義]：img、select、textarea
l 相鄰的內聯元素會排列在同一行裏，當一行排不下，纔會換行
l 其寬度隨元素的內容而變化，且設置width, height無效
l margin/padding垂直方向無效，margin水平方向相加
l 內聯元素只能包含行內元素，不能包含塊元素
[2]常見塊元素：table、ul、li、center、h1、dir
l 塊級元素會獨佔一行
l 其寬度自動填滿其父元素寬度, 可以設置 width, height屬性限制，限制後仍獨佔一行
l margin垂直方向取最大值[重疊],水平方向要相加
l 可包含內聯元素和其他塊元素，<form>只能包含塊元素，<p>只能包含內聯元素
[3]兩者之間的聯繫
l 通過display屬性可以實現內聯元素和塊原則之間相互變換
l 可變元素是指需要依據上下文才能決定的元素
l display:inline;能夠修復著名的IE雙倍浮動邊界問題
[4]通用屬性
l class id style title
[5]專用屬性
l <div>[HTML容器],<span>[文本容器],<a name=””>[定義錨點],<caption><code>
[6]CSS屬性
l border-collapse[合併表格單框],outline[輪廓突出], border-radius[圓角邊框], z-index[定義層次], line-height[行高], cursor[鼠標顯形], display[塊行變換], visibility[是否可見], text-decoration[a下劃線],list-style-type[列表類型]
【注:沒事多看看W3C在線手冊，多熟悉這些才能熟能生巧】
2.選擇器的使用原則
對選擇器優先級的調控，可以有效調解樣式的衝突。
l 選擇器“繼承”機制是最基本的法則：*{margin:0px;}很實用
l 基本優先級：元素屬性>style屬性值 > 各種選擇器
l ID選擇器:權重太高，不建議使用，多與JS結合使用
l 類選擇器：.div1{color:red;}
l 元素選擇器：p{color:red;}
l 子元素選擇器：h1>strong{color:red;}【僅子代】
l 派生選擇器：p strong{color:red;}【子孫n代】
l 分組選擇器：h1,h2,h3{color:red;}
l 相鄰兄弟選擇器：h1+p{color:red;}【僅P元素被選中】
l 屬性選擇器：[title]{color:blue;}；[title=te]{color:red;}；[title~="title"]{color:red;}
l 僞類選擇器：link -> visited -> hover-> active 用“：”連接
【注：元素選擇器與類選擇器常結合使用a.div{color:red;}，但ID選擇器不能這樣】
3.定位原則與浮動
認真來討論一下佈局定位問題，這還是很有講究的，大到整個策略的選擇，小到如何微調，都是很微妙的，從下面幾個點上入手。
1. 佈局策略
l DIV+CSS(float)佈局法
l table佈局法[基本不用了]
2. 定位方法
l position決定自身位置的移動
l 盒子模型偏向以父子位置關係來進行填充【*{margin:0px; }很實用】
l float影響的是兄弟位置
l z-index會影響層次關係
3. 微調要領
l 子節點[img標籤，text文本，元素等]居中要用text-align屬性，代替align標籤屬性
l 背景圖片居中，要用background-position屬性
l 通過標籤實現佔位效果：<br/>、 、<div width=”10px”></div>等
l 通過屬性實現佔位效果：width、border、letter-spacing、line-height、text-indent等
l 行元素[width,height都無效]、塊元素本身特性，以及兩者之間的轉化對佈局的影響
部分內容詳解如下：
[1]position：static | relative | absolute | fixed
l 默認定位是static，不能設置z-index，故不能重疊。通過float來讓元素浮動，也可以通過margin/padding等來讓元素產生位置移動。但應該注意這中位移是有別於其他定位方式的
l 相對定位relative不會失去原位置[內容的高度或是寬度加上 margin\border\padding的數值] ，但是會脫離標準流[默認z-index比static高]，通過left:2px;可以向右移動2px
l 絕對定位不會留下專屬空位。當需要絕對定位的div的父級元素設置爲相對定位或是絕對定位，那麼絕對定位的座標就會以父級的padding左上邊緣點爲座標起始點。若沒有這樣的父元素，那麼LRTB就會以窗口左上角爲原點爲基準，當不設置LRTB等時，默認還在static流所在的原位置。
l 固定定位：是以窗口左上角爲原點的
[2]浮動
l 浮動元素脫離標準流，變爲行元素
l 若希望清除浮動，那麼就在需要移動的div上使用clear來分離它旁邊的浮動元素。或者在兩者中間加入一個div使用clear:bath;可以達到換行效果。