DIV+CSS學(xué)習(xí)筆記總結(jié)篇

轉(zhuǎn)載請聲明原文鏈接地址

關(guān)注公眾號獲取更多資訊

第一部分 HTML

第一章職業(yè)規(guī)劃和前景

職業(yè)方向規(guī)劃定位：
- web前端開發(fā)工程師
- web網(wǎng)站架構(gòu)師
- 自己創(chuàng)業(yè)
- 轉(zhuǎn)崗管理或其他
web前端開發(fā)的前景展望：
- 未來IT行業(yè)企業(yè)需求最多的人才
- 結(jié)合最新的html5搶占移動端的市場
- 自己創(chuàng)業(yè)做老板
- 隨著互聯(lián)網(wǎng)的普及web開發(fā)成為企業(yè)的寵兒和核心
web職業(yè)發(fā)展目標(biāo)：
第一、梳理知識架構(gòu)
- 負(fù)責(zé)內(nèi)容的HTML
- 負(fù)責(zé)外觀的css（層疊樣式表）
- 負(fù)責(zé)行為的js
- ps切圖
第二闻丑、分解目標(biāo)（起步階段驰坊、提升階段姿锭、成型階段）
- 起步階段：
  - 基本知識的掌握
  - 常用工具的掌握
  - 溝通技巧的掌握（圍繞客戶的需求）
  - 良好的開發(fā)習(xí)慣（加注釋、對齊方式）
- 提升階段：
  - 熟悉掌握HTML基本標(biāo)簽和屬性
  - 熟練掌握css的基本語法和使用
  - 瀏覽器兼容和w3c標(biāo)準(zhǔn)的掌握
  - 結(jié)合html+css+js開始系統(tǒng)項目的開發(fā)
- 成型階段：
  - 精通DIV+CCS布局
  - 精通css樣式表控制html標(biāo)簽
  - 熟悉運用js制作動態(tài)網(wǎng)站的效果
  - 能獨立開發(fā)完成網(wǎng)站

第二章 html基本結(jié)構(gòu)

認(rèn)識HTML：
- html不是一種編程語言扒披，是一種標(biāo)志語言
- 標(biāo)記語言是由一套標(biāo)識標(biāo)簽組成的
- html使用標(biāo)簽來描述網(wǎng)頁
html結(jié)構(gòu)：

<html>
    <head></head>
    <body></body>
</html>

不成對出現(xiàn)的標(biāo)簽
<br> <hr> <meta> <img> <input..> <option..> <link>

HTML 基本標(biāo)簽的講解：
- <html> <head> <body>標(biāo)簽
- <h1>----<h6>僅僅用于標(biāo)題文本，不要為了產(chǎn)生粗體文本使用它們
- <p>標(biāo)簽段落標(biāo)簽
- <strong><b>標(biāo)簽
- 都會讓文字產(chǎn)生加粗效果
  - <strong>用于強調(diào)文本躏吊，強度更深朦肘，表示重要文本--->用于SEO優(yōu)化
  - <b>只是視覺加粗效果--->單純?yōu)榱水a(chǎn)生加粗
<em> <i>標(biāo)簽
- em用于強調(diào)文本
- i只是視覺斜體效果
- <strong>比<em>強調(diào)更強
特殊符號：
- &nbsp; ---->空格
- &gt; --->大于號
- &lt灯抛；--->小于號
- &quot坑赡；--->引號
- &copy;-->版權(quán)號

第三章 html基本標(biāo)簽

HTMl基本標(biāo)簽：
- span標(biāo)簽
  - 對被用來組合文檔中的行內(nèi)元素
  - 注意：span沒有固定的格式表現(xiàn)嫉鲸，當(dāng)對它應(yīng)用樣式時为牍，才會產(chǎn)生視覺上的變化
- <pre>標(biāo)簽
  - 文字的格式按源碼的排版來顯示馅精，我們稱之為預(yù)處理格式
- <a>標(biāo)簽--->他有一個必不可少的屬性 href
  - target屬性：
  - _self(在原來頁面打開)
  - _blank（新窗口打開）
  - _top（打開時忽略所有的框架）
  - _parent（在父窗口中打開）
- 創(chuàng)建錨點和錨鏈接
  - 錨點也是一種超鏈接次慢，是頁面內(nèi)進行跳轉(zhuǎn)的超鏈接
    - 第一步：創(chuàng)建錨點 <a name="錨點名稱"></a>
    - 第二步：使用創(chuàng)建好的錨點名稱 <a href="#錨點名稱">內(nèi)容</a>
- marquee標(biāo)簽
  - 可以創(chuàng)建一個內(nèi)容滾動效果

<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>

direction 表示滾動方向旁涤，取值有（left,right,up,down,默認(rèn)left）
loop表示滾動循環(huán)的次數(shù)翔曲，默認(rèn)為無限循環(huán)

onmouseover=this.stop()  onmouseover=this.start()  scrollamout="1"(滾動速度)

表示當(dāng)鼠標(biāo)移上區(qū)域的時候停止?jié)L動，鼠標(biāo)移開繼續(xù)滾動

第四章 img圖片標(biāo)簽與路徑

圖片標(biāo)簽與路徑：
- 常見圖片格式 jpg png gif
- Gif （只支持全透明）
- Jpeg /jpg
- Png 半/全透明都支持
圖片標(biāo)簽寫法：
- <img src="" alt="" width="" height="" />
圖片四要素：
- src="" 圖片路徑
- alt="" 圖片含義
- width="" 圖片寬度和圖片大小保持一致
- height="" 圖片高度和圖片大小保持一致
- title=""
路徑知識：
- 相對路徑劈愚、絕對路徑：
  - 相對路徑：(Relative Path) 相對于該文件的路徑瞳遍；
  - 絕對路徑：(Absolute Path) 從磁盤出發(fā)的路徑；
- <img src="" …… align="" /> align屬性--設(shè)置圖片與后面文字的位置關(guān)系
  值--top菌羽、bottom掠械、middle、absmiddle注祖、left猾蒂、right
在靜態(tài)頁面中：
- /開頭表示根目錄；
- ./表示當(dāng)前目錄是晨；（斜畫線前面一個點）
- ../上級目錄肚菠；（斜畫線前面兩個點）
- 直接用文件名不帶/也表示同一目錄
- 這些都是相對于當(dāng)前文件的位置來說的，如果用絕對路徑的話就是寫全了罩缴。

第五章三種列表的講解

三種列表的知識講解：
- <ul>無序列表
  - 無序列表是一個沒有順序項目的列表蚊逢，此列表項默認(rèn)粗體圓點進行標(biāo)識

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

<ol>有序列表
- 有序列表也是一列項目，只是列表項目使用的是數(shù)字進行標(biāo)記箫章。有序列表始于 <ol> 標(biāo)簽时捌。每個列表項始于 <li>標(biāo)簽。

<ol>
   <li>內(nèi)容一</li>
   <li>內(nèi)容二</li>
   <li>內(nèi)容三</li>
</ol>

列表符號
- 無序列表-列表符號:
  - type="circle" 空心圓 type=“disc” 實心圓默認(rèn)值 type="square" 方塊符
- 有序列表-列表符號
  - type="A" A B C D
  - type="a" a b c d
  - type="1" 1 2 3 4 默認(rèn)值type="I" I II III type="i" i ii iii
- 列表嵌套
- 無序列表-嵌套

<ul>
 <li>柚子
  <ul>
   <li>沙田柚</li>
   <li>蜜柚</li>
  </ul>
 </li>
 <li>荔枝</li>
 <li>蘋果</li></ul>

有序列表-嵌套

