DIV+CSS学习笔记总结篇
DIV+CSS學習筆記總結篇
第一部分 HTML
第一章 職業(yè)規(guī)劃和前景
-
職業(yè)方向規(guī)劃定位：
- web前端開發(fā)工程師
- web網(wǎng)站架構師
- 自己創(chuàng)業(yè)
- 轉(zhuǎn)崗管理或其他
-
web前端開發(fā)的前景展望：
- 未來IT行業(yè)企業(yè)需求最多的人才
- 結合最新的html5搶占移動端的市場
- 自己創(chuàng)業(yè)做老板
- 隨著互聯(lián)網(wǎng)的普及web開發(fā)成為企業(yè)的寵兒和核心
-
web職業(yè)發(fā)展目標：
-
第一、梳理知識架構
- 負責內(nèi)容的HTML
- 負責外觀的css（層疊樣式表）
- 負責行為的js
- ps切圖
-
第二、分解目標（起步階段、提升階段、成型階段）
-
起步階段：
- 基本知識的掌握
- 常用工具的掌握
- 溝通技巧的掌握（圍繞客戶的需求）
- 良好的開發(fā)習慣（加注釋、對齊方式）
-
提升階段：
- 熟悉掌握HTML基本標簽和屬性
- 熟練掌握css的基本語法和使用
- 瀏覽器兼容和w3c標準的掌握
- 結合html+css+js開始系統(tǒng)項目的開發(fā)
-
成型階段：
- 精通DIV+CCS布局
- 精通css樣式表控制html標簽
- 熟悉運用js制作動態(tài)網(wǎng)站的效果
- 能獨立開發(fā)完成網(wǎng)站
-
第二章 html基本結構
-
認識HTML：
- html不是一種編程語言，是一種標志語言
- 標記語言是由一套標識標簽組成的
- html使用標簽來描述網(wǎng)頁
-
html結構：
- 不成對出現(xiàn)的標簽
<br>?<hr>?<meta>?<img>?<input..>?<option..>?<link>
-
HTML 基本標簽的講解：
-
<html>?<head>?<body>標簽
-
<h1>----<h6>僅僅用于標題文本，不要為了產(chǎn)生粗體文本使用它們
-
<p>標簽 段落標簽
-
<strong><b>標簽
-
都會讓文字產(chǎn)生加粗效果
- <strong>用于強調(diào)文本，強度更深，表示重要文本--->用于SEO優(yōu)化
- <b>只是視覺加粗效果--->單純?yōu)榱水a(chǎn)生加粗
-
-
<em>?<i>標簽
- em用于強調(diào)文本
- i只是視覺斜體效果
- <strong>比<em>強調(diào)更強
-
特殊符號：
- ---->空格
- > --->大于號
- <；--->小于號
- "；--->引號
- ©-->版權號
第三章 html基本標簽
- HTMl基本標簽：
-
span標簽
- 對被用來組合文檔中的行內(nèi)元素
- 注意：span沒有固定的格式表現(xiàn)，當對它應用樣式時，才會產(chǎn)生視覺上的變化
-
<pre>標簽
- 文字的格式按源碼的排版來顯示，我們稱之為預處理格式
-
<a>標簽--->他有一個必不可少的屬性 href
- target屬性：
- _self(在原來頁面打開)
- _blank（新窗口打開）
- _top（打開時忽略所有的框架）
- _parent（在父窗口中打開）
-
創(chuàng)建錨點和錨鏈接
- 錨點也是一種超鏈接，是頁面內(nèi)進行跳轉(zhuǎn)的超鏈接
- 第一步：創(chuàng)建錨點?<a name="錨點名稱"></a>
- 第二步：使用創(chuàng)建好的錨點名稱?<a href="#錨點名稱">內(nèi)容</a>
- 錨點也是一種超鏈接，是頁面內(nèi)進行跳轉(zhuǎn)的超鏈接
-
marquee標簽
- 可以創(chuàng)建一個內(nèi)容滾動效果
-
- direction?表示滾動方向，取值有（left,right,up,down,默認left）
- loop表示滾動循環(huán)的次數(shù)，默認為無限循環(huán)
- 表示當鼠標移上區(qū)域的時候停止?jié)L動，鼠標移開繼續(xù)滾動
第四章 img圖片標簽與路徑
-
圖片標簽與路徑：
- 常見圖片格式?jpg?png?gif
- Gif?（只支持全透明）
- Jpeg?/jpg
- Png?半/全透明都支持
-
圖片標簽寫法 ：
- <img src="" alt="" width="" height="" />
-
圖片四要素：
- src=""?圖片路徑
- alt=""?圖片含義
- width=""?圖片寬度 和圖片大小保持一致
- height=""?圖片高度 和圖片大小保持一致
- title=""
-
路徑知識：
-
相對路徑、絕對路徑：
- 相對路徑：(Relative Path) 相對于該文件的路徑；
- 絕對路徑：(Absolute Path) 從磁盤出發(fā)的路徑；
-
<img src="" …… align="" />?align屬性--設置圖片與后面文字的位置關系
值--top、bottom、middle、absmiddle、left、right
-
-
在靜態(tài)頁面中：
-
/開頭表示根目錄；
-
./表示當前目錄；（斜畫線前面一個點）
-
../上級目錄；（斜畫線前面兩個點）
-
直接用文件名不帶/也表示同一目錄
-
這些都是相對于當前文件的位置來說的，如果用絕對路徑的話就是寫全了。
-
第五章 三種列表的講解
- 三種列表的知識講解：
- <ul>無序列表
- 無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標識
- <ul>無序列表
- <ol>有序列表
- 有序列表也是一列項目，只是列表項目使用的是數(shù)字進行標記。 有序列表始于?<ol>?標簽。每個列表項始于?<li>標簽。
-
列表符號
-
無序列表-列表符號:
- 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
-
列表嵌套
-
無序列表-嵌套
-
- 有序列表-嵌套
- 定義列表
- 定義列表不僅僅是一列項目，而是項目及其注釋的組合。定義列表以?<dl>?標簽開始。每個定義列表項以?<dt>開始。每個自定義列表項的定義以?<dd>?開始。
-
dd是對dt的解釋
- < dl>< /dl>用來創(chuàng)建一個普通的列表,
- < dt>< /dt>用來創(chuàng)建列表中的上層項目，
- < dd>< /dd>用來創(chuàng)建列表中最下層項目，
- < dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標志對之間。
- dl是definition list的縮寫
- dt是definition title的縮寫
- dd是definition description的縮寫
- list-style屬性具有三個屬性分量：
- list-style-position?：設置列表項圖標的位置，位于文本內(nèi)或者文本外
- list-style-type： 設置列表項圖標的類型
- list-style-image：使用圖像設置列表項圖標
第六章 表單元素(上)
-
表單標簽:
-
<form>表單標簽
- <form>表單是一個包含表單元素的區(qū)域，包括起來的都是表單的內(nèi)容
-
- HTML標簽 -?Action和確認按鈕：
- 當用戶單擊確認按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進行相關的處理。
-
HTML標簽 - 隱藏域隱藏標簽：
-
隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候，隱藏域的信息也被一起發(fā)送到服務器
-
<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"?隱藏
-
-
關于表單中的設置默認值：
-
textarea沒有默認值
-
<label>標簽的使用
-
<label></label>
- label?元素不會向用戶呈現(xiàn)任何特殊效果。
- 不過，它為鼠標用戶改進了可用性。
- 如果您在?label?元素內(nèi)點擊文本，就會觸發(fā)此控件。
- 就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關的表單控件上。
-
<label>?標簽的for?屬性應當與相關元素的?id屬性相同。
-
例子：（重要---注冊表單--用戶體驗--必做）
-
第七章 表單和表格(下)
-
表單和表格標簽：
- <textarea>文本域標簽
- <textarea>標簽：
- <textarea></textarea>是文本域標簽，可以在其中插入一段文字內(nèi)容，它有兩個常用屬性rows和cols
-
注意：
- rows表示這個文本域有多少行
- cols表示這個文本域有多少列
-
除了這兩個屬性它還有readonly（只讀，文本域的內(nèi)容無法改變，相當于協(xié)議）和title（鼠標放上提示）
-
<select>標簽的掌握
- 注：當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數(shù)列表，并且在將?<select>?表單數(shù)據(jù)提交給服務器時包括?name屬性
- 常用到的屬性：disabled=“disabled” name="sel" size="2"
- <table>表格標簽
- <table>表格標簽：<table>是表格標簽，可以用它定義一個表格。
- 注意：<table>的border屬性不能少
-
<tr>?<td>標簽的使用
-
<tr>行標簽：
- <tr>可以定義表格中的一行，一個<tr></tr>表示一行。
-
-
<td>單元格標簽:
- <td>可以定義表格中的一個單元格，<td></td>表示一個單元格。
- 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*屬性：設置跳轉(zhuǎn)的網(wǎng)頁地址
- target屬性：設置跳轉(zhuǎn)的目標
- 結論：凡事頁面可以點擊跳轉(zhuǎn)或者表單提交的文字，都用a標簽
- img
- src*屬性用來設置圖片的url數(shù)據(jù)
- alt提供給搜索引擎搜索的
- width
- height
- 結論 ：顯示圖片
- ul li
- 列表
- 結論：只要將來設計頁面中有固定樣式的列表，就用ul和li
- table?caption?tr?td (th)
- 慢慢已經(jīng)被淘汰了 被ul li代替
- 如果是合并豎排的就是合并行（rowspan）
- 如果是合并橫排的就是合并列（colspan）
- **?div**
HTML部分導圖總結
- HTML5標簽集合
第二部分 CSS
第八章 css基礎知識
- css基礎知識：
- css樣式表的定義
- css：（Cascading Style Sheets）層疊樣式表；
- 分類及位置：內(nèi)部樣式-head區(qū)域style標簽里面
- 外部樣式-link調(diào)用
- 內(nèi)聯(lián)樣式-標簽元素里面
- css內(nèi)的注釋：/*注釋內(nèi)容*/
- css樣式表的語法
-
CSS規(guī)則由兩個主要的部分構成：要添加樣式的盒子名或者標簽名、和要添加的樣式。
-
盒子名或者標簽名{屬性:值;}
-
CSS中幾種顏色的表示方法
- 用顏色名表示
- 有17個預先確定的顏色，它們是
- aqua,?black,?blue,?fuchsia,?gray,?green,?lime,?maroon,?navy,
olive,?orange,?purple,?red,?silver,?teal,?white, and?yellow
- aqua,?black,?blue,?fuchsia,?gray,?green,?lime,?maroon,?navy,
- 有17個預先確定的顏色，它們是
- 用顏色名表示
-
用十六進制的顏色值表示(紅、綠、藍)
- #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代表
藍色
- 如：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)、飽和度、亮度、透明度
-
例子
-
- 內(nèi)部樣式表
- 當單個頁面需要設置樣式時，就應該使用內(nèi)部樣式表。
- 使用?<style></style>標簽在文檔<head></head>里面定義內(nèi)部樣式表
-
從外部引入到樣式分為兩種：（注意寫在head標簽里面）
-
當樣式需要應用于很多頁面時，就需要用到外部樣式表，首先需要創(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)先級高）
-
寫在標簽里面的樣式
-
如：<p style="color:red;"></p>
-
-
表示給p標簽里面的文字顏色設置為紅色
-
區(qū)別：外鏈樣式與導入樣式
-
link標簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標簽除了可以加載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)先級補充
- 相同權值情況下，CSS樣式的優(yōu)先級總結來說，就是——就近原則（離被設置元素越近優(yōu)先級別越高）：
- 內(nèi)聯(lián)樣式表（標簽內(nèi)部）?>?嵌入樣式表（當前文件中）>?外部樣式表（外部文件中）
- 相同權值情況下，CSS樣式的優(yōu)先級總結來說，就是——就近原則（離被設置元素越近優(yōu)先級別越高）：
-
權值不同時，瀏覽器是根據(jù)權值來判斷使用哪種css樣式的，哪種樣式權值高就使用哪種樣式
-
層疊優(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)先級順序為：
- 一個元素同時應用多個class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！
第九章 css選擇器(上)
-
css選擇器：
- class類選擇器可以重復利用
- id選擇器唯一
-
標簽選擇器
- 什么是選擇器：css選擇器就是要改變樣式的對象
-
選擇器{屬性:值;屬性:值;}
-
標簽選擇器：頁面中所有的標簽都是一個選擇器?p{color:red;}
-
ID選擇器
- 選擇id命名的元素 以?#?開頭?#p1{color:#0f0;}
-
類選擇器
- class選擇器，選擇clas命名的元素 以.開頭?.first{color:#00f;}
-
css代碼寫完后上線前要經(jīng)過壓縮處理
-
本地和服務器分兩個css版本（備份）
-
壓縮后注釋都清除，空間體積減少
-
群組選擇器
- 選擇多個元素,以逗號隔開?#main,.first,span,a,h1{color:red;}
-
包含選擇器
- 選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
- span{color:red;}
- 選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
-
屬性選擇器
- 選擇包含某一屬性的元素
- 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?在元素之前添加內(nèi)容。
- :after?在元素之后添加內(nèi)容。
-
css優(yōu)先規(guī)則
- 內(nèi)聯(lián)樣式表->?ID?選擇器—>?Class?類選擇器->標簽選擇器
第十一章 背景屬性
- 背景屬性：
-
背景的添加 ：
-
背景顏色的添加:
- background:red;
- backgronnd-color:red;
-
背景圖片的添加：
- background:url(“images/1.jpg”);
- backgronnd-image:url(“images/1.jpg”);
-
背景的平鋪
-
什么是平鋪？平鋪就是圖片是否重復出現(xiàn)
- 不平鋪：background-repeat:no-repeat;
- 水平方向平鋪：background-repeat:repeat-x;
- 垂直方向平鋪：background-repeat:repeat-y;
- 完全平鋪：默認為完全平鋪
-
背景圖片的定位
- 背景圖片的定位就是可以設置顯示背景圖片的位置，通過屬性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來設置background-size的取值可為數(shù)值和百分值。
-
background-size的數(shù)值取值
- background-size:x y;
-
background-size的數(shù)值取值
- background-size:x% y%;
-
背景圖片的滾動
-
背景圖片是否隨著內(nèi)容的滾動而滾動由background-attachment設置
-
background-attachment:fixed;?固定，不隨內(nèi)容的滾動而滾動
-
background-attachment:scroll;?滾動，隨內(nèi)容的滾動而滾動
-
-
第十二章 文字文本屬性
-
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;?行間距(可通過它實現(xiàn)文本的垂直居中)
- text-indent:20px;?首行縮進
- text-decoration:none;
- 文本線(none/underline/overline/line-through)
- letter-spacing: 字間距
第十三章 盒子模型
-
盒子模型
- 盒子模型就是一個有高度和寬度的矩形區(qū)域
- 所有html標簽都是盒子模型
- div標簽自定義盒子模型
-
所有的標簽都是盒子模型
- class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標識單獨的唯一的元素。
-
盒子模型的組成
- 盒子模型組成部分：
- 自身內(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;?上 右 下 左（設置4個點-->順時針方向）
-
-
單獨屬性：
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
-
當設置內(nèi)邊距的時候會把盒子撐大，為了保持盒子原來的大小，應該高度和寬度進行減小，根據(jù)width和height減小
-
margin 外邊距
-
值：與padding相同
-
單獨屬性：與padding相同
-
-
外邊距合并：兩個盒子同時設置了外邊距，會進行一個外邊距合并
補充盒子模型內(nèi)容
-
標準盒子模型
-
盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是?ie盒子模型和標準?w3c?盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型
-
從上圖可以看到標準?w3c?盒子模型的范圍包括?margin、border、padding、content，并且?content部分不包含其他部分
-
** IE盒子模型**
-
從上圖可以看到?ie盒子模型的范圍也包括?margin、border、padding、content
-
和標準?w3c?盒子模型不同的是：ie?盒子模型的?content?部分包含了?border和?padding
-
IE盒子模型width?=?padding+border+內(nèi)容
-
標準盒子模型 = 內(nèi)容的寬度（不包含border+padding）
-
例：
-
一個盒子的?margin為 20px，border?為 1px，padding為 10px，content?的寬為 200px、高為 50px，假如用標準?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
-
那應該選擇哪中盒子模型呢？當然是“標準?w3c?盒子模型”了。怎么樣才算是選擇了“標準?w3c盒子模型”呢？很簡單，就是在網(wǎng)頁的頂部加上?doctype?聲明。
-
假如不加doctype?聲明，那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁，即?ie瀏覽器會采用?ie?盒子模型去解釋你的盒子，而?ff會采用標準w3c?盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。
-
反之，假如加上了?doctype?聲明，那么所有瀏覽器都會采用標準?w3c盒子模型去解釋你的盒子，網(wǎng)頁就能在各個瀏覽器中顯示一致了。
- 用?jquery?做的例子來證實一下
- 上面的代碼沒有加上?doctype?聲明，在?ie?瀏覽器中顯示?ie盒子模型，在 ff 瀏覽器中顯示“標準w3c?盒子模型”。
- 代碼2 與代碼1 唯一的不同的就是頂部加了?doctype聲明。在所有瀏覽器中都顯示“標準?w3c盒子模型”
-
所以為了讓網(wǎng)頁能兼容各個瀏覽器，讓我們用標準?w3c?盒子模型
-
擴展
- 學會使用box-sizing布局
第十四章 塊元素、行元素與溢出
-
基本概念
- 塊級元素：默認情況下獨占一行的元素，可控制寬高、上下邊距；
- 行內(nèi)元素：默認情況下一行可以擺放多個的元素，不可控制寬高和上下邊距
-
行塊轉(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)元素和快級元素小結
-
一、塊級元素：block element
-
每個塊級元素默認占一行高度，一行內(nèi)添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）。兩個塊級元素連續(xù)編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內(nèi)元素；
-
塊級元素一般作為容器出現(xiàn)，用來組織結構，但并不全是如此。有些塊級元素，如只能包含塊級元素。
-
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%，除非設定一個寬度。
- ④、它可以容納內(nèi)聯(lián)元素和其他塊元素
-
四、inline元素的特點
- ①、和其他元素都在一行上；
- ②、高，行高及外邊距和內(nèi)邊距不可改變；
- ③、寬度就是它的文字或圖片的寬度，不可改變
- ④、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
-
對行內(nèi)元素，需要注意如下:
- 設置寬度width?無效。 設置高度height無效，可以通過line-height來設置。 設置margin
- 只有左右margin有效，上下無效。
- 設置padding只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的。
-
五、常見的塊狀元素
- 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可選內(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?– 字體設定(不推薦)
- i?– 斜體
- img?– 圖片
- input?– 輸入框
- kbd?– 定義鍵盤文本
- label?– 表格標簽
- q?– 短引用
- s?– 中劃線(不推薦)
- samp?– 定義范例計算機代碼
- select?– 項目選擇
- small?– 小字體文本
- span?– 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
- strike?– 中劃線
- strong?– 粗體強調(diào)
- sub?– 下標
- sup?– 上標
- 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ū)別一：
- 塊級：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度
- 行內(nèi)：行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排在同一行。其寬度隨內(nèi)容的變化而變化。
-
區(qū)別二：
- 塊級：塊級元素可以設置寬高
- 行內(nèi)：行內(nèi)元素不可以設置寬高
-
區(qū)別三：
- 塊級：塊級元素可以設置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一樣的設置方法）
-
<img>、<input>、<textarea>、<select>
-
<object>都是替換元素，這些元素都沒有實際的內(nèi)容
-
可以通過修改display屬性來切換塊級元素和行內(nèi)元素
第十五章 定位
-
static靜態(tài)定位（不對它的位置進行改變，在哪里就在那里）
- 默認值。沒有定位，元素出現(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?屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
- 定位的基本思想: 它允許你定義元素框相對于其正常位置應該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
-
一切皆為框
- 塊級元素:?div、h1或p元素 即：顯示為一塊內(nèi)容稱之為 “塊框“ ;
- 行內(nèi)元素:?span,strong,a等元素 即：內(nèi)容顯示在行中稱 "行內(nèi)框";
- 使用display屬性改變成框的類型 即：display:block; 讓行內(nèi)元素設置為塊級元素，display:none;?沒有框
-
相對定位：
- 如果對一個元素進行相對定位，它將出現(xiàn)在它所在的位置上。
- 通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動
- .adv_relative { position: relative; left: 30px; top: 20px; }
-
絕對定位：
- 元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位 的祖先元素，它的位置相對于最初的包含塊。?.adv_absolute { position: absolute; left: 30px; top: 20px; }
?
第十六章 框架
-
frameset框架：
- <frameset>?---- 用來定義一個框架；雙標簽
不能和?<body>?一起使用
- <frameset>?---- 用來定義一個框架；雙標簽
-
rows、cols屬性
- rows?定義行表示框架有多少行（取值?px/%/?*?）
- cols?定義列表示框架有多少列（取值px/?%/?*?）
-
frame子框架
- <frame> ---- 表示框架中的某一個部分；單標簽，要跟結束標志
- src?顯示的網(wǎng)頁的路徑
- name?框架名
- frameborder?邊框線（取值 0 / 1）
- <frame> ---- 表示框架中的某一個部分；單標簽，要跟結束標志
-
<noframes>屬性
-
<noframes> 提供不支持框架的瀏覽器顯示body的內(nèi)容；雙標簽
- <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
- 所以寫透明屬性時，一般寫法是
-
border-radius圓角邊框?qū)傩?/p>
- 向?div?元素添加圓角邊框
- border-radius:10px;
- 向?div?元素添加圓角邊框
-
box-shadow陰影屬性
-
box-shadow屬性向框添加陰影效果,后面跟4個參數(shù)。
-
box-shadow:0px 0px 10px #000;
-
-
<embed>屬性
-
是HTML5中新增的標簽,媒體嵌入插件標簽，可以通過<embed>插入音頻或視頻
-
<embed src=“media/music.mp3” />
-
格式.mid?.wav?.mp3等
-
- CSS部分導圖總結
- 原文件下載地址
- css選擇符(復制圖片地址到瀏覽器打開放大即可清晰查看)
css選擇符
- css常見簡寫
css簡寫速查
-
HTML+CSS+JavaScript學習導圖筆記(復制圖片地址到瀏覽器打開放大即可清晰查看)
?HTML+CSS+JavaScript學習導圖筆記
-
前端詳細學習路線(復制圖片地址到瀏覽器打開放大即可清晰查看)
-
前端學習路線
-
第三部分 附錄
附錄一 DIV命名規(guī)范
-
企業(yè)DIV使用頻率高的命名方法
-
網(wǎng)頁內(nèi)容類
-
標題:?title
- 摘要:?summary
- 箭頭：?arrow
- 商標：?label
- 網(wǎng)站標志：?logo
- 轉(zhuǎn)角/圓角：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
- 狀態(tài)：?status
- 版權：?copyright
- 按鈕：?btn
- 合作伙伴：?partner
- 投票：?vote
- 左右中：left?right?center
-
注釋的寫法:?/* Footer */?內(nèi)容區(qū)/* End Footer */
-
-
id的命名:
-
頁面結構
- 容器:?container
- 頁頭：header
- 內(nèi)容：content/container
- 頁面主體：main
- 頁尾：footer
- 導航：nav
- 側(cè)欄：sidebar
- 欄目：column
- 頁面外圍控制整體布局寬度：wrapper
- 左右中：left?right?center
-
導航
- 導航：nav
- 主導航：mainbav
- 子導航：subnav
- 頂導航：topnav
- 邊導航：sidebar
- 左導航：leftsidebar
- 右導航：rightsidebar
- 菜單：menu
- 子菜單：submenu
- 標題:?title
- 摘要:?summary
-
功能
- 標志：logo
- 廣告：banner
- 登陸：login
- 登錄條：loginbar
- 注冊：regsiter
- 搜索：search
- 功能區(qū)：shop
- 標題：title
- 加入：joinus
- 狀態(tài)：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雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網(wǎng)站的HTTP請求數(shù)量。
- 該圖片使用CSS?background和background-position屬性渲染，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。
- CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網(wǎng)站的HTTP請求數(shù)量。
- 一個簡單的例子：
- 一張圖片作出一個按鈕的三個狀態(tài)
- 一個鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態(tài)，a:link，a:hover，a:active?<a class="button" href="#">鏈接</a>
- 加入右側(cè)的圖片為：200px 65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標滑過、鼠標點擊的狀態(tài)。則可以使用CSS進行定義。
- 更多的CSS雪碧，圖片更復雜，背景定位更精確。可能會用到大量的數(shù)值
- 如：background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位
- 優(yōu)點：
- 減少加載網(wǎng)頁圖片時對服務器的請求次數(shù)
- 可以合并多數(shù)背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調(diào)用一個圖片，從而減少對服務器的請求次數(shù)，降低服務器壓力，同時提高了頁面的加載速度，節(jié)約服務器的流量。
- 提高頁面的加載速度
- sprite技術的其中一個好處是圖片的加載時間(在有許多?sprite?時，單張圖片的加載時間)。由所需圖片拼成的一張?GIF圖片的尺寸會明顯小于所有圖片拼合前的大小。單張的?GIF只有相關的一個色表，而單獨分割的每一張?GIF?都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張?JPEG?或者?PNG?sprite?在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
- 減少鼠標滑過的一些bug
- IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現(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)整文件加載順序
- 減少標簽數(shù)量
- 調(diào)整選擇器長度
- 盡量使用CSS?制作顯示表現(xiàn)
- 增強代碼可讀性與可維護性
- 規(guī)范化
- 語義化
- 模塊化
寫DIV+CSS 的一些常識
-
不要使用過小的圖片做背景平鋪
- 這就是為何很多人都不用?1px?的原因，這才知曉。寬高?1px?的圖片平鋪出一個寬高?200px?的區(qū)域，需要?200200=40, 000?次，占用資源
-
無邊框
- 推薦的寫法是?border:none;，哈哈，我一直在用這個。?border:0;?只是定義邊框?qū)挾葹榱?#xff0c;但邊框樣式、顏色還是會被瀏覽器解析，占用資源
-
慎用 通配符
- 所謂通配符，就是將CSS?中的所有標簽均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標簽。
-
CSS的十六進制顏色代碼縮寫
- 習慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時會增加文件體積。孰優(yōu)孰劣，有待仔細考證。
-
樣式放頭上，腳本放腳下。不內(nèi)嵌，只外鏈
-
堅決不用?CSS表達式
-
使用 引用樣式表，而不是通過@import?導入。
-
一般來說，PNG比?GIF?要小，小得多。再者，GIF?中有多少顏色是被浪費的，很值得優(yōu)化。
-
千萬不要在?HTML中縮放圖片，一者不好看，二者占資源。
-
正文字體最好用偶數(shù)
- 12px、14px、16px，效果非常好。特例，15px。
-
block、ul、ol等上下留出至少一倍行距，左側(cè)至少兩倍行距，右側(cè)隨意。
-
段落之間，至少要有一倍行距
-
強行指定某些元素的?line-height，正文?1.6倍于文字大小，標題1.3倍。
-
中文標點用全角
- 英文夾雜在中文中，左右空格，半角。
-
中文字體的粗體和斜體，遠離較好
-
[建議] HTML 標簽的使用應該遵循標簽的語義
- 下面是常見標簽語義
- p?- 段落
- h1,h2,h3,h4,h5,h6?- 層級標題
- strong,em?- 強調(diào)
- ins?- 插入
- del?- 刪除
- abbr- 縮寫
- code?- 代碼標識
- cite?- 引述來源作品的標題
- q?- 引用
- blockquote?- 一段或長篇引用
- ul?- 無序列表
- ol?- 有序列表
- dl,dt,dd?- 定義列表
- 下面是常見標簽語義
常用代碼片段
- 雅虎工程師提供的CSS初始化示例代碼【僅供參考】
- 可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯誤。
-
現(xiàn)代瀏覽器cssreset解決方案【推薦使用這個】
- normalize.css
-
mobile meta標簽
- 表格不被撐開
- 不設寬高居中
- 透明度的兼容代碼
-
文本溢出的幾種處理方法
-
簡單隱藏
- 使用滾動條
- 簡單裁切
- 超出部分省略號
-
清除浮動的幾種方法
- 方法一：投機取巧法?-- 不推薦
- 直接一個放到當作最后一個子標簽放到父標簽那兒，此方法屢試不爽，兼容性強
-
方法二：overflow + zoom方法 --不推薦
.fix{overflow:hidden; zoom:1;}- 此方法優(yōu)點在于代碼簡潔，涵蓋所有瀏覽器
-
方法三：after + zoom方法 -推薦--此方法可以說是綜合起來最好的方法了
- clearfix只應用在包含浮動子元素的父級元素上
- 方法四 在方法三的基礎上的最優(yōu)雅的做法【推薦】
清除浮動的原理是觸發(fā)BFC，這里只有clear:both起清除浮動作用，其他的line-height:0; visibility:hidden;都是為了隱藏生的內(nèi)容需要的
- 拓展閱讀
- CSS中的浮動和清除浮動
- 實用的60個CSS代碼片段
一些總結
-
自動繼承屬性：
- 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站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效
-
漸進增強?progressive enhancement：
- 從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用
-
平穩(wěn)退化
- 是在瀏覽器沒有JavaScript功能，或沒有開啟JavaScript功能情況下，我們解決這種問題的方式；
方案薈萃擴展閱讀
-
關于布局
-
垂直居中
-
css完全居中
-
居中之美
-
網(wǎng)頁中的底部foot定位
-
頁面高度100%
-
textarea高度自適應
-
多行溢出省略
-
Retina屏1px線
-
Flexbugs
-
其他
-
IF IE ENDIF條件判斷之IE10
-
Chrome 翻譯插件
-
網(wǎng)頁retina優(yōu)化
-
常用meta
-
樹狀菜單
-
em vs rem
-
css vs js
-
css解決方案（w3cplus）
-
Textures生成紋理
-
CSSgram
-
Csscss（檢查重復聲明等）
附錄四 部分工具資源
- 學會使用Emmet插件快速編碼
- Emmet常用快捷鍵
- Sublime專題
- Sublime常用插件總結
- Front-End -Develop -Tools
- ToolsBox-自己整理的一份工具列表
附錄五 編碼規(guī)范
- 編碼規(guī)范
- 前端規(guī)范
- web develop standard
- Web 前端開發(fā)規(guī)范文檔
- 前端開發(fā)規(guī)范手冊
附錄六 進階學習
- DOM編程之API學習總結篇
- JavaScript基礎學習筆記總結篇
- jQuery基礎學習總結篇
附錄七 其他資源
- Github上前端學習資源匯總
- WEB 前端開發(fā)學習筆記
- 前端開發(fā)工具箱
- 148個資源讓你成為CSS專家
- 學習CSS布局-經(jīng)典必看
- 前端資料推薦你認真看
- 2015-2016前端知識體系
附錄八 常見問題
- 前端指路
- 寫給前端面試者（w3cplus）
- 如何成為一名卓越的前端工程師（勾三股四博客）
- 什么是全棧工程師
- 如何跟上前端開發(fā)的最新前沿
- 瀏覽器的工作原理
- 移動前端開發(fā)和 Web 前端開發(fā)的區(qū)別
- 大型網(wǎng)站CSS編寫與維護
- CSS核心技術關鍵字
-
前端技術文章【新人篇】
- 從零基礎到精通的前端學習路線
- 前端開發(fā)必會的二十五個知識點
-
為什么整個互聯(lián)網(wǎng)行業(yè)都缺前端工程師？
-
如何成為一名優(yōu)秀的前端工程師
-
前端開發(fā)需要學什么？
-
高效的前端編程入門訓練方法
-
寫給剛?cè)腴T的前端工程師的前后端交互指南
-
HTML5 如何重新定義web
-
HTML5標簽使用的常見誤區(qū)
-
css工作中常用的效果總結
-
CSS消失的邊界問題
-
性能/規(guī)范/實踐
-
如何閱讀W3c規(guī)范(王曉軒)
-
如何閱讀W3c規(guī)范(高博)
-
雅虎web性能優(yōu)化軍規(guī)
-
權威前端性能指南
-
高性能css
-
一些問答社區(qū)
-
quora
-
stackoverflow
-
知乎
-
前端亂燉問答區(qū)
-
segmentfault問答區(qū)
小編是個多年開發(fā)經(jīng)驗的程序員。如果你想要學好WEB前端，在學習過程中，身邊沒有一個能夠指導你學習的人，可以到這個WEB前端裙，里面最新學習路線和教程，不管是計算機專業(yè)想要往WEB前端方向發(fā)展，還是零基礎想轉(zhuǎn)行，都可以跟著教程學，有什么不懂的可以在里面問，這就是WEB前端裙。前面三個輸入112，中間三個輸入666，后面三個輸入2127
?
?
?
總結
以上是生活随笔為你收集整理的DIV+CSS学习笔记总结篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信互动大屏 霸屏 抢红包 源码及所需技
- 下一篇： CSS右键菜单