柚子快報(bào)邀請(qǐng)碼778899分享：前端 css3手冊(cè)
柚子快報(bào)邀請(qǐng)碼778899分享：前端 css3手冊(cè)
布局
浮動(dòng)：做文字環(huán)繞效果
彈性盒：?jiǎn)涡谢騿瘟胁季?/p>
網(wǎng)格：多行多列布局
彈性盒
詳細(xì)文檔見MDN
彈性盒小游戲
生成彈性容器和彈性項(xiàng)目
**默認(rèn)情況下，**彈性項(xiàng)目沿著主軸依次排列，側(cè)軸拉伸
更改方向
通過flex-direction可更改主軸方向
主軸排列
通過justify-content屬性，可以影響主軸的排列方式
側(cè)軸排列
通過align-items屬性，可以影響側(cè)軸的排列方式
彈性項(xiàng)目伸縮
所謂伸縮，是指在主軸方向上，當(dāng)彈性容器有額外空間時(shí)，是否需要拉伸，當(dāng)空間不足時(shí)，是否需要壓縮
在彈性項(xiàng)目上使用flex屬性，可設(shè)置拉伸和壓縮比例：flex: 拉伸比例 壓縮比例 初始尺寸
拉伸示例：
壓縮示例：
默認(rèn)情況下，flex: 0 1 auto
主軸換行
默認(rèn)情況，當(dāng)主軸剩余空間不足時(shí)，按照壓縮比例進(jìn)行壓縮，但如果設(shè)置了主軸換行，則不會(huì)壓縮，直接換行顯示
給彈性容器設(shè)置flex-wrap: wrap，即可主軸換行
盡管如此，多行多列仍然推薦使用網(wǎng)格布局
網(wǎng)格
MDN詳細(xì)文檔
阮一峰網(wǎng)格布局教程
網(wǎng)格布局小游戲
網(wǎng)格布局是多行多列布局的終極解決方案
生成網(wǎng)格布局
容器生成網(wǎng)格布局后，其所有子元素為網(wǎng)格項(xiàng)目
定義行和列
grid-template-rows：定義行
grid-template-columns：定義列
它們的語法是相同的
改變排列方向
使用屬性grid-auto-flow: column，可使子元素按列排放
單元格之間的間隙
row-gap: 10px; /* 行間隙為10px */
column-gap: 20px; /* 列間隙為20px */
gap: 10px 20px; /* 行間隙為10px，列間隙為20px */
單元格內(nèi)部的對(duì)齊
默認(rèn)情況下，網(wǎng)格項(xiàng)目在單元格內(nèi)部水平和垂直拉伸，以撐滿單元格
可以使用屬性justify-items設(shè)置水平方向的排列方式
可以使用屬性align-items設(shè)置垂直方向的排列方式
它們的可取值是相同的：
justify-items: start 左 | end 右 | center 中 | stretch 拉伸;
align-items: start 上 | end 下 | center 中 | stretch 拉伸;
可以使用速寫屬性place-items: 垂直對(duì)齊方式 水平對(duì)齊方式同時(shí)設(shè)置這兩個(gè)值
place-items: start center; /* 垂直靠上，水平居中 */
網(wǎng)格項(xiàng)目定位
默認(rèn)情況下，網(wǎng)格項(xiàng)目依次排列到單元格中，每個(gè)網(wǎng)格占據(jù)一個(gè)單元格
但可以對(duì)網(wǎng)格項(xiàng)目設(shè)置grid-area屬性來改變這一行為
使用方式為：
grid-area: 起始行線編號(hào)/起始列線編號(hào)/結(jié)束行線編號(hào)/結(jié)束列線編號(hào);
視覺
所謂視覺類樣式，是指不影響盒子位置、尺寸的樣式，例如文字顏色、背景顏色、背景圖片等
陰影-
盒子陰影
MDN詳細(xì)文檔
通過box-shadow屬性可以設(shè)置整個(gè)盒子的陰影
下面是一些示例
文字陰影
MDN詳細(xì)文檔
通過text-shadow可以設(shè)置文字陰影
下面是一些示例
圓角
MDN詳細(xì)文檔
通過設(shè)置border-radius，可以設(shè)置盒子的圓角
border-radius可以有很多靈活的用法，將下面的代碼依次粘貼到頁面中測(cè)試一下
border-radius: 10px; /* 同時(shí)設(shè)置4個(gè)角的圓角，半徑為10px */
border-radius: 50%; /* 同時(shí)設(shè)置4個(gè)角的圓角，圓的橫向半徑為寬度一半，縱向半徑為高度一半 */
border-radius: 10px 20px 30px 40px; /* 分別設(shè)置左上、右上、右下、左下的圓角 */
背景漸變
MDN詳細(xì)文檔
在設(shè)置背景圖片時(shí)，除了可以使用url()加載一張背景圖，還可以使用linear-gradient()函數(shù)設(shè)置背景漸變
linear-gradient()用于創(chuàng)建一張漸變的圖片，語法為：
/* 設(shè)置漸變背景，方向：從上到下，顏色：從#e66465漸變到#9198e5 */
background: linear-gradient(to bottom, #e66465, #9198e5);
變形
MDN詳細(xì)文檔
通過transform屬性，可以使盒子的形態(tài)發(fā)生變化
該屬性支持多種變形方案，常見的有:
translate，平移scale，縮放rotate，旋轉(zhuǎn)
無論是哪一種transform，都只是視覺效果的變化，不會(huì)影響盒子的布局
transform不會(huì)導(dǎo)致瀏覽器reflow和rerender，因此效率極高
translate 平移
使用translate可以讓盒子在原來位置上產(chǎn)生位移，類似于相對(duì)定位
scale 縮放
使用translate可以讓盒子在基于原來的尺寸發(fā)生縮放
rotate 旋轉(zhuǎn)
使用rotate屬性可以在原圖基礎(chǔ)上進(jìn)行旋轉(zhuǎn)
/* 在原圖的基礎(chǔ)上，順時(shí)針旋轉(zhuǎn)45度角 */
transform: rotate(45deg);
/* 在原圖的基礎(chǔ)上，順時(shí)針旋轉(zhuǎn)半圈 */
transform: rotate(0.5turn);
改變變形原點(diǎn)
MDN詳細(xì)文檔
變形原點(diǎn)的位置，會(huì)影響到具體的變形行為
默認(rèn)情況下，變形的原點(diǎn)在盒子中心，你可以通過transform-origin來改變它
transform-origin: center; /* 設(shè)置原點(diǎn)在盒子中心 */
transform-origin: left top; /* 設(shè)置原點(diǎn)在盒子左上角 */
transform-origin: right bottom; /* 設(shè)置原點(diǎn)在盒子右下角 */
transform-origin: 30px 60px; /* 設(shè)置原點(diǎn)在盒子坐標(biāo) (30, 60) 位置 */
多種變形疊加
可以一次性設(shè)置多種變形效果
/* 先旋轉(zhuǎn)45度，再平移(100,100) */
transform: rotate(45deg) translate(100px, 100px);
/* 先平移(100, 100)，再旋轉(zhuǎn)45度 */
transform: translate(100px, 100px) rotate(45deg);
注意：旋轉(zhuǎn)會(huì)導(dǎo)致坐標(biāo)系也跟著旋轉(zhuǎn)，從而可能影響到后續(xù)的變形效果
下面的例子可以很好的說明這一點(diǎn)
http://mdrs.yuanjin.tech/html/css-manual/multi-transform.html
本來打算把這個(gè)效果嵌入到markdown，但由于嵌入后出現(xiàn)一些未知的bug，因此只能粘貼效果地址了
過渡和動(dòng)畫
使用過渡和動(dòng)畫，可以讓css屬性變化更加絲滑
過渡和動(dòng)畫無法對(duì)所有的CSS屬性產(chǎn)生影響，能夠產(chǎn)生影響的只有數(shù)值類屬性，例如：顏色、寬高、字體大小等等
過渡
MDN詳細(xì)文檔
transition: 過渡屬性 持續(xù)時(shí)間 過渡函數(shù) 過渡延遲
過渡屬性 針對(duì)哪個(gè)css屬性應(yīng)用過渡。例如填寫transform，則表示僅針對(duì)transform屬性應(yīng)用過渡。 若填寫all或不填寫，則表示針對(duì)所有css屬性都應(yīng)用過渡 持續(xù)時(shí)間 css屬性變化所持續(xù)的時(shí)間，需要帶上單位。例如3s表示3秒，0.5s或500ms均表示500毫秒 過渡函數(shù) 本質(zhì)是css屬性變化的貝塞爾曲線函數(shù)，通常直接使用預(yù)設(shè)值： ease-in-out：平滑開始，平滑結(jié)束 linear：線性變化 ease-in：僅平滑開始 ease-out：僅平滑結(jié)束 過渡延遲 書寫規(guī)則和持續(xù)時(shí)間一樣，表示過渡效果延遲多久后觸發(fā)，不填則無延遲
在JS中，可以監(jiān)聽元素的transitionstart和transitionend事件，從而在過渡開始和過渡結(jié)束時(shí)做一些別的事情
動(dòng)畫
MDN詳細(xì)文檔
動(dòng)畫的本質(zhì)是預(yù)先定義的一套css變化規(guī)則，然后給該規(guī)則取個(gè)名字
然后，其他元素即可使用這樣的規(guī)則：
animation: 規(guī)則名 持續(xù)時(shí)間;
在應(yīng)用規(guī)則時(shí)，還可以指定更多的信息
animation: 規(guī)則名 持續(xù)時(shí)間 重復(fù)次數(shù) 時(shí)間函數(shù) 動(dòng)畫方向 延遲時(shí)間
一些細(xì)節(jié)：
定義規(guī)則時(shí)，0%可以書寫為from定義規(guī)則時(shí)，100%可以書寫為to重復(fù)次數(shù)為infinite時(shí)，表示無限重復(fù)動(dòng)畫方向?yàn)閍lternate時(shí)，表示交替反向，第1次正向，第2次反向，第3次正向，第4次方向，以此類推
在JS中，可以監(jiān)聽元素的animationstart和animationnend事件，從而在過渡開始和過渡結(jié)束時(shí)做一些別的事情
其他
box-sizing
一圖勝千言
使用border-box控制尺寸更加直觀，因此，很多網(wǎng)站都會(huì)加入下面的代碼
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
字體圖標(biāo)
MDN font-face 指令
css3新增了font-face指令，該指令可以讓我們加載網(wǎng)絡(luò)字體
其最常見的應(yīng)用就是字體圖標(biāo)
字體圖標(biāo)本質(zhì)上是文字，即通過color設(shè)置顏色，通過font-size設(shè)置尺寸
國(guó)內(nèi)使用最多的字體圖標(biāo)平臺(tái)是阿里巴巴矢量圖標(biāo)庫
登錄平臺(tái)后即可免費(fèi)使用其所有字體圖標(biāo)
圖像內(nèi)容適應(yīng)
MDN詳細(xì)文檔
css3屬性object-fit可以控制多媒體內(nèi)容和與元素的適應(yīng)方式，通常應(yīng)用在img或video元素中
一圖勝千言
下圖中的所有img元素均被固定了寬高，溢出img的部分實(shí)際上均不會(huì)顯示
視口單位
css3支持使用vw和vh作為單位，分別表示視口寬度和視口高度
例如1vh表示視口高度的1%，100vw表示視口寬度的100%
偽元素選擇器
通過::before和::after選擇器，可以通過css給元素生成兩個(gè)子元素
使用偽元素可以避免在HTML中使用過多的空元素
偽元素必須要有content屬性，否則不能生效，如果不需要有元素內(nèi)容，設(shè)置content:''
平滑滾動(dòng)
MDN詳細(xì)文檔
使用scroll-behavior: smooth，可以讓滾動(dòng)更加絲滑
參見MDN效果即可
柚子快報(bào)邀請(qǐng)碼778899分享：前端 css3手冊(cè)
推薦鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Yandex.Market俄語外貿(mào)市