<ol>
 <li>茶
  <ul>
   <li>紅茶</li>
   <li>綠茶</li>
  </ul>
 </li>
 <li>果汁</li>
 <li>牛奶</li></ol>

定義列表
- 定義列表不僅僅是一列項目炉抒，而是項目及其注釋的組合。定義列表以 <dl> 標(biāo)簽開始稚叹。每個定義列表項以 <dt>開始焰薄。每個自定義列表項的定義以 <dd> 開始。

<dl>  
     <dt>pc網(wǎng)頁制作</dt>  
     <dd>學(xué)習(xí)DIV+CSS JS JQ 項目實戰(zhàn)</dd>  
     <dt>手機網(wǎng)頁制作</dt>  
     <dd>手機網(wǎng)頁制作實戰(zhàn)</dd>
</dl>

dd是對dt的解釋
- < dl>< /dl>用來創(chuàng)建一個普通的列表,
- < dt>< /dt>用來創(chuàng)建列表中的上層項目扒袖，
- < dd>< /dd>用來創(chuàng)建列表中最下層項目塞茅，
- < dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對之間。

<dl>
    <dt>中國城市</dt>
    <dd>北京 </dd>
    <dd>上海 </dd>
    <dd>廣州 </dd>
    <dt>美國城市</dt>
    <dd>華盛頓 </dd>
    <dd>芝加哥 </dd>
    <dd>紐約 </dd>
</dl>

dl是definition list的縮寫
dt是definition title的縮寫
dd是definition description的縮寫

list-style屬性具有三個屬性分量：
list-style-position ：設(shè)置列表項圖標(biāo)的位置季率，位于文本內(nèi)或者文本外
list-style-type：設(shè)置列表項圖標(biāo)的類型
list-style-image：使用圖像設(shè)置列表項圖標(biāo)

第六章表單元素(上)

表單標(biāo)簽:
- <form>表單標(biāo)簽
  - <form>表單是一個包含表單元素的區(qū)域野瘦，包括起來的都是表單的內(nèi)容

<form>
 <input type="text"/>
</form>

HTML標(biāo)簽 - Action和確認(rèn)按鈕：
- 當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件飒泻。表單的動作屬性定義了目的文件的文件名鞭光。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進行相關(guān)的處理。

<form action="html.do" method="get">    
        username:  <input type="text" name="user" />   
        <input type="submit" value="提  交" />
</form>

HTML標(biāo)簽 - 隱藏域隱藏標(biāo)簽：
隱藏域在頁面中對于用戶是不可見的惰许，在表單中插入隱藏域的目的在于收集或發(fā)送信息汹买，以利于被處理表單的程序所使用晦毙。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候生巡，隱藏域的信息也被一起發(fā)送到服務(wù)器

<form>        
     <input type="hidden" name="hid" value="value">
</form>

<input>標(biāo)簽的掌握
- 常用type類型：
  - <input type="" name="" value="" />
  - type="text" 單行文本輸入框
  - type="password" 密碼（maxlength=""）
  - type="radio" 單項選擇（checked="checked"）
  - type="checkbox" 多項選擇
  - type="button" 按鈕
  - type="submit" 提交 type="image"圖片提交
  - type="file" 上傳文件
  - type="reset"重置
  - type="hidden" 隱藏
關(guān)于表單中的設(shè)置默認(rèn)值：

<input type="text" name="" value="今天心情不錯" />
<input type="radio" name="" value="" checked="checked">
<input type="checkbox" name="" value="" checked="checked">

<select name="" >
 <option  value=""></option>
 <option  value="" selected="selected"></option>
<select>

textarea沒有默認(rèn)值
<label>標(biāo)簽的使用
- <label></label>
  - label 元素不會向用戶呈現(xiàn)任何特殊效果。
  - 不過，它為鼠標(biāo)用戶改進了可用性遂庄。
  - 如果您在 label 元素內(nèi)點擊文本凛澎，就會觸發(fā)此控件沫换。
  - 就是說讯赏，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上磕谅。
- <label> 標(biāo)簽的for 屬性應(yīng)當(dāng)與相關(guān)元素的 id屬性相同捌浩。
- 例子：（重要---注冊表單--用戶體驗--必做）

<p>單向選擇</p>
<label for="male">男：</label><input type="radio" name="sex" id="male"/>
<label for="nv">女：</label><input type="radio" name="sex"checked="check"/>

第七章表單和表格(下)

表單和表格標(biāo)簽：
- <textarea>文本域標(biāo)簽
- <textarea>標(biāo)簽：
- <textarea></textarea>是文本域標(biāo)簽宏榕，可以在其中插入一段文字內(nèi)容奠支，它有兩個常用屬性rows和cols
注意：
- rows表示這個文本域有多少行
- cols表示這個文本域有多少列
除了這兩個屬性它還有readonly（只讀叉抡，文本域的內(nèi)容無法改變季春，相當(dāng)于協(xié)議）和title（鼠標(biāo)放上提示）
<select>標(biāo)簽的掌握
- 注：當(dāng)提交表單時撵颊，瀏覽器會提交選定的項目逞刷，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數(shù)列表词身，并且在將 <select> 表單數(shù)據(jù)提交給服務(wù)器時包括 name屬性

<form>      
    <select name=""  id="">
         <option value="1">1月</option>  
          <option value="2">2月</option>      
</select>
</form>

常用到的屬性：disabled=“disabled” name="sel" size="2"

<table>表格標(biāo)簽
<table>表格標(biāo)簽：<table>是表格標(biāo)簽，可以用它定義一個表格。

<table border="1">
    <tr>
    <td>姓名</td>
    <td>性別</td>
    </tr>
</table>

注意：<table>的border屬性不能少

<tr> <td>標(biāo)簽的使用
- <tr>行標(biāo)簽：
  - <tr>可以定義表格中的一行洋丐，一個<tr></tr>表示一行。

<table border="1">
<tr>
 <td>姓名</td>
 <td>性別</td>
</tr>

<tr>
 <td>姓名</td>
 <td>性別</td>
</tr>
</table>

<td>單元格標(biāo)簽:
- <td>可以定義表格中的一個單元格，<td></td>表示一個單元格。

<table border="1">
<tr>
<td >姓名</td>
<td>性別</td>
<td>愛好</td>
</tr>
</table>

border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框：
border-collapse:collapse;
colspan左右合并
rowspan上下合并

第一部分總結(jié)：

非可視化標(biāo)簽：head meta style scrpit...
可視化標(biāo)簽：img div span a ul li...
只有可視化標(biāo)簽，才能用css改變它
單標(biāo)簽：meta link base img input br hr
雙標(biāo)簽：html head body div a p span ..ul li ol dl ....
常用可視化標(biāo)簽
- ** div**
  - 一般用它來布局
- a 超鏈接標(biāo)簽
  - href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁地址
  - target屬性：設(shè)置跳轉(zhuǎn)的目標(biāo)
  - 結(jié)論：凡事頁面可以點擊跳轉(zhuǎn)或者表單提交的文字，都用a標(biāo)簽
- img
  - src*屬性用來設(shè)置圖片的url數(shù)據(jù)
  - alt提供給搜索引擎搜索的
  - width
  - height
  - 結(jié)論：顯示圖片
- ul li
  - 列表
  - 結(jié)論：只要將來設(shè)計頁面中有固定樣式的列表，就用ul和li
- table caption tr td (th)
  - 慢慢已經(jīng)被淘汰了被ul li代替
  - 如果是合并豎排的就是合并行（rowspan）
  - 如果是合并橫排的就是合并列（colspan）

HTML部分導(dǎo)圖總結(jié)

HTML5標(biāo)簽集合

