一县习、相對(duì)地址和絕對(duì)地址
當(dāng)我們在HTML文件中引入外部的CSS或者js文件的時(shí)候须床，會(huì)有一個(gè)路徑的問題啸箫，這個(gè)路徑分為相對(duì)和絕對(duì)的。
相對(duì)路徑：相對(duì)于引用文件本身去定位被引用的文件地址蛔溃，“ ./ ” 表示當(dāng)前文件所在目錄下，“ ../ ” 表示當(dāng)前文件所在目錄下的上一級(jí)目錄滴某。
絕對(duì)路徑：相對(duì)于磁盤的位置去定位文件的地址俄周，絕對(duì)地址在整體文件遷移時(shí)會(huì)因?yàn)榇疟P和頂層目錄的改變而找不到文件，相對(duì)地址就沒有這個(gè)問題疚顷。
二旱易、css盒子模型：
元素在頁面中顯示成一個(gè)方塊，類似一個(gè)盒子腿堤，CSS盒子模型就是使用現(xiàn)實(shí)中盒子來做比喻阀坏，幫助我們設(shè)置元素對(duì)應(yīng)的樣式。盒子模型示意圖如下：
把元素叫做盒子笆檀，設(shè)置對(duì)應(yīng)的樣式分別為：盒子的寬度(width)忌堂、盒子的高度(height)、盒子的邊框(border)酗洒、盒子內(nèi)的內(nèi)容和邊框之間的間距(padding)士修、盒子與盒子之間的間距(margin)。
- 設(shè)置寬高：
width:200px; /* 設(shè)置盒子的寬度樱衷，此寬度是指盒子內(nèi)容的寬度棋嘲，不是盒子整體寬度 */
height:200px; /* 設(shè)置盒子的高度，此高度是指盒子內(nèi)容的高度矩桂，不是盒子整體高度*/
2.設(shè)置邊框：
可以設(shè)置一邊的沸移，比如只設(shè)置上邊框，border-top:10px solid red;
也可以整體設(shè)置： border:10px solid red侄榴，solid表示邊框是線性的雹锣。
3.設(shè)置padding：
可以值設(shè)置一側(cè)的，如癞蚕，padding-top：20px;
也可以整體設(shè)置蕊爵，padding：20px 40px 50px 30px;
/* 四個(gè)值按照順時(shí)針方向，分別設(shè)置的是 上 右 下 左
四個(gè)方向的內(nèi)邊距值桦山。 /
4.設(shè)置margin：
外邊距的設(shè)置方法和padding的設(shè)置方法相同攒射，將上面設(shè)置項(xiàng)中的'padding'換成'margin'就是外邊距設(shè)置方法。
5.外間距居中技巧
如果子元素是塊元素度苔，且它的寬度小于父元素匆篓，可以將子元素左右設(shè)置auto來水平居中子元素：
/ 子元素上下外邊距設(shè)為0，左右設(shè)置為auto */
margin:0px auto寇窑；
6.盒子的真實(shí)尺寸
盒子的width和height值固定時(shí)鸦概，如果盒子增加border和padding，盒子整體的尺寸會(huì)變大，所以盒子的真實(shí)尺寸為：
盒子寬度 = width + padding左右 + border左右窗市；
盒子高度 = height + padding上下 + border上下先慷；
三、列表
1.無序列表：
<ul>
<li><a href="#">列表標(biāo)題一</a></li>
<li><a href="#">列表標(biāo)題二</a></li>
<li><a href="#">列表標(biāo)題三</a></li>
</ul>
2.有序列表：
<ol>
<li><a href="#">列表標(biāo)題一</a></li>
<li><a href="#">列表標(biāo)題二</a></li>
<li><a href="#">列表標(biāo)題三</a></li>
</ol>
3.定義列表：
<dl>
<dt>標(biāo)題</dt>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
<dd>5</dd>
</dl>
四咨察、表單
表單用于搜集不同類型的用戶輸入论熙，表單由不同類型的標(biāo)簽組成，相關(guān)標(biāo)簽及屬性用法如下：
1摄狱、<form>標(biāo)簽 定義整體的表單區(qū)域
action屬性 定義表單數(shù)據(jù)提交地址
method屬性 定義表單提交的方式脓诡，一般有“get”方式和“post”方式
2、<label>標(biāo)簽 為表單元素定義文字標(biāo)注
3媒役、<input>標(biāo)簽 定義通用的表單元素
type屬性
type="text" 定義單行文本輸入框
type="password" 定義密碼輸入框
type="radio" 定義單選框
type="checkbox" 定義復(fù)選框
type="file" 定義上傳文件
type="submit" 定義提交按鈕
type="reset" 定義重置按鈕
type="button" 定義一個(gè)普通按鈕
value屬性 定義表單元素的值
name屬性 定義表單元素的名稱祝谚，此名稱是提交數(shù)據(jù)時(shí)的鍵名
4、<textarea>標(biāo)簽 定義多行文本輸入框
5酣衷、<select>標(biāo)簽 定義下拉表單元素
6交惯、<option>標(biāo)簽 與<select>標(biāo)簽配合，定義下拉表單元素中的選項(xiàng)
7穿仪、單行文本框文字提示
placeholder 設(shè)置input輸入框的默認(rèn)提示文字席爽。
注冊表單實(shí)例：
<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密碼：</label><input type="password" name="password" />
</p>
<p>
<label>性別：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>個(gè)人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍貫：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">廣州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>
五、css屬性提高
文本常用樣式屬性：
text-align 設(shè)置文字水平對(duì)齊方式啊片，如text-align:center 設(shè)置文字水平居中
text-indent 設(shè)置文字首行縮進(jìn)只锻，如：text-indent:24px; 設(shè)置文字首行縮進(jìn)24pxdisplay屬性
display屬性是用來設(shè)置元素的類型及隱藏的，常用的屬性有：
1紫谷、none 元素隱藏且不占位置
2炬藤、block 元素以塊元素顯示css元素溢出
當(dāng)子元素的尺寸超過父元素的尺寸時(shí)，需要設(shè)置父元素顯示溢出的子元素的方式碴里，設(shè)置的方法是通過overflow屬性來設(shè)置。
overflow的設(shè)置項(xiàng)：
1上真、visible 默認(rèn)值咬腋。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外睡互。
2根竿、hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的就珠。
3寇壳、scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容妻怎。
4壳炎、auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容逼侦。
