HTML
- 學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML、CSS殊鞭、JavaScript語言遭垛。
HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想讓用戶瀏覽的信息操灿，可以包含文字锯仪、圖片、視頻等趾盐。
CSS樣式是表現(xiàn)庶喜。比如，標(biāo)題字體救鲤、顏色變化久窟、或?yàn)闃?biāo)題加入背景圖片、邊框等本缠。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)斥扛。
JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單搓茬∮汤担或鼠標(biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換卷仑【澹可以這么理解，有動(dòng)畫的锡凝，有交互的一般都是有JavaScript來實(shí)現(xiàn)的粘昨。
- 網(wǎng)頁中每一個(gè)內(nèi)容在瀏覽器中的顯示，都是要存放到各種標(biāo)簽中窜锯。
標(biāo)簽的語法：
（1）標(biāo)簽由英文尖括號(hào)<和>括起來张肾，如<html>就是一個(gè)標(biāo)簽。
（2）html中的標(biāo)簽一般都是成對(duì)出現(xiàn)的锚扎，分開始標(biāo)簽和結(jié)束標(biāo)簽吞瞪。結(jié)束標(biāo)簽比開始標(biāo)簽多了一個(gè)/。
如：
<p></p>
<div></div>
<span></span>
（3）標(biāo)簽與標(biāo)簽之間是可以嵌套的驾孔，但先后順序必須保持一致芍秆，如：
<div>
<p></p>
</div>
3.html文件基本結(jié)構(gòu)：
<html>
<head>...</head>
<body>...</body> /* 在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容惯疙，如<h1>、<p>妖啥、<a>霉颠、<img>等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來荆虱。*/
</html>
/* <html></html>稱為跟標(biāo)簽蒿偎，所有的網(wǎng)頁標(biāo)簽都在<html></html>中*/
/*<head>標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器怀读。頭部標(biāo)簽有<title>诉位、<script>、<style>愿吹、<link>不从、<meta>等標(biāo)簽惜姐。*/
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
- html的代碼注釋：
<!--注釋內(nèi)容 --> /*快捷鍵：Ctrl+/*/
語義化
即要明白每個(gè)標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）犁跪，比如：網(wǎng)頁上的文章的標(biāo)題可以用標(biāo)題標(biāo)簽，網(wǎng)頁上的各個(gè)欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽歹袁。文章中內(nèi)容的段落就得放在段落標(biāo)簽中坷衍，在文章中有強(qiáng)調(diào)的文本，就可以使用em標(biāo)簽強(qiáng)調(diào)等等条舔。
優(yōu)點(diǎn)：
（1）更容易被搜索引擎收錄枫耳。
（2）更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。-
標(biāo)簽
(1)標(biāo)題標(biāo)簽（6個(gè)孟抗，h1迁杨、h2、h3凄硼、h4铅协、h5、h6）摊沉。(2)加入強(qiáng)調(diào)語氣狐史，使用<strong>和<em>標(biāo)簽:<strong>和<em>標(biāo)簽是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時(shí)使用，它們的語義是強(qiáng)調(diào)说墨。
(3)使用span標(biāo)簽為文字設(shè)置單獨(dú)樣式：<span>標(biāo)簽是沒有語義的骏全，它的作用就是為了設(shè)置單獨(dú)的樣式用的。
(4)<q>標(biāo)簽尼斧，短文本引用姜贡。
(5)<blockquote>標(biāo)簽，長文本引用：瀏覽器對(duì)<blockquote>標(biāo)簽的解析是縮進(jìn)樣式棺棵。
(6)使用<b r>標(biāo)簽分行顯示文本：
xhtml1.0寫法：<br />
html4.01寫法：<br>
/*現(xiàn)在一般使用 xhtml1.0 的版本的寫法（其它標(biāo)簽也是）楼咳，這種版本比較規(guī)范潘悼。*/
(7)在網(wǎng)頁中添加一些空格：在html代碼中輸入空格、回車都是死沒有作用的爬橡，要想輸入空格治唤，必須加入 。
(8)<address>標(biāo)簽糙申，為網(wǎng)頁加入地址信息：
<address>聯(lián)系地址信息</address>
(9)使用<code>標(biāo)簽加入一行代碼：
<code>var i=i+300;</code>
(10)使用<pre>標(biāo)簽為你的網(wǎng)頁加入大段代碼:
<pre>語言代碼段</pre>
/* <pre> 標(biāo)簽的主要作用:預(yù)格式化的文本宾添。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。
<pre> 標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的柜裸，在需要在網(wǎng)頁中預(yù)顯示格式時(shí)都可以使用它缕陕，只是<pre>標(biāo)簽的一個(gè)常見應(yīng)用就是用來展示計(jì)算機(jī)的源代碼。*/
(11)使用ul-li標(biāo)簽疙挺，添加新聞信息列表：ul-li是沒有前后順序的信息列表扛邑，每項(xiàng)<li>前面是一個(gè)黑色的圓點(diǎn)。
<ul>
<li>信息</>
<li>信息</>
......
</ul>
(12)使用ol-li標(biāo)簽铐然，添加圖書銷售排行榜：ol-li標(biāo)簽可用于制作有序列表蔬崩。 <ol>在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)<li>前都自帶一個(gè)序號(hào)，序號(hào)默認(rèn)從1開始搀暑。
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
(13)div標(biāo)簽：
<div>…</div>
<div id="板塊名稱"></div> /*引入id屬性沥阳，給div提供唯一的名稱*/
/*div在排版中的作用：在網(wǎng)頁制作過程過中，可以把一些獨(dú)立的邏輯部分劃分出來自点，放在一個(gè)<div>標(biāo)簽中桐罕，這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器。*/
(14)table標(biāo)簽桂敛，認(rèn)識(shí)網(wǎng)頁上的表格：
創(chuàng)建表格的四個(gè)元素：tabel功炮、tbody、tr术唬、th薪伏、td
<table>…</table>：整個(gè)表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束碴开。
<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加載完后才顯示毅该。加上這些表格結(jié)構(gòu)， tbody包含行的內(nèi)容下載完優(yōu)先顯示潦牛，不必等待表格結(jié)束后在顯示眶掌，同時(shí)如果表格很長，用tbody分段巴碗，可以一部分一部分地顯示朴爬。（通俗理解table 可以按結(jié)構(gòu)一塊塊的顯示，不在等整個(gè)表格加載完后顯示橡淆。）
<tr>…</tr>：表格的一行召噩，所以有幾對(duì)tr 表格就有幾行母赵。
<td>…</td>：表格的一個(gè)單元格，一行中包含幾對(duì)<td>...</td>具滴，說明一行中就有幾列凹嘲。
<th>…</th>：表格的頭部的一個(gè)單元格，表格表頭构韵。
table表格在沒有添加css樣式之前周蹭，在瀏覽器中顯示是沒有表格線的表頭，也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示 用css樣式疲恢，給表格加邊框：
<style type="text/css">
table tr td,th {
border: 1px solid #000;
}
</style>
(15)caption標(biāo)簽凶朗，為表格添加標(biāo)題和摘要：
/*摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)显拳，使搜索引擎更好的讀懂表格內(nèi)容棚愤，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。*/
<table summary="表格簡介文本"> /*摘要*/
/*標(biāo)題*/
<table>
<caption>標(biāo)題文本</caption>
<tr>
<td>...</td>
<td>...</td>
...
</tr>
...
</table>
(16)使用<a>標(biāo)簽杂数，連接到另一個(gè)頁面：
/*title屬性的作用宛畦，鼠標(biāo)滑過鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容。這個(gè)屬性在實(shí)際網(wǎng)頁開發(fā)中作用很大耍休，主要方便搜索引擎了解鏈接地址的內(nèi)容（語義化更友好）刃永。*/
<a herf="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過顯示的文本">鏈接顯示的文本</a>
/* <a>標(biāo)簽在默認(rèn)情況下，鏈接的網(wǎng)頁是在當(dāng)前瀏覽器窗口中打開羊精，有時(shí)我們需要在新的瀏覽器窗口中打開。*/
<a href="目標(biāo)網(wǎng)址" target="_blank">click here!</a>
(17)使用mailto在網(wǎng)頁中鏈接email地址：
<a href="mailto:yy@imooc.com ?subject=觀了不起的蓋茨比有感囚玫。 &body=你好喧锦，對(duì)此評(píng)論有些想法。">對(duì)此影評(píng)有何感想抓督，發(fā)送郵件給我</a>
(18)img標(biāo)簽燃少，為網(wǎng)頁插入圖片：
<img src="圖片地址" alt="下載失敗時(shí)的替換文本" title = "提示文本">
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
/*src：標(biāo)識(shí)圖像的位置；
alt：指定圖像的描述性文本铃在，當(dāng)圖像不可見時(shí)（下載不成功時(shí)）阵具，可看到該屬性指定的文本；
title：提供在圖像可見時(shí)對(duì)圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)定铜；
圖像可以是GIF阳液，PNG，JPEG格式的圖像文件揣炕。*/
(19)使用表單標(biāo)簽帘皿，與用戶交互：
<form method="傳送方式" action="服務(wù)器文件">
/*action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php);
method ： 數(shù)據(jù)傳送的方式（get/post）;
所有表單控件（文本框、文本域畸陡、按鈕鹰溜、單選框虽填、復(fù)選框等）都必須放在 <form></form> 標(biāo)簽之間,否則用戶輸入的信息可提交不到服務(wù)器上;
method : post/get 的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問題。*/
- 表單控件曹动，設(shè)置不同type
(1)文本輸入框斋日、密碼輸入框：
<input type="text/password" name="名稱" value="文本">
/* type：當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟? 當(dāng)type="password"時(shí), 輸入框?yàn)槊艽a輸入框墓陈。
name：為文本框命名桑驱，以備后臺(tái)程序ASP 、PHP使用跛蛋。
value：為文本輸入框設(shè)置默認(rèn)值熬的。(一般起到提示作用)。*/
(2)文本域赊级，支持多行文本輸入：
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
/*cols:多行輸入域的列數(shù)押框；
rows：多行輸入域的行數(shù)；
這兩個(gè)屬性可用css樣式的width和height來代替：col用width理逊，row用height橡伞。*/
(3)單選框、復(fù)選框：
<input type="radio/checkbox" value="值" name="名稱" checked="checked">
/*type:當(dāng) type="radio" 時(shí)晋被，控件為單選框兑徘；當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框羡洛。
value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）挂脑。
name：為控件命名，以備后臺(tái)程序 ASP欲侮、PHP 使用崭闲。
checked：當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中威蕉。
同一組的單選按鈕刁俭，name 取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用韧涨。*/
（4）下拉列表框：
<form>
<option value="提交值">內(nèi)容</option>
<option value="提交值">內(nèi)容</option>
<option value="提交值" select="selected">內(nèi)容</option>
...
</form>
/*value的值是表示向服務(wù)器提交的值牍戚，設(shè)置select="selected"屬性表示該項(xiàng)被默認(rèn)選中。*/
(5)下拉列表框進(jìn)行多選：
<select multiple="multiple"></select>
/*下拉列表也可以進(jìn)行多選操作虑粥，設(shè)置multiple="multiple"屬性如孝，就可以實(shí)現(xiàn)多選功能，在 windows 操作系統(tǒng)下舀奶，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊）暑竟，可以選擇多個(gè)選項(xiàng)。*/
(6)按鈕：
/* 提交按鈕*/
<input type="submit" value="提交">
/*提交按鈕*/
<input type="reset" value="重置">
(7)form表單中的label標(biāo)簽：
/*label標(biāo)簽的作用是為鼠標(biāo)用戶改進(jìn)了可用性,當(dāng)用戶單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）*/
<label for="控制id名稱">
CSS
認(rèn)識(shí)css樣式：CSS全稱為“層疊樣式表 (Cascading Style Sheets)”但荤，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式罗岖，如文字大小、顏色腹躁、字體加粗等桑包。
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成：
選擇符：又稱選擇器纺非，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素哑了。
聲明：在英文大括號(hào)“｛｝”中的的就是聲明，屬性和值之間用英文冒號(hào)“：”分隔烧颖。當(dāng)有多條聲明時(shí)弱左，中間可以英文分號(hào)“;”分隔。內(nèi)聯(lián)式css樣式炕淮，直接寫在現(xiàn)有的HTML標(biāo)簽中拆火，如：
<p style="color:red">這里文字是紅色。</p>
- 嵌入式css樣式涂圆，寫在當(dāng)前的文件中:
<head>
<style></style>
</head>
- 外部式css樣式们镜，寫在單獨(dú)的一個(gè)文件中
<link href="base.css" rel="stylesheet" type="text/css" />
三種方法的優(yōu)先級(jí)
內(nèi)聯(lián)式 > 嵌入式 > 外部式，但是嵌入式>外部式有一個(gè)前提：嵌入式css樣式的位置一定在外部式的后面润歉。選擇器：每一條css樣式聲明（定義）由兩部分組成:
(1)標(biāo)簽選擇器：
/*標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽模狭。如<html>、<body>踩衩、<h1>嚼鹉、<p>、<img>*/
標(biāo)簽 {
css樣式代碼九妈；
}
(2)類選擇器
.類選擇器名稱 {
css樣式代碼;
}
/*英文圓點(diǎn)開頭反砌、其中類選器名稱可以任意起名（但不能起中文）。
使用方法：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來萌朱，如下：
<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"為標(biāo)簽設(shè)置一個(gè)類，如下：
<span class="stress">膽小如鼠</span>
第三步：設(shè)置類選器css樣式策菜，如下：
.stress{color:red;}*/
(3)ID選擇器
#Id名稱 {
css樣式代碼;
}
/* 為標(biāo)簽設(shè)置id="ID名稱"晶疼，而不是class="類名稱"。
ID選擇符的前面是井號(hào)（#）號(hào)又憨，而不是英文圓點(diǎn)（.）*/
(4)子代選擇器翠霍，即大于符號(hào)(>),用于選擇指定標(biāo)簽元素的第一代子元素。
.first>span {
border: 1px solid red;
}
(5)后代選擇器蠢莺，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素寒匙。
.first span {
color: red;
}
(6)通用選擇器，使用一個(gè)（*）號(hào)指定，它的作用是匹配html中所有標(biāo)簽元素锄弱。
* {
css樣式代碼;
}
(8)偽類選擇器考蕾，允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式。
(9)分組選擇器会宪，當(dāng)你想為html中多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式時(shí)肖卧，可以使用分組選擇符（，）掸鹅。
h1,span {
color: red;
}
子代選擇器和后代選擇器的區(qū)別：
后代選擇器與子代選擇器的區(qū)別塞帐，子代選擇器僅是指它的直接后代，作用于子元素的第一代后代巍沙。而后代選擇器是作用于所有子后代元素葵姥。后代選擇器通過空格來進(jìn)行選擇，而子代選擇器是通過“>”進(jìn)行選擇句携。CSS的特點(diǎn)性
(1)繼承性
css的某些樣式是具有繼承性的榔幸，繼承是一種規(guī)則，它允許樣式不僅用于某個(gè)特定html標(biāo)簽元素务甥，而且應(yīng)用于其后代牡辽。
有一些css樣式是不具有繼承性的。如border:1px solid red敞临。
（2）特殊性
p {
color:red;
}
.first {
color:green;
}
<p class="first">三年級(jí)時(shí)态辛，我還是一個(gè)<span>膽小如鼠</span>的小女孩。</p>
/*p和.first都匹配到了p標(biāo)簽上挺尿，但green是正確的顏色奏黑，因?yàn)闉g覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，權(quán)值高的就使用哪種css樣式编矾。*/
/* 權(quán)值的規(guī)則:標(biāo)簽的權(quán)值為1熟史，類選擇器的權(quán)值為10，ID選擇器的權(quán)值最高為100窄俏。*/
p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/
(3)層疊性
/*層疊就是在html文件中對(duì)于同一個(gè)元素可以有多個(gè)css樣式存在蹂匹，當(dāng)有相同權(quán)重的樣式存在時(shí)，會(huì)根據(jù)這些css樣式的前后順序來決定凹蜈，處于最后面的css樣式會(huì)被應(yīng)用限寞。*/
p {
color:red;
}
.first {
color:green;
}
<p class="first">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩仰坦。</p>
/* 最后 p 中的文本會(huì)設(shè)置為green履植，這個(gè)層疊很好理解，理解為后面的樣式會(huì)覆蓋前面的樣式悄晃。*/
(4)重要性
/*使用!important為某些樣式設(shè)置具有最高權(quán)值玫霎。*/
p {
color:red!important;
}
.first {
color:green;
}
<p class="first">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩。</p>
/*這時(shí) p 段落中的文本會(huì)顯示的red紅色庶近。*/
- 文字排版--字體翁脆、字號(hào)、顏色拦盹、粗體鹃祖、斜體、下劃線普舆、刪除線:
/*文字：*/
body {
font-family:"字體";
}
/* 字號(hào)：*/
body {
font-size: 12px;
}
/* 顏色：*/
body {
color: #666;
}
/*粗體：*/
body {
font-weight: bold;
}
/*斜體：*/
body {
font-style: italic;
}
/*下劃線：*/
body {
text-decoration: underline;
}
/*刪除線：*/
body {
text-decoration: line-through;
}
- 段落排版--縮進(jìn)恬口、行間距（行高）、中文字間距和字母間距沼侣、對(duì)齊:
/*縮進(jìn)：*/
body {
text-indent: 2em;
}
/*行間距（行高）：*/
body {
line-height: 1.5em;
}
/* 文字間隔（字母間隔）：*/
h1 {
letter-spacing: 50px;
}
/*單詞間距：*/
h1 {
word-spacing: 50px;
}
/*居中對(duì)齊（塊級(jí)元素）：*/
h1 {
text-align: center;
}
/*居左：*/
h1 {
text-align: left;
}
/*居又：*/
h1 {
text-align: right;
}
- 元素分類
在CSS中祖能，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素蛾洛。
常用的塊級(jí)元素：<div>养铸、<p>、<h1>...<h6>轧膘、<ol>钞螟、<ul>、<dl>谎碍、<table>鳞滨、<address>、<blockquote> 蟆淀、<form>拯啦。
常用的行內(nèi)元素：<a>、<span>熔任、<br>褒链、<i>、<em>疑苔、<strong>甫匹、<label>、<q>惦费、<var>赛惩、<cite>、<code>趁餐。
常用的內(nèi)聯(lián)塊級(jí)元素：<img>、<input>篮绰。
(1)塊級(jí)元素
塊級(jí)元素特點(diǎn)：
每個(gè)塊級(jí)元素都從新的一行開始后雷，并且其后的元素也另起一行。（真霸道，一個(gè)塊級(jí)元素獨(dú)占一行）
元素的高度臀突、寬度勉抓、行高以及頂和底邊距都可設(shè)置。
元素寬度在不設(shè)置的情況下候学，是它本身父容器的100%（和父元素的寬度一致）藕筋，除非設(shè)定一個(gè)寬度。
(2)行內(nèi)元素
內(nèi)聯(lián)元素特點(diǎn)：
和其他元素都在一行上梳码；
元素的高度隐圾、寬度及頂部和底部邊距不可設(shè)置；
元素的寬度就是它包含的文字或圖片的寬度掰茶，不可改變暇藏。
(3)塊級(jí)元素和行內(nèi)元素的相互轉(zhuǎn)換：
/*塊級(jí)元素轉(zhuǎn)成行內(nèi)元素：*/
div {
display:inline;
}
/* 行內(nèi)元素轉(zhuǎn)成塊級(jí)元素：*/
a {
display:block;
}
(4)內(nèi)聯(lián)行內(nèi)元素:同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)濒蒋。
display:inline-block; /*將元素設(shè)置為內(nèi)聯(lián)塊狀元素*/
inline-block 元素特點(diǎn)：
和其他元素都在一行上盐碱；
元素的高度、寬度沪伙、行高以及頂和底邊距都可設(shè)置瓮顽。
- 盒模型-邊框
盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)围橡、樣式和顏色(邊框三個(gè)屬性)暖混。
div {
border: 1px solid red;
}
/*可以分別設(shè)置上下左右邊框：*/
div{border-top:1px solid red;}
div{border-bottom:1px solid red;}
div{border-left:1px solid red;}
div{border-right:1px solid red;}
- 盒模型--寬度和高度
元素實(shí)際寬度（盒子寬度）=左邊界（margin-left）+左邊框(border-left)+左填充（padding-left）+內(nèi)容寬度（width）+右填充（padding-right）+右邊框（border-right）+右邊界（nargin-right）。
元素實(shí)際高度（盒子高度）=上邊界（margin-top）+上邊框(border-top)+上填充（padding-top）+內(nèi)容高度（height）+下填充（padding-bottom）+下邊框（border-bottom）+下邊界（nargin-bottom）某饰。
- 盒模型--填充
元素內(nèi)容與邊框之間是可以設(shè)置距離的儒恋，稱之為“填充”。填充也可分為上黔漂、右诫尽、下、左(順時(shí)針)炬守。
div {
padding: 20px 10px 15px 30px;
}
相當(dāng)于：
div {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 30px;
}
如果上牧嫉、右、下减途、左的填充都為10px:
div {
padding:10px;
}
如果上下填充一樣為10px酣藻，左右一樣為20px:
div {
padding: 10px 20px;
}
- 盒模型--邊界
元素與其它元素之間的距離可以使用邊界（margin）來設(shè)置。邊界也是可分為上鳍置、右辽剧、下、左税产。
div {
margin: 20px 10px 15px 30px;
}
相當(dāng)于：
div {
margin-top: 20px;
margin-right: 10px;
margin-bottom: 15px;
margin-left:30;
}
上右下左的邊界都為10px:
div {
margin: 10px;
}
上下邊界一樣為10px怕轿，左右一樣為20px:
div {
margin: 10px 20px;
}
padding在邊框里偷崩，margin在邊框外。
- CSS布局模型：流動(dòng)模型（Flow）撞羽、浮動(dòng)模型（Float）阐斜、層模型（Layer）。
(1)流動(dòng)模型诀紊，流動(dòng)（Flow）是默認(rèn)的網(wǎng)頁布局模式谒出，網(wǎng)頁在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動(dòng)模型來分布網(wǎng)頁內(nèi)容的。
流動(dòng)布局模型具有2個(gè)比較典型的特征：
第一點(diǎn)邻奠，塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布笤喳，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%惕澎。實(shí)際上莉测，塊狀元素都會(huì)以行的形式占據(jù)位置。
第二點(diǎn)唧喉，在流動(dòng)模型下捣卤，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。
（2）浮動(dòng)模型八孝，即讓兩個(gè)塊狀元素并排顯示
div{
width:200px;
height:200px;
border:2px red solid;
float:left; /*float:right*/
}
<div id="div1"></div>
<div id="div2"></div>
(3)層模型
層模型的三種形式：絕對(duì)定位(position: absolute)董朝、相對(duì)定位(position: relative)、固定定位(position: fixed)干跛。
層模型--絕對(duì)定位
如果想為元素設(shè)置層模型中的絕對(duì)定位子姜，需要設(shè)置position:absolute(表示絕對(duì)定位)，這條語句的作用將元素從文檔流中拖出來楼入，然后使用left哥捕、right、top嘉熊、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位遥赚。如果不存在這樣的包含塊，則相對(duì)于body元素阐肤，即相對(duì)于瀏覽器窗口凫佛。
如下面代碼可以實(shí)現(xiàn)div元素相對(duì)于瀏覽器窗口向右移動(dòng)100px，向下移動(dòng)50px孕惜。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
層模型--相對(duì)定位
如果想為元素設(shè)置層模型中的相對(duì)定位愧薛，需要設(shè)置position:relative（表示相對(duì)定位），它通過left衫画、right毫炉、top、bottom屬性確定元素在正常文檔流中的偏移位置削罩。相對(duì)定位完成的過程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)碘箍，然后相對(duì)于以前的位置移動(dòng)遵馆，移動(dòng)的方向和幅度由left、right丰榴、top、bottom屬性確定秆撮，偏移前的位置保留不動(dòng)四濒，不會(huì)影響其它元素的位置。
如下代碼實(shí)現(xiàn)相對(duì)于以前位置向下移動(dòng)50px职辨，向右移動(dòng)100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
層模型--固定定位
fixed：表示固定定位盗蟆，與absolute定位類型類似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身舒裤。由于視圖本身是固定的喳资，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置腾供，或改變?yōu)g覽器窗口的顯示大小仆邓，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響伴鳖，這與background-attachment:fixed?屬性功能相同节值。
以下代碼可以實(shí)現(xiàn)相對(duì)于瀏覽器視圖向右移動(dòng)100px，向下移動(dòng)50px榜聂。并且拖動(dòng)滾動(dòng)條時(shí)位置固定不變搞疗。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....
- relative和absolute組合使用:
使用position:absolute可以實(shí)現(xiàn)被設(shè)置元素相對(duì)于其它元素進(jìn)行定位须肆，需要使用position:relativ匿乃。
但是必須遵守下面規(guī)范：
1、參照定位的元素必須是相對(duì)定位元素的前輩元素：
<div id="box1"><!--參照定位的元素-->
<div id="box2">相對(duì)參照元素進(jìn)行定位</div><!--相對(duì)定位元素-->
</div>
從上面代碼可以看出box1是box2的父元素（父元素當(dāng)然也是前輩元素了）豌汇。
2幢炸、參照定位的元素必須加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute瘤礁，便可以使用top阳懂、bottom、left柜思、right來進(jìn)行偏移定位了岩调。
#box2{
position:absolute;
top:20px;
left:30px;
}
這樣box2就可以相對(duì)于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設(shè)置了）赡盘。
- 顏色值縮寫:
顏色的css樣式也是可以縮寫的号枕，當(dāng)你設(shè)置的顏色是16進(jìn)制的色彩值時(shí)，如果每兩位的值相同陨享，可以縮寫一半葱淳。
p {
color: #336699;
}
可以縮寫為：
p {
color: #369;
}
- 字體縮寫:
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
可縮寫為：
body{
font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}
注意：
使用這一簡寫方式至少要指定 font-size 和 font-family 屬性钝腺，其他的屬性(如 font-weight、font-style赞厕、font-variant艳狐、line-height)如未指定將自動(dòng)使用默認(rèn)值。
在縮寫時(shí) font-size 與 line-height 中間要加入“/”斜杠皿桑。
