紮實的WEB前端基礎

紮實的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/>、&nbsp、<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;可以達到換行效果。