前端html與css學習筆記總結篇(超詳細)

原創 风雨中De追梦人 2018-08-24 00:37

第一部分 HTML

第一章 職業規劃和前景

  • 職業方向規劃定位：

    • web前端開發工程師
    • web網站架構師
    • 自己創業
    • 轉崗管理或其他

  • web前端開發的前景展望：

    • 未來IT行業企業需求最多的人才
    • 結合最新的html5搶佔移動端的市場
    • 自己創業做老闆
    • 隨着互聯網的普及web開發成爲企業的寵兒和核心

  • web職業發展目標：

    • 第一、梳理知識架構

      • 負責內容的HTML
      • 負責外觀的css（層疊樣式表）
      • 負責行爲的js
      • ps切圖

    • 第二、分解目標（起步階段、提升階段、成型階段）

      • 起步階段：

        • 基本知識的掌握
        • 常用工具的掌握
        • 溝通技巧的掌握（圍繞客戶的需求）
        • 良好的開發習慣（加註釋、對齊方式）

      • 提升階段：

        • 熟悉掌握HTML基本標籤和屬性
        • 熟練掌握css的基本語法和使用
        • 瀏覽器兼容和w3c標準的掌握
        • 結合html+css+js開始系統項目的開發

      • 成型階段：

        • 精通DIV+CCS佈局
        • 精通css樣式表控制html標籤
        • 熟悉運用js製作動態網站的效果
        • 能獨立開發完成網站

第二章 html基本結構

  • 認識HTML：

    • html不是一種編程語言，是一種標誌語言
    • 標記語言是由一套標識標籤組成的
    • html使用標籤來描述網頁

  • html結構：

1
2
3
4
 
<html>
    <head></head>
    <body></body>
</html>
  • 不成對出現的標籤
    <br> <hr> <meta> <img> <input..> <option..> <link>

  • HTML 基本標籤的講解：

    • <html> <head> <body>標籤
    • <h1>—-<h6>僅僅用於標題文本，不要爲了產生粗體文本使用它們
    • <p>標籤 段落標籤

    • <strong><b>標籤

    • 都會讓文字產生加粗效果

      • <strong>用於強調文本，強度更深，表示重要文本—>用於SEO優化
      • <b>只是視覺加粗效果—>單純爲了產生加粗
    • <em> <i>標籤
      • em用於強調文本
      • i只是視覺斜體效果
      • <strong>比<em>強調更強
    • 特殊符號：
      • &nbsp; —->空格
      • &gt; —>大於號
      • &lt；—>小於號
      • &quot；—>引號
      • &copy;–>版權號

第三章 html基本標籤

  • HTMl基本標籤：

    • span標籤
      • 對被用來組合文檔中的行內元素
      • 注意：span沒有固定的格式表現，當對它應用樣式時，纔會產生視覺上的變化
    • <pre>標籤
      • 文字的格式按源碼的排版來顯示，我們稱之爲預處理格式

    • <a>標籤—>他有一個必不可少的屬性 href

      • target屬性：
      • _self(在原來頁面打開)
      • _blank（新窗口打開）
      • _top（打開時忽略所有的框架）
      • _parent（在父窗口中打開）

    • 創建錨點和錨鏈接

      • 錨點也是一種超鏈接，是頁面內進行跳轉的超鏈接
        • 第一步：創建錨點 <a name="錨點名稱"></a>
        • 第二步：使用創建好的錨點名稱 <a href="#錨點名稱">內容</a>
    • marquee標籤
      • 可以創建一個內容滾動效果
1
 
<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>
  • direction 表示滾動方向，取值有（left,right,up,down,默認left）
  • loop表示滾動循環的次數，默認爲無限循環
1
 
onmouseover=this.stop()  onmouseover=this.start()  scrollamout="1"(滾動速度)
  • 表示當鼠標移上區域的時候停止滾動，鼠標移開繼續滾動

第四章 img圖片標籤與路徑

  • 圖片標籤與路徑：

    • 常見圖片格式 jpg png gif
    • Gif （只支持全透明）
    • Jpeg /jpg
    • Png 半/全透明都支持

  • 圖片標籤寫法 ：

    • <img src="" alt="" width="" height="" />

  • 圖片四要素：

    • src="" 圖片路徑
    • alt="" 圖片含義
    • width="" 圖片寬度 和圖片大小保持一致
    • height="" 圖片高度 和圖片大小保持一致
    • title=""

  • 路徑知識：

    • 相對路徑、絕對路徑：

      • 相對路徑：(Relative Path) 相對於該文件的路徑；
      • 絕對路徑：(Absolute Path) 從磁盤出發的路徑；

    • <img src="" …… align="" /> align屬性–設置圖片與後面文字的位置關係
      值–top、bottom、middle、absmiddle、left、right

  • 在靜態頁面中：

    • /開頭表示根目錄；

    • ./表示當前目錄；（斜畫線前面一個點）

    • ../上級目錄；（斜畫線前面兩個點）

    • 直接用文件名不帶/也表示同一目錄

    • 這些都是相對於當前文件的位置來說的，如果用絕對路徑的話就是寫全了。

第五章 三種列表的講解

  • 三種列表的知識講解：
    • <ul>無序列表
      • 無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標識
1
2
3
4
5
 
<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>
    • 有序列表
    • 有序列表也是一列項目，只是列表項目使用的是數字進行標記。 有序列表始於 <ol> 標籤。每個列表項始於 <li>標籤。
1
2
3
4
5
 
<ol>
   <li>內容一</li>
   <li>內容二</li>
   <li>內容三</li>