第二部分 CSS

第八章 css基礎(chǔ)知識

css基礎(chǔ)知識：
- css樣式表的定義
- css：（Cascading Style Sheets）層疊樣式表枝恋；
分類及位置：內(nèi)部樣式-head區(qū)域style標(biāo)簽里面
- 外部樣式-link調(diào)用
- 內(nèi)聯(lián)樣式-標(biāo)簽元素里面
css內(nèi)的注釋：/*注釋內(nèi)容*/
css樣式表的語法
- CSS規(guī)則由兩個主要的部分構(gòu)成：要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。
- 盒子名或者標(biāo)簽名{屬性:值;}
- CSS中幾種顏色的表示方法
  - 用顏色名表示
    - 有17個預(yù)先確定的顏色，它們是
      - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
        　　olive, orange, purple, red, silver, teal, white, and yellow
- 用十六進制的顏色值表示(紅、綠明垢、藍)
  - #FF0000或者#F00
- 用rgb(r,g,b)函數(shù)表示
  - 如：rgb(255,255,0)
- 用hsl(Hue,Saturation,Lightness)函數(shù)表示（色調(diào)魂务、飽和度鬓照、亮度)
  - 如：hsl(120,100%,100%),色調(diào)0代表紅色号显，120代表綠色，240代表
    藍色
- **用rgba(r,g,b,a)函數(shù)表示 **
  - 其中a表示的是改顏色的透明度次屠，取值范圍是0~1掖桦，其中0代表完全透明
- 用hsla(Hue,Saturation,Lightness,alpha)函數(shù)表示
  - 色調(diào)、飽和度朱监、亮度奋隶、透明度
- 例子

   <div style="position:absolute;top:0px">
        <div style="background-color:gray;">background-color:gray</div>
        <div style="background-color:#F00;">background-color:#F00</div>
        <div style="background-color:#ffff00;">background-color:#ffff00</div>
        <div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
        <div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
        <div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
        <div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
    </div>

內(nèi)部樣式表
- 當(dāng)單個頁面需要設(shè)置樣式時搬味，就應(yīng)該使用內(nèi)部樣式表。
- 使用 <style></style>標(biāo)簽在文檔<head></head>里面定義內(nèi)部樣式表

<head>
 <style type="text/css" >
  p{color:red;}
 </style>
</head>

從外部引入到樣式分為兩種：（注意寫在head標(biāo)簽里面）
當(dāng)樣式需要應(yīng)用于很多頁面時，就需要用到外部樣式表，首先需要創(chuàng)建一個css文件，然后引用到我們的頁面中。
Link樣式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
Html式： <style type="text/css">@import url("css.css");></style>

內(nèi)聯(lián)樣式表（優(yōu)先級高）
- 寫在標(biāo)簽里面的樣式
- 如：<p style="color:red;"></p>
表示給p標(biāo)簽里面的文字顏色設(shè)置為紅色
區(qū)別：外鏈樣式與導(dǎo)入樣式
- link標(biāo)簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等怀大，@import就只能加載CSS了捡多。
- 加載的順序的區(qū)別，link加載的css時，是一種并行(沒有嘗試是否是這樣)加載CSS方式，而@impor則在整個頁面加載完成后才加載。
- 兼容性的區(qū)別，因@import``CSS2.1才特有的，所以對于不兼容CSS2.1的瀏覽器來說，無效同衣。
- 在樣式控制上(比如動態(tài)改變網(wǎng)頁的布局時,使用javascript操作DOM)的區(qū)別前弯，此時@import就無能為力了违帆。

樣式的優(yōu)先級補充
- 相同權(quán)值情況下渊抄，CSS樣式的優(yōu)先級總結(jié)來說，就是——就近原則（離被設(shè)置元素越近優(yōu)先級別越高）：
  - 內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部） > 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）
權(quán)值不同時，瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，哪種樣式權(quán)值高就使用哪種樣式
層疊優(yōu)先級是:
瀏覽器缺省< 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式
其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器
派生選擇器以前叫上下文選擇器攀涵，所以完整的層疊優(yōu)先級是:
瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器 < 外部樣式表ID派生選擇器< 內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式...共12個優(yōu)先級
另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個并以空格分開，其優(yōu)先級順序為：
- 一個元素同時應(yīng)用多個class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！

第九章 css選擇器(上)

css選擇器：
- class類選擇器可以重復(fù)利用
- id選擇器唯一
標(biāo)簽選擇器
- 什么是選擇器：css選擇器就是要改變樣式的對象
選擇器{屬性:值;屬性:值;}
標(biāo)簽選擇器：頁面中所有的標(biāo)簽都是一個選擇器 p{color:red;}
ID選擇器
- 選擇id命名的元素以 # 開頭 #p1{color:#0f0;}
類選擇器
- class選擇器楷兽，選擇clas命名的元素以.開頭 .first{color:#00f;}
css代碼寫完后上線前要經(jīng)過壓縮處理
本地和服務(wù)器分兩個css版本（備份）
壓縮后注釋都清除，空間體積減少
群組選擇器
- 選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}
包含選擇器
- 選擇某元素的后代元素，也稱后代選擇器顽染，父類與子類間以空格隔開p
  - span{color:red;}
屬性選擇器
- 選擇包含某一屬性的元素
- a[title]{color:red;} 選擇包含title的a標(biāo)簽
- a[title][href]{color:red;} 選擇包含title和href的a標(biāo)簽
> + 選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當(dāng)于包含元素）
- p > span{color:red;}
相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素
- p + span{color:red;}

第十章 css選擇器(下)

