前端开发（html和css）
生活随笔
收集整理的這篇文章主要介紹了
前端开发（html和css）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前端html與css學(xué)習(xí)筆記（現(xiàn)在自學(xué)中，借鑒別人的文章）
內(nèi)容一 內(nèi)容二 內(nèi)容三
列表符號無序列表-列表符號:type="circle" 空心圓 type=“disc” 實心圓 默認(rèn)值 type="square" 方塊符有序列表-列表符號type="A" A B C Dtype="a" a b c dtype="1" 1 2 3 4 默認(rèn)值type=”I” I II III type=”i” i ii iii列表嵌套無序列表-嵌套
茶 果汁 牛奶
定義列表定義列表不僅僅是一列項目，而是項目及其注釋的組合。定義列表以 <dl> 標(biāo)簽開始。每個定義列表項以 <dt>開始。每個自定義列表項的定義以 <dd> 開始。
學(xué)習(xí)DIV+CSS JS JQ 項目實戰(zhàn) 手機(jī)網(wǎng)頁制作手機(jī)網(wǎng)頁制作實戰(zhàn)
dd是對dt的解釋< dl>< /dl>用來創(chuàng)建一個普通的列表,< dt>< /dt>用來創(chuàng)建列表中的上層項目，< dd>< /dd>用來創(chuàng)建列表中最下層項目，< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對之間。
北京 上海 廣州 美國城市華盛頓 芝加哥 紐約
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)
<td>單元格標(biāo)簽:<td>可以定義表格中的一個單元格，<td></td>表示一個單元格。1234567<table border="1"><tr><td >姓名</td><td>性別</td><td>愛好</td></tr></table>border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框：border-collapse:collapse;colspan左右合并rowspan上下合并
第一部分 HTML
第一章 職業(yè)規(guī)劃和前景
第二章 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)：1
2
3
4
第三章 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)簽—>他有一個必不可少的屬性 hreftarget屬性：_self(在原來頁面打開)_blank（新窗口打開）_top（打開時忽略所有的框架）_parent（在父窗口中打開）創(chuàng)建錨點和錨鏈接錨點也是一種超鏈接，是頁面內(nèi)進(jìn)行跳轉(zhuǎn)的超鏈接第一步：創(chuàng)建錨點 <a name="錨點名稱"></a>第二步：使用創(chuàng)建好的錨點名稱 <a href="#錨點名稱">內(nèi)容</a>marquee標(biāo)簽可以創(chuàng)建一個內(nèi)容滾動效果1
direction 表示滾動方向，取值有（left,right,up,down,默認(rèn)left） loop表示滾動循環(huán)的次數(shù)，默認(rèn)為無限循環(huán)1
οnmοuseοver=this.stop() οnmοuseοver=this.start() scrollamout=“1”(滾動速度)
表示當(dāng)鼠標(biāo)移上區(qū)域的時候停止?jié)L動，鼠標(biāo)移開繼續(xù)滾動第四章 img圖片標(biāo)簽與路徑
圖片標(biāo)簽與路徑：常見圖片格式 jpg png gifGif （只支持全透明）Jpeg /jpgPng 半/全透明都支持圖片標(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)粗體圓點進(jìn)行標(biāo)識1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
6
7
8
9
- 柚子
- 沙田柚
- 蜜柚
- 荔枝
- 蘋果
1
2
3
4
5
6
7
8
9
- 紅茶
- 綠茶
1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10
第六章 表單元素(上)
表單標(biāo)簽:<form>表單標(biāo)簽<form>表單是一個包含表單元素的區(qū)域，包括起來的都是表單的內(nèi)容123<form><input type="text"/></form>HTML標(biāo)簽 - Action和確認(rèn)按鈕：當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。1
2
3
4
1
2
3
1
2
3
4
第七章 表單和表格(下)
表單和表格標(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屬性123456<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)簽，可以用它定義一個表格。1 2 3 4 5 6<table border="1"><tr><td>姓名</td><td>性別</td></tr> </table>注意：<table>的border屬性不能少<tr> <td>標(biāo)簽的使用<tr>行標(biāo)簽：<tr>可以定義表格中的一行，一個<tr></tr>表示一行。1
2
3
4
5
6
7
8
9
10
11
| 姓名 | 性別 |
| 姓名 | 性別 |
第一部分總結(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)簽imgsrc*屬性用來設(shè)置圖片的url數(shù)據(jù)alt提供給搜索引擎搜索的widthheight結(jié)論 ：顯示圖片ul li列表結(jié)論：只要將來設(shè)計頁面中有固定樣式的列表，就用ul和litable caption tr td (th)慢慢已經(jīng)被淘汰了 被ul li代替如果是合并豎排的就是合并行（rowspan）如果是合并橫排的就是合并列（colspan）HTML部分導(dǎo)圖總結(jié)
HTML5標(biāo)簽集合第二部分 CSS
第八章 css基礎(chǔ)知識
1
2
3
4
5
6
7
8
9
1
2
3
4
5
第九章 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;} 包含選擇器選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開pspan{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 lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerottom rightbackground-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; 首行縮進(jìn)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ìn)行減小，根據(jù)width和height減小margin 外邊距值：與padding相同單獨屬性：與padding相同外邊距合并：兩個盒子同時設(shè)置了外邊距，會進(jìn)行一個外邊距合并補(bǔ)充盒子模型內(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和 paddingIE盒子模型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 做的例子來證實一下1
2
3
4
5
6
7
8
9
10
11
12
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”>
你用的盒子模型是標(biāo)準(zhǔn)w3c盒子模型 代碼2 與代碼1 唯一的不同的就是頂部加了 doctype聲明。在所有瀏覽器中都顯示“標(biāo)準(zhǔn) w3c盒子模型”所以為了讓網(wǎng)頁能兼容各個瀏覽器，讓我們用標(biāo)準(zhǔn) w3c 盒子模型擴(kuò)展學(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 promptmenu – 菜單列表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 overridebig – 大字體br – 換行cite – 引用code – 計算機(jī)代碼(在引用源碼的時候需要)dfn – 定義字段em – 強(qiáng)調(diào)font – 字體設(shè)定(不推薦)i – 斜體img – 圖片input – 輸入框kbd – 定義鍵盤文本label – 表格標(biāo)簽q – 短引用s – 中劃線(不推薦)samp – 定義范例計算機(jī)代碼select – 項目選擇small – 小字體文本span – 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊strike – 中劃線strong – 粗體強(qiáng)調(diào)sub – 下標(biāo)sup – 上標(biāo)textarea – 多行文本輸入框tt – 電傳文本u – 下劃線七，可變元素可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。applet - java appletbutton - 按鈕del- 刪除文本iframe - inline frameins - 插入的文本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)定位（不對它的位置進(jìn)行改變，在哪里就在那里）默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top,bottom, left, right 或者 z-index 聲明）。fixed固定定位（參照物–瀏覽器窗口）—做 彈窗廣告用到生成固定定位的元素，相對于瀏覽器窗口進(jìn)行定位。 元素的位置通過 "left", "top", "right"以及 "bottom"屬性進(jìn)行規(guī)定。relative（相對定位 ）（參照物以他本身）生成相對定位的元素，相對于其正常位置進(jìn)行定位。absolute（絕對定位）(除了static都可以，找到參照物–>與它最近的已經(jīng)有定位的父元素進(jìn)行定位)生成絕對定位的元素，相對于 static 定位以外的第一個父元素進(jìn)行定位。元素的位置通過 “l(fā)eft", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定z-indexz-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; 沒有框相對定位：如果對一個元素進(jìn)行相對定位，它將出現(xiàn)在它所在的位置上。通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進(jìn)行移動.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)簽1
2
3
4
5
6
7
8
第十七章 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/–>針對早起版本的火狐兼容問題的解決
}
css簡寫速查
第三部分 附錄
附錄一 DIV命名規(guī)范
附錄二 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進(jìn)行定義。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; /定義狀態(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ù)值/
}
附錄三 一些tips解決方案
頁面優(yōu)化實踐
寫DIV+CSS 的一些常識
不要使用過小的圖片做背景平鋪這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區(qū)域，需要 200200=40, 000 次，占用資源無邊框推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框?qū)挾葹榱?#xff0c;但邊框樣式、顏色還是會被瀏覽器解析，占用資源慎用 通配符所謂通配符，就是將CSS 中的所有標(biāo)簽均初始化，不管用的不用的，過時的先進(jìn)的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標(biāo)簽。CSS的十六進(jìn)制顏色代碼縮寫習(xí)慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時會增加文件體積。孰優(yōu)孰劣，有待仔細(xì)考證。樣式放頭上，腳本放腳下。不內(nèi)嵌，只外鏈堅決不用 CSS表達(dá)式使用 引用樣式表，而不是通過@import 導(dǎo)入。一般來說，PNG比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費的，很值得優(yōu)化。千萬不要在 HTML中縮放圖片，一者不好看，二者占資源。正文字體最好用偶數(shù)12px、14px、16px，效果非常好。特例，15px。block、ul、ol等上下留出至少一倍行距，左側(cè)至少兩倍行距，右側(cè)隨意。段落之間，至少要有一倍行距強(qiáng)行指定某些元素的 line-height，正文 1.6倍于文字大小，標(biāo)題1.3倍。中文標(biāo)點用全角英文夾雜在中文中，左右空格，半角。中文字體的粗體和斜體，遠(yuǎn)離較好常用代碼片段
雅虎工程師提供的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;
}
1
表格不被撐開1
table-layout: fixed; word-break: break-all;;border-collapse: collapse
不設(shè)寬高居中1
2
3
4
5
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;
1
2
3
4
5
6
7
8
.fix{zoom:1;}
.fix:after{
display:block;
content:‘clear’;
clear:both;
line-height:0;
visibility:hidden;
}
一些總結(jié)
自動繼承屬性：colorfonttext-alignlist-style…非繼承屬性：backgroundborderposition…具有破壞性的元素：floatdisplay:none;position:absoblute/fixed/sticky;具有包裹性的元素：display:inline-block/table-cellposition:absolute/fixed/stickyoverflow:hidden/scroll消除圖片底部間隙的方法圖片塊狀化-無基線對齊img{display:block;}圖片底線對齊img{vertical-align:bottom;}行高足夠小 - 基線位置上移.box{line-height:0;}一些概念
BFCBFC全稱”Block Formatting Context” 中文為“塊級格式化上下文”記住這么一句話：BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此擴(kuò)展閱讀CSS中的BFC 優(yōu)雅降級(graceful degradation)一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容 漸進(jìn)增強(qiáng) progressive enhancement：是在瀏覽器開啟JavaScript功能后，如果瀏覽器版本不支持某些 JavaScript 能力，我們解決這種問題的方式 平穩(wěn)退化是在瀏覽器沒有JavaScript功能，或沒有開啟JavaScript功能情況下，我們解決這種問題的方式；方案薈萃擴(kuò)展閱讀
關(guān)于布局垂直居中css完全居中居中之美網(wǎng)頁中的底部foot定位頁面高度100%textarea高度自適應(yīng)多行溢出省略Retina屏1px線Flexbugs其他IF IE ENDIF條件判斷之IE10Chrome 翻譯插件網(wǎng)頁retina優(yōu)化常用meta樹狀菜單em vs remcss vs jscss解決方案（w3cplus）Textures生成紋理CSSgramCsscss（檢查重復(fù)聲明等）附錄四 部分工具資源
學(xué)會使用Emmet插件快速編碼 Emmet常用快捷鍵 Sublime專題 Sublime常用插件總結(jié) Front-End -Develop -Tools ToolsBox-自己整理的一份工具列表附錄五 編碼規(guī)范
編碼規(guī)范 前端規(guī)范 web develop standard Web 前端開發(fā)規(guī)范文檔 前端開發(fā)規(guī)范手冊附錄六 進(jìn)階學(xué)習(xí)
DOM編程之API學(xué)習(xí) JavaScript基礎(chǔ)學(xué)習(xí)附錄七 其他資源
Github上前端學(xué)習(xí)資源匯總 WEB 前端開發(fā)學(xué)習(xí)筆記 前端開發(fā)工具箱 148個資源讓你成為CSS專家 學(xué)習(xí)CSS布局-經(jīng)典必看附錄八 常見問題
前端指路寫給前端面試者（w3cplus）如何成為一名卓越的前端工程師（勾三股四博客）什么是全棧工程師如何跟上前端開發(fā)的最新前沿瀏覽器的工作原理移動前端開發(fā)和 Web 前端開發(fā)的區(qū)別大型網(wǎng)站CSS編寫與維護(hù)CSS核心技術(shù)關(guān)鍵字性能/規(guī)范/實踐如何閱讀W3c規(guī)范(王曉軒)如何閱讀W3c規(guī)范(高博)雅虎web性能優(yōu)化軍規(guī)權(quán)威前端性能指南高性能css一些問答社區(qū)quorastackoverflow知乎前端亂燉問答區(qū)segmentfault問答區(qū)總結(jié)
以上是生活随笔為你收集整理的前端开发（html和css）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用计算机完成怎样的工作计划,电脑上使用
- 下一篇： 谷歌浏览器手势插件-双击关闭标签等多种国