標(biāo)簽
常用標(biāo)簽
通過(guò)看http://www.w3school.com.cn/tags/index.asp权均，熟悉以下html標(biāo)簽：
<p></p>
<div></div>
<input>
<span></span>
<a></a>
<i></i>
<ul></ul>
<ol></ol>
<li></li>
<select></select>和<option></option>
<hr/>
<br/>
CSS基礎(chǔ)
什么是CSS
CSS（Cascading Style Sheets）層疊式樣式表键兜，用于定義如何顯示HTML元素。
CSS語(yǔ)法
CSS規(guī)則由兩個(gè)部分構(gòu)成：選擇器盖奈，一條及多條聲明吏廉。
選擇器{屬性：樣式屬性}
selector{
property:value;
property2:value;
property3:value;
……
}
例如日戈，我們要設(shè)置html中input的字體顏色及字體大小殷蛇，就這樣寫(xiě)：
input{
color:red;
font-size:14px;
}
選擇器
選擇器種類很多，常見(jiàn)的如下：
//元素選擇器
input{
color:red;
}
//id選擇器
#div1{
width:50px;
}
//類選擇器
.active{
color：red劈榨；
}
//屬性選擇器
[title]
{
color:red;
}
除此之外還有后代访递、兄弟、偽類選擇器等等同辣，具體知識(shí)點(diǎn)拷姿，請(qǐng)見(jiàn)CSS相關(guān)課程。
行內(nèi)元素與塊級(jí)元素
html元素分兩類：行內(nèi)元素旱函、塊級(jí)元素响巢。他們有如下區(qū)別：
1.行內(nèi)元素與塊級(jí)元素直觀上的區(qū)別：行內(nèi)元素會(huì)在一條直線上排列，都是同一行的棒妨，水平方向排列踪古；塊級(jí)元素各占據(jù)一行，垂直方向排列券腔。塊級(jí)元素從新行開(kāi)始結(jié)束接著一個(gè)斷行伏穆。
2.塊級(jí)元素可以包含行內(nèi)元素和塊級(jí)元素，行內(nèi)元素不能包含塊級(jí)元素纷纫。
3.行內(nèi)元素與塊級(jí)元素屬性的不同枕扫，主要是盒模型屬性上：行內(nèi)元素設(shè)置width無(wú)效，height無(wú)效(可以設(shè)置line-height)辱魁，margin上下無(wú)效烟瞧，padding上下無(wú)效诗鸭。
常見(jiàn)塊級(jí)元素：
<div> - 常用塊級(jí)容易，也是css layout的主要標(biāo)簽
<form> - 交互表單
<h1>-<h6> - 標(biāo)題
<hr> - 水平分隔線
<p> - 段落
<table> - 表格
<ul> - 非排序列表
<ol> - 排序表單
常見(jiàn)行內(nèi)元素：
<a> - 鏈接
<br> - 換行
<em> - 強(qiáng)調(diào)
<img> - 圖片
<input> - 輸入框
<label> - 表格標(biāo)簽
<select> - 項(xiàng)目選擇
<small> - 小字體文本
<span> - 常用內(nèi)聯(lián)容器参滴，定義文本內(nèi)區(qū)塊
<strong> - 粗體強(qiáng)調(diào)
<textarea> - 多行文本輸入框
<var> - 定義變量
塊級(jí)元素和行內(nèi)元素相互是可以轉(zhuǎn)換的强岸，只需要設(shè)置該元素的display屬性：
display:block;//轉(zhuǎn)換為塊級(jí)
display:inline；//轉(zhuǎn)換為行內(nèi)
display:inline-block卵洗；//具有行內(nèi)元素特性，又能像塊級(jí)一樣調(diào)整寬高
盒模型
標(biāo)準(zhǔn) w3c 盒子模型的范圍包括 margin（外邊距）弥咪、border（邊框）过蹂、padding（內(nèi)邊距）、content（內(nèi)容）聚至。
我們的html中的每個(gè)元素都可以看做一個(gè)盒子酷勺，都有上述四個(gè)屬性。
絕對(duì)定位與相對(duì)定位
絕對(duì)定位
絕對(duì)定位(position: absolute)：絕對(duì)定位是相對(duì)于元素最近的已定位的祖先元素（即是設(shè)置了絕對(duì)定位或者相對(duì)定位的祖先元素）扳躬。如果元素沒(méi)有已定位的祖先元素脆诉，那么它的位置則是相對(duì)于最初的包含（body）。
絕對(duì)定位與文檔流無(wú)關(guān)贷币，所以它們可以覆蓋頁(yè)面上其他的元素击胜，可以通過(guò)z-index屬性來(lái)控制這些層的對(duì)方順序。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
相對(duì)定位
相對(duì)定位（position: relative）：相對(duì)定位是相對(duì)于元素在文檔中的初始位置役纹；
注意偶摔，在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)促脉，元素仍然占據(jù)原來(lái)的空間辰斋。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框瘸味。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
注意：position:absolute宫仗，float會(huì)隱式地改變display的類型（display：none除外）。即是當(dāng)元素設(shè)置position:absolute旁仿、float:left藕夫、float:right中任意一個(gè)時(shí)，都會(huì)讓元素以display:inline-block的方式顯示（特點(diǎn)是：可以設(shè)置長(zhǎng)寬枯冈，默認(rèn)寬度不占滿父元素）汁胆。這時(shí)，即使故意設(shè)置display:inline;display:block都是無(wú)效的霜幼。
但是float在IE6下的雙邊距bug就是用display:inline; 來(lái)解決的嫩码。
position:relative不會(huì)隱式改變display的類型。
