- HTML常用標簽總結
- 手摸手帶你學CSS
- HTML5與CSS3知識點總結
好好學習，天天向上
本文已收錄至我的Github倉庫DayDayUP：github.com/RobodLee/DayDayUP，歡迎Star
?????轉載請注明出處！?????鏈接：https://blog.csdn.net/weixin_43461520/article/details/113785278
?????**轉載請注明出處！**?????
視口
視口就是瀏覽器顯示頁面內容的螢屏區域，視口分為布局視口、視覺視口和理想視口，
布局視口 layout viewport
布局視口是移動設備的瀏覽器默認設定的一個視口，用于解決早期的PC端頁面在手機上顯示的問題，一般這個視口默認的解析度是980px，這種情況下元素顯示得都比較小，需要手動縮放網頁才能看清，
視覺視口 visual viewport
視覺視口指的是用戶正在看到的網頁的區域，可以通過縮放去操作視覺視口，但不會影響到布局視口，布局視口仍保持原來的寬度，
理想視口 ideal viewport
前兩種視口的閱讀體驗都不太好，仍然需要手動縮放網頁才能將頁面內容看清，而理想視口則是最理想的視口尺寸，簡單的說就是設備有多寬，布局的視口就有多寬，小米商城京東等網站的手機網頁版都是理想視口，我們不需要縮放視窗就可以將頁面內容看清，
mate視口標簽
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
其中，**name=“viewport”**表示這是一個視口標簽，content用于宣告某些屬性，常用屬性有👇
| 屬性 | 說明 |
|---|---|
| width | 用于設定寬度，device-width |
| initial-scale | 初始化縮放比，大于0的數字 |
| maximum-scale | 最大縮放比，大于0的數字 |
| minimum-scale | 最小縮放比，大于0的數字 |
| user-scalable | 用戶是否可以縮放，yes或no（1或0） |
| minimal-ui | 在網頁加載是隱藏頂部的地址欄和底部的導航欄 |
二倍圖
物理像素＆物理像素比
物理像素就是所謂的解析度，比如解析度是1920*1080的螢屏，那么螢屏橫向是1080個物理像素，縱向就是1920個物理像素，但有時候代碼中寫的是1px，在手機螢屏上顯示不一定就是一個物理像素，比如視網膜螢屏，可以將更多的物理像素點壓縮至一塊螢屏里，從而達到更高的解析度，
從上圖中可以看出，原本一個像素，在顯示的時候卻用了兩個物理像素，這就是物理像素比（實際顯示的物理像素 / 指定的像素大小，上圖中物理像素比就是4/2=2）
多倍圖
比如一張50px * 50px的圖片，在視網膜螢屏中打開，按照上圖中的換算關系，就會變成原來的兩倍，也就是100px * 100px，肯定會造成圖片模糊，所以要想解決這個問題，可以先準備一張100px * 100px的圖片，然后指定寬高為原來的一半，就變成了50px * 50px，在螢屏中顯示的時候，又會擴大為之前的兩倍，又恢復成了100px * 100px，這樣圖片就不會模糊了，
img {
width: 50px;
height: 50px;
}
背景縮放 background-size
不光是普通的圖片可以縮放，背景圖片也可以縮放，使用background-size屬性就可以將背景圖片縮放了，
/* 語法： */
background-size: 背景圖片寬度 背景圖片高度;
/* 可以只寫一個引數，一個引數表示的是寬度，高度省略了，會等比例縮放👇 */
background-size: 背景圖片寬度;
/* 引數百分比也是ok的，表示父盒子的百分之多少，同樣，百分比也可以指定一個或兩個👇 */
background-size: 66% 50%; / background-size: 80%;
/* cover表示背景圖片寬度和高度等比例擴展至足夠大，完全覆寫背景區域，可能會導致一部分圖片內容丟失👇 */
background-size: cover;
/* contain表示寬度和高度進行等比例縮放，當寬度或者高度中的一個占滿整個盒子的時候就不再拉伸了👇 */
background-size: contain;
看一下cover和contain的區別👇
<head>
<style>
div {
width: 300px;
height: 400px;
border: 5px solid red;
background: url(./images/robod.png) no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
布局
流式布局
流式布局很簡單，就是百分比布局，也稱非固定像素布局，簡單來說就是將盒子的寬度設定成百分比，這樣盒子的寬度就會根據螢屏的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充，
<head>
<style>
div {
width: 80%; /* 將寬度指定為父盒子的80% */
height: 50px; /* 高度還是指定具體的px */
background-color: skyblue;
margin: 0 auto; /* 盒子始終居中對齊 */
}
</style>
</head>
<body>
<div></div>
</body>
flex 彈性布局
flex用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex布局，當父盒子被指定為flex布局后，子元素的float、clear和vertical-align屬性將失效，采用flex布局的元素被稱為flex容器，它的所有子元素自動成為容器成員，稱為flex專案，
flex 布局就是通過給父盒子添加flex屬性，來控制子元素的位置和排列方式
flex 布局父項常見屬性
flex-direction（設定主軸的方向）
在 flex 布局中，分為主軸和側軸兩個方向，又被稱作行和列，x軸和y軸，默認的主軸是x軸，默認的側軸是y軸，
主軸和側軸是會變化的，通過flex-direction屬性即可設定哪個是主軸以及主軸方向，剩下的就是側軸，子元素是跟著主軸的方向排列的，
| 屬性值 | 說明 |
|---|---|
| row | x軸為主軸，子元素從左向右排列，默認值 |
| row-reverse | x軸為主軸，子元素從右向左排列 |
| column | y軸為主軸，子元素從上到下排列 |
| column-reverse | y軸為主軸，子元素從下到上排列 |
<head>
<style>
.father {
display: flex; /* 使用flex布局 */
width: 500px;
height: 500px;
background-color: tomato;
/* row、row-reverse、column、column-reverse */
flex-direction: column-reverse;
}
.son {
width: 200px;
height: 200px;
margin: 10px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son">11111微信公眾號：Robod</div>
<div class="son">22222微信公眾號：Robod</div>
</div>
</body>
justify-content（設定主軸上的子元素排列方式）
在確定好主軸后，就可以使用justify-content屬性去定義子元素在主軸上的對齊方式，
| 屬性值 | 說明 |
|---|---|
| flex-start | 默認值，從頭部開始（如果主軸是x軸，則從左到右） |
| felx-end | 從尾部開始排列 |
| center | 在主軸居中對齊（如果主軸是x軸，則水平居中） |
| space-around | 平分剩余空間 |
| space-between | 先兩邊貼邊，再平分剩余空間 |
<head>
<style>
.box {
width: 500px;
height: 200px;
display: flex;
/* flex-start、flex-end、center、space-around、space-between */
justify-content: flex-start;
background-color: aquamarine;
}
.box div {
width: 100px;
height: 100px;
margin: 10px;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="box">
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
flex-wrap（設定子元素是否換行）
flex布局中，默認情況下所有的子元素都排在一條線上，如果一條線上塞不下，就會縮減子元素的寬度，強制塞進一條線中，如果想控制是否換行，可以通過flex-wrap屬性來設定nowrap(默認值，不換行)，wrap(換行)，
<head>
<style>
.box {
width: 700px;
height: 300px;
display: flex;
flex-wrap: nowrap; /* nowrap、wrap */
background-color: aquamarine;
}
.box div {
width: 300px;
height: 100px;
border: 1px solid red;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="box">
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
align-items（設定側軸上的子元素的排列方式，單行）
該屬性是控制子項在側軸上的排列方式，當子元素都在一行(或一列)上的時候使用，
| 屬性值 | 說明 |
|---|---|
| flex-start | 從上到下 |
| flex-end | 從下到上 |
| center | 擠在一起居中（垂直居中） |
| stretch | 拉伸，默認值，子盒子不設定height時，高度和父盒子一致 |
<!-- 現在主軸是x軸，y軸是側軸-->
<head>
<style>
.box {
width: 400px;
height: 100px;
display: flex;
/* flex-start、flex-end、center、stretch */
align-items: stretch;
background-color: aquamarine;
}
.box div {
width: 100px;
border: 1px solid red;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="box">
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
align-content（設定側軸上的子元素的排列方式，多行）
當子元素出現換行的情況時，使用align-content屬性設定子元素的對齊方式，在單行情況下沒有效果，
| 屬性值 | 說明 |
|---|---|
| flex-start | 在側軸的頭部開始排列，默認值 |
| flex-end | 在側軸的尾部開始排列 |
| center | 在側軸中間顯示 |
| space-around | 子元素在側軸平分剩余空間 |
| space-between | 子元素在側軸先分布在兩頭，再平分剩余空間 |
| stretch | 子元素未指定height屬性時平分父元素高度 |
<head>
<style>
.box {
width: 150px;
height: 400px;
display: flex;
flex-wrap: wrap; /* 設定子元素換行顯示 */
/* flex-start、flex-end、center、space-around、space-between、stretch*/
align-content: stretch;
background-color: aquamarine;
}
.box div {
width: 100px;
/* height: 100px; */
border: 1px solid red;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="box">
<div>Robod111</div>
<div>Robod222</div>
<div>Robod333</div>
</div>
</body>
flex-flow
flex-flow屬性是flex-direction和flex-wrap屬性的復合屬性，
flex-flow: row wrap;
flex 布局子項常見屬性
flex
flex屬性用于分配父盒子剩余的空間，flex來表示占的份數，也可以寫百分比，
<head>
<style>
.box {
display: flex;
width: 100%;
height: 100px;
background-color: skyblue;
}
.box div {
height: 100px;
}
.box div:nth-child(1) {
background-color: red;
flex: 3;
}
.box div:nth-child(2) {
background-color: green;
flex: 1;
}
.box div:nth-child(3) {
background-color: blue;
width: 100px;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
上面這個例子中，第三個藍色盒子占了100px，紅色和綠色盒子分配剩下的空間，紅色的占2/3，綠色的占1/3，而且會根據父盒子寬度的調整去動態調整盒子的寬度，
align-self
這個屬性可以用來設定子元素自身在側軸上的排列方式，默認值為auto，表示繼承父元素的align-items屬性
order
如果想更改兩個元素的排列順序，可以使用order屬性，數值越小，排列越靠前，默認為0，
<head>
<style>
.box {
display: flex;
width: 200px;
height: 200px;
background-color: skyblue;
}
.box div {
width: 50px;
height: 50px;
margin: 10px;
background-color: burlywood;
}
.box div:nth-child(2){
align-self: flex-end;
}
.box div:nth-child(3) {
order: -1;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
rem 適配布局
上面這張圖是蘇寧移動端的首頁，可以看到，網頁中元素以及文字的大小是根據視窗寬度動態進行調整的，要想實作這種效果，可以使用rem + 媒體查詢，
rem 單位
在介紹rem之前，先來介紹一下em，em指的是父元素字體大小，比如div里面有個span，div中的font-size是20px，那么在span中，1em=20px，同樣的，rem也是一個相對單位，但是它指的是html根標簽的字體大小，比如html標簽中font-size為50px，那么在整個html代碼里1rem=50px，所以現在我們只需要將所有的文字還有元素寬高的單位修改為rem，就可以通過修改html標簽中的文字大小來調整整個頁面中所有元素的大小了，
媒體查詢（Media Query）
僅有rem單位還沒辦法實作前面提到的效果，現在還需要去實作調整視窗大小的時候html標簽中的font-size能夠隨之變化才可以達到我們想要的效果，通過媒體查詢即可實作該功能，媒體查詢是CSS3新語法，可以對不同的媒體型別定義不同的樣式，語法如下👇
@media mediatype and|not|only (media feature) {
CSS樣式;
}
其中，mediatype是媒體型別，常用的有all(用于所有設備)，print(用于列印機和列印預覽)和screen(用于電腦螢屏，平板電腦，智能手機等)三種，
mediatype后面跟著的就是關鍵字，同樣也有三個，and 指的是可以將多個媒體特性連接到一起，not 是排除某個媒體型別，最后一個only用于指定某個特定的媒體型別，
最后一個用小括號括起來的是媒體特性，根據不同媒體型別的媒體特性設定不同的展示風格，比如width、min-width、max-width等， 還有很多，可以參考菜鳥教程，
<head>
<style>
@media screen and (min-width: 600px) {
html {
font-size: 20px;
background-color: skyblue;
}
}
@media screen and (max-width: 599px) {
html {
background-color:springgreen;
font-size: 10px;
}
}
div {
font-size: 2rem;
}
</style>
</head>
<body>
<div>
微信公眾號：Robod
</div>
</body>
上面的例子中，當螢屏寬度小于600px時，1rem=10px，文字大小是2rem=40px，當螢屏寬度為600~800px時，1rem=20px，文字大小就變成了2rem=40px，不過在書寫的時候要注意書寫的邏輯，不然有可能由于CSS層疊性的問題導致樣式不生效，
媒體查詢不僅可以實作頁面元素的動態變化，還可以實作根據設備尺寸引入不同的css檔案，當樣式比較多的時候，可以針對不同的媒體使用不同的css檔案，語法如下👇
<link rel="stylesheet" media="mediatype and|not|only (media fuature)" href="xxx.css">
這樣當符合media屬性中的條件時，就會引入該CSS檔案，
回應式布局
前面幾種布局方式都是專門為了為了移動端去制作一個布局檔案，而回應式布局可以只需要開發一套即可，它可以兼容不同尺寸的螢屏，
回應式開發原理
首先回應式布局需要一個父級作為布局容器，用來配合子集元素去實作變化效果，原理就是在不同螢屏下通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實作不同螢屏下看到不同的頁面布局和樣式變化，
通常的尺寸劃分與寬度設定👇
| 設備劃分 | 尺寸與寬度設定 |
|---|---|
| 超小螢屏（手機） | <768px；寬度設為100% |
| 小屏設備（平板） | >=768px，<992px；寬度設為750px |
| 中等設備（桌面顯示幕） | >=992px，<1200px；寬度設為970px |
| 寬屏設備（大桌面顯示幕） | >=1200px；寬度設為1170px |
<head>
<style>
.container {
width: 750px;
margin: 0 auto;
}
.container ul li {
float: left;
width: 25%;
height: 30px;
background-color: aqua;
list-style: none;
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
.container ul li {
width: 50%;
background-color: skyblue;
}
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>微信公眾號</li>
<li>Robod</li>
<li>微信公眾號</li>
<li>Robod</li>
</ul>
</div>
</body>
在👆這個例子中，當視窗寬度大于768px時，讓4個 li 浮動在一行顯示，每個 li 的寬度為ul的25%，當視窗寬度小于768px時，通過媒體查詢修改 li 元素的樣式，一行顯示兩個，所以，回應式布局的優點就在于可以使用一套CSS代碼實作不同螢屏下的布局，不過缺點就是會導致整個布局檔案比較臃腫，
背景線性漸變色
在某些網站中，可以看到一些漸變色的效果，那么漸變色也是可以通過CSS來實作的，
/* 第一個引數是起始方向，不寫默認是top，跟一個表示某一邊，兩個表示某個角，比如左下角，就寫left bottom（中間用空格隔開，不是逗號）;
后面的顏色可以跟多個，中間用逗號隔開 */
background: -webkit-linear-gradient(起始方向, 顏色1, 顏色2...);
需要注意的是，背景漸變的兼容性不是很好，所以必須添加私有前綴，
<head>
<style>
div {
width: 200px;
height: 100px;
background: -webkit-linear-gradient(left bottom,red,green,blue);
}
</style>
</head>
<body>
<div></div>
</body>
總結
現在正好放假了，所以抽空學習了一下移動端的布局開發，然后將看的內容總結成了這一篇文章，整個HTML+CSS的部分到這里也就結束了，接下來就要學習JavaScript了，文中肯定有很多疏漏的地方，歡迎在評論區交流，
明天就大年三十了，祝各位小伙伴們新年快樂！
碼字不易，可以的話，給我來個
點贊，收藏，關注
如果你喜歡我的文章，歡迎關注微信公眾號 『 R o b o d 』
本文已收錄至我的Github倉庫DayDayUP：github.com/RobodLee/DayDayUP，歡迎Star
?????轉載請注明出處！?????鏈接：https://blog.csdn.net/weixin_43461520/article/details/113785278
?????**轉載請注明出處！**?????
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258746.html
標籤：其他