<a>偽類選擇器
- a:link {color:#FF0000;} /* 未訪問的鏈接 */ （只用于a標(biāo)簽）
- a:visited {color:#00FF00;} /* 已訪問的鏈接 */ （只用于a標(biāo)簽）
- a:hover {color:#FF00FF;}/* 鼠標(biāo)移動到鏈接上
- */（可和其他標(biāo)簽結(jié)合一起用）
- a:active {color:#0000FF;} /* 選定的鏈接 */
- 注意
  - 偽類選擇器的排序很重要唧垦，a:link a:visited a:hover a:active，記作lvha
輸入偽類選擇器（針對表單）
- input:focus{color:red;} /* 鍵盤輸入焦點 */
其他偽類選擇器
- p:first-child{color:red;} /* 第一個p */
- :before 在元素之前添加內(nèi)容褒搔。
- :after 在元素之后添加內(nèi)容惧辈。
css優(yōu)先規(guī)則
- 內(nèi)聯(lián)樣式表-> ID 選擇器—> Class 類選擇器->標(biāo)簽選擇器

第十一章背景屬性

背景屬性：
- 背景的添加：
- 背景顏色的添加:
  - background:red;
  - backgronnd-color:red;
- 背景圖片的添加：
  - background:url(“images/1.jpg”);
  - backgronnd-image:url(“images/1.jpg”);
- 背景的平鋪
- 什么是平鋪？平鋪就是圖片是否重復(fù)出現(xiàn)
  - 不平鋪：background-repeat:no-repeat;
  - 水平方向平鋪：background-repeat:repeat-x;
  - 垂直方向平鋪：background-repeat:repeat-y;
  - 完全平鋪：默認(rèn)為完全平鋪
- 背景圖片的定位
  - 背景圖片的定位就是可以設(shè)置顯示背景圖片的位置，通過屬性background-position來實現(xiàn)
  - background-position的取值可為英文單詞或者數(shù)值和百分值芒澜。
  - background-positon的英文單詞取值
  - top left
  - top center
  - top right
  - center left
  - center center
  - center right
  - bottom left
  - bottom center
  - ottom right
- background-positon的數(shù)值取值
  - background-position:x y;
- positon的百分值取值
  - background-position:x% y%;
- 背景圖片的大小
  - 背景圖片的大小可以通過屬性background-size來設(shè)置background-size的取值可為數(shù)值和百分值誊酌。
- background-size的數(shù)值取值
  - background-size:x y;
- background-size的數(shù)值取值
  - background-size:x% y%;
- 背景圖片的滾動
  - 背景圖片是否隨著內(nèi)容的滾動而滾動由background-attachment設(shè)置
  - background-attachment:fixed; 固定，不隨內(nèi)容的滾動而滾動
  - background-attachment:scroll; 滾動，隨內(nèi)容的滾動而滾動

第十二章文字文本屬性

css文字文本屬性：
- 文字屬性
  - color:red; 文字顏色
  - font-size:12px; 文字大小
  - font-weight:“bold” 文字粗細(xì)(bold/normal)
  - font-family:“宋體” 文字字體
  - font-variant:small-caps小寫字母以大寫字母顯示

文本屬性
- text-align:center; 文本對齊(right/left/center)
- line-height:10px; 行間距(可通過它實現(xiàn)文本的垂直居中)
- text-indent:20px; 首行縮進
- text-decoration:none;
  - 文本線(none/underline/overline/line-through)
- letter-spacing: 字間距

第十三章盒子模型

盒子模型
- 盒子模型就是一個有高度和寬度的矩形區(qū)域
- 所有html標(biāo)簽都是盒子模型
- div標(biāo)簽自定義盒子模型
所有的標(biāo)簽都是盒子模型
- class和id的主要差別是：class用于元素組（類似的元素赡勘，或者可以理解為某一類元素）毙替，而id用于標(biāo)識單獨的唯一的元素。
盒子模型的組成
- 盒子模型組成部分：
  - 自身內(nèi)容：width践樱、height 寬高
  - 內(nèi)邊距： padding
  - 盒子邊框： border 邊框線
  - 與其他盒子距離： margin外邊距
  - 內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
border 邊框
- 常見寫法 border:1px solid #f00;
單獨屬性：
border-width:
border-style:
- dotted 點狀虛線
- dashed（虛線）
- solid（實線）
- double（雙實線）
border-color (顏色)
padding 內(nèi)邊距
- 值：像素/厘米等長度單位厂画、百分比
  - padding:10px; 上下左右
  - padding:10px 10px; 上下左右
  - padding:10px 10px 10px; 上左右下
  - padding:10px 10px 10px 10px; 上右下左（設(shè)置4個點-->順時針方向）
單獨屬性：
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
當(dāng)設(shè)置內(nèi)邊距的時候會把盒子撐大拷邢，為了保持盒子原來的大小袱院，應(yīng)該高度和寬度進行減小，根據(jù)width和height減小
margin 外邊距
- 值：與padding相同
- 單獨屬性：與padding相同
外邊距合并：兩個盒子同時設(shè)置了外邊距瞭稼，會進行一個外邊距合并

補充盒子模型內(nèi)容

標(biāo)準(zhǔn)盒子模型
盒子模型是css中一個重要的概念忽洛，理解了盒子模型才能更好的排版。其實盒子模型有兩種环肘，分別是 ie盒子模型和標(biāo)準(zhǔn) w3c 盒子模型欲虚。他們對盒子模型的解釋各不相同，先來看看我們熟知的標(biāo)準(zhǔn)盒子模型

從上圖可以看到標(biāo)準(zhǔn) w3c 盒子模型的范圍包括 margin悔雹、border复哆、padding、content腌零，并且 content部分不包含其他部分
** IE盒子模型**

從上圖可以看到 ie盒子模型的范圍也包括 margin梯找、border、padding益涧、content
和標(biāo)準(zhǔn) w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding
IE盒子模型width = padding+border+內(nèi)容
標(biāo)準(zhǔn)盒子模型 = 內(nèi)容的寬度（不包含border+padding）
例：
一個盒子的 margin為 20px锈锤，border 為 1px，padding為 10px闲询，content 的寬為 200px牙咏、高為 50px，假如用標(biāo)準(zhǔn) w3c 盒子模型解釋嘹裂，那么這個盒子需要占據(jù)的位置為：寬 20*2+1*2+10*2+200=262px妄壶、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px寄狼、高 1*2+10*2+50=72px丁寄；假如用ie 盒子模型，那么這個盒子需要占據(jù)的位置為：寬 20*2+200=240px泊愧、高 20*2+50=70px伊磺，盒子的實際大小為：寬 200px、高 50px
那應(yīng)該選擇哪中盒子模型呢删咱？當(dāng)然是“標(biāo)準(zhǔn) w3c 盒子模型”了屑埋。怎么樣才算是選擇了“標(biāo)準(zhǔn) w3c盒子模型”呢？很簡單痰滋，就是在網(wǎng)頁的頂部加上 doctype 聲明摘能。
假如不加doctype 聲明续崖，那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁，即 ie瀏覽器會采用 ie 盒子模型去解釋你的盒子团搞，而 ff會采用標(biāo)準(zhǔn)w3c 盒子模型解釋你的盒子严望，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。
反之逻恐，假如加上了 doctype 聲明像吻，那么所有瀏覽器都會采用標(biāo)準(zhǔn) w3c盒子模型去解釋你的盒子，網(wǎng)頁就能在各個瀏覽器中顯示一致了复隆。

用 jquery 做的例子來證實一下

<html>
<head>
<title>你用的盒子模型是拨匆？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

上面的代碼沒有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型挽拂，在 ff 瀏覽器中顯示“標(biāo)準(zhǔn)w3c 盒子模型”惭每。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是標(biāo)準(zhǔn)w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標(biāo)準(zhǔn)w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

代碼2 與代碼1 唯一的不同的就是頂部加了 doctype聲明。在所有瀏覽器中都顯示“標(biāo)準(zhǔn) w3c盒子模型”

所以為了讓網(wǎng)頁能兼容各個瀏覽器轻局，讓我們用標(biāo)準(zhǔn) w3c 盒子模型
擴展
- 學(xué)會使用box-sizing布局

第十四章塊元素、行元素與溢出

基本概念
- 塊級元素：默認(rèn)情況下獨占一行的元素样刷，可控制寬高仑扑、上下邊距；
- 行內(nèi)元素：默認(rèn)情況下一行可以擺放多個的元素置鼻，不可控制寬高和上下邊距
行塊轉(zhuǎn)換
- display:none; 不顯示
- display:block; 變成塊級元素
- display:inline; 變成行級元素
- display:inline-block; 以塊級元素樣式展示镇饮，以行級元素樣式排列
溢出
- overflow:hidden; 溢出隱藏
- overflow:scroll; 內(nèi)容會被修剪，瀏覽器會顯示滾動條
- overflow:auto; 如果內(nèi)容被修剪箕母，則產(chǎn)生滾動條
文本不換行：white-space:nowrap;
長單詞換行：word-wrap:break-word;

行內(nèi)元素和快級元素小結(jié)
一储藐、塊級元素：block element
- 每個塊級元素默認(rèn)占一行高度，一行內(nèi)添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）嘶是。兩個塊級元素連續(xù)編輯時钙勃，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內(nèi)元素聂喇；
- 塊級元素一般作為容器出現(xiàn)辖源，用來組織結(jié)構(gòu)，但并不全是如此希太。有些塊級元素克饶，如只能包含塊級元素。
- DIV 是最常用的塊級元素誊辉，元素樣式的display:block都是塊級元素矾湃。它們總是以一個塊的形式表現(xiàn)出來，并且跟同級的兄弟塊依次豎直排列堕澄，左右撐滿邀跃。
二霉咨、行內(nèi)元素：inline element
- 也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等坞嘀；行內(nèi)元素一般都是基于語義級(semantic)的基本元素躯护，只能容納文本或其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素 “a”丽涩。比如 SPAN元素棺滞，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素矢渊，各個字母之間橫向排列继准，到最右端自動折行。
三矮男、block（塊）元素的特點:
- ①移必、總是在新行上開始；
- ②毡鉴、高度崔泵，行高以及外邊距和內(nèi)邊距都可控制；
- ③猪瞬、寬度缺省是它的容器的100%憎瘸，除非設(shè)定一個寬度。
- ④陈瘦、它可以容納內(nèi)聯(lián)元素和其他塊元素
四幌甘、inline元素的特點
- ①、和其他元素都在一行上痊项；
- ②锅风、高，行高及外邊距和內(nèi)邊距不可改變鞍泉；
- ③皱埠、寬度就是它的文字或圖片的寬度，不可改變
- ④咖驮、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
對行內(nèi)元素漱逸，需要注意如下:
- 設(shè)置寬度width 無效雷客。設(shè)置高度height無效杂穷，可以通過line-height來設(shè)置。設(shè)置margin
- 只有左右margin有效脑漫，上下無效诀黍。
- 設(shè)置padding只有左右padding有效袋坑，上下則無效。注意元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的枣宫。
五婆誓、常見的塊狀元素
- address – 地址
- blockquote – 塊引用
- center – 舉中對齊塊
- dir – 目錄列表
- div – 常用塊級容易，也是CSS layout的主要標(biāo)簽
- dl – 定義列表
- fieldset – form控制組
- form – 交互表單
- h1 – 大標(biāo)題
- h2 – 副標(biāo)題
- h3 – 3級標(biāo)題
- h4 – 4級標(biāo)題
- h5 – 5級標(biāo)題
- h6 – 6級標(biāo)題
- hr – 水平分隔線
- isindex – input prompt
- menu – 菜單列表
- noframes – frames可選內(nèi)容也颤，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
- noscript – 可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）
- ol – 有序表單
- p – 段落
- pre – 格式化文本
- table – 表格
- ul – 無序列表
六洋幻、常見的內(nèi)聯(lián)元素
- a – 錨點
- abbr – 縮寫
- acronym – 首字
- b – 粗體(不推薦)
- bdo – bidi override
- big – 大字體
- br – 換行
- cite – 引用
- code – 計算機代碼(在引用源碼的時候需要)
- dfn – 定義字段
- em – 強調(diào)
- font – 字體設(shè)定(不推薦)
- i – 斜體
- img – 圖片
- input – 輸入框
- kbd – 定義鍵盤文本
- label – 表格標(biāo)簽
- q – 短引用
- s – 中劃線(不推薦)
- samp – 定義范例計算機代碼
- select – 項目選擇
- small – 小字體文本
- span – 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
- strike – 中劃線
- strong – 粗體強調(diào)
- sub – 下標(biāo)
- sup – 上標(biāo)
- textarea – 多行文本輸入框
- tt – 電傳文本
- u – 下劃線
七翅娶，可變元素
- 可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素文留。
- applet - java applet
- button - 按鈕
- del- 刪除文本
- iframe - inline frame
- ins - 插入的文本
- map - 圖片區(qū)塊(map)
- object - object對象
- script - 客戶端腳本
八、行內(nèi)元素與塊級元素有什么不同
- 區(qū)別一：
  - 塊級：塊級元素會獨占一行竭沫，默認(rèn)情況下寬度自動填滿其父元素寬度
  - 行內(nèi)：行內(nèi)元素不會獨占一行燥翅，相鄰的行內(nèi)元素會排在同一行。其寬度隨內(nèi)容的變化而變化蜕提。
- 區(qū)別二：
  - 塊級：塊級元素可以設(shè)置寬高
  - 行內(nèi)：行內(nèi)元素不可以設(shè)置寬高
- 區(qū)別三：
  - 塊級：塊級元素可以設(shè)置margin森书，padding
  - 行內(nèi)：行內(nèi)元素水平方向的margin-left; margin-right;
- padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效谎势。
- 區(qū)別四：
- 塊級：display:block;
- 行內(nèi)：display:inline;
替換元素有如下：（和img一樣的設(shè)置方法）
<img>凛膏、<input>、<textarea>脏榆、<select>
<object>都是替換元素猖毫，這些元素都沒有實際的內(nèi)容
可以通過修改display屬性來切換塊級元素和行內(nèi)元素

第十五章定位

static靜態(tài)定位（不對它的位置進行改變，在哪里就在那里）
- 默認(rèn)值姐霍。沒有定位鄙麦，元素出現(xiàn)在正常的流中（忽略 top,bottom, left, right 或者 z-index 聲明）典唇。
fixed固定定位（參照物--瀏覽器窗口）---做彈窗廣告用到
- 生成固定定位的元素镊折，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right"以及 "bottom"屬性進行規(guī)定介衔。
relative（相對定位）（參照物以他本身）
- 生成相對定位的元素恨胚，相對于其正常位置進行定位。
absolute（絕對定位）(除了static都可以炎咖，找到參照物-->與它最近的已經(jīng)有定位的父元素進行定位)
生成絕對定位的元素赃泡，相對于 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定
z-index
- z-index 屬性設(shè)置元素的堆疊順序乘盼。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面升熊。
- 定位的基本思想: 它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素绸栅、另一個元素甚至瀏覽器窗口本身的位置级野。
一切皆為框
- 塊級元素: div、h1或p元素即：顯示為一塊內(nèi)容稱之為 “塊框“ ;
- 行內(nèi)元素: span,strong,a等元素即：內(nèi)容顯示在行中稱 "行內(nèi)框";
- 使用display屬性改變成框的類型即：display:block; 讓行內(nèi)元素設(shè)置為塊級元素粹胯，display:none; 沒有框
相對定位：
- 如果對一個元素進行相對定位蓖柔，它將出現(xiàn)在它所在的位置上辰企。
- 通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進行移動
- .adv_relative { position: relative; left: 30px; top: 20px; }
絕對定位：
- 元素的位置相對于最近的已定位祖先元素况鸣，如果元素沒有已定位的祖先元素牢贸，它的位置相對于最初的包含塊。 .adv_absolute { position: absolute; left: 30px; top: 20px; }

第十六章框架

frameset框架：
- <frameset> ---- 用來定義一個框架镐捧；雙標(biāo)簽
  不能和 <body> 一起使用
rows潜索、cols屬性
- rows 定義行表示框架有多少行（取值 px/%/ * ）
- cols 定義列表示框架有多少列（取值px/ %/ * ）
frame子框架
- <frame> ---- 表示框架中的某一個部分；單標(biāo)簽愤估，要跟結(jié)束標(biāo)志
  - src 顯示的網(wǎng)頁的路徑
  - name 框架名
  - frameborder 邊框線（取值 0 / 1）
<noframes>屬性
<noframes> 提供不支持框架的瀏覽器顯示body的內(nèi)容帮辟；雙標(biāo)簽

<frameset>
     <frame  src=“”  />
     <frame  src=“” />
     <frame  src=“” />
     <noframes>
      <body>內(nèi)容</body>
     </noframes>
</frameset>

<iframe>內(nèi)聯(lián)框架
- iframe元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
- 允許和 body 一起使用
- width 寬（取值 px / %）
- height 高（取值 px / %）
- name 框架名
- frameborder 邊框線（取值 0 / 1）
- src 顯示的網(wǎng)頁的路徑

第十七章 css高級屬性

opacity透明屬性
opacity
- 對于IE6/7/，使用filter:alpha(opacity:值;) 值為0-100
- 對于Webkit玩焰，Opera由驹，Firefox，IE9+昔园，使用opacity:值; 值為0-1
- 對于早期火狐蔓榄，使用-moz-opacity:值; 值為0-1
- 所以寫透明屬性時，一般寫法是

 {  
    opacity:0.5;
   filter:alpha(opacity：50);/*0-100*/
   -moz-opacity:0.5;    /*取值0-1*/-->針對早起版本的火狐兼容問題的解決
}

border-radius圓角邊框?qū)傩?/p>
- 向 div 元素添加圓角邊框
  - border-radius:10px;
box-shadow陰影屬性
- box-shadow屬性向框添加陰影效果,后面跟4個參數(shù)默刚。
- box-shadow:0px 0px 10px #000;
<embed>屬性
- 是HTML5中新增的標(biāo)簽,媒體嵌入插件標(biāo)簽甥郑，可以通過<embed>插入音頻或視頻
- <embed src=“media/music.mp3” />
- 格式.mid .wav .mp3等

CSS部分導(dǎo)圖總結(jié)

原文件下載地址

css選擇符(復(fù)制圖片地址到瀏覽器打開放大即可清晰查看)

css選擇符

css常見簡寫

css簡寫速查

HTML+CSS+JavaScript學(xué)習(xí)導(dǎo)圖筆記(復(fù)制圖片地址到瀏覽器打開放大即可清晰查看)

HTML+CSS+JavaScript學(xué)習(xí)導(dǎo)圖筆記
前端詳細(xì)學(xué)習(xí)路線(復(fù)制圖片地址到瀏覽器打開放大即可清晰查看)
- 前端學(xué)習(xí)路線

第三部分附錄

附錄一 DIV命名規(guī)范

企業(yè)DIV使用頻率高的命名方法
網(wǎng)頁內(nèi)容類
- 標(biāo)題: title
  - 摘要: summary
  - 箭頭： arrow
  - 商標(biāo)： label
  - 網(wǎng)站標(biāo)志： logo
  - 轉(zhuǎn)角/圓角：corner
  - 橫幅廣告： banner
  - 子菜單： subMenu
  - 搜索： search
  - 搜索框： searchBox
  - 登錄： login
  - 登錄條：loginbar
  - 工具條： toolbar
  - 下拉： drop
  - 標(biāo)簽頁： tab
  - 當(dāng)前的： current
  - 列表： list
  - 滾動： scroll
  - 服務(wù)： service
  - 提示信息： msg
  - 熱點：hot
  - 新聞： news
  - 小技巧： tips
  - 下載： download
  - 欄目標(biāo)題： title
  - 熱點： hot
  - 加入：joinus
  - 注冊： regsiter
  - 指南： guide
  - 友情鏈接： friendlink
  - 狀態(tài)： status
  - 版權(quán)： copyright
  - 按鈕： btn
  - 合作伙伴： partner
  - 投票： vote
  - 左右中：left right center
- 注釋的寫法: /* Footer */ 內(nèi)容區(qū)/* End Footer */
id的命名:
- 頁面結(jié)構(gòu)
  - 容器: container
  - 頁頭：header
  - 內(nèi)容：content/container
  - 頁面主體：main
  - 頁尾：footer
  - 導(dǎo)航：nav
  - 側(cè)欄：sidebar
  - 欄目：column
  - 頁面外圍控制整體布局寬度：wrapper
  - 左右中：left right center
- 導(dǎo)航
  - 導(dǎo)航：nav
  - 主導(dǎo)航：mainbav
  - 子導(dǎo)航：subnav
  - 頂導(dǎo)航：topnav
  - 邊導(dǎo)航：sidebar
  - 左導(dǎo)航：leftsidebar
  - 右導(dǎo)航：rightsidebar
  - 菜單：menu
  - 子菜單：submenu
  - 標(biāo)題: title
  - 摘要: summary
- 功能
  - 標(biāo)志：logo
  - 廣告：banner
  - 登陸：login
  - 登錄條：loginbar
  - 注冊：regsiter
  - 搜索：search
  - 功能區(qū)：shop
  - 標(biāo)題：title
  - 加入：joinus
  - 狀態(tài)：status
  - 按鈕：btn
  - 滾動：scroll
  - 標(biāo)簽頁：tab
  - 文章列表：list
  - 提示信息：msg
  - 當(dāng)前的:current
  - 小技巧：tips
  - 圖標(biāo): icon
  - 注釋：note
  - 指南：guild
  - 服務(wù)：service
  - 熱點：hot
  - 新聞：news
  - 下載：download
  - 投票：vote
  - 合作伙伴：partner
  - 友情鏈接：link
  - 版權(quán)：copyright
- class的命名:
- 顏色:使用顏色的名稱或者16進制代碼,如
  - .red { color: red; }
  - .f60 { color: #f60; }
  - .ff8600 { color: #ff8600; }
- 字體大小,直接使用"font+字體大小"作為名稱,如
  - .font12px { font-size: 12px; }
  - .font9px {font-size: 9pt; }
- 對齊樣式,使用對齊目標(biāo)的英文名稱,如
  - .left { float:left; }
  - .bottom { float:bottom; }
- 標(biāo)題欄樣式,使用"類別+功能"的方式命名,如
  - .barnews { }
  - .barproduct { }
- 注意事項::
  - 一律小寫;
  - 盡量用英文;
  - 不加中杠和下劃線;
  - 盡量不縮寫，除非一看就明白的單詞.
推薦的 CSS 書寫順序：
- 顯示屬性
  - display
  - list-style
  - position
  - float
  - clear
- 自身屬性
  - width
  - height
  - margin
  - padding
  - border
  - background
- 文本屬性
  - color
  - font
  - text-decoration
  - text-align
  - vertical-align
  - white-space
  - other text
  - content

附錄二 CSS精靈

CSS精靈原理以及應(yīng)用
- CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中荤西，從而減少你的網(wǎng)站的HTTP請求數(shù)量澜搅。
  - 該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標(biāo)簽變得更加復(fù)雜了邪锌，圖片是在CSS中定義勉躺，而非<img>標(biāo)簽。
一個簡單的例子：
- 一張圖片作出一個按鈕的三個狀態(tài)
- 一個鏈接用CSS做成按鈕的樣式觅丰，我們可以使用同一張圖片饵溅，完成按鈕的三個狀態(tài)，a:link妇萄，a:hover蜕企，a:active <a class="button" href="#">鏈接</a>
- 加入右側(cè)的圖片為：200px 65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通冠句、鼠標(biāo)滑過轻掩、鼠標(biāo)點擊的狀態(tài)。則可以使用CSS進行定義懦底。

    a {
        display:block; 
        width:200px; 
        height:65px; 
        line-height:65px; /*定義狀態(tài)*/
        text-indent:-2015px; /*隱藏文字*/
        background-image:url(button.png); /*定義背景圖片*/
        background-position:0 0;
        /*定義鏈接的普通狀態(tài)唇牧，此時圖像顯示的是頂上的部分*/
    }
    
    a:hover {
        background-position:0 -66px;
        /*定義鏈接的滑過狀態(tài)，此時顯示的為中間部分，向下取負(fù)值*/
    }
    a:active {
        background-position:0 -132px;                      
        /*定 義鏈接的普通狀態(tài)奋构，此時顯示的是底部的部分壳影，向下取負(fù)值*/
    }

更多的CSS雪碧，圖片更復(fù)雜弥臼，背景定位更精確宴咧。可能會用到大量的數(shù)值
- 如：background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位
優(yōu)點：
- 減少加載網(wǎng)頁圖片時對服務(wù)器的請求次數(shù)
- 可以合并多數(shù)背景圖片和小圖標(biāo)径缅，方便在任何位置使用掺栅，這樣不同位置的請求只需要調(diào)用一個圖片，從而減少對服務(wù)器的請求次數(shù)纳猪，降低服務(wù)器壓力氧卧，同時提高了頁面的加載速度，節(jié)約服務(wù)器的流量氏堤。
- 提高頁面的加載速度
- sprite技術(shù)的其中一個好處是圖片的加載時間(在有許多 sprite 時沙绝，單張圖片的加載時間)。由所需圖片拼成的一張 GIF圖片的尺寸會明顯小于所有圖片拼合前的大小鼠锈。單張的 GIF只有相關(guān)的一個色表闪檬，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小购笆。因此粗悯，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小同欠。
- 減少鼠標(biāo)滑過的一些bug
- IE6不會主動預(yù)加載鼠標(biāo)滑過即a:hover中的背景圖片样傍，所以，如果使用多張圖片铺遂，鼠標(biāo)滑過會出現(xiàn)閃白的現(xiàn)象衫哥。使用CSS雪碧，由于一張圖片即可娃循，所以不會出現(xiàn)這種現(xiàn)象炕檩。
不足：
- CSS雪碧的最大問題是內(nèi)存使用
- 影響瀏覽器的縮放功能
- 拼圖維護比較麻煩
- 使CSS的編寫變得困難
- CSS 雪碧調(diào)用的圖片不能被打印
- 錯誤得使用 Sprites 影響可訪問性

附錄三一些tips解決方案

頁面優(yōu)化實踐

從下面的幾個方面可以進行頁面的優(yōu)化：
- 減少請求數(shù)
- 圖片合并
- CSS文件合并
- 減少內(nèi)聯(lián)樣式
- 避免在 CSS中使用 import
- 減少文件大小
- 選擇適合的圖片格式
- 圖片壓縮
- CSS 值縮寫（Shorthand Property)
- 文件壓縮
- 頁面性能
- 調(diào)整文件加載順序
- 減少標(biāo)簽數(shù)量
- 調(diào)整選擇器長度
- 盡量使用CSS 制作顯示表現(xiàn)
- 增強代碼可讀性與可維護性
- 規(guī)范化
- 語義化
- 模塊化

寫DIV+CSS 的一些常識

不要使用過小的圖片做背景平鋪
- 這就是為何很多人都不用 1px 的原因斗蒋，這才知曉捌斧。寬高 1px 的圖片平鋪出一個寬高 200px 的區(qū)域，需要 200200=40, 000 次泉沾，占用資源
無邊框
- 推薦的寫法是 border:none;捞蚂，哈哈，我一直在用這個跷究。 border:0; 只是定義邊框?qū)挾葹榱阈昭福吙驑邮健㈩伾€是會被瀏覽器解析，占用資源
慎用通配符
- 所謂通配符丁存，就是將CSS 中的所有標(biāo)簽均初始化肩杈，不管用的不用的，過時的先進的解寝，一視同仁扩然，這樣，大大的占用資源聋伦。要有選擇的初始化標(biāo)簽夫偶。
CSS的十六進制顏色代碼縮寫
- 習(xí)慣了縮寫及小寫，這才知道觉增，原來不是推薦的寫法兵拢，為的是減少解析所占用的資源。但同時會增加文件體積逾礁。孰優(yōu)孰劣说铃，有待仔細(xì)考證。
樣式放頭上嘹履，腳本放腳下截汪。不內(nèi)嵌，只外鏈
堅決不用 CSS表達式
使用引用樣式表植捎，而不是通過@import 導(dǎo)入衙解。
一般來說，PNG比 GIF 要小焰枢，小得多蚓峦。再者，GIF 中有多少顏色是被浪費的济锄，很值得優(yōu)化暑椰。
千萬不要在 HTML中縮放圖片，一者不好看荐绝，二者占資源一汽。
正文字體最好用偶數(shù)
- 12px、14px低滩、16px召夹，效果非常好。特例恕沫，15px监憎。
block、ul婶溯、ol等上下留出至少一倍行距鲸阔，左側(cè)至少兩倍行距偷霉，右側(cè)隨意。
段落之間褐筛，至少要有一倍行距
強行指定某些元素的 line-height类少，正文 1.6倍于文字大小，標(biāo)題1.3倍渔扎。
中文標(biāo)點用全角
- 英文夾雜在中文中瞒滴，左右空格，半角赞警。
中文字體的粗體和斜體妓忍，遠離較好
[建議] HTML 標(biāo)簽的使用應(yīng)該遵循標(biāo)簽的語義
- 下面是常見標(biāo)簽語義
  - p - 段落
  - h1,h2,h3,h4,h5,h6 - 層級標(biāo)題
  - strong,em - 強調(diào)
  - ins - 插入
  - del - 刪除
  - abbr- 縮寫
  - code - 代碼標(biāo)識
  - cite - 引述來源作品的標(biāo)題
  - q - 引用
  - blockquote - 一段或長篇引用
  - ul - 無序列表
  - ol - 有序列表
  - dl,dt,dd - 定義列表

常用代碼片段

雅虎工程師提供的CSS初始化示例代碼【僅供參考】
- 可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯誤愧旦。

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
    margin:0; padding:0; 
}
body {
    background:#fff; 
    color:#555; 
    font-size:14px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
    font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-weight:normal; 
    font-size:100%; 
}

address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
    font-style:normal; 
    font-weight:normal;
}
a { 
    color:#555; 
    text-decoration:none; 
}
a:hover { 
    text-decoration:underline; 
}
img {
    border:none;
}
ol,ul,li { 
    list-style:none; 
}
input, 
textarea, 
select, 
button { 
    font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
    border-collapse:collapse; 
}
html {
    overflow-y: scroll;
} 
.clearfix:after {
    content: "."; 
    display: block; 
    height:0; 
    clear:both; 
    visibility: hidden;
}
.clearfix { 
    *zoom:1; 
}

現(xiàn)代瀏覽器cssreset解決方案【推薦使用這個】
- normalize.css
mobile meta標(biāo)簽

<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

表格不被撐開

table-layout: fixed; word-break: break-all;;border-collapse: collapse

不設(shè)寬高居中

<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
      <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
            <input type=”button” value=”item1″ />
      </span>
</div>

透明度的兼容代碼

filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/

文本溢出的幾種處理方法
簡單隱藏

div.hide{overflow:hidden}

使用滾動條

div.scroll{overflow:scroll}

簡單裁切

div.clip{
    border:1px solid;
    overflow:hidden;/*超出隱藏*/
    white-space:nowrap;/*強制在一行顯示*/
    text-overflow:clip;/*裁切*/
}

超出部分省略號

div.elli{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;/*使用省略號*/
}

清除浮動的幾種方法
- 方法一：投機取巧法 -- 不推薦
- 直接一個放到當(dāng)作最后一個子標(biāo)簽放到父標(biāo)簽?zāi)莾菏榔剩朔椒▽以嚥凰嫒菪詮?/li>
方法二：overflow + zoom方法 --不推薦
.fix{overflow:hidden; zoom:1;}
- 此方法優(yōu)點在于代碼簡潔笤虫，涵蓋所有瀏覽器
方法三：after + zoom方法 -推薦--此方法可以說是綜合起來最好的方法了
- clearfix只應(yīng)用在包含浮動子元素的父級元素上