</ol>

  • 列表符號

    • 無序列表-列表符號:

      • type="circle" 空心圓 type=“disc” 實心圓 默認值 type="square" 方塊符

    • 有序列表-列表符號

      • type="A" A B C D
      • type="a" a b c d
      • type="1" 1 2 3 4 默認值type=”I” I II III type=”i” i ii iii

    • 列表嵌套

    • 無序列表-嵌套

1
2
3
4
5
6
7
8
9
 
<ul>
 <li>柚子
  <ul>
   <li>沙田柚</li>
   <li>蜜柚</li>
  </ul>
 </li>
 <li>荔枝</li>
 <li>蘋果</li></ul>
  • 有序列表-嵌套
1
2
3
4
5
6
7
8
9
 
<ol>
 <li>茶
  <ul>
   <li>紅茶</li>
   <li>綠茶</li>
  </ul>
 </li>
 <li>果汁</li>
 <li>牛奶</li></ol>
  • 定義列表
    • 定義列表不僅僅是一列項目，而是項目及其註釋的組合。定義列表以 <dl> 標籤開始。每個定義列表項以 <dt>開始。每個自定義列表項的定義以 <dd> 開始。
1
2
3
4
5
6
 
<dl>  
     <dt>pc網頁製作</dt>  
     <dd>學習DIV+CSS JS JQ 項目實戰</dd>  
     <dt>手機網頁製作</dt>  
     <dd>手機網頁製作實戰</dd>
</dl>

  • dd是對dt的解釋

    • < dl>< /dl>用來創建一個普通的列表,
    • < dt>< /dt>用來創建列表中的上層項目，
    • < dd>< /dd>用來創建列表中最下層項目，
    • < dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標誌對之間。
1
2
3
4
5
6
7
8
9
10
 
<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 ：設置列表項圖標的位置，位於文本內或者文本外
  • list-style-type： 設置列表項圖標的類型
  • list-style-image：使用圖像設置列表項圖標

第六章 表單元素(上)

  • 表單標籤:

    • <form>表單標籤

      • <form>表單是一個包含表單元素的區域，包括起來的都是表單的內容 
        1
        2
        3
        		 
        <form>
         <input type="text"/>
        </form>

  • HTML標籤 - Action和確認按鈕：

    • 當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。
1
2
3
4
 
<form action="html.do" method="get">    
        username:  <input type="text" name="user" />   
        <input type="submit" value="提  交" />
</form>

  • HTML標籤 - 隱藏域隱藏標籤：

  • 隱藏域在頁面中對於用戶是不可見的，在表單中插入隱藏域的目的在於收集或發送信息，以利於被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到服務器

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

  • <input>標籤的掌握

    • 常用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" 隱藏

  • 關於表單中的設置默認值：

    1
    2
    3
    		 
    <input type="text" name="" value="今天心情不錯" />
    <input type="radio" name="" value="" checked="checked">
    <input type="checkbox" name="" value="" checked="checked">
    		 
1
2
3
4
 
<select name="" >
 <option  value=""></option>
 <option  value="" selected="selected"></option>
<select>

  • textarea沒有默認值

  • <label>標籤的使用

    • <label></label>

      • label 元素不會向用戶呈現任何特殊效果。
      • 不過，它爲鼠標用戶改進了可用性。
      • 如果您在 label 元素內點擊文本，就會觸發此控件。
      • 就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。

    • <label> 標籤的for 屬性應當與相關元素的 id屬性相同。

    • 例子：（重要—註冊表單–用戶體驗–必做）

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

第七章 表單和表格(下)

  • 表單和表格標籤：
    • <textarea>文本域標籤
    • <textarea>標籤：
    • <textarea></textarea>是文本域標籤，可以在其中插入一段文字內容，它有兩個常用屬性rows和cols

  • 注意：

    • rows表示這個文本域有多少行
    • cols表示這個文本域有多少列

  • 除了這兩個屬性它還有readonly（只讀，文本域的內容無法改變，相當於協議）和title（鼠標放上提示）

  • <select>標籤的掌握

    • 注：當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，並且在將 <select> 表單數據提交給服務器時包括 name屬性 
      1
      2
      3
      4
      5
      6
      		 
      <form>      
          <select name=""  id="">
               <option value="1">1月</option>  
                <option value="2">2月</option>      
      </select>
      </form>

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

  • <table>表格標籤

  • <table>表格標籤：<table>是表格標籤，可以用它定義一個表格。

    1
    2
    3
    4
    5
    6
    		 
    <table border="1">
        <tr>
        <td>姓名</td>
        <td>性別</td>
        </tr>
    </table>

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

  • <tr> <td>標籤的使用

    • <tr>行標籤：

      • <tr>可以定義表格中的一行，一個<tr></tr>表示一行。
1
2
3
4
5
6
7
8
9
10
11
 
<table border="1">
<tr>
 <td>姓名</td>
 <td>性別</td>
</tr>
<tr>
 <td>姓名</td>
 <td>性別</td>
</tr>
</table>

  • <td>單元格標籤:

    • <td>可以定義表格中的一個單元格，<td></td>表示一個單元格。 
      1
      2
      3
      4
      5
      6
      7
      		 
      <table border="1">
      <tr>
      <td >姓名</td>
      <td>性別</td>
      <td>愛好</td>
      </tr>
      </table>
    • border-collapse 屬性設置是否將表格邊框摺疊爲單一邊框：
    • border-collapse:collapse;
    • colspan左右合併
    • rowspan上下合併

