一、盒子寬度calc函數

? width: calc(100% - 20px);
? 表示寬度為父元素的100%-20px。

二、3D移動

?

transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px);transform: translate3d(x,y,z);

? 需要有一個透視效果才能有效果：
? perspective: 1000px;推薦800到1200px，是指人和屏幕的距離(給父元素加)
? 當視距等于y軸唯一的距離是，盒子就相當于和眼睛一個位置，所以就會消失

三、3d旋轉

transform: rotateX();transform: rotateY();transform: rotateZ();默認的就是Z軸transform: rotate3d(s,y,z,角度度數);

四、立體呈現

? transform-preserve-3d添加在父元素

五、漸變背景

background-image: linear-gradient(pink,green,更多的顏色...可以是transparent，rgba());

六、動畫

?

@keyframes change {0% {width: 200px;}50% {width: 500px;height: 300px;}100% {width: 800px;height: 500px;} }.box {width: 200px;height: 100px;background-color: pink;/* 使用動畫 */animation: change 1s liner(動畫正放一次后倒放) forwords(截止在動畫結束時，默認動畫開始時);}

七、flex布局

? 給父元素添加display: flex;改變盒子顯示模式
? 主軸對齊方式：justify-content: space-xxx;屬性使盒子可以延主軸均勻分布在一行。
?

.box {width: 100%;height: 200px;border: 1px solid #ccc;/*改變盒子顯示模式*/display: flex;/* 兩邊頂頭中間平均分布 */justify-content: space-between;/* 子盒子兩邊都有相同邊距 */justify-content: space-around;/* 頂頭和中間的邊距都一樣 */justify-content: space-evenly;}.box div {width: 100px;height: 100px;background-color: pink;}側軸對齊方式.box {display: flex; /* 居中 *//* align-items: center; *//* 拉伸,默認值(現有狀態,測試的時候去掉子級的高度) *//* align-items: stretch; */height: 300px;margin: auto;border: 1px solid #000;}.box div {/* width: 100px; *//* height: 100px; */background-color: pink;}/* 單獨設置某個彈性盒子的側軸對齊方式 */.box div:nth-child(2) {align-self: center;} flex布局中如果彈性盒子沒有寬高則默認寬度為內容寬度高度為彈性容器的高度。當側軸有屬性時高度為彈性盒子內容的高度。 伸縮比： 彈性盒子沒有寬度時，給彈性盒子加flex：整數;可以給彈性盒子等比寬度

改變主軸方向：

主軸方向改變后，align_items、justify-content方向也會反

display: flex;/*改變主軸為Y軸*/flex-direction: column;/* 視覺效果: 實現盒子水平居中 */align-items: center;/* 視覺效果: 垂直居中 */justify-content: center;

彈性盒子換行：

彈性盒子在使用了flex布局后不會換行，因此需要給他加一個屬性

flex-wrap: wrap;

八、移動適配

? 1rem=1html標簽字號大小

九、媒體查詢

使用媒體查詢，根據不同的視口寬度設置不同的根字號

? 當視口寬度為375px時html根字號為40px

@media (width:375px) {html {font-size: 40px;}} @media (width:320px) {html {font-size: 20px;}}

? 下面的media不會層疊上面的。

通常html根字號為視口寬度的1/10。

在查看設計稿時一般都是px單位，所以我們需要計算出rem
一般設計稿都是視口寬度都是375px
因此rem=元素px/37.5

我們不可能每個尺寸都給媒體查詢
flexible.js用來幫助我們給不同視口寬度媒體查詢
引用方法：

<script src="js/flexible.js"></script>

十、less

less是css的預處理器后綴名為.less

瀏覽器不識別less我們在使用時還是要引入css

easy less 插件：保存less文件自動生成css文件

注釋

單行注釋：// 快捷鍵：CTRL+/
多行注釋：/**/ 快捷鍵：shift+alt+a

寫法

.box {width: 100 + 10px;width: 100 - 20px;width: 100 * 2px;// 除法需要加()// 68 > remwidth: (68 / 37.5rem);// height: 29 ./ 37.5rem;(也可以寫./但會報紅還是不要這樣寫的好) }

嵌套

less代碼：

.father {width: 100px;.son {color: pink;// & 表示當前選擇器&:hover {color: green;}}&:hover {color: orange;} }

轉換后css代碼：

轉換后css代碼：

.father {width: 100px; } .father .son {color: pink; } .father .son:hover {color: green; } .father:hover {color: orange; }

變量

定義變量
@變量名：變量;
使用變量
.box {
屬性：@變量名;
}

導入

less文件可以相互導入
導入方式：
@import ‘xxx.less’; //后綴可以省略

導出

less文件自動生成的css文件可以更改導出路徑
在設置中搜索easy—>點擊setting.json—>在"less.compile"中添加 “out”: "…/css/"代碼
之后自動生成的css文件都會導出在css文件夾里
*如果某個less需要單獨的導出路徑時：
在less文件里開頭寫
// out: …/css/

禁止導出
如base等只需要別的less直接引入就可以
// out: flase

十一、vw/vh

1vw/vh=1/100視口寬度/高度

vw=像素px÷1/100視口寬度一般為3.75

vh=像素px÷1/100視口高度一般為6.67

vw vh不要混用

十二、響應式

根據不同條件改變樣式

1.使用媒體查詢

/*小于等于700px時背景顏色為red*/ @media (max-width: 700px) {? body {background-color: red;}} /*大于于等于900px時背景顏色為green*/ @media (max-width: 900px) {? body {background-color: green;}}

2.使用媒體查詢時注意事項

min-width要從小到大書寫

max-width要從大到小書寫

3.媒體查詢link引入

/*當視口寬度大于等于700px時引用one.css文件樣式*/ <link rel="stylesheet" href="./css/one.css" media="(min-width: 700px)">

十三、Bootstrap

1.下載

www.bootcss.com ---->選擇3.4.1—>下載第一個使用 (第一個是框架，第二個是源碼，第三個是大量sass源碼)

2.引用

<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap-theme.min.css">

3.bootstarp柵格系統

bootstrap默認將視口寬度分為12等分

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-aoq00gEt-1657859048196)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220714170215828.png)]

4.bootstrap中的類名

.container：版心居中自帶左右15px的內邊距；

.row：左右自帶-15px的內邊距，用來抵消.container的內邊距

.container-fluid：寬度為100%視口寬度，自帶15px內邊距

5.插件

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QNnwfUY6-1657859048198)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220714175534516.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EWBTtRvr-1657859048198)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220714175458830.png)]

dist/css/bootstrap-theme.min.css">

3.bootstarp柵格系統bootstrap默認將視口寬度分為12等分[外鏈圖片轉存中...(img-aoq00gEt-1657859048196)]4.bootstrap中的類名.container：版心居中自帶左右15px的內邊距；.row：左右自帶-15px的內邊距，用來抵消.container的內邊距.container-fluid：寬度為100%視口寬度，自帶15px內邊距5.插件[外鏈圖片轉存中...(img-QNnwfUY6-1657859048198)][外鏈圖片轉存中...(img-EWBTtRvr-1657859048198)]

總結

以上是生活随笔為你收集整理的黑马程序员：移动web的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。