一文入門CSS3

時間 2019-11-07

標籤一文入門 css3 css 欄目 CSS 简体版

原文原文鏈接

2.CSS3

官方文檔：http://www.w3school.com.cn/cssref/index.aspcss

2.1.CSS基礎

基礎簡單過下，事先說明下：諸如引入、註釋、案例就不一一演示了，有個工做1年左右的人均可以熟練掌握，因此基礎部分就簡單概括一下W3C的經常使用屬性列表了html

2.1.1.文本屬性（font、text）

官方文檔：http://www.w3school.com.cn/cssref/index.asp#font or http://www.w3school.com.cn/cssref/index.asp#text前端

color：文字的顏色
- eg：color:red;、color: #000;、color: rgb(0,0,0);
font-size：文字的大小
- eg：font-size:12px;
font-family：文字的字體
- eg：使用微軟雅黑字體：font-family:'Microsoft Yahei';
font-style：字體是否傾斜
- eg：字體不傾斜：font-style:normal;
- PS：通常對i、em這些會致使字體傾斜的標籤設置
font-weight：文字是否加粗
- eg：字體加粗：font-weight:bold;、字體不加粗：font-weight:normal;
**line-height**：文字的行高
- eg：line-height:24px;
2~6彙總設置：font：同時設置文字的幾個屬性
- 需按順序寫：font：是否加粗字號/行高字體;
- eg：font:normal 12px/36px 'Microsoft Yahei';
text-align：文字水平對齊方式
- eg：水平居中：text-align:center
list-style-type：設置列表項標記符號
- 去除符號：list-style-type:none;
- PS：通常都是去除標記用的多
text-decoration：文字下劃線
- eg：去除文字下劃線：text-decoration:none;
- PS：通常都是去除a的下劃線
text-indent：文字首行縮進
- eg：首行縮進2個字符：text-indent:2em;
text-transform：控制文本的大小寫
- none：定義帶有小寫字母和大寫字母的標準的文本(默認)
- capitalize：單詞中首字母大寫
- uppercase：單詞大寫
- lowercase：單詞小寫

2.1.2.背景相關（background）

官方文檔：http://www.w3school.com.cn/cssref/index.asp#backgroundhtml5

background：彙總2~6
- 參考順序：background: 顏色 url(背景圖) no-repeat 定位 fixed
- eg：background:url(雪碧圖) no-repeat left -3.025rem;
background-color：設置元素的背景顏色
background-image：設置元素的背景圖像
background-repeat：設置是否及如何重複背景圖像
background-position：設置背景圖像的開始位置
- 垂直居中 + 水平居中：background-position: center center;
background-attachment：設置背景圖像是否固定或者隨着頁面的其他部分滾動

2.1.3.盒模型系（box）

普通盒子寬 | 高 = width | height + padding + bordercss3

1.尺寸屬性（width、height）

官方文檔：http://www.w3school.com.cn/cssref/index.asp#dimensiongit

width：寬度
height：高度
max-width：最大寬度
max-height：最大高度
min-height：最小高度
min-width：最小寬度

2.邊框屬性（border）

官方文檔：http://www.w3school.com.cn/cssref/index.asp#bordergithub

border：2~4彙總
- 參考順序：border:width style color;
- eg：border:10px solid red;
border-width：設置四條邊框的寬度
border-style：設置四條邊框的樣式
- solid：實線、dashed：虛線、dotted：點線
border-color：設置四條邊框的顏色

PS：指定邊框樣式：border-[top|left|right|bottom]:width style color;bootstrap

eg：border-top: #00c1de .2rem solid;

3.浮動、溢出、定位（float、overflow、position）

官方文檔：http://www.w3school.com.cn/cssref/index.asp#positioning小程序

3.1.浮動

浮動自己沒什麼知識點，清除浮動卻是能夠說下：segmentfault

float: none;：不浮動(默認值)
float: left;：左浮動
float: right;：右浮動
clear: both;：清除全部浮動
- PS：可選擇：[left | right | both |none]

之前清除浮動都是在浮動div下添加一個div.clear的空白div，如今基本上都是用淘寶的僞元素大法：

