https://www.w3schools.com/css/default.asp
1. CSS Margin
-
margin: auto
有自動(dòng)居中的效果，但是似乎只對(duì)左右有效。
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
-
margin 疊加（margin collapse）
對(duì)于上下倆元素，如果一個(gè) margin-bottom: 50px，一個(gè) margin-top: 20px：
則發(fā)生 margin 疊加，倆元素間距為 50px。
只有 margin 疊加，沒(méi)有 padding 疊加。
2. CSS 高度與寬度
-
寬高的 Value 取值
- auto - 默認(rèn)。瀏覽器計(jì)算寬高；
- length - 設(shè)定寬高，單位是 px，cm，等；
- % - 百分比；
- initial - Sets the height/width to its default value
- inherit - 繼承父元素的值。
3. CSS 盒模型
-
盒模型的 4 個(gè)部分
- Content - 盒模型本體，包括詳細(xì)內(nèi)容（文本或者圖片）；
- Padding - Content 周邊的一圈空白；
- Border - 邊框；
- Margin - 邊框外周邊的一圈空白。
盒模型 Border 外邊還可以加一圈 Outline。
4. CSS Text
-
Text 對(duì)齊
- text-align: 文字水平對(duì)齊，center | left | right | justify
- text-align-last: 文字最后一行對(duì)齊：center | left | right | justify
- direction: ltr | rtl
- unicode-bidi:
- vertical-align: 文字垂直對(duì)齊。
-
Text 字間距
- text-indent: 文本塊中第一行的縮進(jìn)。
- letter-spacing: 字符左右的間距。
- line-height: 行間距。
- word-spacing: 單詞之間的間距。
- white-space: 決定是否換行。
5. CSS Display
-
display: block
盡全力拉伸至左右邊，占滿(mǎn)一整行。
-
display: inline
不會(huì)占滿(mǎn)一行，而是僅占寬度。
-
display: none
不顯示。
6. CSS Position
-
position: static
默認(rèn)位置。不受top，bottom，left，right影響。
-
position: relative
從默認(rèn)位置偏移指定量。
-
position: fixed
無(wú)論頁(yè)面是否滾動(dòng)，均固定位置不變。
-
position: absolute
相對(duì)固定于最近的父元素。
-
position: sticky
sticky 滾動(dòng)時(shí)在 relative 和 fixed 之間切換。效果類(lèi)似于，可以在滾動(dòng)時(shí)吸附在某個(gè)邊緣上。
7. CSS Overflow
-
overflow: visible
內(nèi)容可以溢出到盒子外。
-
overflow: hidden
內(nèi)容不能溢出。
-
overflow: scroll
內(nèi)容不溢出，但會(huì)在水平和垂直方向加上滾動(dòng)條。
-
overflow: auto
類(lèi)似于scroll，但只在需要的時(shí)候才會(huì)加滾動(dòng)條。
-
overflow-x 和 overflow-y
規(guī)定僅限于水平和垂直。
7. CSS 浮動(dòng)與清除
float 主要是讓圖片相對(duì)于文字浮動(dòng)于左或者右。
clear 主要是讓 float 的下一個(gè)元素顯示在 float 的下面，而不是左或右。
-
The clearfix Hack
如果 float 元素比容器高，就會(huì)溢出容器。
包含 float 的容器，加上 overflow: auto，即可解決問(wèn)題。
.clearfix {
overflow: auto;
}
更安全的用法如下：
.clearfix::after {
content: "";
clear: both;
display: table;
}
-
Float 例子 - 等寬 box
可以利用 float: left，繪制等寬的 box
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
padding: 50px; /* if you want space between the images */
}
-
Float 例子 - Navigation Menu
8. display: inline-block
-
對(duì)比 display: inline
主要區(qū)別在于 inline-block 允許設(shè)置元素的寬高。
inline-block 不會(huì)忽略 top 與 bottom 的 margins/paddings，而 inline 會(huì)。
-
對(duì)比 display: block
inline-block 不會(huì)換行，所以允許元素接著 inline-block 排布。
9. CSS 偽類(lèi)
-
鏈接偽類(lèi)
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
-
first-child 偽類(lèi)
p:first-child {
color: blue;
}
-
:lang 偽類(lèi)
:lang 偽類(lèi)允許為不同的語(yǔ)言定義不同的規(guī)則。
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
-
其他常用的偽類(lèi)：
- :checked
- :disabled / :enabled
- :focus
- :not(selector)
- 等等。
10. CSS 偽元素
區(qū)別于偽類(lèi)，偽元素通常帶倆冒號(hào)。
-
::first-line 偽元素
選中第一行。
-
::first-letter 偽元素
選中第一個(gè)字符。
-
::before 偽元素
用于在元素前插入一些其他內(nèi)容。
例如下面這個(gè)，在每個(gè)<h1>元素前插入一張圖片：
h1::before {
content: url(smiley.gif);
}
-
::after 偽元素
類(lèi)似 ::before偽元素，在元素后插入一些內(nèi)容。
-
::marker 偽元素
選中<li>元素開(kāi)頭的 marker。
-
::selection 偽元素
選中被用戶(hù)鼠標(biāo)選中的文本。
11. CSS 單位
css 的 單位 分為 絕對(duì)單位 和 相對(duì)單位。
絕對(duì)單位包括：cm、mm、in、px、pt、pc。
| 單位 | 描述 |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
相對(duì)單位包括：
| 單位 | 描述 |
|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) |
| ex | Relative to the x-height of the current font (rarely used) |
| ch | Relative to width of the "0" (zero) |
| rem | Relative to font-size of the root element |
| vw | Relative to 1% of the width of the viewport* |
| vh | Relative to 1% of the height of the viewport* |
| vmin | Relative to 1% of viewport's* smaller dimension |
| vmax | Relative to 1% of viewport's* larger dimension |
| % | Relative to the parent element |
通常使用 em / rem，來(lái)創(chuàng)建可擴(kuò)展式的布局。
11. CSS Math 函數(shù)
-
calc() 函數(shù)
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
-
max() 函數(shù) / min() 函數(shù)
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
12. CSS 陰影
-
text-shadow
基本效果：
h1 {
text-shadow: 2px 2px;
}
改變陰影顏色：
h1 {
text-shadow: 2px 2px red;
}
增加模糊：
h1 {
text-shadow: 2px 2px 5px red;
}
多重陰影：
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
-
box-shadow
基礎(chǔ)用法：
div {
box-shadow: 10px 10px;
}
改變陰影顏色：
h1 {
box-shadow: 10px 10px lightblue;
}
模糊效果：
div {
box-shadow: 10px 10px 5px lightblue;
}
陰影大?。?/p>
div {
box-shadow: 10px 10px 5px 12px lightblue;
}
內(nèi)部陰影：
div {
box-shadow: 10px 10px 5px lightblue inset;
}
多重陰影：
div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
13. CSS 2D 變形
-
translate()
平移 x 和 y 軸方向指定 px。
div {
transform: translate(50px, 100px);
}
-
rotate()
旋轉(zhuǎn)指定的角度，順時(shí)針或者逆時(shí)針。
div {
transform: rotate(20deg); /* .25turn 可以旋轉(zhuǎn)90° */
}
-
scale()
按 水平/垂直 放大或者縮小元素。
div {
transform: scale(2, 3);
}
-
scaleX()
按 水平 放大或者縮小元素。
-
scaleY()
按 垂直 放大或者縮小元素。
-
skew()
按 水平/垂直 傾斜元素。
-
skewX()
按 水平 傾斜元素。
-
skewY()
按 垂直 傾斜元素。
-
matrix()
matrix() 函數(shù)把上面的都 All in one 了。
matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)
13. CSS 3D 變形
| Function | Description |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a 3D translation, using only the value for the X-axis |
| translateY(y) | Defines a 3D translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |
14. CSS Transitions 過(guò)渡
-
普通過(guò)渡
要?jiǎng)?chuàng)建一個(gè) transition 過(guò)渡，你要指定兩件事：
- 想要使用過(guò)渡效果的 CSS 屬性
- 過(guò)渡效果的時(shí)長(zhǎng)
如果不指定時(shí)長(zhǎng)，那么過(guò)渡就沒(méi)有任何效果，因?yàn)闀r(shí)長(zhǎng)是 0。
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
-
同時(shí)指定多個(gè)屬性值
div {
transition: width 2s, height 4s;
}
-
指定速度曲線
- ease - 過(guò)渡緩慢開(kāi)始，再快，再緩慢結(jié)束（默認(rèn)值）
- linear - 從頭至尾都是一個(gè)速度
- ease-in - 過(guò)渡緩慢開(kāi)始
- ease-out - 過(guò)渡緩慢結(jié)束
- ease-in-out - 緩慢開(kāi)始和緩慢結(jié)束
- cubic-bezier(n,n,n,n) - 使用 cubic-bezier 函數(shù)，自定義一個(gè)過(guò)渡
-
延遲過(guò)渡效果時(shí)間 transition-delay
div {
transition-delay: 1s;
}
-
過(guò)渡+變形 Transition + Transformation
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
14. CSS Animations 動(dòng)畫(huà)
（待更）