第一部分總結：

  • 非可視化標籤：head meta style scrpit...
  • 可視化標籤：img div span a ul li…
  • 只有可視化標籤，才能用css改變它
  • 單標籤：meta link base img input br hr

  • 雙標籤：html head body div a p span ..ul li ol dl ….

  • 常用可視化標籤

    • div
      • 一般用它來佈局
    • a 超鏈接標籤
      • href*屬性：設置跳轉的網頁地址
      • target屬性：設置跳轉的目標
      • 結論：凡事頁面可以點擊跳轉或者表單提交的文字，都用a標籤
    • img
      • src*屬性用來設置圖片的url數據
      • alt提供給搜索引擎搜索的
      • width
      • height
      • 結論 ：顯示圖片
    • ul li
      • 列表
      • 結論：只要將來設計頁面中有固定樣式的列表，就用ul和li
    • table caption tr td (th)
      • 慢慢已經被淘汰了 被ul li代替
      • 如果是合併豎排的就是合併行（rowspan）
      • 如果是合併橫排的就是合併列（colspan）

HTML部分導圖總結

第二部分 CSS

第八章 css基礎知識

  • css基礎知識：
    • css樣式表的定義
    • css：（Cascading Style Sheets）層疊樣式表；
  • 分類及位置：內部樣式-head區域style標籤裏面
    • 外部樣式-link調用
    • 內聯樣式-標籤元素裏面
  • css內的註釋：/*註釋內容*/

  • css樣式表的語法

    • CSS規則由兩個主要的部分構成：要添加樣式的盒子名或者標籤名、和要添加的樣式。

    • 盒子名或者標籤名{屬性:值;}

    • CSS中幾種顏色的表示方法

      • 用顏色名錶示
        • 有17個預先確定的顏色，它們是
          • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
            　　olive, orange, purple, red, silver, teal, white, and yellow

      • 用十六進制的顏色值表示(紅、綠、藍)

        • #FF0000或者#F00

      • 用rgb(r,g,b)函數表示

        • 如：rgb(255,255,0)

      • 用hsl(Hue,Saturation,Lightness)函數表示（色調、飽和度、亮度)

        • 如：hsl(120,100%,100%),色調0代表紅色，120代表綠色，240代表
          藍色

      • 用rgba(r,g,b,a)函數表示

        • 其中a表示的是改顏色的透明度，取值範圍是0~1，其中0代表完全透明

      • 用hsla(Hue,Saturation,Lightness,alpha)函數表示

        • 色調、飽和度、亮度、透明度
      • 例子
1
2
3
4
5
6
7
8
9
 
  <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>

  • 內部樣式表
    • 當單個頁面需要設置樣式時，就應該使用內部樣式表。
    • 使用 <style></style>標籤在文檔<head></head>裏面定義內部樣式表
1
2
3
4
5
 
<head>
 <style type="text/css" >
  p{color:red;}
 </style>
</head>
  • 從外部引入到樣式分爲兩種：（注意寫在head標籤裏面）

  • 當樣式需要應用於很多頁面時，就需要用到外部樣式表，首先需要創建一個css文件，然後引用到我們的頁面中。

  • Link樣式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>

  • Html式： <style type="text/css">@import url("css.css");></style>

  • 內聯樣式表（優先級高）

    • 寫在標籤裏面的樣式

    • 如：<p style="color:red;"></p>

  • 表示給p標籤裏面的文字顏色設置爲紅色

  • 區別：外鏈樣式與導入樣式

    • link標籤是屬於xhtml範疇，而@import則是css2.1中特有的。link標籤除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。

    • 加載的順序的區別，link加載的css時，是一種並行(沒有嘗試是否是這樣)加載CSS方式，而@impor則在整個頁面加載完成後才加載。

    • 兼容性的區別，因@import``CSS2.1才特有的，所以對於不兼容CSS2.1的瀏覽器來說，無效。

    • 在樣式控制上(比如動態改變網頁的佈局時,使用javascript操作DOM)的區別，此時@import就無能爲力了。

  • 樣式的優先級補充
    • 相同權值情況下，CSS樣式的優先級總結來說，就是——就近原則（離被設置元素越近優先級別越高）：
      • 內聯樣式表（標籤內部） > 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）

  • 權值不同時，瀏覽器是根據權值來判斷使用哪種css樣式的，哪種樣式權值高就使用哪種樣式

  • 層疊優先級是:

    • 瀏覽器缺省< 外部樣式表 < 內部樣式表 < 內聯樣式
  • 其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器

  • 派生選擇器以前叫上下文選擇器，所以完整的層疊優先級是:

    • 瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器< 外部樣式表ID派生選擇器< 內部樣式表 < 內部樣式表類選擇器 < 內部樣式表類派生選擇器 < 內部樣式表ID選擇器 < 內部樣式表ID派生選擇器 < 內聯樣式…共12個優先級

  • 另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個並以空格分開，其優先級順序爲：

    • 一個元素同時應用多個class，後定義的優先（即近者優先），加上!important者最優先！

第九章 css選擇器(上)

  • css選擇器：
    • class類選擇器可以重複利用
    • id選擇器唯一
  • 標籤選擇器
    • 什麼是選擇器：css選擇器就是要改變樣式的對象

  • 選擇器{屬性:值;屬性:值;}

  • 標籤選擇器：頁面中所有的標籤都是一個選擇器 p{color:red;}

  • ID選擇器

    • 選擇id命名的元素 以 # 開頭 #p1{color:#0f0;}

  • 類選擇器

    • class選擇器，選擇clas命名的元素 以.開頭 .first{color:#00f;}
  • css代碼寫完後上線前要經過壓縮處理
  • 本地和服務器分兩個css版本（備份）

  • 壓縮後註釋都清除，空間體積減少

  • 羣組選擇器

    • 選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}
  • 包含選擇器
    • 選擇某元素的後代元素，也稱後代選擇器，父類與子類間以空格隔開p
      • span{color:red;}

  • 屬性選擇器

    • 選擇包含某一屬性的元素
    • a[title]{color:red;} 選擇包含title的a標籤
    • a[title][href]{color:red;} 選擇包含title和href的a標籤

  • > + 選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當於包含元素）

    • p > span{color:red;}
  • 相鄰兄弟選擇器：只選擇後面的相鄰兄弟元素
    • p + span{color:red;}

