https://www.w3schools.com/css/default.asp
1. CSS Margin
-
margin: auto
有自动居中的效果，但是似乎只对左右有效。
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
-
margin 叠加（margin collapse）
对于上下俩元素，如果一个 margin-bottom: 50px，一个 margin-top: 20px：
则发生 margin 叠加，俩元素间距为 50px。
只有 margin 叠加，没有 padding 叠加。
2. CSS 高度与宽度
-
宽高的 Value 取值
- auto - 默认。浏览器计算宽高；
- length - 设定宽高，单位是 px，cm，等；
- % - 百分比；
- initial - Sets the height/width to its default value
- inherit - 继承父元素的值。
3. CSS 盒模型
-
盒模型的 4 个部分
- Content - 盒模型本体，包括详细内容（文本或者图片）；
- Padding - Content 周边的一圈空白；
- Border - 边框；
- Margin - 边框外周边的一圈空白。
盒模型 Border 外边还可以加一圈 Outline。
4. CSS Text
-
Text 对齐
- text-align: 文字水平对齐，center | left | right | justify
- text-align-last: 文字最后一行对齐：center | left | right | justify
- direction: ltr | rtl
- unicode-bidi:
- vertical-align: 文字垂直对齐。
-
Text 字间距
- text-indent: 文本块中第一行的缩进。
- letter-spacing: 字符左右的间距。
- line-height: 行间距。
- word-spacing: 单词之间的间距。
- white-space: 决定是否换行。
5. CSS Display
-
display: block
尽全力拉伸至左右边，占满一整行。
-
display: inline
不会占满一行，而是仅占宽度。
-
display: none
不显示。
6. CSS Position
-
position: static
默认位置。不受top，bottom，left，right影响。
-
position: relative
从默认位置偏移指定量。
-
position: fixed
无论页面是否滚动，均固定位置不变。
-
position: absolute
相对固定于最近的父元素。
-
position: sticky
sticky 滚动时在 relative 和 fixed 之间切换。效果类似于，可以在滚动时吸附在某个边缘上。
7. CSS Overflow
-
overflow: visible
内容可以溢出到盒子外。
-
overflow: hidden
内容不能溢出。
-
overflow: scroll
内容不溢出，但会在水平和垂直方向加上滚动条。
-
overflow: auto
类似于scroll，但只在需要的时候才会加滚动条。
-
overflow-x 和 overflow-y
规定仅限于水平和垂直。
7. CSS 浮动与清除
float 主要是让图片相对于文字浮动于左或者右。
clear 主要是让 float 的下一个元素显示在 float 的下面，而不是左或右。
-
The clearfix Hack
如果 float 元素比容器高，就会溢出容器。
包含 float 的容器，加上 overflow: auto，即可解决问题。
.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
-
对比 display: inline
主要区别在于 inline-block 允许设置元素的宽高。
inline-block 不会忽略 top 与 bottom 的 margins/paddings，而 inline 会。
-
对比 display: block
inline-block 不会换行，所以允许元素接着 inline-block 排布。
9. CSS 伪类
-
链接伪类
/* 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 伪类
p:first-child {
color: blue;
}
-
:lang 伪类
:lang 伪类允许为不同的语言定义不同的规则。
<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>
-
其他常用的伪类：
- :checked
- :disabled / :enabled
- :focus
- :not(selector)
- 等等。
10. CSS 伪元素
区别于伪类，伪元素通常带俩冒号。
-
::first-line 伪元素
选中第一行。
-
::first-letter 伪元素
选中第一个字符。
-
::before 伪元素
用于在元素前插入一些其他内容。
例如下面这个，在每个<h1>元素前插入一张图片：
h1::before {
content: url(smiley.gif);
}
-
::after 伪元素
类似 ::before伪元素，在元素后插入一些内容。
-
::marker 伪元素
选中<li>元素开头的 marker。
-
::selection 伪元素
选中被用户鼠标选中的文本。
11. CSS 单位
css 的 单位 分为 绝对单位 和 相对单位。
绝对单位包括：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) |
相对单位包括：
| 单位 | 描述 |
|---|---|
| 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，来创建可扩展式的布局。
11. CSS Math 函数
-
calc() 函数
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
-
max() 函数 / min() 函数
#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
基础用法：
div {
box-shadow: 10px 10px;
}
改变阴影颜色：
h1 {
box-shadow: 10px 10px lightblue;
}
模糊效果：
div {
box-shadow: 10px 10px 5px lightblue;
}
阴影大小：
div {
box-shadow: 10px 10px 5px 12px lightblue;
}
内部阴影：
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()
旋转指定的角度，顺时针或者逆时针。
div {
transform: rotate(20deg); /* .25turn 可以旋转90° */
}
-
scale()
按 水平/垂直 放大或者缩小元素。
div {
transform: scale(2, 3);
}
-
scaleX()
按 水平 放大或者缩小元素。
-
scaleY()
按 垂直 放大或者缩小元素。
-
skew()
按 水平/垂直 倾斜元素。
-
skewX()
按 水平 倾斜元素。
-
skewY()
按 垂直 倾斜元素。
-
matrix()
matrix() 函数把上面的都 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 过渡
-
普通过渡
要创建一个 transition 过渡，你要指定两件事：
- 想要使用过渡效果的 CSS 属性
- 过渡效果的时长
如果不指定时长，那么过渡就没有任何效果，因为时长是 0。
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
-
同时指定多个属性值
div {
transition: width 2s, height 4s;
}
-
指定速度曲线
- ease - 过渡缓慢开始，再快，再缓慢结束（默认值）
- linear - 从头至尾都是一个速度
- ease-in - 过渡缓慢开始
- ease-out - 过渡缓慢结束
- ease-in-out - 缓慢开始和缓慢结束
- cubic-bezier(n,n,n,n) - 使用 cubic-bezier 函数，自定义一个过渡
-
延迟过渡效果时间 transition-delay
div {
transition-delay: 1s;
}
-
过渡+变形 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 动画
（待更）