.clearfix{zoom:1;}
.clearfix:after{
     display:block; 
     content:'clear'; 
     clear:both;
     line-height:0; 
     visibility:hidden;
}

方法四在方法三的基礎(chǔ)上的最優(yōu)雅的做法【推薦】

.clearfix:after,
.clearfix:before {/*before 是為了防止瀏覽器頂部空白的崩潰*/   
     content: " ";   
     display: table;
}
.clearfix:after {    
    clear: both;
}

清除浮動的原理是觸發(fā)BFC旁瘫，這里只有clear:both起清除浮動作用，其他的line-height:0; visibility:hidden;都是為了隱藏生的內(nèi)容需要的

拓展閱讀
- CSS中的浮動和清除浮動
- 實用的60個CSS代碼片段

一些總結(jié)

自動繼承屬性：
- color
- font
- text-align
- list-style
  ...
非繼承屬性：
- background
- border
- position
  ...
具有破壞性的元素：
- float
- display:none;
- position:absoblute/fixed/sticky;
具有包裹性的元素：
- display:inline-block/table-cell
- position:absolute/fixed/sticky
- overflow:hidden/scroll
消除圖片底部間隙的方法
- 圖片塊狀化-無基線對齊
  img{display:block;}
- 圖片底線對齊
  img{vertical-align:bottom;}
