1. 文件結(jié)構(gòu)：
? ? HTML文件的固定結(jié)構(gòu)：
? ? <html>
? ? ? ? <head>...</head>
? ? ? ? <body>...</body>
? ? </html>
? ? html是根標(biāo)簽
? ? head定義文檔頭部更卒，包含： title, script, style, link, meta
? ? body是網(wǎng)頁主要內(nèi)容等孵，包含：h1,h2-h6, p, a, img
2. 認(rèn)識(shí)head標(biāo)簽：
? ? <head>
? ? ? ? <title>...</title>? ? ? ? 網(wǎng)頁標(biāo)題
? ? ? ? <meta>
? ? ? ? <link>
? ? ? ? <style>...</style>
? ? ? ? <script>...</script>
? ? </head>
3. 語義化：
? ? 明白每個(gè)標(biāo)簽的用途（在什么情況下我可以使用這個(gè)標(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)等等咐熙。
4. 認(rèn)識(shí)body標(biāo)簽：
? ? <p>段落文本</p>? ? ? ? ? ? ? 有三段就放三個(gè)<p></p>
? ? <h1>標(biāo)題文本</h1>? ? ? ? ? ? h1-h6共6個(gè)標(biāo)題分級(jí)
? ? <em>斜體文本（強(qiáng)調(diào)）</em>? ? 斜體文本內(nèi)容
? ? <strong>粗體文本</strong>? ? 粗體顯示文本內(nèi)容
? ? <span>單獨(dú)樣式文本</span>? ? 沒有語義的，它的應(yīng)用就是為了 設(shè)置單獨(dú)的格式用的
? ? <q>引用的文本</q>? ? ? ? ? ? 引用的文本內(nèi)容辨萍，會(huì)自動(dòng)加上雙引號(hào)
? ? <blockquote>大段引用</blockquote>? ? 引用大段的文本內(nèi)容棋恼，文本前后會(huì)加上縮進(jìn)
? ? <br/>? ? ? ? ? ? ? ? ? ? ? ? 換行
? ? <hr/>? ? ? ? ? ? ? ? ? ? ? ? 水平橫線
? ? ? ? ? ? ? ? ? ? ? ? ? 空格
? ? <address>地址信息</address>? 地址信息，通常用于公司地址顯示
? ? <code>代碼內(nèi)容</code>? ? ? ? 代碼锈玉，通常是一行內(nèi)
? ? <pre>多行代碼</pre>? ? ? ? ? 多行代碼,你需要在網(wǎng)頁中預(yù)顯示格式時(shí)都可以使用它
? ? <ul>? ? ? ? ? ? ? ? ? ? ? ? ul-li 列表信息爪飘，以圓點(diǎn)顯示
? ? ? <li>信息1</li>
? ? ? <li>信息2</li>
? ? ? ......
? ? </ul>
? ? <ol>? ? ? ? ? ? ? ? ? ? ? ? ol-li 列表信息，帶上序號(hào)
? ? ? <li>信息</li>
? ? ? <li>信息</li>
? ? ? ......
? ? </ol>
? ? <div>排版內(nèi)容<div>? ? ? ? ? 排版中使用拉背，相當(dāng)于一個(gè)容器
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 確定邏輯部分：邏輯部分是頁面上相互關(guān)聯(lián)的一組元素师崎，如欄目版塊
? ? <div id="版塊名稱">…</div>? div 帶上ID號(hào)，使之更清晰
? ? <table>表格內(nèi)容</table>? ? ? 創(chuàng)建表格
? ? ? ? <caption>標(biāo)題文本</caption>? ? ? ? 為表格添加標(biāo)題文本
? ? ? ? <tbody>...</tbody>? ? ? 若加此標(biāo)簽后去团，表格會(huì)一次性顯示出來（而非網(wǎng)頁加載一點(diǎn)顯示一點(diǎn)）
? ? ? ? <tr>表格一行</tr>? ? ? ? 表格中的一行
? ? ? ? <td>表格單元格</td>? ? ? 表格中的一個(gè)單元格
? ? ? ? <th>表格表頭</th>? ? ? ? 表格頭部的一個(gè)單元格抡诞，表格表頭
? ? <table summary="表格摘要">...</table>? ? 為表格添加摘要，但不會(huì)被瀏覽器顯示出來
? ? <a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過時(shí)顯示文本">鏈接顯示文本</a>? ? 鏈接標(biāo)簽
? ? ? ? target="_blank"? ? ? ? ? 網(wǎng)頁將在新窗口中打開
? ? ? ? mailto:? ? ? ? ? ? ? ? ? 網(wǎng)頁中郵件地址土陪，可帶多個(gè)參數(shù)
? ? ? ? ? ? mailto: 郵箱地址
? ? ? ? ? ? cc=? ? 抄送地址
? ? ? ? ? ? bcc=? ? 密抄地址
? ? ? ? ? ? ;? ? ? 多個(gè)郵箱地址
? ? ? ? ? ? subject=郵件主題
? ? ? ? ? ? body=? 郵件內(nèi)容
? ? ? ? 完整舉例: <a href="mailto:yy@sf.com ?cc=aa@sf.com &bcc=bb@sf.com &subject=主題 &body=郵件內(nèi)容">發(fā)送郵件</a>
? ? <img scr="圖片地址" alt="下載失敗時(shí)替換文本" title="提示文本" />
5. 與用戶交互：
? ? 語法：
? ? ? ? <form method="傳送方式" action="服務(wù)器文件"></form>
? ? 舉例：
? ? ? ? <form? ? method="post"? action="save.php">
? ? ? ? ? ? <label for="username">用戶名:</label>
? ? ? ? ? ? <input type="text" name="username" />
? ? ? ? ? ? <label for="pass">密碼:</label>
? ? ? ? ? ? <input type="password" name="pass" />
? ? ? ? </form>
? ? 表單控件：
? ? ? ? 文本框昼汗、文本域、按鈕鬼雀、單選框顷窒、復(fù)選框
? ? method:
? ? ? ? post/get
? ? 1. 文本框（文本/密碼）
? ? ? ? <form>
? ? ? ? ? <input type="text/password" name="名稱" value="文本" />
? ? ? ? </form>
? ? ? ? type：有“text”和“password”兩種類型
? ? ? ? name：為文本框命名，方便后臺(tái)ASP和PHP使用
? ? ? ? value：文本框默認(rèn)值源哩，一般起提示作用
? ? 2. 文本域（多行文本）
? ? ? ? <textarea rows="行數(shù)" cols="列數(shù)">默認(rèn)文本內(nèi)容</textarea>
? ? ? ? cols：多行輸入域的列數(shù)
? ? ? ? rows：多行輸入域的行數(shù)
? ? 3. 單選框鞋吉、復(fù)選框
? ? ? ? <input? type="radio/checkbox"? value="值"? ? name="名稱"? checked="checked"/>
? ? ? ? type：radio單選，checkbox復(fù)選框
? ? ? ? value：提交數(shù)據(jù)到服務(wù)器的值励烦，后臺(tái)PHP處理使用
? ? ? ? name：為控件命名谓着，以備后臺(tái)程序ASP和PHP使用
? ? ? ? checked：checked="checked"時(shí)，此選項(xiàng)默認(rèn)被選中
? ? ? ? 注意：同一組的單選按鈕坛掠，name取值一定要一致
? ? 4. 下拉列表框
? ? ? ? <form action="save.php" method="post" >
? ? ? ? ? ? <label>愛好:</label>
? ? ? ? ? ? <select multiple="multiple">
? ? ? ? ? ? ? <label for="book>看書</label>? ? ? ?
? ? ? ? ? ? ? <option value="看書" id="book">看書</option>
? ? ? ? ? ? ? <option value="旅游">旅游</option>
? ? ? ? ? ? ? <option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
? ? ? ? ? ? ? <option value="購物">購物</option>
? ? ? ? ? ? </select>
? ? ? ? ? ? <input? type="submit"? value="提交">
? ? ? ? ? ? <input? type="reset"? ? value="重置"? />
? ? ? ? </form>
? ? ? ? value：向服務(wù)器提交值
? ? ? ? selected：設(shè)置selected="selected"時(shí)赊锚，默認(rèn)選中
? ? ? ? multiple：multiple="multiple"時(shí)治筒，可以使用Ctrl多選，但很丑
? ? ? ? label：為了改進(jìn)鼠標(biāo)易用性舷蒲，鼠標(biāo)點(diǎn)擊文本時(shí)耸袜，選擇上Radio
6. 認(rèn)識(shí)CSS樣式：
? ? CSS：層疊樣式表（Cascading Style Sheets），主要用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式
? ? 語法：
? ? ? ? 選擇符{ 屬性: 值}
? ? 舉例：
? ? ? ? p{ color: blue}
? ? 選擇符：又稱選擇器牲平，指明要應(yīng)用樣式規(guī)則的元素堤框，如<html>、<body>纵柿、<h1>蜈抓、<p>、<img>...
? ? 聲明：指的是冒號(hào)”:“
? ? 多條聲明：使用分號(hào)”;“隔開昂儒，最好每行都加上分號(hào)
? ? 注釋：CSS使用 /**/资昧，HTML注釋則使用<!--內(nèi)容-->
7. CSS樣式分類：
? ? 1. 內(nèi)聯(lián)式
? ? ? ? <p style="color:red;font-size:12px">這里文字是紅色。</p>
? ? 2. 嵌入式
? ? ? ? 較通用的一類荆忍，CSS樣式放置在<style>標(biāo)簽中，而<style>通常要放置在<head>內(nèi)
? ? ? ? <style type="text/css">
? ? ? ? ? ? span{
? ? ? ? ? ? ? color:blue;
? ? ? ? ? ? ? font-size:12px;
? ? ? ? ? ? }
? ? ? ? </style>
? ? 3. 外部式
? ? ? ? 把CSS代碼寫到一個(gè)單獨(dú)的外部文件中撤缴，以.css擴(kuò)展名結(jié)尾刹枉，在<head>內(nèi)使用<link>標(biāo)簽引入，如：
? ? ? ? <link href="base.css" rel="stylesheet" type="text/css" />
? ? ? ? href: .css文件路徑
? ? ? ? rel和type: rel="stylesheet" type="text/css" 是固定寫法屈呕，不能改
? ? 三種方法的優(yōu)先級(jí)：
? ? ? ? 內(nèi)聯(lián)式 > 嵌入式 > 外部式
? ? ? ? 就近原則微宝，嵌入式>外部式有一個(gè)前提：嵌入式css樣式的位置一定在外部式的后面
? ? ? ? 以上規(guī)則適用于相同權(quán)值的情況
8. CSS 類選擇器
? ? 語法：
? ? ? ? .類選器名稱{css樣式代碼;}
? ? 舉例：
? ? ? ? <style type="text/css">
? ? ? ? .stress{
? ? ? ? ? ? color:red;
? ? ? ? }
? ? ? ? </style>
? ? 注意：前邊的小圓點(diǎn)是必須要有的
? ? 使用：
? ? ? ? <span class="stress">膽小如鼠</span>
9. CSS ID選擇器
? ? 語法：
? ? ? ? #ID選擇器名稱{css樣式代碼}
? ? 舉例：
? ? ? ? #setGreen{color:green;}
? ? ? ? <span id="setGreen">膽小如鼠</span>
? ? 區(qū)別：
? ? ? ? 起始于 '.' 與 '#'
? ? ? ? 調(diào)用時(shí) class= 與 id=
? ? ? ? ID選擇器只能在文檔中使用一次，類選擇器則可以使用多次
? ? ? ? 一個(gè)元素可以使用多個(gè)類選擇器同時(shí)設(shè)置多個(gè)樣式虎眨，而ID選擇器是不可以的蟋软，如 <span class="stress bigsize">三年級(jí)</span>
10.CSS 子選擇器
? ? 還有一個(gè)比較有用的選擇器子選擇器，即大于符號(hào)(>),用于選擇指定標(biāo)簽元素的第一代子元素嗽桩。舉例：
? ? ? ? .food>li{border:1px solid red;}
? ? 若大于符號(hào)換成空格( ),用于選擇指定標(biāo)簽元素的所有后輩元素岳守，舉例：
? ? ? ? .first span{border:1px solid red;}
11. CSS 通用選擇器
? ? 通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(gè)（*）號(hào)指定碌冶，它的作用是匹配html中所有標(biāo)簽元素：
? ? ? ? * {color: red;}
? ? 此時(shí)湿痢，所有元素的字體都為紅色
12. CSS 偽類選擇符
? ? 偽類選擇符，它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式扑庞，比如說我們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色
? ? ? ? a:hover{color:red;}
? ? 此時(shí)譬重，把鼠標(biāo)放置到元素上邊，顏色就會(huì)切換為紅色
13. CSS 分組選擇符
? ? 多個(gè)標(biāo)簽使用逗號(hào)隔開：
? ? ? ? h1,span{color:red;}
? ? 相當(dāng)于：
? ? ? ? h1{color:red;}
? ? ? ? span{color:red;}
14. CSS 繼承
? ? CSS的某些樣式是具有繼承性的罐氨，那么什么是繼承呢臀规？繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個(gè)特定html標(biāo)簽元素栅隐，而且應(yīng)用于其后代
? ? 如：
? ? ? ? p{color:red;} /*可被span繼承*/
? ? ? ? p{border:1px solid red;} /*此時(shí)塔嬉，span將不繼承玩徊，邊框顯示紅色*/
15. CSS 特殊性（權(quán)值）
? ? 權(quán)值：
? ? ? ? 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*/
? ? 注意：還有一個(gè)權(quán)值比較特殊--繼承也有權(quán)值但很低，有的文獻(xiàn)提出它只有0.1邑遏，所以可以理解為繼承的權(quán)值最低佣赖。
? ? 層疊：
? ? ? ? 相同權(quán)值時(shí)，最后一個(gè)將被應(yīng)用
? ? 重要性：
? ? ? ? 相同權(quán)值時(shí)记盒，使用 !important 將得到最高權(quán)重憎蛤，如 p{color:red!important;}
? ? ? ? 樣式優(yōu)先級(jí)為：瀏覽器默認(rèn)的樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設(shè)置的樣式，使用 !important 優(yōu)先級(jí)比 用戶自己設(shè)定 還高
16. CSS 文字排版
? ? 1. 字體
? ? ? ? body{font-family:"宋體";}
? ? ? ? body{font-family:"Microsoft Yahei";}
? ? 2. 字號(hào)纪吮，顏色
? ? ? ? body{font-size:12px;color:#666}
? ? 3. 粗體
? ? ? ? p span{font-weight:bold;}
? ? ? ? a{font-weight:bold;}
? ? 4. 斜體
? ? ? ? p a{font-style:italic;}
? ? ? ? p{font-style:italic;}
? ? 5. 下劃線
? ? ? ? p a{text-decoration:underline;}
? ? 6. 刪除線
? ? ? ? .oldPrice{text-decoration:line-through;}
? ? 7. 縮進(jìn)
? ? ? ? p{text-indent:2em;} /*2em 表示兩倍文字大小*/
? ? 8. 行間距
? ? ? ? p{line-height:1.5em;}
? ? 9. 字間距俩檬、字母間距
? ? ? ? h1{letter-spacing:50px;word-spacing:50px;} /*分別是字母、單詞間距*/
? ? 19.對(duì)齊
? ? ? ? h1{text-align:center;} /*left碾盟、right和center*/
17. CSS 元素分類
? ? 塊狀元素：
? ? ? ? <div>棚辽、<p>、<h1>...<h6>冰肴、<ol>屈藐、<ul>、<dl>熙尉、<table>联逻、<address>、<blockquote> 检痰、<form>
? ? 內(nèi)聯(lián)元素：
? ? ? ? <a>包归、<span>、<br>铅歼、<i>公壤、<em>、<strong>椎椰、<label>厦幅、<q>、<var>慨飘、<cite>慨削、<code>
? ? 內(nèi)聯(lián)塊狀元素：
? ? ? ? <img>、<input>
? ? 1. 塊狀元素：
? ? ? ? 1套媚、每個(gè)塊級(jí)元素都從新的一行開始缚态，并且其后的元素也另起一行。（真霸道堤瘤，一個(gè)塊級(jí)元素獨(dú)占一行）
? ? ? ? 2玫芦、元素的高度、寬度本辐、行高以及頂和底邊距都可設(shè)置桥帆。
? ? ? ? 3医增、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致）老虫，除非設(shè)定一個(gè)寬度叶骨。
? ? ? ? 注意：a{display:block;} /*可以把內(nèi)聯(lián)元素 a 轉(zhuǎn)換為 塊狀元素*/
? ? 2. 內(nèi)聯(lián)元素：
? ? ? ? 1、和其他元素都在一行上祈匙；
? ? ? ? 2忽刽、元素的高度、寬度夺欲、行高及頂部和底部邊距不可設(shè)置跪帝；
? ? ? ? 3、元素的寬度就是它包含的文字或圖片的寬度些阅，不可改變伞剑。
? ? ? ? 注意：display:inline 可以轉(zhuǎn)換成內(nèi)聯(lián)元素
? ? 3. 內(nèi)聯(lián)塊狀元素：
? ? ? ? 1、和其他元素都在一行上市埋；
? ? ? ? 2黎泣、元素的高度、寬度缤谎、行高以及頂和底邊距都可設(shè)置聘裁。
? ? ? ? 注意：display:inline-block 可以轉(zhuǎn)換成內(nèi)聯(lián)塊狀
18. CSS 盒模型
? ? 1. 邊框
? ? ? ? div{ border:2px? solid? red;}
? ? ? ? 相當(dāng)于：
? ? ? ? div{
? ? ? ? ? ? border-width:2px;
? ? ? ? ? ? border-style:solid;
? ? ? ? ? ? border-color:red;
? ? ? ? }
? ? ? ? border-style: dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）
? ? ? ? border-color:#888;? ? //前面的井號(hào)不要忘掉。
? ? ? ? border-width: 有 thin | medium | thick（但不是很常用）弓千，最常還是用象素（px）
? ? 2. 上下左右邊框：
? ? ? ? div{border-bottom:1px solid red;} /*top、bottom献起、left和right*/
? ? 3. 高度和寬度
? ? ? ? div{
? ? ? ? ? ? width:200px;? ? /*寬度*/
? ? ? ? ? ? height:30px;? ? /*高度*/
? ? ? ? ? ? padding:20px;? /*元素到邊框的距離洋访，又名為“填充”*/
? ? ? ? ? ? border:1px solid red;
? ? ? ? ? ? margin:10px;? ? /*兩盒子距離，又名為“邊界”*/
? ? ? ? }
19. CSS 布局模型
? ? 元素有三種布局模型：
? ? 1谴餐、流動(dòng)模型（Flow）
? ? ? ? 網(wǎng)頁在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動(dòng)模型來分布網(wǎng)頁內(nèi)容的
? ? ? ? 第一點(diǎn)姻政，塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下岂嗓，塊狀元素的寬度都為100%
? ? ? ? 第二點(diǎn)汁展，在流動(dòng)模型下，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示
? ? 2厌殉、浮動(dòng)模型 (Float)
? ? ? ? 現(xiàn)在我們想讓兩個(gè)塊狀元素并排顯示
? ? ? ? 任何元素在默認(rèn)情況下是不能浮動(dòng)的食绿，但可以用CSS定義為浮動(dòng)，如div公罕、p器紧、table、img等元素都可以被定義為浮動(dòng)
? ? ? ? 舉例：
? ? ? ? ? ? #div1{float:left;}
? ? ? ? ? ? #div2{float:right;}
? ? 3楼眷、層模型（Layer）
? ? ? ? 就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣铲汪，每個(gè)圖層能夠精確定位操作熊尉，但在網(wǎng)頁設(shè)計(jì)領(lǐng)域，由于網(wǎng)頁大小的活動(dòng)性掌腰，層布局沒能受到熱捧
? ? ? ? 層模型有三種形式：
? ? ? ? ? ? 1狰住、絕對(duì)定位(position: absolute)
? ? ? ? ? ? ? ? 需要設(shè)置position:absolute(表示絕對(duì)定位)，這條語句的作用將元素從文檔流中拖出來
? ? ? ? ? ? ? ? 然后使用left齿梁、right催植、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位
? ? ? ? ? ? ? ? 如果不存在這樣的包含塊士飒，則相對(duì)于body元素查邢，即相對(duì)于瀏覽器窗口
? ? ? ? ? ? ? ? 舉例：
? ? ? ? ? ? ? ? ? ? div{
? ? ? ? ? ? ? ? ? ? ? ? xxxx:yyyy;
? ? ? ? ? ? ? ? ? ? ? ? position:absolute;
? ? ? ? ? ? ? ? ? ? ? ? right:100px;
? ? ? ? ? ? ? ? ? ? ? ? top:20px;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? 2、相對(duì)定位(position: relative)
? ? ? ? ? ? ? ? position:relative（表示相對(duì)定位）酵幕，它通過left扰藕、right、top芳撒、bottom屬性確定元素在正常文檔流中的偏移位置
? ? ? ? ? ? ? ? 相對(duì)定位完成的過程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)邓深，
? ? ? ? ? ? ? ? 然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left笔刹、right芥备、top、bottom屬性確定舌菜，偏移前的位置保留不動(dòng)
? ? ? ? ? ? ? ? 舉例：
? ? ? ? ? ? ? ? ? ? #div1{
? ? ? ? ? ? ? ? ? ? ? ? width:200px;
? ? ? ? ? ? ? ? ? ? ? ? height:200px;
? ? ? ? ? ? ? ? ? ? ? ? border:2px red solid;
? ? ? ? ? ? ? ? ? ? ? ? position:relative;
? ? ? ? ? ? ? ? ? ? ? ? left:100px;
? ? ? ? ? ? ? ? ? ? ? ? top:50px;
? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? <div id="div1"></div>
? ? ? ? ? ? 3萌壳、固定定位(position: fixed) 如彈窗廣告
? ? ? ? ? ? ? ? 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)影響
? ? ? ? ? ? ? ? 舉例：
? ? ? ? ? ? ? ? ? ? #div1{
? ? ? ? ? ? ? ? ? ? ? ? width:200px;
? ? ? ? ? ? ? ? ? ? ? ? height:200px;
? ? ? ? ? ? ? ? ? ? ? ? border:2px red solid;
? ? ? ? ? ? ? ? ? ? ? ? position:fixed;
? ? ? ? ? ? ? ? ? ? ? ? left:100px;
? ? ? ? ? ? ? ? ? ? ? ? top:50px;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? Relative與Absolute組合使用：
? ? ? ? ? ? ? ? 1、參照定位的元素必須是相對(duì)定位元素的前輩元素
? ? ? ? ? ? ? ? <div id="box1"><!--參照定位的元素（前輩）-->
? ? ? ? ? ? ? ? ? ? <div id="box2">相對(duì)參照元素進(jìn)行定位</div><!--相對(duì)定位元素-->
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? 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;? ? ? ?
? ? ? ? ? ? ? ? }
20. 代碼簡(jiǎn)寫：
? ? 1. 盒模型：? ?
? ? ? ? margin:10px; 相當(dāng)于 margin:10px 10px 10px 10px; （上右下左順序）
? ? ? ? margin:10px 40px; 相當(dāng)于 margin:10px 40px 10px 40px; （上右 下左順序）
? ? ? ? padding, border和 margin是一致的师枣；
? ? 2. 顏色值：
? ? ? ? p{color:#000000;} 相當(dāng)于 p{color: #000;}
? ? ? ? p{color: #336699;} 相當(dāng)于 p{color: #369;}
? ? 3. 字體：
? ? ? ? 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;}
? ? ? ? 注意：
? ? ? ? ? ? 1谨读、使用這一簡(jiǎn)寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性未指定將自動(dòng)使用默認(rèn)值坛吁。
? ? ? ? ? ? 2劳殖、在縮寫時(shí) font-size 與 line-height 中間要加入“/”斜扛铐尚。
21. 長(zhǎng)度值
? ? 1. 像素
? ? ? ? 像素為什么是相對(duì)單位呢？因?yàn)橄袼刂傅氖秋@示器上的小點(diǎn)（CSS規(guī)范中假設(shè)“90像素=1英寸”）
? ? 2. em
? ? ? ? 假定 font-size設(shè)定 14px哆姻，那么 1em=14px
? ? 3. 百分比
? ? ? ? p{font-size:12px;line-height:130%}
html/css基礎(chǔ)知識(shí)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門泌霍，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人述召，你說我怎么就攤上這事朱转。” “怎么了积暖？”我有些...
- 文/不壞的土叔 我叫張陵藤为，是天一觀的道長(zhǎng)。 經(jīng)常有香客問我夺刑，道長(zhǎng)缅疟，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任遍愿，我火速辦了婚禮存淫，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘错览。我一直安慰自己，他們只是感情好煌往，可當(dāng)我...
- 文/花漫 我一把揭開白布倾哺。 她就那樣靜靜地躺著，像睡著了一般刽脖。 火紅的嫁衣襯著肌膚如雪羞海。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼撬腾，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼螟蝙！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起民傻，我...
- 序言：老撾萬榮一對(duì)情侶失蹤胰默，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后漓踢，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體牵署，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了闸准。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颖对。...
- 正文 年R本政府宣布，位于F島的核電站做葵，受9級(jí)特大地震影響占哟，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜酿矢，卻給世界環(huán)境...
- 文/蒙蒙 一榨乎、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧瘫筐，春花似錦蜜暑、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至之众，卻和暖如春拙毫，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背棺禾。 一陣腳步聲響...
- 正文 我出身青樓缺前，卻偏偏與公主長(zhǎng)得像蛀醉，于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子诡延，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 問答題47 /72 常見瀏覽器兼容性問題與解決方案滞欠？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
- CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識(shí)選擇器（重要！Ｋ亮肌Ｉ歌怠）繼承、特殊性惹恃、層疊夭谤、重要性CSS格式化排版單位和值盒模型浮動(dòng)...
- 本課來自http://www.imooc.com/learn/9請(qǐng)不要用作商業(yè)用途。 HTML5 HTML介紹 H...
- 第一部分 HTML&CSS整理答案 1. 什么是HTML5巫糙？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)朗儒。 注意：講述HT...
- 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
