HTML + CSS 寶典 第七節 css進階 1
1. @規則
at-rule: @規則， @語句， css語句， css指令
● import 表明導入 另外一個 css 文件
@import '路徑.css';● chartset 表明該css 文件的字符集格式 次指令集設定 必須卸載 文件第一行
@charset "utf-8";
2. web 字體和圖標
● web 字體 （解決瀏覽器 上面沒有安裝相應的字體，強制讓用戶下載 服務器上的字體 （用戶無感） ）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> <style> @font-face { font-family: "fontName"; src: url("./font/FZZJ-HFXCJW.TTF"); } p { font-family: "fontName"; font-size: 30px; } </style> </head> <body> <p> Lorem ipsum dolor sit amet. 長夜慢慢 </p> </body> </html>由於 字體文件往往 會比較法 讓用戶去下載的話 比較耗時； 所以不是最優選擇
● 字體圖標 可以在下面的 連接上面 創建項目
該效率 會比 加載 字體文件 高很多
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="http://at.alicdn.com/t/font_1687204_assse92e25l.css"></link> <style> @font-face { font-family: "fontName"; src: url("./font/FZZJ-HFXCJW.TTF"); } p { font-family: "fontName"; font-size: 30px; } </style> </head> <body> <p> Lorem ipsum dolor sit amet. 長夜慢慢 </p> <i class="iconfont icon-zhifubaozhifu"></i> <i class="iconfont icon-icon_fabu"></i> <i class="iconfont icon-icon_fabu " style="font-size: 10em; color: green; "></i> </body> </html>
3. 塊級格式化 上下文
全稱： Block Formatting Context, 簡寫 BFC
他是一塊 獨立的 渲染區域， 它規定了再該區域中 常規流塊盒的佈局； 不同的 BFC 區域，他們進行渲染時 互不干擾
BFC 渲染區域：
這個區域 由某個 HTML 元素創建，以下元素會在其內部創建 BFC區域
根元素 html 元素， 意味着 <html> 元素創建的 BFC 區域，覆蓋了網頁中所有的元素
浮動 和 絕對定位 固定定位元素
overflow 不等於 visible 的塊盒
●創建 BFC 的元素，隔絕 了它內部 和 外部的聯繫， 內部的渲染不會影響的到外部
具體規則
創建 BFC 的元素， 他的自動高度需要計算浮動元素 一方面 發生高度坍塌的 可以利用 BFC； 恢復高度 但是不建議這麼做
<style> .container { background: lightblue; /* position: absolute; */ /* float: left; */ overflow: hidden; } /* .clear-fix::after { content: ""; display: block; clear: both; } */ .item { float: left; width: 200px; height: 200px; margin: 20px; background: red; } </style>
創建 BFC 的元素， 他的邊框和不會與浮動元素重疊
<style> .float { width: 200px; height: 200px; background: blue; margin: 20px; border: 10px solid yellow; float: left; } .container { height: 500px; background: brown; /* 創建BFC 避開 浮動元素 邊框*/ overflow: hidden; } </style> </head> <body> <div class="float"></div> <div class="container"></div> </body>
創建 BFC 的元素， 它會和它的 子元素 不進行外邊框合併 （原本狀態是 合併的）
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { background: lightblue; height: 500px; margin-top: 30px; overflow: hidden; } .child { height: 100px; margin: 50px; background: lightcoral; } </style> </head> <body> <div class="container"> <div class="child"></div> </div> </body>
4. 佈局
● 兩欄佈局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .clearfix::after { content: ""; display: block; clear: both; } .container { background: lightblue; width: 90%; margin: 0 auto; } .aside { width: 300px; float: left; margin-right: 30px; /* position: absolute; */ background: greenyellow; } .main { overflow: hidden; background: gray; } </style> </head> <body> <div class="container clearfix"> <aside class="aside"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quos. Modi vero quia voluptas eos similique! Beatae quo velit et eum magnam! Itaque commodi ratione temporibus, ipsa cumque obcaecati vitae dolores amet totam magnam in esse incidunt omnis, </aside> <div class="main"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo magni dolores quia quos voluptas, laborum a labore, suscipit minima vel ex nihil quidem ratione fugit consequuntur in nobis adipisci perspiciatis voluptate eveniet dignissimos! Nesciunt </div> </div> </body> </html>
● 三欄佈局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .clearfix::after { content: ""; display: block; clear: both; } .container { padding: 20px; border: 2px solid; width: 90%; background: lightblue; margin: 0 auto; } .left { float: left; width: 200px; background: indianred; margin-right: 20px; } .mid { background: indigo; overflow: hidden; border: 2px solid red; } .right { margin-left: 20px; float: right; width: 200px; background: khaki; } </style> </head> <body> <div class="container clearfix"> <div class="left"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto eos corporis nostrum iste laboriosam soluta magnam illo odio facilis magni numquam, veniam ex placeat ad suscipit? Dolorem, consequuntur aliquid! Beatae aliquam aliquid debitis nostrum </div> <div class="right"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, praesentium neque culpa debitis voluptates cum reprehenderit quas. Odio laudantium facilis nam iusto ut in voluptatem officiis modi ab dolor rem placeat quae, autem natus odit? Voluptatum, </div> <div class="mid"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus rem magni labore inventore. Eveniet earum magnam eum consectetur omnis possimus fugit tenetur aspernatur qui asperiores eos fugiat ex aperiam magni, autem aut quidem numquam? Ratione </div> </div> </body> </html>
● 僞等高 佈局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .clearfix::after { content: ""; display: block; clear: both; } .container { /* background: lightblue; */ width: 90%; margin: 0 auto; overflow: hidden; } .aside { width: 300px; float: left; margin-right: 30px; /* position: absolute; */ background: greenyellow; height: 10000px; margin-bottom: -9990px; } .main { overflow: hidden; background: gray; } </style> </head> <body> <div class="container clearfix"> <aside class="aside"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quos. Modi vero quia voluptas eos similique! Beatae quo velit et eum magnam! Itaque commodi ratione temporibus, ipsa cumque obcaecati vitae dolores amet totam magnam in esse incidunt omnis, </aside> <div class="main"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo magni dolores quia quos voluptas, laborum a labore, suscipit minima vel ex nihil quidem ratione fugit consequuntur in nobis adipisci perspiciatis voluptate eveniet dignissimos! Nesciunt illum atque in fuga et tenetur, numquam nemo voluptatum modi unde minima, maiores aliquid. Perferendis quod saepe deserunt repudiandae eius, obcaecati, porro a ea rem nulla ad nam, voluptatum dolore. Id, omnis repellendus nostrum aspernatur dicta delectus voluptatem, quis cum itaque, consequatur fugit eveniet? Voluptatum, ut. Eaque soluta optio veniam rerum laudantium velit eligendi quisquam, iure aut sapiente labore quasi incidunt vero temporibus libero fugit asperiores blanditiis nihil consectetur doloribus aliquam doloremque reprehenderit officia? Vero quisquam autem quam provident magnam est excepturi ex voluptatum sequi, nobis dicta consequatur repellendus, vitae rem odit eos? Voluptas omnis alias ad veniam ducimus deserunt ab atque debitis minima, voluptatem suscipit, temporibus earum perspiciatis sed! Ab asperiores ea minima quam, quisquam nisi temporibus beatae quas officia quo? Facere, cum! Nesciunt accusantium molestiae fugiat ab aspernatur vero perspiciatis debitis deleniti, labore enim maxime voluptas natus odio nulla, voluptate vitae ipsum! Repellat corporis blanditiis laudantium saepe autem incidunt optio animi deserunt nostrum modi sit, velit ab perferendis repudiandae tempora sunt libero recusandae consequuntur numquam, aliquam nisi nulla iusto! Vero placeat iusto voluptates corrupti natus recusandae quisquam perspiciatis commodi esse voluptatem tempora optio cupiditate assumenda aspernatur aliquam dolor sapiente perferendis, consectetur deleniti autem facere vitae saepe soluta illo. Ex dolor magnam consequatur praesentium vitae illo rem laudantium neque architecto officia dignissimos tenetur deserunt cum iure voluptatibus qui, ab hic accusamus inventore necessitatibus commodi. Dicta dolorum sapiente expedita ex veniam veritatis ad repellendus? Ea id nemo, voluptatibus consequatur alias iste libero! Debitis tempore, delectus iste nulla veritatis dolorum qui animi itaque, libero labore porro reprehenderit. Voluptate, dolores quidem sapiente, iste quae incidunt minus aut deserunt rerum perferendis eligendi inventore nam velit omnis, maiores minima beatae suscipit ducimus quo earum atque! Animi autem, modi commodi officia sed sunt eum assumenda distinctio praesentium laborum ad, dignissimos et magnam, voluptatem cupiditate voluptates. Modi debitis nisi voluptate adipisci itaque voluptates nostrum quae quas dignissimos libero velit ut voluptas eius iusto magni sapiente tenetur, voluptatibus atque est dolore nihil rerum illum quisquam animi! Magni odio amet delectus commodi sed aut eveniet facere ab, asperiores perspiciatis consequatur saepe? Nesciunt quibusdam qui atque consequatur iure facilis esse ducimus repudiandae mollitia ipsa itaque, pariatur impedit exercitationem modi est incidunt perspiciatis accusamus dolore aliquam porro illo? Necessitatibus adipisci quidem magnam itaque cum. Laboriosam non neque voluptas commodi in incidunt hic modi perspiciatis dolore inventore quia nesciunt sed consectetur, ducimus ratione accusamus blanditiis nam, soluta qui exercitationem praesentium ipsam quod. Magni sapiente iste nisi quidem error deserunt vero tempore voluptatem, explicabo saepe adipisci sunt? Cumque ullam laboriosam earum similique veritatis libero blanditiis debitis dolorem saepe ipsum? Maxime reiciendis, porro laboriosam aspernatur voluptatibus veritatis, voluptatem necessitatibus nesciunt quia accusantium, earum odio corrupti nostrum ipsa? Earum deserunt corrupti velit repellat sapiente harum. Cupiditate aspernatur unde quidem facere recusandae quis, ipsa eos illo ratione at alias vel animi possimus quo accusamus similique ad fugiat a? Debitis asperiores nobis error, saepe eum quae illo repudiandae consequatur accusantium dicta impedit nam repellendus architecto ut possimus aut, ipsa accusamus, sed fugit animi deleniti illum reprehenderit eveniet blanditiis. Exercitationem non mollitia odit itaque iste enim aperiam voluptatem, ducimus, dicta quaerat dolores vitae doloribus molestiae quasi magnam culpa pariatur accusantium. Tempore, mollitia assumenda! Officiis, cupiditate soluta reprehenderit corporis atque sed optio nobis eveniet eligendi unde explicabo consectetur qui culpa nam pariatur modi quam fugit libero itaque quae, esse amet ipsam doloremque aperiam! Dolores consequuntur labore quia eaque, fugit quaerat voluptates quos! Dolorem incidunt dignissimos deleniti sunt quod perferendis, quos vel quidem dolore suscipit dolorum ullam neque labore recusandae optio officia facilis ipsum officiis repudiandae omnis temporibus nesciunt harum doloremque! Dolor, facere qui. Unde eos impedit fugiat atque velit nobis eveniet nostrum expedita odio, eius nisi quis corporis deleniti autem laborum laboriosam dignissimos magnam praesentium voluptates odit soluta cupiditate. Eveniet temporibus, vitae suscipit magni deserunt quod. Odit, cupiditate quae officiis doloremque in perferendis rem quia explicabo sed dolore facere fugiat totam fuga? Iusto cupiditate magni accusamus harum numquam incidunt illum ipsa dolores unde iste deleniti eos fuga excepturi fugit itaque optio, placeat nemo ducimus maxime nobis totam? Ipsa provident fuga, nihil deleniti quam sapiente cupiditate et inventore. Eaque autem corrupti illum vel vero quod dolore temporibus suscipit culpa minima placeat rerum voluptatem possimus deleniti consectetur aut quae, maxime a? Incidunt eaque maxime unde sunt at, alias fugit ullam ipsum nobis voluptatibus dicta necessitatibus mollitia laboriosam provident, amet ipsam! Enim culpa minima laudantium cum labore aliquam illum atque a blanditiis laborum voluptate at possimus necessitatibus modi placeat expedita animi sapiente harum, corrupti temporibus eaque ab. Beatae nam dolore architecto ab culpa atque vel nemo? Saepe, earum? Veniam quo eligendi quam eveniet ad quidem error porro molestias culpa nulla ea vel nihil, nostrum nesciunt architecto quod quaerat autem, est debitis, impedit illo ducimus aperiam a magnam. Accusantium molestias necessitatibus cum magnam veritatis aspernatur tempora assumenda nobis praesentium! Soluta fuga minus nesciunt. Nisi omnis in debitis, aliquid nam iusto, aut asperiores tempora porro pariatur aspernatur quisquam fugit error. Impedit possimus explicabo numquam nemo quibusdam? Totam natus consequatur nemo excepturi magni, sapiente corporis quos dicta neque expedita soluta ad, sit, quia nobis esse. Nihil hic totam praesentium corporis nostrum vitae labore debitis sequi. Sit eius a libero nihil velit facilis iusto, provident est dolor, veritatis sapiente quae voluptates. Blanditiis doloremque ut in ipsum alias possimus velit quam, quisquam quae dicta voluptates voluptatum impedit minima ipsa illo eum sed commodi minus provident ducimus magnam. Officiis, accusantium? Quas saepe corrupti dignissimos quis ea dolorum non obcaecati assumenda, repudiandae quos quaerat ex suscipit odio explicabo, possimus exercitationem ipsam, veniam vel sit voluptatem repellendus esse quidem! Ratione iure facilis incidunt qui repudiandae perspiciatis autem possimus veritatis magni aut earum similique ullam, laboriosam assumenda consequuntur eveniet cupiditate neque praesentium, ut maxime voluptatum. Omnis vel consectetur illum esse ducimus, alias, quia inventore quos quis incidunt delectus, animi laborum. Similique est quaerat laudantium consectetur quae. </div> </div> </body> </html>
5. 浮動元素的 細節
● 盒子的位置
* 左浮動 的盒子 向上向左排列
* 右浮動 的盒子 向上向右排列
* 浮動盒子的 頂邊不得高於上一個盒子的頂邊
* 若剩餘空間無法放下浮動盒子，該盒子會下移動， 直到具備足夠空間容納盒子， 然後再向左向右移動
6. 行高的取值
line-height
px, 像素值
無單位 數字
em 單位
百分比
-
如果設置行高的時候 添加了單位；那麼 他的子元素的 行高 會先計算行高 在繼承；
-
如果想設置 全局 的，最好不要寫單位； 他會先繼承， 然後再計算 子元素行高。這樣一來， 子元素的行高會隨着 字體產生變化
<style>
.container {
/* 行高爲 字體大小的兩倍 */
/* 先計算像素值 然後在繼承 */
/* line-height: 2em; */
/* 行高爲字體大小的兩倍 */
/* 先繼承 在計算 */
line-height: 2;
}
.p1 {
font-size: 40px
}
.p2 {
font-size: 12px
}
</style>
7. body 的背景 顏色& 圖片
● 畫布 canvas 一塊區域
特點：
最小寬度 爲 視口寬度
最小高度 爲 視口高度
● Html 元素的背景 覆蓋畫布（子元素 覆蓋父元素）
● body 元素的背景
- 如果 html 元素有背景， body 元素正常 （ 背景覆蓋 邊框盒 ）
- 如果 html 元素沒有背景 body 元素 覆蓋畫布
● 背景畫布圖片
- 背景圖的寬度百分比，相對於視口
- 背景圖的高度百分比，相對應HTML元素高度
- 背景圖的橫向位置百分比，預設值，相對於視口
- 背景圖的縱向位置百分比，預設值， 相對於網頁高度
8. 行盒的垂直對齊
● 多個行盒在垂直方向上的對齊
給沒有對齊的元素 設置 vertical-align
● 圖片底部白邊
圖片的 父元是一個 塊盒，塊盒高度自動 圖片底部和父元素之間往往 會出現白邊，而且白邊會隨着字體大小變化
解決方法：
- 設置字體大小爲 0
- 將圖片設置爲塊盒
9. （參考線） 深入理解字體
font-size
line-height
vertical-align
font-family
● 文字 字體, 是通過 字體軟件 製作出來的 比如： fontforge
文字的製作過程中 會涉及 幾條 參考線，不同文字類型 參考線不是一樣的，而同一種文字 參考線一致
● 字體大小 ， 設置的是文字的相對大小 以 consolas 字體爲例
文字相對大小： 1000 2048 1024
字體的框： 2048
文字實際佔的大小 2398 (會比設置相對字體大)
文字頂線到 底線的距離， 是文字的實際大小 （content-area, 內容區域） 文字的實際大小
我們設置的 字體大小爲 200px , 但是 實際 顯示 的大小 卻是 234px；
並且 行盒的背景 覆蓋 content-area; 以至於 背景色 包裹住 字體
● 行高
頂線向上延伸的空間（top）， 和底線向下延伸的空間(bottom)， 兩個空間是相等的，該空間叫做 gap（空隙）
gap 空間 默認情況下 是 設計師者決定的 ，後面可以代碼設置
top 到 buttom , 叫做 virtual-area (虛擬區域)； top和buttom 的 相對位置 不同的字體是不一樣的 ，有的甚至可以 爲 負數
通常設置的行高 ： 就是 設置 virtual-area 的 line-gap
line-height: normal, 默認值， 使用文字默認的 gap
● vertical-align
影響參考線的幾個因素： font-size, font-family, line-height
一個元素 如果 子元素出現行盒 (出現文字的地方 必有行盒)，該元素就會產生參考線
由此以來 就出出現 P 元素的 參考線 和 span 元素 參考線， 如何排列的問題
● 默認情況是 ： 基線對齊 的排列方式 也就是 baseline 參考線
![]()
● vertical-align : super; 該元素的基線 與 父元素的 上基線對齊
● vertical-align : sub; 該元素的基線 與 父元素的 下基線對齊
● vertical-align : text-top; 該元素的 virtual-area 的頂邊，對齊父元素的 text-top
● vertical-align : text-bottom; 該元素的 virtual-area 的底邊，對齊父元素的 text-bottom
● vertical-align : top; 該元素的 virtual-area 的頂邊，對齊父元素的 頂邊（該行中的 最高頂邊）
● vertical-align : bottom; 該元素的 virtual-area 的底邊，對齊父元素的 底邊（該行中的 最底底邊）
● vertical-align : 數值; 相對於基線 base-line 的偏移量， 正數向上， 負數向下
● vertical-align : 百分比; 相對於基線 base-line 的偏移量， 百分比是相對於 自身 virtual-area 的高度
● vertical-align : middle; 該元素的中線（content-area 的一半），與父元素的 X 字母高度一半的位置 對齊
行盒組合起來， 可用形成多行。 每一行的區域叫做 line-box; line-box的 頂邊是 該行內所有行盒 最高頂邊，底邊是該行行盒的最低底邊
實際上： 一個元素 的實際佔用高度（自動高度），高度的計算通過 line-box 計算
行盒： inline-box
行框： line-box； 是承載文字內容的必要條件，以下情況不生成 行框；
1， 某元素內部沒有任何行盒
2， 某元素 字體 爲 0
● 可替換元素和行塊盒的基線
*圖片 ：基線位置 位於圖片的 下外邊距。
*表單元素 ： 基線位置在內容底邊
*行塊盒：
1， 行塊盒 最後一行有 line-box, 用最後一行的基線作爲整個行塊盒的基線
2，如果行塊盒 內部沒有行盒，則使用下外邊框作爲基線
10. 堆疊上下文 z-index
堆疊上下文 （stack context）,它 是一塊區域； 這塊區域由 某個元素創建，它規定了該區域中的內容在 Z軸 排列的先後順序
● 創建堆疊上下文的元素：
html 元素（根元素）
設置了 z-index 數值（非 auto） 的 定位元素
● 同一個堆疊上下文中元素 在 Z軸上的排列
從後到前的排列順序：
創建堆疊上下文的元素的背景和邊框
堆疊級別（z-index, stack, level）爲負值的堆疊上下文 （ 定位盒子）
常規流非定位的塊盒
非定位的浮動盒子
常規流非定位的行盒
任何 z-index 的 auto 的定位子元素， 以及 z-index 是 0 的堆疊上下文 （ 定位盒子）
堆疊級別爲正值的堆疊上下文
每個堆疊上下文， 獨立於其他堆疊上下文 他們之間不能相互穿插
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html { background: lightblue; } .c1 { position: relative; z-index: 0; width: 200px; height: 200px; background: #008c8c; } .c2 { position: absolute; z-index: -2; width: 200px; height: 200px; background: chocolate; left: 100px; top: 100px; } .item1, .item2 { position: absolute; width: 100px; height: 100px; right: -50px; bottom: -50px; } .item1 { right: -50px; bottom: -50px; } </style> </head> <body> <div class="c1"> <div class="item1" style="background: red;"></div> </div> <div class="c2"> <div class="item1" style="background:peru"></div> </div> </body> </html>
