HTML + CSS 寶典 第七節 css進階 2
1. svg
svg: scalable vector graphics 可縮放的矢量圖
該圖片使用代碼書寫而成
縮放不會失真
內容輕量
● 如何使用：
svg 可以嵌入瀏覽器， 也可以單獨成爲一個文件
xml 語言， svg 使用該語言定義
使用 svg 的方式
<!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>
img embed object {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
background: url('weixin.svg') no-repeat center/cover;
}
</style>
</head>
<body>
<img src="weixin.svg" alt="">
<p></p>
<embed src="weixin.svg" type="image/svg+xml">
<object data="weixin.svg" type="image/svg+xml"></object>
<iframe src="weixin.svg" width="200px" height="200px"></iframe>
</body>
</html>
2. 數據連接
data url
數據連接：將目標文件的數據 直接書寫到 路徑位置
語法： data:MIME,數據
其他標籤也同樣適用：
意義：
優點：
- 減少了瀏覽器中的請求，減少請求中的資源量費，包括服務器端的
- 有利於動態生成數據
缺點：
- 增加了資源的體積，從而增加了單個資源的傳輸時間
- 不利用瀏覽器的緩存， 瀏覽器通常會緩存圖片文件， css 文件， js 文件
- 使用 base64編碼，會增加原資源體積的 4/3 倍
應用場景：
- 單個求情 圖片體積較小， 並且該圖片因爲各種原因 不適合製作雪碧圖，可以使用數據連接。
- 圖片由其他代碼動態生成， 並且圖片較小 可以使用數據連接
3. 瀏覽器兼容性
4. 居中總結
居中 ----> 盒子在其 包含塊居中
水平居中
● 行盒（行塊盒） 水平居中
直接設置 行盒 （行塊盒） 父元素， text-align: center;
<!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> div { margin: 30px; background: lightblue; height: 100px; text-align: center; } .inline-block { display: inline-block; width: 300px; height: 50px; background: yellow; } </style> </head> <body> <div> <a href="www.baidu.com">超鏈接</a> </div> <div> <span class="inline-block">666</span> </div> <div> <img src="ico.png" alt=""> </div> </body> </html>
● 常規流 塊盒 的水平居中
定寬，設置左右 margin 爲 auto
<!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> .container { margin: 30px; height: 200px; background: lightblue; } p { width: 500px; height: 100px; background: red; margin: 0 auto; } </style> </head> <body> <div class="container"> <P></P> </div> </body> </html>
● 絕對定位 元素的 水平居中
定寬 ， 設置左右的座標爲 0（left：0， right：0）， 將 margin 設置爲 auto
實際上> 固定定位（fixed）是絕對定位（absolute）的特殊情況
<!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> .container { position: relative; margin: 30px; height: 200px; background: lightblue; } p { width: 500px; height: 100px; background: blue; left: 0; right: 0; margin: auto; position: absolute; } </style> </head> <body> <div class="container"> <P></P> </div> </body> </html>
垂直居中：
● 單行文本的 垂直居中
設置文本所在元素的行高， 爲整個區域的 高度
h1 { height: 200px; background: lightblue; margin: 0 auto; text-align: center; line-height: 200px; }
● 行盒 -> 行塊盒 或 塊盒 內多行文本的垂直居中
由於行盒 不能設置高度（高度由內容撐開）；
可以通過 設置盒子 上下 內邊距相同大小， 達到類似的效果
● 絕對定位的 垂直居中
定高， 設置上下的座標爲0 （top:0, bottom:0）, 將上下的 margin 設置爲 auto
<!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> .container { position: relative; margin: 30px; height: 200px; background: lightblue; } p { width: 500px; height: 100px; background: blue; left: 0; right: 0; top: 0; bottom: 0; margin: auto; position: absolute; } </style> </head> <body> <div class="container"> <P></P> </div> </body> </html>
5. 樣式補充
● display:list-item;
設置爲該屬性的盒子， 本質上仍然是一個 塊盒, 但同時 該盒子會 附帶另外一個 盒子
元素本身 生成的盒子叫做 主盒子， 附帶的盒子稱爲 次盒子；次盒子和主盒子 水平排列，次盒子排列在 主盒子 前面
涉及 的 CSS 屬性
list-style-type
設置 次盒子 中 內容的類型
- list-style-position
設置 次盒子 相對於 主盒子的位置
- list-style
速寫 屬性 一併 設置 style 以及 position 的屬性
清空 次盒子 樣式
list-style : none;
圖片失效時的 寬高問題
如果 img 元素的 圖片鏈接無效，img元素的特性 和 普通行盒一樣， 無法設置寬高（寬高無效）
一般 設置爲 塊盒 或者 行塊盒；可以 使 寬高 有效果
行盒中包含行塊盒 或 可替換元素
行盒的高度 與它 內部的塊盒 或者 可替換元素的 高度無關 （行盒高度 文字 字體大小有關）
text-align : justify;
left; 左對齊
right; 右對齊
center； 居中對齊
justify； 除最後一行外， 分散對齊;
<!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> .container { width: 500px; background: lightblue; text-align: justify; /* font-size: 0; */ } .container::after { content: ''; display: inline-block; width: 100%; } .container .item { width: 200px; height: 100px; outline: 2px solid; display: inline-block; } </style> </head> <body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </body> </html>
製作三角形
<style> div { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: red blue green chocolate; } </style>
把其他 三個三色設置透明顏色；
<style> div { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent transparent transparent chocolate; } </style>
direction 和 writing-mode
-
開始 start -> 結束 end
-
左 left -> 右 right
開始 和 結束是相對的 ，不同國家有不同的習慣
左右是絕對的
direction ：設置網頁開始 到 結束的 方向
writing-mode : 設置文字書寫方向
