二部分 CSS
第八章 css基礎(chǔ)知識(shí)
- css基礎(chǔ)知識(shí)：
- 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è)主要的部分構(gòu)成：要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。
- 盒子名或者標(biāo)簽名{屬性:值;}
- CSS中幾種顏色的表示方法
- 用顏色名表示
- 有17個(gè)預(yù)先確定的顏色，它們是
- aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
- olive, orange, purple, red, silver, teal, white, and yellow
- 用十六進(jìn)制的顏色值表示(紅、綠、藍(lán))
- #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代表
- 藍(lán)色
- 用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)單個(gè)頁面需要設(shè)置樣式時(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)用于很多頁面時(shí)，就需要用到外部樣式表，首先需要?jiǎng)?chuàng)建一個(gè)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)先級(jí)高）
- 寫在標(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時(shí)，是一種并行(沒有嘗試是否是這樣)加載CSS方式，而@impor則在整個(gè)頁面加載完成后才加載。
- 兼容性的區(qū)別，因@import``CSS2.1才特有的，所以對(duì)于不兼容CSS2.1的瀏覽器來說，無效。
- 在樣式控制上(比如動(dòng)態(tài)改變網(wǎng)頁的布局時(shí),使用javascript操作DOM)的區(qū)別，此時(shí)@import就無能為力了。
- 樣式的優(yōu)先級(jí)補(bǔ)充
- 相同權(quán)值情況下，CSS樣式的優(yōu)先級(jí)總結(jié)來說，就是——就近原則（離被設(shè)置元素越近優(yōu)先級(jí)別越高）：
- 內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部） > 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）
- 權(quán)值不同時(shí)，瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，哪種樣式權(quán)值高就使用哪種樣式
- 層疊優(yōu)先級(jí)是:
- 瀏覽器缺省< 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式
- 其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器
- 派生選擇器以前叫上下文選擇器，所以完整的層疊優(yōu)先級(jí)是:
- 瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器< 外部樣式表ID派生選擇器< 內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式…共12個(gè)優(yōu)先級(jí)
- 另外，如果同一個(gè)元素在沒有其他樣式的作用影響下，其Class定義了多個(gè)并以空格分開，其優(yōu)先級(jí)順序?yàn)椋?/li>
- 一個(gè)元素同時(shí)應(yīng)用多個(gè)class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！
第九章 css選擇器(上)
- css選擇器：
- class類選擇器可以重復(fù)利用
- id選擇器唯一
- 標(biāo)簽選擇器
- 什么是選擇器：css選擇器就是要改變樣式的對(duì)象
- 選擇器{屬性:值;屬性:值;}
- 標(biāo)簽選擇器：頁面中所有的標(biāo)簽都是一個(gè)選擇器 p{color:red;}
- ID選擇器
- 選擇id命名的元素 以 # 開頭 #p1{color:#0f0;}
- 類選擇器
- class選擇器，選擇clas命名的元素 以.開頭 .first{color:#00f;}
- css代碼寫完后上線前要經(jīng)過壓縮處理
- 本地和服務(wù)器分兩個(gè)css版本（備份）
- 壓縮后注釋都清除，空間體積減少
- 群組選擇器
- 選擇多個(gè)元素,以逗號(hào)隔開 #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)移動(dòng)到鏈接上
- */（可和其他標(biāo)簽結(jié)合一起用）
- a:active {color:#0000FF;} / 選定的鏈接 /
- 注意
- 偽類選擇器的排序很重要，a:link a:visited a:hover a:active，記作lvha
- 輸入偽類選擇器（針對(duì)表單）
- input:focus{color:red;} / 鍵盤輸入焦點(diǎn) /
- 其他偽類選擇器
- p:first-child{color:red;} /* 第一個(gè)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來實(shí)現(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%;
- 背景圖片的滾動(dòng)
- 背景圖片是否隨著內(nèi)容的滾動(dòng)而滾動(dòng)由background-attachment設(shè)置
- background-attachment:fixed; 固定，不隨內(nèi)容的滾動(dòng)而滾動(dòng)
- background-attachment:scroll; 滾動(dòng)，隨內(nèi)容的滾動(dòng)而滾動(dòng)
第十二章 文字文本屬性
- css文字文本屬性：
- 文字屬性
- color:red; 文字顏色
- font-size:12px; 文字大小
- font-weight:“bold” 文字粗細(xì)(bold/normal)
- font-family:“宋體” 文字字體
- font-variant:small-caps小寫字母以大寫字母顯示
- 文本屬性
- text-align:center; 文本對(duì)齊(right/left/center)
- line-height:10px; 行間距(可通過它實(shí)現(xiàn)文本的垂直居中)
- text-indent:20px; 首行縮進(jìn)
- text-decoration:none;
- 文本線(none/underline/overline/line-through)
- letter-spacing: 字間距
第十三章 盒子模型
- 盒子模型
- 盒子模型就是一個(gè)有高度和寬度的矩形區(qū)域
- 所有html標(biāo)簽都是盒子模型
- div標(biāo)簽自定義盒子模型
- 所有的標(biāo)簽都是盒子模型
- class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。
- 盒子模型的組成
- 盒子模型組成部分：
- 自身內(nèi)容：width、height 寬高
- 內(nèi)邊距： padding
- 盒子邊框： border 邊框線
- 與其他盒子距離： margin外邊距
- 內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
- border 邊框
- 常見寫法 border:1px solid #f00;
- 單獨(dú)屬性：
- border-width:
- border-style:
- dotted 點(diǎn)狀虛線
- dashed（虛線）
- solid（實(shí)線）
- double（雙實(shí)線）
- border-color (顏色)
- padding 內(nèi)邊距
- 值：像素/厘米等長(zhǎng)度單位、百分比
- padding:10px; 上下左右
- padding:10px 10px; 上下 左右
- padding:10px 10px 10px; 上 左右 下
- padding:10px 10px 10px 10px; 上 右 下 左（設(shè)置4個(gè)點(diǎn)–>順時(shí)針方向）
- 單獨(dú)屬性：
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
- 當(dāng)設(shè)置內(nèi)邊距的時(shí)候會(huì)把盒子撐大，為了保持盒子原來的大小，應(yīng)該高度和寬度進(jìn)行減小，根據(jù)width和height減小
- margin 外邊距
- 值：與padding相同
- 單獨(dú)屬性：與padding相同
- 外邊距合并：兩個(gè)盒子同時(shí)設(shè)置了外邊距，會(huì)進(jìn)行一個(gè)外邊距合并
補(bǔ)充盒子模型內(nèi)容
- 標(biāo)準(zhǔn)盒子模型
- 盒子模型是css中一個(gè)重要的概念，理解了盒子模型才能更好的排版。其實(shí)盒子模型有兩種，分別是 ie盒子模型和標(biāo)準(zhǔn) w3c 盒子模型。他們對(duì)盒子模型的解釋各不相同，先來看看我們熟知的標(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）
- 例：
- 一個(gè)盒子的 margin為 20px，border 為 1px，padding為 10px，content 的寬為 200px、高為 50px，假如用標(biāo)準(zhǔn) w3c 盒子模型解釋，那么這個(gè)盒子需要占據(jù)的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實(shí)際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么這個(gè)盒子需要占據(jù)的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實(shí)際大小為：寬 200px、高 50px
- 那應(yīng)該選擇哪中盒子模型呢？當(dāng)然是“標(biāo)準(zhǔn) w3c 盒子模型”了。怎么樣才算是選擇了“標(biāo)準(zhǔn) w3c盒子模型”呢？很簡(jiǎn)單，就是在網(wǎng)頁的頂部加上 doctype 聲明。
- 假如不加doctype 聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁，即 ie瀏覽器會(huì)采用 ie 盒子模型去解釋你的盒子，而 ff會(huì)采用標(biāo)準(zhǔn)w3c 盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。
- 反之，假如加上了 doctype 聲明，那么所有瀏覽器都會(huì)采用標(biāo)準(zhǔn) w3c盒子模型去解釋你的盒子，網(wǎng)頁就能在各個(gè)瀏覽器中顯示一致了。
<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)頁能兼容各個(gè)瀏覽器，讓我們用標(biāo)準(zhǔn) w3c 盒子模型
- 擴(kuò)展
- 學(xué)會(huì)使用box-sizing布局
第十四章 塊元素、行元素與溢出
- 基本概念
- 塊級(jí)元素：默認(rèn)情況下獨(dú)占一行的元素，可控制寬高、上下邊距；
- 行內(nèi)元素：默認(rèn)情況下一行可以擺放多個(gè)的元素，不可控制寬高和上下邊距
- 行塊轉(zhuǎn)換
- display:none; 不顯示
- display:block; 變成塊級(jí)元素
- display:inline; 變成行級(jí)元素
- display:inline-block; 以塊級(jí)元素樣式展示，以行級(jí)元素樣式排列
- 溢出
- overflow:hidden; 溢出隱藏
- overflow:scroll; 內(nèi)容會(huì)被修剪，瀏覽器會(huì)顯示滾動(dòng)條
- overflow:auto; 如果內(nèi)容被修剪，則產(chǎn)生滾動(dòng)條
- 文本不換行：white-space:nowrap;
- 長(zhǎng)單詞換行：word-wrap:break-word;
- 行內(nèi)元素和快級(jí)元素小結(jié)
- 一、塊級(jí)元素：block element
- 每個(gè)塊級(jí)元素默認(rèn)占一行高度，一行內(nèi)添加一個(gè)塊級(jí)元素后無法一般無法添加其他元素（float浮動(dòng)后除外）。兩個(gè)塊級(jí)元素連續(xù)編輯時(shí)，會(huì)在頁面自動(dòng)換行顯示。塊級(jí)元素一般可嵌套塊級(jí)元素或行內(nèi)元素；
- 塊級(jí)元素一般作為容器出現(xiàn)，用來組織結(jié)構(gòu)，但并不全是如此。有些塊級(jí)元素，如只能包含塊級(jí)元素。
- DIV 是最常用的塊級(jí)元素，元素樣式的display:block都是塊級(jí)元素。它們總是以一個(gè)塊的形式表現(xiàn)出來，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿。
- 二、行內(nèi)元素：inline element
- 也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等；行內(nèi)元素一般都是基于語義級(jí)(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素 “a”。比如 SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素，各個(gè)字母 之間橫向排列，到最右端自動(dòng)折行。
- 三、block（塊）元素的特點(diǎn):
- ①、總是在新行上開始；
- ②、高度，行高以及外邊距和內(nèi)邊距都可控制；
- ③、寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。
- ④、它可以容納內(nèi)聯(lián)元素和其他塊元素
- 四、inline元素的特點(diǎn)
- ①、和其他元素都在一行上；
- ②、高，行高及外邊距和內(nèi)邊距不可改變；
- ③、寬度就是它的文字或圖片的寬度，不可改變
- ④、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
- 對(duì)行內(nèi)元素，需要注意如下:
- 設(shè)置寬度width 無效。 設(shè)置高度height無效，可以通過line-height來設(shè)置。 設(shè)置margin
- 只有左右margin有效，上下無效。
- 設(shè)置padding只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對(duì)元素周圍的內(nèi)容是沒影響的。
- 五、常見的塊狀元素
- address – 地址
- blockquote – 塊引用
- center – 舉中對(duì)齊塊
- dir – 目錄列表
- div – 常用塊級(jí)容易，也是CSS layout的主要標(biāo)簽
- dl – 定義列表
- fieldset – form控制組
- form – 交互表單
- h1 – 大標(biāo)題
- h2 – 副標(biāo)題
- h3 – 3級(jí)標(biāo)題
- h4 – 4級(jí)標(biāo)題
- h5 – 5級(jí)標(biāo)題
- h6 – 6級(jí)標(biāo)題
- hr – 水平分隔線
- isindex – input prompt
- menu – 菜單列表
- noframes – frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
- noscript – 可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）
- ol – 有序表單
- p – 段落
- pre – 格式化文本
- table – 表格
- ul – 無序列表
- 六、常見的內(nèi)聯(lián)元素
- a – 錨點(diǎn)
- abbr – 縮寫
- acronym – 首字
- b – 粗體(不推薦)
- bdo – bidi override
- big – 大字體
- br – 換行
- cite – 引用
- code – 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
- dfn – 定義字段
- em – 強(qiáng)調(diào)
- font – 字體設(shè)定(不推薦)
- i – 斜體
- img – 圖片
- input – 輸入框
- kbd – 定義鍵盤文本
- label – 表格標(biāo)簽
- q – 短引用
- s – 中劃線(不推薦)
- samp – 定義范例計(jì)算機(jī)代碼
- select – 項(xiàng)目選擇
- small – 小字體文本
- span – 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
- strike – 中劃線
- strong – 粗體強(qiáng)調(diào)
- sub – 下標(biāo)
- sup – 上標(biāo)
- textarea – 多行文本輸入框
- tt – 電傳文本
- u – 下劃線
- 七，可變?cè)?/li>
- 可變?cè)貫楦鶕?jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
- applet - java applet
- button - 按鈕
- del- 刪除文本
- iframe - inline frame
- ins - 插入的文本
- map - 圖片區(qū)塊(map)
- object - object對(duì)象
- script - 客戶端腳本
- 八、行內(nèi)元素與塊級(jí)元素有什么不同
- 區(qū)別一：
- 塊級(jí)：塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下寬度自動(dòng)填滿其父元素寬度
- 行內(nèi)：行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排在同一行。其寬度隨內(nèi)容的變化而變化。
- 區(qū)別二：
- 塊級(jí)：塊級(jí)元素可以設(shè)置寬高
- 行內(nèi)：行內(nèi)元素不可以設(shè)置寬高
- 區(qū)別三：
- 塊級(jí)：塊級(jí)元素可以設(shè)置margin，padding
- 行內(nèi)：行內(nèi)元素水平方向的margin-left; margin-right;
- padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
- 區(qū)別四：
- 塊級(jí)：display:block;
- 行內(nèi)：display:inline;
- 替換元素有如下：（和img一樣的設(shè)置方法）
- <img>、<input>、<textarea>、<select>
- <object>都是替換元素，這些元素都沒有實(shí)際的內(nèi)容
- 可以通過修改display屬性來切換塊級(jí)元素和行內(nèi)元素
第十五章 定位
- static靜態(tài)定位（不對(duì)它的位置進(jìn)行改變，在哪里就在那里）
- 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top,bottom, left, right 或者 z-index 聲明）。
- fixed固定定位（參照物–瀏覽器窗口）—做 彈窗廣告用到
- 生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。 元素的位置通過 "left", "top", "right"以及 "bottom"屬性進(jìn)行規(guī)定。
- relative（相對(duì)定位 ）（參照物以他本身）
- 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
- absolute（絕對(duì)定位）(除了static都可以，找到參照物–>與它最近的已經(jīng)有定位的父元素進(jìn)行定位)
- 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
- 元素的位置通過 “l(fā)eft", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定
- z-index
- z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
- 定位的基本思想: 它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。
- 一切皆為框
- 塊級(jí)元素: div、h1或p元素 即：顯示為一塊內(nèi)容稱之為 “塊框“ ;
- 行內(nèi)元素: span,strong,a等元素 即：內(nèi)容顯示在行中稱 “行內(nèi)框”;
- 使用display屬性改變成框的類型 即：display:block; 讓行內(nèi)元素設(shè)置為塊級(jí)元素，display:none; 沒有框
- 相對(duì)定位：
- 如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。
- 通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)
- .adv_relative { position: relative; left: 30px; top: 20px; }
- 絕對(duì)定位：
- 元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒有已定位 的祖先元素，它的位置相對(duì)于最初的包含塊。 .adv_absolute { position: absolute; left: 30px; top: 20px; }
第十六章 框架
- frameset框架：
- <frameset> —- 用來定義一個(gè)框架；雙標(biāo)簽
- 不能和 <body> 一起使用
- rows、cols屬性
- rows 定義行表示框架有多少行（取值 px/%/ * ）
- cols 定義列表示框架有多少列（取值px/ %/ * ）
- frame子框架
- <frame> —- 表示框架中的某一個(gè)部分；單標(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元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
- 允許和 body 一起使用
- width 寬（取值 px / %）
- height 高（取值 px / %）
- name 框架名
- frameborder 邊框線（取值 0 / 1）
- src 顯示的網(wǎng)頁的路徑
第十七章 css高級(jí)屬性
- opacity透明屬性
- opacity
- 對(duì)于IE6/7/，使用filter:alpha(opacity:值;) 值為0-100
- 對(duì)于Webkit，Opera，F(xiàn)irefox，IE9+，使用opacity:值; 值為0-1
- 對(duì)于早期火狐，使用-moz-opacity:值; 值為0-1
- 所以寫透明屬性時(shí)，一般寫法是
{
opacity:0.5;
filter:alpha(opacity：50);/*0-100*/
-moz-opacity:0.5; /*取值0-1*/-->針對(duì)早起版本的火狐兼容問題的解決
}
- border-radius圓角邊框?qū)傩?/li>
- 向 div 元素添加圓角邊框
- border-radius:10px;
- box-shadow陰影屬性
- box-shadow屬性向框添加陰影效果,后面跟4個(gè)參數(shù)。
- box-shadow:0px 0px 10px #000;
- <embed>屬性
- 是HTML5中新增的標(biāo)簽,媒體嵌入插件標(biāo)簽，可以通過<embed>插入音頻或視頻
- <embed src=“media/music.mp3” />
- 格式.mid .wav .mp3等