- 行高足夠小 - 基線位置上移
  .box{line-height:0;}

一些概念

BFC
- BFC全稱”Block Formatting Context” 中文為“塊級格式化上下文”
- 記住這么一句話：BFC元素特性表現(xiàn)原則就是琼蚯，內(nèi)部子元素再怎么翻江倒海酬凳，翻云覆雨都不會影響外部的元素
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素遭庶。反之也如此
擴展閱讀
- CSS中的BFC
優(yōu)雅降級(graceful degradation)
- Web站點在所有新式瀏覽器中都能正常工作宁仔，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作峦睡。由于IE獨特的盒模型布局問題翎苫，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效
漸進增強 progressive enhancement：
- 從被所有瀏覽器支持的基本功能開始榨了，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的煎谍。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用
平穩(wěn)退化
- 是在瀏覽器沒有JavaScript功能龙屉，或沒有開啟JavaScript功能情況下呐粘，我們解決這種問題的方式；

附錄六進階學(xué)習(xí)

附錄八常見問題

前端指路
寫給前端面試者（w3cplus）
如何成為一名卓越的前端工程師（勾三股四博客）
什么是全棧工程師
如何跟上前端開發(fā)的最新前沿
瀏覽器的工作原理
移動前端開發(fā)和 Web 前端開發(fā)的區(qū)別
大型網(wǎng)站CSS編寫與維護
CSS核心技術(shù)關(guān)鍵字

