CSS进阶班笔记(五)
生活随笔
收集整理的這篇文章主要介紹了
CSS进阶班笔记(五)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?、目錄總覽
- 💂?♂?拖了好久的移動端web開發，今天補上了💂?♂?
🔥web前端劍法之css
| 🔥CSS基礎班筆記(一) | https://blog.csdn.net/Augenstern_QXL/article/details/115560532 |
| 🔥CSS基礎班筆記(二) | https://blog.csdn.net/Augenstern_QXL/article/details/115560502 |
| 🔥CSS基礎班筆記(三) | https://blog.csdn.net/Augenstern_QXL/article/details/115726577 |
| 🔥CSS進階班筆記(四) | https://blog.csdn.net/Augenstern_QXL/article/details/119172527 |
| 🔥CSS進階班筆記(五) | https://blog.csdn.net/Augenstern_QXL/article/details/120374974 |
1、移動Web開發
1.1、瀏覽器現狀
- 國內的 UC 和 QQ，百度等手機瀏覽器都是根據 Webkit 修改過來的內核，國內尚無自主研發的內核。
總結：兼容移動端主流瀏覽器，處理 Webkit 內核瀏覽器即可。
1.2、手機屏幕現狀
- 移動端設備屏幕尺寸非常多，碎片化嚴重。
- Android設備有多種分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，還有傳說中的2K，4k屏。
- 近年來iPhone的碎片化也加劇了，其設備的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
- 作為開發者無需關注這些分辨率，因為我們常用的尺寸單位是 px 。
1.3、視口viewport
- 視口（viewport）就是瀏覽器顯示頁面內容的屏幕區域。 視口可以分為布局視口、視覺視口和理想視口
- 我們只需要關注理想視口
1.3.1、布局視口layout viewport
- 一般移動設備的瀏覽器都默認設置了一個布局視口，用于解決早期的PC端頁面在手機上顯示的問題。
- iOS, Android基本都將這個視口分辨率設置為 980px，所以PC上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般默認可以通過手動縮放網頁。
1.3.2、視覺視口 visual viewport
- 字面意思，它是用戶正在看到的網站的區域。注意：是網站的區域。
- 我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度。
1.3.3、理想視口 ideal viewport🔥
- 為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定
- 理想視口，對設備來講，是最理想的視口尺寸
- 需要手動添寫meta視口標簽通知瀏覽器操作
- meta視口標簽的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，我們布局的視口就多寬(喬布斯提出的喲)
1.3.4、總結
- 視口就是瀏覽器顯示頁面內容的屏幕區域
- 視口分為布局視口、視覺視口和理想視口
- 我們移動端布局想要的是理想視口就是手機屏幕有多寬，我們的布局視口就有多寬
- 想要理想視口，我們需要給我們的移動端頁面添加 meta視口標簽
1.3.5、meta視口標簽
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">| width | 寬度設置的是viewport寬度，可以設置device-width特殊值(寬度是設備寬度) |
| initial-scale | 初始縮放比，大于0的數字 |
| maximum-scale | 最大縮放比，大于0的數字 |
| minimum-scale | 最小縮放比，大于0的數字 |
| user-scalable | 用戶是否可以縮放，yes或no（1或0） |
1.3.6、標準的viewport設置
- 視口寬度和設備保持一致
- 視口的默認縮放比例1.0
- 不允許用戶自行縮放
- 最大允許的縮放比例1.0
- 最小允許的縮放比例1.0
1.4、二倍圖
1.4.1、物理像素和物理像素比
-
物理像素點指的是屏幕顯示的最小顆粒，是物理真實存在的。這是廠商在出廠時就設置好了,比如蘋果6\7\8 是 750* 1334
-
我們開發時候的1px 不是一定等于1個物理像素的
-
PC端頁面，1個px 等于1個物理像素的，但是移動端就不盡相同
-
一個px的能顯示的物理像素點的個數，稱為物理像素比或屏幕像素比
-
PC端 和 早前的手機屏幕 / 普通手機屏幕: 1CSS像素 = 1 物理像素的
Retina（視網膜屏幕）是一種顯示技術，可以將把更多的物理像素點壓縮至一塊屏幕里，從而達到更高的分辨率，并提高屏幕顯示的細膩程度。由于 Retina 的出現，對于一張 50px * 50px 的圖片,在手機 Retina 屏中打開，按照剛才的物理像素比會放大倍數，這樣會造成圖片模糊。
例如：我們需要一個 50*50 像素(css像素)的圖片，直接放到我們的手機里面會放大2倍變成 100 * 100，這樣就會模糊。
解決辦法：我們直接放一個 100 * 100 圖片，然后手動的把這個圖片縮小為 50 * 50。這樣將圖放到手機里面，手機自動放大2倍變成 100 * 100，這樣就不會造成圖片模糊
我們準備的圖片，比我們實際需要的大小大2倍，這種方式就是二倍圖
1.4.2、背景縮放 background-size
我們的圖片需要進行放大處理，那么我們的背景圖片也是需要進行縮放處理。
background-size: 背景圖片寬度 背景圖片高度;- 單位： 長度|百分比|cover|contain
- cover把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。
- contain把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域
1.4.3、多倍圖切圖cutterman
1.5、移動端開發選擇
- m.taobao.com
- m.jd.com
- m.suning.com
- 通過判斷設備，如果是移動設備打開，則跳到移動端頁面。
1.6、移動端瀏覽器
-
移動端瀏覽器基本以 webkit 內核為主，因此我們就考慮webkit兼容性問題。
-
我們可以放心使用 H5 標簽和 CSS3 樣式。
-
同時我們瀏覽器的私有前綴我們只需要考慮添加 webkit 即可
1.7、CSS初始化 normalize.css
移動端 CSS 初始化推薦使用 normalize.css
官網地址：http://necolas.github.io/normalize.css/
1.8、CSS3盒子模型 box-sizing
- 傳統模式寬度計算：盒子的寬度 = CSS中設置的width + border + padding
- CSS3盒子模型： 盒子的寬度 = CSS中設置的寬度width，里面包含了 border 和 padding
也就是說，我們的CSS3中的盒子模型， padding 和 border 不會撐大盒子了
/*CSS3盒子模型*/ box-sizing: border-box; /*傳統盒子模型*/ box-sizing: content-box;- 移動端可以全部CSS3 盒子模型
- PC端如果完全需要兼容，我們就用傳統模式，如果不考慮兼容性，我們就選擇 CSS3 盒子模型
1.9、特殊樣式
/*CSS3盒子模型*/ box-sizing: border-box; -webkit-box-sizing: border-box;/*點擊高亮我們需要清除 設置為transparent 完成透明*/ -webkit-tap-highlight-color: transparent;/*在移動端瀏覽器默認的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/ -webkit-appearance: none;/*禁用長按頁面時的彈出菜單*/ img,a { -webkit-touch-callout: none; }2、移動端常見布局
2.1、流式布局(百分比布局)
- 流式布局，就是百分比布局，也稱非固定像素布局。
- 通過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。
2.2、flex布局
| 兼容性好 | 操作方便，布局極為簡單，移動端應用很廣泛 |
| 布局繁瑣 | PC 端瀏覽器支持情況較差 |
| 局限性，不能再移動端很好的布局 | IE 11或更低版本，不支持或僅部分支持 |
建議：
2.2.1、初體驗
CSS樣式
span 直接給寬度和高度，背景顏色，還有藍色邊框
給 div 只需要添加 display: flex 即可
2.2.2、flex布局原理
flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局。
- 當我們為父盒子設為 flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效。
- 伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 =flex布局
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
-
上述例子 div 就是 flex父容器。
-
上述例子 span 就是 子容器 flex項目
-
子容器可以橫向排列也可以縱向排列
總結 flex 布局原理：就是通過給父盒子添加 flex 屬性，來控制子盒子的位置和排列方式。
2.2.3、flex布局常見父項屬性
以下有 6 個屬性是對父元素設置的
- flex-direction：設置主軸的方向
- justify-content：設置主軸上的子元素排列方式
- flex-wrap：設置子元素是否換行
- align-content：設置側軸上的子元素的排列方式（多行）
- align-items：設置側軸上的子元素排列方式（單行）
- flex-flow：復合屬性，相當于同時設置了 flex-direction 和 flex-wrap
2.2.3.1、flex-direction設置主軸方向
主軸和側軸：在 flex 布局中，是分為主軸和側軸兩個方向，同樣的叫法有：行和列、x軸和y軸
- 默認主軸方向就是 x 軸方向，水平向右
- 默認側軸方向就是 y 軸方向，水平向下
- flex-direction 屬性決定主軸的方向（即項目的排列方向）
- 注意： 主軸和側軸是會變化的，就看 flex-direction 設置誰為主軸，剩下的就是側軸。而我們的子元素是跟著主軸來排列的
| row | 默認值從左到右 |
| row-reverse | 從右到左 |
| column | 從上到下 |
| column-reverse | 從下到上 |
2.2.3.2、justify-content 設置主軸上的子元素排列方式
- justify-content 屬性定義了項目在主軸上的對齊方式
- 注意： 使用這個屬性之前一定要確定好主軸是哪個
| flex-start | 默認值從頭部開始，如果主軸是x軸，則從左到右 |
| flex-end | 從尾部開始排列 |
| center | 在主軸居中對齊(如果主軸是 x 軸則水平居中) |
| space-around | 平分剩余空間 |
| space-between | 先兩邊貼邊，再平分剩余空間🔥 |
2.2.3.3、flex-wrap 設置子元素是否換行
默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，flex布局中默認是不換行的。
意思就是如果按照我們設置的盒子大小，一行只能裝 3 個盒子，但是我們有 5 個盒子，那么 flex 布局默認會給我們塞上去，自動縮小盒子大小。
| nowrap | 默認值，不換行 |
| wrap | 換行 |
2.2.3.4、align-items 設置側軸上的子元素排列方式(單行)
該屬性是控制子項在側軸（默認是y軸）上的排列方式 在子項為單項（單行）的時候使用
| flex-start | 從上到下 |
| flex-end | 從下到上 |
| center | 擠在一起居中(垂直居中) |
| stretch | 拉伸(默認值) |
2.2.3.5、align-content 設置側軸上的子元素的排列方式(多行)
設置子項在側軸上的排列方式 并且只能用于子項出現 換行 的情況（多行），在單行下是沒有效果的。
| flex-start | 默認值在側軸的頭部開始排列 |
| flex-end | 在側軸的尾部開始排列 |
| center | 在側軸中間顯示 |
| space-around | 子項在側軸平分剩余空間 |
| space-between | 子項在側軸先分布在兩頭，再平分剩余空間 |
| stretch | 設置子項元素高度平分父元素高度 |
2.2.3.6、align-content 和 align-items 區別
- align-items 適用于單行情況下， 只有上對齊、下對齊、居中和 拉伸
- align-content 適應于換行（多行）的情況下（單行情況下無效）， 可以設置 上對齊、 下對齊、居中、拉伸以及平均分配剩余空間等屬性值。
- 總結就是單行找 align-items 多行找 align-content
2.2.4、flex-flow
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
flex-flow: row wrap;- flex-direction：設置主軸的方向
- justify-content：設置主軸上的子元素排列方式
- flex-wrap：設置子元素是否換行
- align-content：設置側軸上的子元素的排列方式（多行）
- align-items：設置側軸上的子元素排列方式（單行）
- flex-flow：復合屬性，相當于同時設置了 flex-direction 和 flex-wrap
2.3、flex布局子項常見屬性
- flex 子項目占的份數
- align-self 控制子項自己在側軸的排列方式
- order屬性定義子項的排列順序（前后順序）
2.3.1、flex屬性
flex 屬性定義子項目分配剩余空間，用flex來表示占多少份數。
.item {flex: <number>; /* default 0*/ } <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>section {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto;}section div:nth-child(1) {width: 100px;height: 150px;background-color: red;}section div:nth-child(2) {flex: 1;background-color: green;}section div:nth-child(3) {width: 100px;height: 150px;background-color: blue;}p {display: flex;width: 60%;height: 150px;background-color: pink;margin: 100px auto;}p span {flex: 1;}</style> </head><body><section><div></div><div></div><div></div></section><p><span>1</span><span>2</span><span>3</span></p> </body>2.3.2、align-self 控制子項自己在側軸上的排列方式
- align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性。
- 默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。
2.3.3、order屬性定義項目的排列順序
數值越小，排列越靠前，默認為0。
注意：和 z-index 不一樣。
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {display: flex;width: 80%;height: 300px;background-color: pink;/* 讓三個子盒子沿著側軸底側對齊 *//* align-items: flex-end; *//* 我們想只讓3號盒子下來底側 */}div span {width: 150px;height: 100px;background-color: purple;margin-right: 5px;}div span:nth-child(2) {/* 默認是0 -1比0小所以在前面 */order: -1;}div span:nth-child(3) {align-self: flex-end;}</style> </head><body><div><span>1</span><span>2</span><span>3</span></div> </body>2.4、背景顏色漸變
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 600px;height: 200px;/* 背景漸變必須添加瀏覽器私有前綴 *//* background: -webkit-linear-gradient(left, red, blue); *//* background: -webkit-linear-gradient(red, blue); */background: -webkit-linear-gradient(top left, red, blue);}</style> </head><body><div></div> </body>2.5、rem適配布局
我們來看幾個問題：
2.5.1、rem基礎
- rem (root em)是一個相對單位，類似于em，em是父元素字體大小。
- 不同的是rem的基準是相對于html元素的字體大小。
- 比如，根元素（html）設置font-size=12px; 非根元素設置width:2rem; 則換成px表示就是24px
- rem的優勢：父元素文字大小可能不一致， 但是整個頁面只有一個html，可以很好來控制整個頁面的元素大小
2.5.2、媒體查詢
媒體查詢（Media Query）是CSS3新語法。
- 使用 @media 查詢，可以針對不同的媒體類型定義不同的樣式
- @media 可以針對不同的屏幕尺寸設置不同的樣式
- 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
- 目前針對很多蘋果手機、Android手機，平板等設備都用得到多媒體查詢
語法如下：
@media mediatype and|not|only(media feature){CSS-code }- 用 @media 開頭 注意@符號
- mediatype 媒體類型
- 關鍵字 and not only
- media feature 媒體特性 必須有小括號包含
上面代碼的意思是在我們屏幕上頁面處于 500px-800px 之間，頁面背景顏色顯示為 pink 色。頁面小于 500px，背景顏色顯示為 purple 色
2.5.2.1、mediatype查詢類型
將不同的終端設備劃分成不同的類型，稱為媒體類型
| all | 用于所有設備 |
| 用于打印機和打印預覽 | |
| scree | 用于電腦屏幕、平板電腦、智能手機等 |
2.5.2.2、關鍵字
關鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件。
- and：可以將多個媒體特性連接到一起，相當于“且”的意思。
- not：排除某個媒體類型，相當于“非”的意思，可以省略。
- only：指定某個特定的媒體類型，可以省略。
2.5.2.3、媒體特性
每種媒體類型都具體各自不同的特性，根據不同媒體類型的媒體特性設置不同的展示風格。我們暫且了解三個。注意他們要加小括號包含。
| width | 定義輸出設備中頁面可見區域的寬度 |
| min-width | 定義輸出設備中頁面最小可見區域寬度 |
| max-width | 定義輸出設備中頁面最大可見區域寬度 |
注意： 為了防止混亂，媒體查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣代碼更簡潔
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* 1. 媒體查詢一般按照從大到小或者 從小到大的順序來 *//* 2. 小于540px 頁面的背景顏色變為藍色 */@media screen and (max-width: 539px) {body {background-color: blue;}}/* 3. 540 ~ 970 我們的頁面顏色改為 綠色 *//* @media screen and (min-width: 540px) and (max-width: 969px) {body {background-color: green;}} */@media screen and (min-width: 540px) {body {background-color: green;}}/* 4. 大于等于970 我們頁面的顏色改為 紅色 */@media screen and (min-width: 970px) {body {background-color: red;}}/* 5. screen 還有 and 必須帶上不能省略的 *//* 6. 我們的數字后面必須跟單位 970px 這個 px 不能省略的 */</style> </head>2.5.3、媒體查詢+rem實現元素動態大小變化
- rem單位是跟著html來走的，有了rem頁面元素可以設置不同大小尺寸
- 媒體查詢可以根據不同設備寬度來修改樣式
- 媒體查詢+rem 就可以實現不同設備寬度，實現頁面元素大小的動態變化
上述代碼的意思是：屏幕尺寸小于320px， div 大小為 0.5*50 = 25px，屏幕尺寸大于 320px 小于 640px， div 大小為 0.5 * 100 = 50px
2.5.4、引入資源
- 當樣式比較繁多的時候，我們可以針對不同的媒體使用不同 stylesheets（樣式表）。
- 原理，就是直接在link中判斷設備的尺寸，然后引用不同的css文件。
語法：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">示例：
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">2.5.5、Less
CSS 是一門非程序式語言，沒有變量、函數、SCOPE（作用域）等概念。
- CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的。
- 不方便維護及擴展，不利于復用。
- CSS 沒有很好的計算能力
- 非前端開發工程師來講，往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易于維護的 CSS 代碼項目。
Less （Leaner Style Sheets 的縮寫） 是一門 CSS 擴展語言，也成為CSS預處理器。
-
做為 CSS 的一種形式的擴展，它并沒有減少 CSS 的功能，而是在現有的 CSS 語法上，為CSS加入程序式語言的特性。
-
它在 CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，并且降低了 CSS 的維護成本，就像它的名稱所說的那樣，Less 可以讓我們用更少的代碼做更多的事情。
-
Less中文網址： http://lesscss.cn/
-
Less 是一門 CSS 預處理語言，它擴展了CSS的動態特性。
2.5.5.1、Less安裝
安裝：(如果使用vscode無需安裝less)
npm install -g less查看版本：
lessc -v我們首先新建一個后綴名為less的文件， 在這個less文件里面書寫less語句。
2.5.5.2、Less變量
@變量名: 值;變量命名規范
-
必須有@為前綴
-
不能包含特殊字符
-
不能以數字開頭
-
大小寫敏感
變量是指沒有固定的值，可以改變的。因為我們CSS中的一些顏色和數值等經常使用。
//直接使用 body{color: @color; } a:hover{color: @color; }2.5.5.3、Less編譯
我們需要把我們的 less文件，編譯生成為css文件，這樣我們的html頁面才能使用。
我們可以在 vscode 安裝 Easy LESS 插件來把 less 文件編譯為 css。安裝完畢插件，重新加載下 vscode。只要保存一下Less文件，會自動生成CSS文件。
2.5.5.4、Less嵌套
我們經常用到選擇器的嵌套
#header .logo {width: 300px; }#header {.logo{width: 300px;} }如果遇見 （交集|偽類|偽元素選擇器）
- 內層選擇器的前面沒有 & 符號，則它被解析為父選擇器的后代
- 如果有 & 符號，它就被解析為父元素自身或父元素的偽類
2.5.5.5、Less運算
任何數字、顏色或者變量都可以參與運算。就是Less提供了加（+）、減（-）、乘（*）、除（/）算術運算。
@width: 10px + 5; div {border: @width solid red; }/* 生成的css */ div {border: 15px solid red; }/* Less甚至還可以這樣 */ width: (@width + 5) * 2;注意：
- 乘號（*）和除號（/）的寫法
- 運算符中間左右有個空格隔開 1px + 5
- 對于兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
- 如果兩個值之間只有一個值有單位，則運算結果就取該單位
2.5.6、rem適配方案
實際開發中適配方案：
rem 適配方案技術使用
2.5.6.1、rem實際開發適配方案一
rem + 媒體查詢 + less 技術
一般情況下，我們以一套或兩套效果圖適應大部分的屏幕，放棄極端屏或對其優雅降級，犧牲一些效果。現在基本以750為準。
動態設置 html 標簽 font-size 大小
元素大小取值方法
總結
以上是生活随笔為你收集整理的CSS进阶班笔记(五)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【C语言】形参实参以及参数传递
- 下一篇： CSS基础班笔记(三)