PS：有利於SEO

/* 清除浮動的樣式 */
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

.clearfix::after {
  clear: both;
}

/* 兼容IE */
.clearfix {
  zoom: 1;
}

3.2.溢出

overflow：元素溢出

visible：超出box也繼續顯示(默認值)
hidden：多餘內容不可見
- PS：還能夠清除浮動、解決margin-top塌陷問題
- 擴展：http://www.javashuo.com/article/p-qngijssj-bt.html
scroll：內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto：顯示滾動條

PS：若是隻只對一個方向可使用overflow-x | overflow-y

eg：移動端主體內容部分：main{position:absolute;left:0;right:0;top:2.5rem;bottom:2.5rem;overflow-x:hidden;overflow-y:auto;}

3.3.定位

position：定位
- absolute：絕對定位
- fixed：固定定位
- relative：相對定位
- static：沒有定位(默認值)
偏移（配合position使用）
- top：距離上方的距離
- left：距離左方的距離
- right：距離右方的距離
- bottom：距離下方的距離
層級：z-index
- 默認爲0，能夠爲負值

PS：絕對定位和固定定位的塊元素和行內元素會自動轉化爲行內塊元素

來個常用的案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定位案例</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1148101_h5fe3ssorlk.css">
    <style>
        header {
            width: 100px;
            margin: 0 auto;
            text-align: center;
        }
        /* 字體圖標 */
        header a.icon-guoxue {
            /* 去除下劃線 */
            text-decoration: none;
            color: #1a8236;
            font-size: 100px;
            /* 父類元素設置相對|絕對定位 */
            position: relative;
        }
        header span {
            position: absolute;
            top: 15px;
            right: -5px;
            /* 絕對定位和固定定位的塊元素和行內元素會自動轉化爲行內塊元素 */
            width: 30px;
            height: 30px;
            font-size: 16px;
            /* 居中顯示 */
            line-height: 30px;
            color: white;
            background-color: red;
            /* 變成圓 */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <!-- a.iconfont.icon-guoxue>span{99} -->
    <header>
        <a href="#" class="iconfont icon-guoxue"><span>99</span></a>
    </header>
</body>
</html>

效果：

4.內外邊距（margin、padding）

官方文檔：http://www.w3school.com.cn/cssref/index.asp#padding

padding：彙總屬性
- 參考順序：padding：上右下左;
- PS：三個值：padding: 上左右下;
padding-bottom：設置元素的下內邊距
padding-left：設置元素的左內邊距
padding-right：設置元素的右內邊距
padding-top：設置元素的上內邊距

官方文檔：http://www.w3school.com.cn/cssref/index.asp#margin

margin：彙總屬性
- eg：水平居中：margin:x auto;
- 參考順序：margin：上右下左;、三個值：margin: 上左右下;
margin-bottom：設置元素的下外邊距
margin-left：設置元素的左外邊距
margin-right：設置元素的右外邊距
margin-top：設置元素的上外邊距

PS：有時候有margin-top塌陷和外邊距合併的問題，so ==> 儘可能用padding

重現：在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，致使內部的盒子margin-top設置失敗
解決：外部盒子設置一個邊框，而且在外部盒子裏設置overflow:hidden，最後使用僞元素.clearfix:before{content: '';display:table;}

2.1.4.擴展與補充

1.塊元素、內聯元素、內聯塊元素

塊元素：支持全部樣式
- PS：若是沒有設置寬度，默認的寬度爲父級寬度100%（無論設不設寬度，都獨佔一行）
內聯元素：不支持width、height、margin和padding
- 子元素是內聯元素，則父元素可用text-align屬性設置子元素水平對齊方式
- 小問題：代碼換行，盒子之間會產生間距
- PS：寬高由內容決定，本身設置是不生效的
內聯塊(行內塊)：支持全部樣式
- 子元素是內聯元素，則父元素可用text-align屬性設置子元素水平對齊方式
- 小問題：代碼換行，盒子之間會產生間距
- PS：若是沒有設置寬高，寬高由內容決定

用代碼表示一下：

display:inline：內聯元素(默認)
- 元素先後沒有換行符
display:block：塊級元素
- 元素先後會帶有換行符
display:inline-block：行內塊元素

隱藏：display:none此元素不會顯示也不佔空間，visibility:hidden;元素是否可見且佔空間

PS：加過渡動畫的時候，visibility有動畫效果，而display沒有

2.內聯元素或內聯塊元素間隙的解決方案

之前是隻要不去換行就沒事了（去掉內聯元素之間的換行），如今get到一個新skill：

將內聯元素的父級設置font-size爲0，內聯元素自身再設置font-size

3.其餘屬性

鼠標顯示爲手：cursor:pointer;
文字不換行：white-space: nowrap;（normal是默認值）
- PS：參考http://www.w3school.com.cn/cssref/pr_text_white-space.asp
設置表格的邊框合併：border-collapse:collapse;（如今基本上用不到了）

2.2.選擇器系

2.2.1.經常使用選擇器

選擇器參考手冊：http://www.w3school.com.cn/cssref/css_selectors.asp

標籤選擇器
- eg：p{color:red;}
ID選擇器
- eg：#footer{color:#a7a8a9;}
類選擇器
- eg：.copyright {text-align: center;}
層級選擇器：父元素下的子元素（空格間隔）
- eg：.copyright a{color: #a7a8a9;}：設置copyright類下的a標籤顏色
組選擇器：同時生效（逗號間隔）
- eg：em,i {font-style: normal;}：去除em和i的斜體樣式
僞類|僞元素選擇器：兩個:就是僞元素
- eg：僞類：nav li:hover {color: #000;}
- eg：僞元素：.clearfix::after {content:'';display:table;clear:both;}：清除浮動

擴展：僞類與僞元素

:僞類（一種選擇器）eg::hover、a:active、a:visited
::僞元素（經過CSS實現的頁面元素）eg：::before、::after

/* 經常使用僞類 */
a:link {color: #FF0000}     /* 未訪問的連接 */
a:visited {color: #00FF00}  /* 已訪問的連接 */
a:hover {color: #FF00FF}    /* 鼠標移動到連接上 */
a:active {color: #0000FF}   /* 選定的連接 */

2.2.2.C3新增系

1.屬性選擇器

參考文檔：http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp

之前就有的：表單用的比較多些

[屬性名] {}：匹配對應的屬性便可
[屬性名=值] {}：匹配屬性名是某值
幾乎不用：[屬性名|=值]（屬性名以某值開頭）和[屬性名~=值]（屬性名包含某值）

CSS3新增：結合爬蟲有大用

[屬性名^=值] {}：以值開頭
- eg：a[src^="https"]：選擇src屬性以https開頭的每一個<a>元素
[屬性名$=值] {}：以值結束
- eg：a[src$=".pdf"]：選擇src屬性以.pdf結尾的全部<a>元素
[屬性名*=值] {}：包含某值
- eg：a[src*="baidu.com"]：選擇src屬性包含baidu.com子串的每一個<a>元素

來個簡單案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>
    <style>
        input[type="password"] {
            background-color: yellow;
        }
        // name以user開頭的表單（eg：用戶相關字段）
        input[name^="user"] {
            background-color: green;
        }
    </style>
</head>
<body>
    <input type="hidden" name="id"><br/>
    <input type="text" name="user_name"><br/>
    <input type="text" name="user_age"><br/>
    <input type="password" name="pass">
</body>
</html>

效果：

2.結構性僞類選擇器

結構性僞類選擇器：n能夠是數值也能夠是表達式(eg：2n+1)

:nth-child(n) {}：選中父元素中正數第n個子元素
- 最特殊：:first-child {}：選中父元素中第一個子元素
:nth-last-child(n) {}：選中父元素中倒數第n個子元素
- 最特殊：:last-child {}：選中父元素中最後一個子元素
:nth-of-type(n){}：選中父元素中特定正數第n個子元素
- PS：和上面的區別等會看個案例
:nth-last-child(n) {}：選中父元素特定元素中倒數第n個子元素

這個看一個必須來個案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>結構性僞類選擇器</title>
    <style>
        /* 本意先找到bloginfo類下的第一個div，對它第二個span設置樣式 */

        /* 瀏覽器會這麼找：先去bloginfo類下的第一個div中找第二個元素，而後看看是否是span，若是是則生效 */
        /* PS：這邊父類下第二個元素不是span，因此不生效 */
        .bloginfo div:first-child span:nth-child(2) {
            color: red;
        }

        /* 若是須要達到這個效果能夠這麼用： */
        .bloginfo div:first-child span:nth-child(4) {
            color: red;
        }

        /* 本意先找到bloginfo類下的第二個div，對它第二個span設置樣式 */

        /* 瀏覽器會這麼找：先去bloginfo類下的第二個div中找全部的span，而後給第二個span設置樣式 */
        .bloginfo div:last-child span:nth-of-type(2) {
            color: green;
        }
    </style>
</head>
<body>
    <div class="bloginfo">
        <div>
            <span>逆天</span>
            <i>this is test</i>
            <time>2019-04-14</time>
            <span>【Web】</span>
        </div>
        <!-- 和上面同樣 -->
        <div>
            <span>逆天</span>
            <i>this is test</i>
            <time>2019-04-14</time>
            <span>【Web】</span>
        </div>
    </div>
</body>
</html>

輸出圖示：

3.其餘選擇器

:target：被錨連接指向的時候會觸發該選擇器
::selection：當被鼠標選中的時候的樣式
::first-line：選中第一行
::first-letter：選中第一個字符

2.2.3.CSS權重（推薦）

這個官方文檔我卻是沒找到，可是流傳比較多的是這麼個順序（已驗）

!important（權重值：10000）加在樣式屬性值後
- eg：display: block!important;
內聯樣式（權重值：1000）
- eg：style="xx"
ID選擇器（權重值：100）
- eg：#content{xx}
類，僞類和屬性選擇器（權重值：10）
- eg：.clearfix、:hover、input[type="text"]
- PS：屬性選擇器參考：http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp
標籤選擇器和僞元素選擇器（權重值：1）
- eg：div、p、:before
通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）的（權重值：0）
- 子選擇器參考：http://www.w3school.com.cn/css/css_selector_child.asp
- 相鄰選擇器參考：http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

PS：這個平時用不到，可是對於修改模版樣式不生效的時候常常會用到

你有沒有發現有些樣式修改了並不生效？這時候CSS權重的重要性就來了

2.3.新增屬性

2.3.1.背景

1.透明背景

opacity：設置元素總體透明度
rgba：設置帶透明色的顏色
- PS：rgba是隻設置背景色透明

來個區分案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>透明背景</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            color: green;
            border: 1px solid black;
        }

        div:nth-child(1) {
            background-color: black;
            /* 設置整個div的透明色 */
            opacity: 0.2;
        }

        div:nth-child(2) {
            /* 只設置背景色的透明度 */
            background-color: rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <div>
        <h2>我是一個測試文字</h2>
    </div>
    <div>
        <h2>我是一個測試文字</h2>
    </div>
</body>
</html>

效果：

2.背景尺寸

官方案例：http://www.w3school.com.cn/tiy/c.asp?f=css_background-size

background-size：規定背景圖片的尺寸

background-size:30% 40%;：能夠是數值或百分比
- PS：先寬後高
contain：等比縮放，直至寬或者高和盒子相同
- PS：盒子有空閒空間
cover：等比縮放，並填充慢容器
- PS：圖像可能顯示不完整

看個案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>背景尺寸</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: url(http://github.lesschina.com/html5/images/logo.gif) no-repeat;
            border: 1px solid black;
        }

        div:nth-child(1) {
            /* 寬 高 */
            background-size: 100% 50%;
        }

        div:nth-child(2) {
            /* 等比縮放，直至寬或者高和盒子相同 */
            background-size: contain;
        }

        div:nth-child(3) {
            /* 等比縮放，並填充慢容器 */
            background-size: cover;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

效果圖：

3.雙背景

CSS3能夠設置兩個背景圖：background-image:url(xxx),url(xxx);（疊加顯示）

看個案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>兩個背景圖</title>
    <style>
        div {
            width: 260px;
            height: 462px;
            /* 三句合爲一句寫 */
            background: url(https://github.lesschina.com/html5/images/logo.gif) no-repeat center center, url(https://github.lesschina.com/html5/images/banner/b02.jpg) no-repeat center;
            /* background-image: url(https://github.lesschina.com/html5/images/logo.gif), url(https://github.lesschina.com/html5/images/banner/b02.jpg); */
            /* background-repeat: no-repeat; */
            /* 垂直居中 + 水平居中 */
            /* background-position: center center; */
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

3.不經常使用

background-origin：設置背景圖片的定位區域：
- padding-box：之內邊距(padding)左上角爲起點進行定位（默認值）
- border-box：以邊框(border)左上角爲起點進行定位
- content-box：之內容區域(content)左上角爲起點
background-clip：規定背景的繪製區域
- border-box：背景圖片在整個容器中顯示
- padding-box：背景圖片在內邊距+正文區域顯示
- content-box：背景圖片只在正文區域顯示

2.3.2.邊框

知識點

border-radius：邊框圓角
border-image：邊框圖片（eg：border-image:url(border.png) 20 round;）
- 設置邊框圖片：border-image-source: url("xx");
- 邊框圖片裁切：border-image-slice: 數值;
  - PS：不須要帶單位
- border-image-repeat: 設置邊框圖片的平鋪方式（如何重複圖像邊框）
  - stretch：拉伸（默認）
  - round：環繞的方式重複顯示
  - repeat：重複顯示
    - 通常都使用round，repeat的方式不少時候都有點小問題
- 圖像邊框寬度：border-image-width: 數值;
box-shadow: 水平陰影的位置垂直陰影的位置 [模糊距離] [陰影的尺寸] [陰影的顏色] [內|外陰影];
- PS：text-shadow：設置文本陰影
- eg：box-shadow: 0px 0px 10px #fff;（水平陰影位置，垂直陰影位置，模糊距離，顏色）
- 文檔：http://www.w3school.com.cn/cssref/pr_box-shadow.asp
顏色漸變：這個和PS裏面的顏色漸變同樣
- 線性漸變：linear-gradient
  - 能夠經過方向和角度：to [ right | top | bottom | left ] or 0deg：從下向上漸變]，90deg：從左向右
  - eg：從右下到左上、從藍色漸變到紅色linear-gradient(to left top, blue, red);
  - 參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
- 徑向漸變：radial-gradient
  - 參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient
- PS：漸變實際上是一種圖片，通常都是設置background-image

1.圓角與漸變

這個比較簡單，簡單說下經常使用的兩種便可：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>圓角案例</title>
    <style>
        /* 橢圓矩形 */
        div:first-child {
            width: 200px;
            height: 200px;
            background: black;
            border-radius: 10px;
        }
        /* 設置圖片大小，並顯示爲圓 */
        div img {
            /* 半徑是長度的50%==>圓 */
            border-radius: 50%;
            width: 200px;
            height: 200px;
        }
        div:last-child i {
            display: block;
            width: 200px;
            height: 200px;
            padding: 5px;
            border-radius: 50%;
            /* 設置一個漸變色 */
            background: linear-gradient(to top right, rgba(0, 153, 255, .9), rgba(42, 228, 197, .7));
        }
    </style>
</head>
<body>
    <div></div><br />
    <div><img src="https://github.lesschina.com/html5/images/avatar.jpg"></div><br />
    <div><i><img src="https://github.lesschina.com/html5/images/avatar.jpg"></i></div>
</body>

</html>

圖示：

2.中國風邊框圖片案例

我先用PS來簡單擴充一下裁切的概念：（類比Padding和margin的設置方法，而後不算單位）

看個簡單案例：（平時設置網站風格的時候用的比較多，之前是設置背景圖片，如今省事也省帶寬了）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>邊框圖片</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 50px solid black;
            font-family: '鍾齊流江毛筆草體';
            font-size: 30px;
            line-height: 300px;
            /* 豎排顯示(從左往右方向) */
            writing-mode: vertical-lr;
            text-align: center;
            float: left;
        }
        div:nth-child(2) {
            /* 設置邊框圖片 */
            border-image-source: url(../images/1.png);
        }
        div:nth-child(3) {
            border-image: url(../images/1.png) 54 80 62 68;
            /* border-image-source: url(../images/1.png); */
            /* 設置邊框圖片的裁切 */
            /* border-image-slice: 54 80 62 68; */
        }
    </style>
</head>
<body>
    <div>微信公衆號 逸鵬說道</div>
    <div>微信公衆號 逸鵬說道</div>
    <div>微信公衆號 逸鵬說道</div>
</body>
</html>

圖示：

3.邊框圖片平鋪方式

平鋪方式簡單說下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>邊框圖片2</title>
    <style>
        div {
            width: 250px;
            height: 250px;
            margin-right: 20px;
            border: 50px solid black;
            font-size: 25px;
            line-height: 300px;
            /* 豎排顯示(從左往右方向) */
            writing-mode: vertical-lr;
            text-align: center;
            float: left;
        }
        div:first-child {
            border-image: url(../images/2.png);
        }
        div:nth-child(2) {
            /* 裁切20就能夠把四個角的愛心完美扣下了 */
            border-image: url(../images/2.png) 20;
        }
        div:nth-child(3) {
            /* 設置邊框圖片的平鋪方式 */
            border-image: url(../images/2.png) 20 repeat;
        }
        div:last-child {
            /* 推薦方式 */
            border-image: url(../images/2.png) 20 round;
        }
    </style>
</head>
<body>
    <div>只設置了邊框圖片</div>
    <div>設置邊框圖片和裁切</div>
    <div>邊框平鋪方式爲重複</div>
    <div>邊框平鋪方式爲環繞</div>
</body>
</html>

圖示：

課後拓展：

CSS3 border-image 完全明白

2.3.3.過渡（重點）

1.知識點

個人理解：若是一個元素設置了transition，那麼它屬性改變的時候就會呈現出動畫狀態

transition: property duration timing-function delay

transition-property：設置過渡的屬性
- eg：width height background-color
transition-duration：設置過渡的時間
- eg：1s 500ms
transition-timing-function：設置過渡的運動方式
- 經常使用：linear(勻速). ease(緩衝運動)
transition-delay：設置動畫的延遲
- PS：通常用不到

PS：通常都這麼用：transition: all 500ms ease;

2.簡單案例

看個例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>過渡動畫</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: black;
            /* 設置了transition，那div任何屬性的改動都會有過渡動畫 */
            transition: all 1s ease;
        }

        div:hover {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

圖示：

4.特殊案例

只有一個屬性是沒有過渡動畫的：display:none ==》 display:block

看個區分案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>特殊案例</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: black;
            /* 設置了transition，那div任何屬性的改動都會有過渡動畫 */
            transition: all 500ms ease;
        }
        /* 第一個盒子使用visibility的方式顯示和隱藏 */
        div:first-child {
            visibility: hidden;
        }
        body:hover div:first-child {
            visibility: visible;
            background-color: yellow;
        }
        /* 第二個盒子使用display的方式顯示和隱藏 */
        div:last-child {
            display: none;
        }
        body:hover div:last-child {
            display: block;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>visibility</div>
    <div>display</div>
</body>
</html>

圖示：(visibility和display的區別不用說了吧？無非是一個佔空間一個不佔）

2.3.4.transform轉換

經驗：若是多個變換一塊兒用的，那麼順序爲：從後往前執行**

transform必定要加初始值**（否則在邊角的時候有小問題）

1.2D轉換

位移
- transform: translate(x軸,y軸);
  - eg：transform: translate(100px,100px);
- PS：相對自身位置發生的位置改變
縮放
- transform: scale(x,y);
  - eg：transform: scale(0.5,1);
- PS：倍數關係
旋轉
- transform: rotate(60deg);
- PS：deg是角度
傾斜
- transform: skew(x軸,y軸);
- eg：transform: skew(30deg,30deg);

看個案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>2d變換</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid black;
            background-color: yellow;
            /* 添加一個過渡動畫 */
            transition: all 1s ease;
        }
        /* x軸平移50px，y軸平移100px */
        div:first-child:hover {
            background-color: green;
            /* 逗號別忘記了 */
            transform: translate(50px, 100px);
        }
        /* x軸放大1.1倍，y軸放大2倍 */
        div:nth-child(2):hover {
            transform: scale(1.1, 2)
        }
        /* 旋轉90度 */
        div:last-child:hover {
            transform: rotate(90deg)
        }

    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

圖示：（PS：CSS3樣式都不會改變盒模型，這個案例就能夠看出了）

2.3D轉換

位移
- transform: translateX() translateY() translateZ()
縮放
- transform: scaleX(0.5) scaleY(1) scaleZ(1);
旋轉
- transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
傾斜
- transform: skewX(30deg) skewY(30deg);

這兩個是視覺更好體驗的參數：（推薦）

transform-style:preserve-3d：容許子元素呈現3d視圖
perspective：設置透視距離
- eg：transform: perspective(800px);
- PS：通常都是600px~1000px

其餘參數：

tranform-origin：設置變形的中心點
backface-visibility：設置盒子背面是否可見

演示案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>3d變換</title>
    <style>
        .grandfather {
            width: 300px;
            height: 300px;
            margin: 300px auto;
            background-color: rgba(255, 0, 0, 0.3);
            /* 容許子元素呈現3d視圖 */
            transform-style: preserve-3d;
        }
        .parent {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 255, 0, 0.3);
            /* 設置初始值 */
            transform: perspective(0) translateZ(0);
            /* 容許子元素呈現3d視圖 */
            transform-style: preserve-3d;
            /* 設置一個補間動畫 */
            transition: all 1s ease;
        }
        .child {
            width: 100%;
            height: 50%;
            background-color: rgba(0, 255, 255, 0.3);
            /* 設置初始值 */
            transform: perspective(0) translateZ(0);
            /* 設置一個補間動畫 */
            transition: all 1s ease;
        }
        .parent:hover {
            /* z軸移動200px（鋪面而來） */
            transform: perspective(800px) translateZ(200px);
        }
        .child:hover {
            /* z軸移動200px（鋪面而來） */
            transform: perspective(800px) translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="parent">
            <div class="child"></div>
        </div>
    </div>
</body>
</html>

圖示：

PS：更多複雜功能，若是感興趣能夠看看WebGL

2.3.5.動畫

animation基本上不太用，複雜的動畫我通常使用：Animate.css，簡單的動畫transition+transform就夠了，若是是滾動動畫之類的我通常用scrollreveal.js

animation:動畫名稱動畫時間動畫曲線延遲時間播放次數是否反向運動動畫停留在哪一幀;

eg：animation: move_search 1s linear 0.5s forwards;(動畫名稱動畫時間動畫曲線延遲時間停留在最後一幀)

@keyframes：定義關鍵幀動畫
animation-name：動畫名稱
animation-duration：動畫時間
animation-timing-function：動畫曲線
- linear(勻速)、ease(緩衝)、steps(作幀動畫的步數)
animation-delay：動畫延遲
animation-iteration-count：動畫播放次數
- n(指定次數)、infinite(循環)
animation-direction：動畫結束後是否反向還原
- normal、alternate(反向)
animation-play-state：動畫狀態
- paused(中止)、running(運動)
animation-fill-mode：動畫先後的狀態
- none(缺省)、forwards(結束時停留在最後一幀)
- backwards(開始時停留在定義的開始幀)、both(先後都應用)

PS：若是設置動畫集使用的是百分比，那麼這個百分比是指相對整個動畫的執行時間

簡單看個案例就收工吧：

此次先看效果：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>animate動畫</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            background-color: rgb(22, 186, 157);
        }

        header {
            width: 50%;
            margin: 100px auto;
        }

        .search {
            height: 50px;
            border: 1px solid white;
            /* 水平陰影位置，垂直陰影位置，模糊距離，顏色 */
            box-shadow: 0px 0px 10px #fff;

            /* 爲動畫準備的相對定位 */
            position: relative;
            /* animation:動畫名稱 動畫時間 動畫曲線 停留在最後一幀 */
            animation: move_search 1s linear forwards;
        }

        /* 最簡單的移動，也能夠百分百來設置進度 */
        @keyframes move_search {
            from {
                left: -200%;
            }

            to {
                left: 0;
            }
        }

        .search div {
            color: white;
            padding-left: 10px;
            /* 爲了居中 */
            line-height: 50px;

            /* 爲了動畫而設置 */
            width: 0;
            height: 50px;
            overflow: hidden;

            /* animation:動畫名稱 動畫時間 8幀顯示完 停留在最後一幀 延遲1s顯示 */
            animation: show_font 1.5s steps(8) forwards 1s;
        }

        @keyframes show_font {
            0% {
                width: 0;
            }

            50% {
                width: 75px;
            }

            100% {
                width: 130px;
            }
        }
    </style>
</head>

<body>
    <header>
        <div class="search">
            <div>公衆號：逸鵬說道</div>
        </div>
    </header>
</body>

</html>

2.4.佈局相關

2.4.1.彈性佈局

這個基本上用的前端框架都包含了（eg：bootstrap），這邊簡單看下便可

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>彈性</title>
    <style media="screen">
        ul {
            display: flex;
        }
        ul li {
            list-style: none;
            border: 1px solid black;
            background-color: yellow;
        }
        ul li:first-child {
            /* 權重爲1 */
            flex: 1;
        }
        ul li:nth-child(2) {
            /* 權重爲2 */
            flex: 2;
            /* 通常都配合min-寬高來使用 */
            min-width: 100px;
        }
        ul li:last-child {
            /* 權重爲2 */
            flex: 2;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

2.4.2.響應式佈局（推薦）

我的理解：規定一個最大或者最小的邊界值，超過這個值就對指定元素設置指定樣式

不難，看下demo裏面的code片斷就結束吧：

/* 屏幕小於等於1200px使用以下CSS（非寬屏） */
@media screen and (max-width: 1200px) {
  main {
    width: 95%;
  }

  /* 文章寬屏顯示 */
  main article,
  .copyright {
    width: 100%;
  }

  /* 側邊欄隱藏 */
  main aside {
    display: none;
  }

  /* 頁腳寬屏顯示 */
  .copyright {
    width: 100%;
    min-width: auto;
  }
}

注意一下：響應式看起來加載的東西少了（eg：移動端）但其實和PC端請求頁面大小同樣（該加載的仍是要加載，只是隱藏而已）

最後再提一下移動端的meta，通常都這麼設置：寬度爲屏幕寬度，且不容許用戶縮放

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

插件擴展

經過`Autoprefixer`自動給添加不一樣瀏覽器CSS3前綴

有些CSS3在谷歌瀏覽器、火狐、IE的老版本中可能不是標準名稱，這時候能夠經過Autoprefixer快速來兼容舊瀏覽器，以前寫過文章，能夠看看：

介紹一款自動給添加不一樣瀏覽器CSS3前綴的插件~Autoprefixer（附其餘前端開發插件）

經過`cssrem`自動轉換px到rem

這個移動佈局用的比較多，使用的時候有一點須要注意一下：需先設置默認root字體大小!（通常設置爲20px）

PS：移動佈局通常按照這個尺寸的雙倍來設計：

案例小小說明

開始以前先說下我準備的案例：https://github.com/lotapp/h5blog/

此次是真費了一番功法去準備了一個博客的案例，從設計（佈局是仿幾個模版的）到PC頁面、再到響應式移動端佈局（原本是準備直接出移動頁面的，後來一想，算了完全點吧，含iPad和iPhone）、再到移動端H5頁面、最後再到小程序頁面（在H5的基礎上簡單改了下）算是都弄了個demo

最後貼下效果圖（前端真的沒啥，忘了W3C查一下，我這邊整理一下也是爲了之後方便）

PC端演示：https://github.lesschina.com/html5/