前端技術(shù)文章【新人篇】
- 從零基礎(chǔ)到精通的前端學(xué)習(xí)路線
- 前端開發(fā)必會的二十五個知識點
為什么整個互聯(lián)網(wǎng)行業(yè)都缺前端工程師转捕？
如何成為一名優(yōu)秀的前端工程師
前端開發(fā)需要學(xué)什么作岖？
高效的前端編程入門訓(xùn)練方法
寫給剛?cè)腴T的前端工程師的前后端交互指南
HTML5 如何重新定義web
HTML5標(biāo)簽使用的常見誤區(qū)
css工作中常用的效果總結(jié)
CSS消失的邊界問題
性能/規(guī)范/實踐
如何閱讀W3c規(guī)范(王曉軒)
如何閱讀W3c規(guī)范(高博)
雅虎web性能優(yōu)化軍規(guī)
權(quán)威前端性能指南
高性能css
一些問答社區(qū)
quora
stackoverflow
知乎
前端亂燉問答區(qū)
segmentfault問答區(qū)

其他

本文Mardown原文件-歡迎轉(zhuǎn)載

最后編輯于：2018.12.23 11:23:33

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市瓜富，隨后出現(xiàn)的幾起案子鳍咱，更是在濱河造成了極大的恐慌降盹，老刑警劉巖与柑，帶你破解...
沈念sama閱讀 206,839評論 6贊 482
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件谤辜，死亡現(xiàn)場離奇詭異，居然都是意外死亡价捧，警方通過查閱死者的電腦和手機丑念，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,543評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來结蟋，“玉大人脯倚，你說我怎么就攤上這事∏妒海” “怎么了推正？”我有些...
開封第一講書人閱讀 153,116評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長宝惰。經(jīng)常有香客問我植榕，道長，這世上最難降的妖魔是什么尼夺？我笑而不...
開封第一講書人閱讀 55,371評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任尊残，我火速辦了婚禮，結(jié)果婚禮上淤堵，老公的妹妹穿的比我還像新娘寝衫。我一直安慰自己，他們只是感情好拐邪，可當(dāng)我...
茶點故事閱讀 64,384評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布慰毅。她就那樣靜靜地躺著，像睡著了一般扎阶。火紅的嫁衣襯著肌膚如雪事富。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,111評論 1贊 285
城市分裂傳說
那天乘陪，我揣著相機與錄音统台，去河邊找鬼。笑死啡邑，一個胖子當(dāng)著我的面吹牛贱勃，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播谤逼，決...
沈念sama閱讀 38,416評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼贵扰，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了流部？” 一聲冷哼從身側(cè)響起戚绕，我...
開封第一講書人閱讀 37,053評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎枝冀，沒想到半個月后舞丛，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體耘子，經(jīng)...
沈念sama閱讀 43,558評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,007評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年球切，在試婚紗的時候發(fā)現(xiàn)自己被綠了谷誓。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,117評論 1贊 334
活死人
序言：一個原本活蹦亂跳的男人離奇死亡吨凑，死狀恐怖捍歪，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情鸵钝，我是刑警寧澤糙臼，帶...
沈念sama閱讀 33,756評論 4贊 324
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站恩商，受9級特大地震影響弓摘，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜痕届，卻給世界環(huán)境...
茶點故事閱讀 39,324評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一韧献、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧研叫，春花似錦锤窑、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,315評論 0贊 19
一樁弒父案渊啰，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至申屹，卻和暖如春绘证，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背哗讥。一陣腳步聲響...
開封第一講書人閱讀 31,539評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工嚷那，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人杆煞。一個月前我還...
沈念sama閱讀 45,578評論 2贊 355
代替公主和親
正文我出身青樓魏宽，卻偏偏與公主長得像，于是被迫代替她去往敵國和親决乎。傳聞我的和親對象是個殘疾皇子队询，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,877評論 2贊 345

DIV+CSS學(xué)習(xí)筆記總結(jié)篇

第一部分 HTML

第一章 職業(yè)規(guī)劃和前景

第二章 html基本結(jié)構(gòu)

第三章 html基本標(biāo)簽

第四章 img圖片標(biāo)簽與路徑

第五章 三種列表的講解

第六章 表單元素(上)

第七章 表單和表格(下)

第二部分 CSS

第八章 css基礎(chǔ)知識

第九章 css選擇器(上)

第十章 css選擇器(下)

第十一章 背景屬性

第十二章 文字文本屬性

第十三章 盒子模型

第十四章 塊元素、行元素與溢出

第十五章 定位

第十六章 框架

第十七章 css高級屬性

第三部分 附錄

附錄一 DIV命名規(guī)范

附錄二 CSS精靈

附錄三 一些tips解決方案

頁面優(yōu)化實踐

寫DIV+CSS 的一些常識

常用代碼片段

一些總結(jié)

一些概念

方案薈萃擴展閱讀

附錄四 部分工具資源

附錄五 編碼規(guī)范

附錄六 進階學(xué)習(xí)

附錄七 其他資源

附錄八 常見問題

其他

推薦閱讀更多精彩內(nèi)容