第十章 css選擇器(下)

  • <a>僞類選擇器
    • a:link {color:#FF0000;} / 未訪問的鏈接 / （只用於a標籤）
    • a:visited {color:#00FF00;} / 已訪問的鏈接 / （只用於a標籤）
    • a:hover {color:#FF00FF;}/* 鼠標移動到鏈接上
    • */（可和其他標籤結合一起用）
    • a:active {color:#0000FF;} / 選定的鏈接 /
    • 注意
      • 僞類選擇器的排序很重要，a:link a:visited a:hover a:active，記作lvha

  • 輸入僞類選擇器（針對表單）

    • input:focus{color:red;} / 鍵盤輸入焦點 /

  • 其他僞類選擇器

    • p:first-child{color:red;} /* 第一個p */
    • :before 在元素之前添加內容。
    • :after 在元素之後添加內容。

  • css優先規則

    • 內聯樣式表-> ID 選擇器—> Class 類選擇器->標籤選擇器

第十一章 背景屬性

  • 背景屬性：

    • 背景的添加 ：

    • 背景顏色的添加:

      • background:red;
      • backgronnd-color:red;

    • 背景圖片的添加：

      • background:url(“images/1.jpg”);
      • backgronnd-image:url(“images/1.jpg”);
    • 背景的平鋪
    • 什麼是平鋪？平鋪就是圖片是否重複出現
      • 不平鋪：background-repeat:no-repeat;
      • 水平方向平鋪：background-repeat:repeat-x;
      • 垂直方向平鋪：background-repeat:repeat-y;
      • 完全平鋪：默認爲完全平鋪
    • 背景圖片的定位
      • 背景圖片的定位就是可以設置顯示背景圖片的位置，通過屬性background-position來實現
      • background-position的取值可爲英文單詞或者數值和百分值。
      • background-positon的英文單詞取值
      • top left
      • top center
      • top right
      • center left
      • center center
      • center right
      • bottom left
      • bottom center
      • ottom right
    • background-positon的數值取值
      • background-position:x y;
    • positon的百分值取值
      • background-position:x% y%;

    • 背景圖片的大小

      • 背景圖片的大小可以通過屬性background-size來設置background-size的取值可爲數值和百分值。

    • background-size的數值取值

      • background-size:x y;

    • background-size的數值取值

      • background-size:x% y%;

    • 背景圖片的滾動

      • 背景圖片是否隨着內容的滾動而滾動由background-attachment設置

      • background-attachment:fixed; 固定，不隨內容的滾動而滾動

      • background-attachment:scroll; 滾動，隨內容的滾動而滾動

第十二章 文字文本屬性

  • css文字文本屬性：

    • 文字屬性

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

  • 文本屬性

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

第十三章 盒子模型

  • 盒子模型
    • 盒子模型就是一個有高度和寬度的矩形區域
    • 所有html標籤都是盒子模型
    • div標籤自定義盒子模型

  • 所有的標籤都是盒子模型

    • class和id的主要差別是：class用於元素組（類似的元素，或者可以理解爲某一類元素），而id用於標識單獨的唯一的元素。

  • 盒子模型的組成

    • 盒子模型組成部分：
      • 自身內容：width、height 寬高
      • 內邊距： padding
      • 盒子邊框： border 邊框線
      • 與其他盒子距離： margin外邊距
      • 內容+內邊距+邊框+外邊距=面積

  • border 邊框

    • 常見寫法 border:1px solid #f00;

  • 單獨屬性：

    • border-width:
    • border-style:
      • dotted 點狀虛線
      • dashed（虛線）
      • solid（實線）
      • double（雙實線）
    • border-color (顏色)

  • padding 內邊距

    • 值：像素/釐米等長度單位、百分比

      • padding:10px; 上下左右
      • padding:10px 10px; 上下 左右
      • padding:10px 10px 10px; 上 左右 下
      • padding:10px 10px 10px 10px; 上 右 下 左（設置4個點–>順時針方向）

  • 單獨屬性：

    • padding-top:
    • padding-right:
    • padding-bottom:
    • padding-left:

  • 當設置內邊距的時候會把盒子撐大，爲了保持盒子原來的大小，應該高度和寬度進行減小，根據width和height減小

  • margin 外邊距

    • 值：與padding相同

    • 單獨屬性：與padding相同

  • 外邊距合併：兩個盒子同時設置了外邊距，會進行一個外邊距合併

補充盒子模型內容

  • 標準盒子模型

    • 盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型

  • 從上圖可以看到標準 w3c 盒子模型的範圍包括 margin、border、padding、content，並且 content部分不包含其他部分

  • IE盒子模型

  • 從上圖可以看到 ie盒子模型的範圍也包括 margin、border、padding、content

  • 和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding

  • IE盒子模型width = padding+border+內容

  • 標準盒子模型 = 內容的寬度（不包含border+padding）

  • 例：

    • 一個盒子的 margin爲 20px，border 爲 1px，padding爲 10px，content 的寬爲 200px、高爲 50px，假如用標準 w3c 盒子模型解釋，那麼這個盒子需要佔據的位置爲：寬 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 盒子模型，那麼這個盒子需要佔據的位置爲：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小爲：寬 200px、高 50px

  • 那應該選擇哪中盒子模型呢？當然是“標準 w3c 盒子模型”了。怎麼樣纔算是選擇了“標準 w3c盒子模型”呢？很簡單，就是在網頁的頂部加上 doctype 聲明。

  • 假如不加doctype 聲明，那麼各個瀏覽器會根據自己的行爲去理解網頁，即 ie瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 ff會採用標準w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。
  • 反之，假如加上了 doctype 聲明，那麼所有瀏覽器都會採用標準 w3c盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
  • 用 jquery 做的例子來證實一下
1
2
3
4
5
6
7
8
9
10
11
12
 
<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
  • 　上面的代碼沒有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型，在 ff 瀏覽器中顯示“標準w3c盒子模型”。
1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是標準w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
  • 　代碼2 與代碼1 唯一的不同的就是頂部加了 doctype聲明。在所有瀏覽器中都顯示“標準 w3c盒子模型”

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

  • 基本概念
    • 塊級元素：默認情況下獨佔一行的元素，可控制寬高、上下邊距；
    • 行內元素：默認情況下一行可以擺放多個的元素，不可控制寬高和上下邊距

  • 行塊轉換

    • display:none; 不顯示
    • display:block; 變成塊級元素
    • display:inline; 變成行級元素
    • display:inline-block; 以塊級元素樣式展示，以行級元素樣式排列

  • 溢出

    • overflow:hidden; 溢出隱藏
    • overflow:scroll; 內容會被修剪，瀏覽器會顯示滾動條
    • overflow:auto; 如果內容被修剪，則產生滾動條

  • 文本不換行：white-space:nowrap;

  • 長單詞換行：word-wrap:break-word;

  • 行內元素和快級元素小結

    • 一、塊級元素：block element

      • 每個塊級元素默認佔一行高度，一行內添加一個塊級元素後無法一般無法添加其他元素（float浮動後除外）。兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內元素；

      • 塊級元素一般作爲容器出現，用來組織結構，但並不全是如此。有些塊級元素，如只能包含塊級元素。

      • DIV 是最常用的塊級元素，元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現出來，並且跟同級的兄弟塊依次豎直排列，左右撐滿。

    • 二、行內元素：inline element

      • 也叫內聯元素、內嵌元素等；行內元素一般都是基於語義級(semantic)的基本元素，只能容納文本或其他內聯元素，常見內聯元素 “a”。比如 SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。

    • 三、block（塊）元素的特點:

      • ①、總是在新行上開始；
      • ②、高度，行高以及外邊距和內邊距都可控制；
      • ③、寬度缺省是它的容器的100%，除非設定一個寬度。
      • ④、它可以容納內聯元素和其他塊元素

    • 四、inline元素的特點

      • ①、和其他元素都在一行上；
      • ②、高，行高及外邊距和內邊距不可改變；
      • ③、寬度就是它的文字或圖片的寬度，不可改變
      • ④、內聯元素只能容納文本或者其他內聯元素

    • 對行內元素，需要注意如下:

      • 設置寬度width 無效。 設置高度height無效，可以通過line-height來設置。 設置margin
      • 只有左右margin有效，上下無效。
      • 設置padding只有左右padding有效，上下則無效。注意元素範圍是增大了，但是對元素周圍的內容是沒影響的。

    • 五、常見的塊狀元素

      • address – 地址
      • blockquote – 塊引用
      • center – 舉中對齊塊
      • dir – 目錄列表
      • div – 常用塊級容易，也是CSS layout的主要標籤
      • dl – 定義列表
      • fieldset – form控制組
      • form – 交互表單
      • h1 – 大標題
      • h2 – 副標題
      • h3 – 3級標題
      • h4 – 4級標題
      • h5 – 5級標題
      • h6 – 6級標題
      • hr – 水平分隔線
      • isindex – input prompt
      • menu – 菜單列表
      • noframes – frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
      • noscript – 可選腳本內容（對於不支持script的瀏覽器顯示此內容）
      • ol – 有序表單
      • p – 段落
      • pre – 格式化文本
      • table – 表格
      • ul – 無序列表

    • 六、常見的內聯元素

      • a – 錨點
      • abbr – 縮寫
      • acronym – 首字
      • b – 粗體(不推薦)
      • bdo – bidi override
      • big – 大字體
      • br – 換行
      • cite – 引用
      • code – 計算機代碼(在引用源碼的時候需要)
      • dfn – 定義字段
      • em – 強調
      • font – 字體設定(不推薦)
      • i – 斜體
      • img – 圖片
      • input – 輸入框
      • kbd – 定義鍵盤文本
      • label – 表格標籤
      • q – 短引用
      • s – 中劃線(不推薦)
      • samp – 定義範例計算機代碼
      • select – 項目選擇
      • small – 小字體文本
      • span – 常用內聯容器，定義文本內區塊
      • strike – 中劃線
      • strong – 粗體強調
      • sub – 下標
      • sup – 上標
      • textarea – 多行文本輸入框
      • tt – 電傳文本
      • u – 下劃線

    • 七，可變元素

      • 可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素。
      • applet - java applet
      • button - 按鈕
      • del- 刪除文本
      • iframe - inline frame
      • ins - 插入的文本
      • map - 圖片區塊(map)
      • object - object對象
      • script - 客戶端腳本

    • 八、行內元素與塊級元素有什麼不同

      • 區別一：

        • 塊級：塊級元素會獨佔一行，默認情況下寬度自動填滿其父元素寬度
        • 行內：行內元素不會獨佔一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。

      • 區別二：

        • 塊級：塊級元素可以設置寬高
        • 行內：行內元素不可以設置寬高

      • 區別三：

        • 塊級：塊級元素可以設置margin，padding
        • 行內：行內元素水平方向的margin-left; margin-right;

      • padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。

      • 區別四：

        • 塊級：display:block;
        • 行內：display:inline;

    • 替換元素有如下：（和img一樣的設置方法）

      • <img>、<input>、<textarea>、<select>
      • <object>都是替換元素，這些元素都沒有實際的內容
  • 可以通過修改display屬性來切換塊級元素和行內元素

第十五章 定位

  • static靜態定位（不對它的位置進行改變，在哪裏就在那裏）

    • 默認值。沒有定位，元素出現在正常的流中（忽略 top,bottom, left, right 或者 z-index 聲明）。

  • fixed固定定位（參照物–瀏覽器窗口）—做 彈窗廣告用到

    • 生成固定定位的元素，相對於瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right"以及 "bottom"屬性進行規定。

  • relative（相對定位 ）（參照物以他本身）

    • 生成相對定位的元素，相對於其正常位置進行定位。

  • absolute（絕對定位）(除了static都可以，找到參照物–>與它最近的已經有定位的父元素進行定位)

    • 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
    • 元素的位置通過 “left", "top", "right" 以及 "bottom" 屬性進行規定

  • z-index

    • z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
    • 定位的基本思想: 它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置。

  • 一切皆爲框

    • 塊級元素: div、h1或p元素 即：顯示爲一塊內容稱之爲 “塊框“ ;
    • 行內元素: span,strong,a等元素 即：內容顯示在行中稱 “行內框”;
    • 使用display屬性改變成框的類型 即：display:block; 讓行內元素設置爲塊級元素，display:none; 沒有框

  • 相對定位：

    • 如果對一個元素進行相對定位，它將出現在它所在的位置上。
    • 通過設置垂直或水平位置，讓這個元素“相對於”它的起點進行移動
    • .adv_relative { position: relative; left: 30px; top: 20px; }

  • 絕對定位：

    • 元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位 的祖先元素，它的位置相對於最初的包含塊。 .adv_absolute { position: absolute; left: 30px; top: 20px; }


第十六章 框架

  • frameset框架：
    • <frameset> —- 用來定義一個框架；雙標籤
      不能和 <body> 一起使用

  • rows、cols屬性

    • rows 定義行表示框架有多少行（取值 px/%/ * ）
    • cols 定義列表示框架有多少列（取值px/ %/ * ）

  • frame子框架

    • <frame> —- 表示框架中的某一個部分；單標籤，要跟結束標誌

      • src 顯示的網頁的路徑
      • name 框架名
      • frameborder 邊框線（取值 0 / 1）

    • <noframes>屬性

    • <noframes> 提供不支持框架的瀏覽器顯示body的內容；雙標籤

1
2
3
4
5
6
7
8
 
<frameset>
     <frame  src=“”  />
     <frame  src=“” />
     <frame  src=“” />
     <noframes>
      <body>內容</body>
     </noframes>
</frameset>
  • <iframe>內聯框架
    • iframe元素會創建包含另外一個文檔的內聯框架（即行內框架）
    • 允許和 body 一起使用
    • width 寬（取值 px / %）
    • height 高（取值 px / %）
    • name 框架名
    • frameborder 邊框線（取值 0 / 1）
    • src 顯示的網頁的路徑

第十七章 css高級屬性

  • opacity透明屬性
    • opacity
      • 對於IE6/7/，使用filter:alpha(opacity:值;) 值爲0-100
      • 對於Webkit，Opera，Firefox，IE9+，使用opacity:值; 值爲0-1
      • 對於早期火狐，使用-moz-opacity:值; 值爲0-1
      • 所以寫透明屬性時，一般寫法是
1
2
3
4
5
 
 {	
    opacity:0.5;
   filter:alpha(opacity：50);/*0-100*/
   -moz-opacity:0.5;	/*取值0-1*/-->針對早起版本的火狐兼容問題的解決
}

  • border-radius圓角邊框屬性

    • 向 div 元素添加圓角邊框
      • border-radius:10px;

  • box-shadow陰影屬性

    • box-shadow屬性向框添加陰影效果,後面跟4個參數。

    • box-shadow:0px 0px 10px #000;

  • <embed>屬性

    • 是HTML5中新增的標籤,媒體嵌入插件標籤，可以通過<embed>插入音頻或視頻

    • <embed src=“media/music.mp3” />

    • 格式.mid .wav .mp3等

  • CSS部分導圖總結


  • css常見簡寫

css簡寫速查

第三部分 附錄

附錄一 DIV命名規範

  • 企業DIV使用頻率高的命名方法

  • 網頁內容類

    • 標題: title

      • 摘要: summary
      • 箭頭： arrow
      • 商標： label
      • 網站標誌： logo
      • 轉角/圓角：corner
      • 橫幅廣告： banner
      • 子菜單： subMenu
      • 搜索： search
      • 搜索框： searchBox
      • 登錄： login
      • 登錄條：loginbar
      • 工具條： toolbar
      • 下拉： drop
      • 標籤頁： tab
      • 當前的： current
      • 列表： list
      • 滾動： scroll
      • 服務： service
      • 提示信息： msg
      • 熱點：hot
      • 新聞： news
      • 小技巧： tips
      • 下載： download
      • 欄目標題： title
      • 熱點： hot
      • 加入：joinus
      • 註冊： regsiter
      • 指南： guide
      • 友情鏈接： friendlink
      • 狀態： status
      • 版權： copyright
      • 按鈕： btn
      • 合作伙伴： partner
      • 投票： vote
      • 左右中：left right center
    • 註釋的寫法: /* Footer */ 內容區/* End Footer */

  • id的命名:

    • 頁面結構

      • 容器: container
      • 頁頭：header
      • 內容：content/container
      • 頁面主體：main
      • 頁尾：footer
      • 導航：nav
      • 側欄：sidebar
      • 欄目：column
      • 頁面外圍控制整體佈局寬度：wrapper
      • 左右中：left right center

    • 導航

      • 導航：nav
      • 主導航：mainbav
      • 子導航：subnav
      • 頂導航：topnav
      • 邊導航：sidebar
      • 左導航：leftsidebar
      • 右導航：rightsidebar
      • 菜單：menu
      • 子菜單：submenu
      • 標題: title
      • 摘要: summary

    • 功能

      • 標誌：logo
      • 廣告：banner
      • 登陸：login
      • 登錄條：loginbar
      • 註冊：regsiter
      • 搜索：search
      • 功能區：shop
      • 標題：title
      • 加入：joinus
      • 狀態：status
      • 按鈕：btn
      • 滾動：scroll
      • 標籤頁：tab
      • 文章列表：list
      • 提示信息：msg
      • 當前的:current
      • 小技巧：tips
      • 圖標: icon
      • 註釋：note
      • 指南：guild
      • 服務：service
      • 熱點：hot
      • 新聞：news
      • 下載：download
      • 投票：vote
      • 合作伙伴：partner
      • 友情鏈接：link
      • 版權：copyright

    • class的命名:

      • 顏色:使用顏色的名稱或者16進制代碼,如

        • .red { color: red; }
        • .f60 { color: #f60; }
        • .ff8600 { color: #ff8600; }

      • 字體大小,直接使用”font+字體大小”作爲名稱,如

        • .font12px { font-size: 12px; }
        • .font9px {font-size: 9pt; }

      • 對齊樣式,使用對齊目標的英文名稱,如

        • .left { float:left; }
        • .bottom { float:bottom; }

      • 標題欄樣式,使用”類別+功能”的方式命名,如

        • .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精靈原理以及應用
    • CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。
      • 該圖片使用CSS background和background-position屬性渲染，這也就意味着你的標籤變得更加複雜了，圖片是在CSS中定義，而非<img>標籤。
  • 一個簡單的例子：
    • 一張圖片作出一個按鈕的三個狀態
    • 一個鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態，a:link，a:hover，a:active <a class="button" href="#">鏈接</a>
    • 加入右側的圖片爲：200px 65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次爲按鈕的普通、鼠標滑過、鼠標點擊的狀態。則可以使用CSS進行定義。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
a {
    display:block; 
    width:200px; 
    height:65px; 
    line-height:65px; /*定義狀態*/
    text-indent:-2015px; /*隱藏文字*/
    background-image:url(button.png); /*定義背景圖片*/
    background-position:0 0;
    /*定義鏈接的普通狀態，此時圖像顯示的是頂上的部分*/
}
a:hover {
    background-position:0 -66px;
    /*定義鏈接的滑過狀態，此時顯示的爲中間部分，向下取負值*/
}
a:active {
    background-position:0 -132px;                      
    /*定 義鏈接的普通狀態，此時顯示的是底部的部分，向下取負值*/
}
  • 更多的CSS雪碧，圖片更復雜，背景定位更精確。可能會用到大量的數值
    • 如：background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位
  • 優點：
    • 減少加載網頁圖片時對服務器的請求次數
    • 可以合併多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。
    • 提高頁面的加載速度
    • sprite技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的 GIF只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNGsprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
    • 減少鼠標滑過的一些bug
    • IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。
  • 不足：
    • CSS雪碧的最大問題是內存使用
    • 影響瀏覽器的縮放功能
    • 拼圖維護比較麻煩
    • 使CSS的編寫變得困難
    • CSS 雪碧調用的圖片不能被打印
    • 錯誤得使用 Sprites 影響可訪問性

附錄三 一些tips解決方案

頁面優化實踐

  • 從下面的幾個方面可以進行頁面的優化：

    • 減少請求數
    • 圖片合併
    • CSS文件合併
    • 減少內聯樣式
    • 避免在 CSS中使用 import
    • 減少文件大小
    • 選擇適合的圖片格式
    • 圖片壓縮
    • CSS 值縮寫（Shorthand Property)
    • 文件壓縮
    • 頁面性能
    • 調整文件加載順序
    • 減少標籤數量
    • 調整選擇器長度
    • 儘量使用CSS 製作顯示錶現
    • 增強代碼可讀性與可維護性
    • 規範化
    • 語義化
    • 模塊化
寫DIV+CSS 的一些常識

  • 不要使用過小的圖片做背景平鋪

    • 這就是爲何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區域，需要 200200=40, 000 次，佔用資源

  • 無邊框

    • 推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框寬度爲零，但邊框樣式、顏色還是會被瀏覽器解析，佔用資源

  • 慎用 通配符

    • 所謂通配符，就是將CSS 中的所有標籤均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的佔用資源。要有選擇的初始化標籤。

  • CSS的十六進制顏色代碼縮寫

    • 習慣了縮寫及小寫，這才知道，原來不是推薦的寫法，爲的是減少解析所佔用的資源。但同時會增加文件體積。孰優孰劣，有待仔細考證。

  • 樣式放頭上，腳本放腳下。不內嵌，只外鏈

  • 堅決不用 CSS表達式

  • 使用 引用樣式表，而不是通過@import 導入。

  • 一般來說，PNG比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費的，很值得優化。

  • 千萬不要在 HTML中縮放圖片，一者不好看，二者佔資源。

  • 正文字體最好用偶數

    • 12px、14px、16px，效果非常好。特例，15px。

  • block、ul、ol等上下留出至少一倍行距，左側至少兩倍行距，右側隨意。

  • 段落之間，至少要有一倍行距

  • 強行指定某些元素的 line-height，正文 1.6倍於文字大小，標題1.3倍。

  • 中文標點用全角

    • 英文夾雜在中文中，左右空格，半角。

  • 中文字體的粗體和斜體，遠離較好

常用代碼片段
  • 雅虎工程師提供的CSS初始化示例代碼【僅供參考】
    • 可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯誤。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
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; 
}
  • mobile meta標籤
1
 
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
  • 表格不被撐開
1
 
table-layout: fixed; word-break: break-all;;border-collapse: collapse
  • 不設寬高居中
1
2
3
4
5
 
<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>
  • 透明度的兼容代碼
1
2
3
4
 
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*/
  • 文字溢出點點省略
1
2
3
 
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

  • 清除浮動的幾種方法

    • 方法一：投機取巧法 – 不推薦

      • 直接一個放到當作最後一個子標籤放到父標籤那兒，此方法屢試不爽，兼容性強

    • 方法二：overflow + zoom方法 –不推薦
      .fix{overflow:hidden; zoom:1;}

      • 此方法優點在於代碼簡潔，涵蓋所有瀏覽器

    • 方法三：after + zoom方法 -推薦–此方法可以說是綜合起來最好的方法了

      • clearfix只應用在包含浮動子元素的父級元素上
1
2
3
4
5
6
7
8
 
.fix{zoom:1;}
.fix:after{
     display:block; 
     content:'clear'; 
     clear:both;
     line-height:0; 
     visibility:hidden;
}
一些總結

  • 自動繼承屬性：

    • 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元素特性表現原則就是，內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素

    • BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此

    • 擴展閱讀

  • 優雅降級(graceful degradation)
    • 一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容
  • 漸進增強 progressive enhancement：
    • 是在瀏覽器開啓JavaScript功能後，如果瀏覽器版本不支持某些 JavaScript 能力，我們解決這種問題的方式
  • 平穩退化
    • 是在瀏覽器沒有JavaScript功能，或沒有開啓JavaScript功能情況下，我們解決這種問題的方式；
方案薈萃擴展閱讀

附錄四 部分工具資源

附錄五 編碼規範

附錄六 進階學習

附錄七 其他資源

附錄八 常見問題

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

【Echarts+Html+LayUI】同一htlm頁面，點擊不同選項，加載不同echart

遇到的坑： 問題1 加載一個之後，再點擊另一個，可能是某個模板設定的問題，導致出現重疊的情況。 問題1解決方法： // 基於準備好的dom，初始化echarts實例 var div_main = document.getEle

33 Audrey 2020-07-08 12:35:22

html+css 選項卡

  <style type=text/css>td {   font-size: 12px;  color: #000000;  line-heig

bluelazyboy 2020-07-08 12:23:28

html-base

placeholder value 1.placeholder要寫在value前面,防止php中空字符變量影響. checked 1.checked是checked="checked"的縮寫; pre 1.可定義預格式化的文本,在pre元

liangfrank 2020-07-08 12:23:03

B2ContextMenu附件系統菜單插件

2005年1月22日19:55星期六  [B2PlugIn] B2ContextMenu for becky! Windows 9x/ME/NT/2K/XPCopyright (C) 1994-2005 yippee_skyippee_

yippeesk 2020-07-08 12:22:24

Html學習之標籤

html 中<a>用於實現鏈接到另一個頁面，常用屬性是： href：目標網址 在href中可以使用mailto在網頁中鏈接Email地址 title：鼠標滑過時顯示的文本 title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內

qq_33044181 2020-07-08 11:59:34

不知道取個啥名（CSS翻轉，transform）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

ddx2019 2020-07-08 11:55:42

原生JS實現樹狀結構列表

樹狀結構列表，這個技術點之前有寫過了，是基於vue講解，但似乎都沒有解決痛點，最基礎的原生JS該怎麼實現呢？ 這篇文章會全面詳細的介紹樹狀結構列表的實現，從數據處理成樹狀結構，到動態生成dom節點渲染頁面。  確定原始數據結構  原始數據

wendZzz 2020-07-08 11:27:37

a標籤中使用onclick提示function未定義

<a href="javascript:;" onclick="text()">leave a message</a> 今天做東西的時候，發現在a標籤中使用onclick觸發函數，一直報錯，顯示function未定義，開始還以爲

Ro0k1e 2020-07-08 11:27:27

html格式化輸出

文本格式化 多個空行會被瀏覽器忽略 <b>This text is bold</b>加粗 <br /> <strong>This text is strong</strong> <br /> <big>This text

zgqxiexie 2020-07-08 11:05:52

JS基礎複習（四）四分鐘帶你徹底搞定全局變量和局部變量

JS基礎複習（四）四分鐘帶你徹底搞定全局變量和局部變量 一、寫在開頭 這個是因爲最近期末考要考web，恰好有這個知識點，所以我自己總結了一下，希望可以幫助到大家。 二、發現問題 區分什麼是局部變量，什麼是全局變量，變量之間賦值後結

ODST_TheSolverO5 2020-07-08 10:59:41

HTML5入門之常用標籤

html5標準網頁聲明 <!DOCTYPE html> 必要結構 <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

blackcatkiller 2020-07-08 10:51:12

web前端複習第七課

                                           二級導航實例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

思丰百年 2020-07-08 10:46:31

首次體驗phonegap實現的Android APP

之前就聽說過phonegap的存在，但是就是一直沒有時間去接觸它，對他很迷糊。然後最近一時興起，就去百度了一下phonegap是什麼？ 以下是百度百科的解釋： PhoneGap是一個用基於HTML，CSS和JavaScript的

LFWMP 2020-07-08 10:28:30

網頁設計中常見的兼容性問題

常見兼容性問題 1、png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8. 2、瀏覽器默認的margin和padding不同。解決方案是加一個全局的 *{margin:0;padding:0;}來統一。 3、IE6

LFWMP 2020-07-08 10:28:29

嚴格模式與混雜模式

如何區分嚴格模式與混雜模式，它們有何意義！ 嚴格模式：又稱標準模式，是指瀏覽器按照 W3C 標準解析代碼。 混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼。 區分方法： 如果文檔包含嚴格的 DOCTYPE ，那

LFWMP 2020-07-08 10:28:29