盒子模型
在 Html 中，每一个元素可以看成一个盒子，盒子包含margin、border、padding、content四个部分，默认 border 为 1px。
box-sizing
默认情况下为box-sizing: content-box;，盒子实际占用的宽度等于 content + padding*2 + border*2；
设置为 box-sizing: border-box;时，盒子实际占用宽度与设置的一致，padding 和 border 都包含在内。
为了消除 padding 和 border 对盒子大小的影响，建议设置 box-sizing 为：
1
2
3
|
.box {
box-sizing: box-sizing: border-box;
}
|
display
定位
static：静态定位，无定位
absolute：绝对定位，相对父元素位置定位，如果父元素为 static，则想上寻找父元素
relative：相对定位，相对元素本身位置
fixed：固定在浏览器窗口的某个位置，例如“回到顶部”常用的button
sticked：页面滑动到元素即将离开时，元素会留在窗口边缘。但是，元素的父元素离开窗口时，该元素也将离开窗口。
Flex 布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
.container {
display: flex;
flex-direction: row; // 默认，水平
flex-direction: column; // 垂直
...
// 主轴的对齐方式
justify-content: flex-start; // 默认，前对齐
justify-content: center; // 居中对齐
justify-content: space-evenly; // 等距对齐
...
// 交叉轴的对齐方式
align-items: flex-start; // 默认，前对齐
align-items: center; // 居中对齐
align-items: stretch; // 拉伸，占满交叉轴方向上整个高度
flex: nowrap; // 默认，不换行
flex-wrap: wrap; // 超出容器时换行
// 对整个 content （所有子元素作为一个整体）的对齐方式
align-content：flex-start; // 默认，前对齐
align-content：center; // 居中
align-content：space-around; // 等距
align-content：stretch; // 拉伸
// flex-grow 空间过大时，按比例放大子元素，0为关闭，1未开启
// flex-shrink 空间不够时，按比例缩小子元素，0为关闭，1未开启
// flex-basis 子元素初始大小，auto为元素本身大小，设置时建议使用单位 rem（根元素中单个文字的大小）
// flex: flex-grow flex-shrink flex-basis;
flex: 1 1 auto;
}
.container-item {
align-self: center; // 定义单个子元素的 flex 对齐方式
}
|
阴影
元素立体感的重要来源。
1
2
3
4
5
6
7
8
9
|
{
// box 阴影
box-shadow: 水平偏移 垂直偏移 模糊 扩散 颜色;
box-shadow: 5px 5px 0px 0px rgba(100,100,0,1);
box-shadow: inset 5px 5px 0px 0px rgba(100,100,0,1); // 内阴影
// 文字阴影
text-shadow: 水平偏移 垂直偏移 模糊 颜色;
}
|
动画
1
2
3
4
5
6
7
8
9
10
|
@keyframes animation-name{
0% {}
100% {}
}
.target-element {
animation: animation-name 1s ease; // 缓动播放
animation: animation-name 1s infinite ease; // 无限循环
animation: animation-name 1s cubic-bezier(n,n,n,n); // 使用贝塞尔曲线控制播放速度，https://cubic-bezier.com/
}
|
伪类
| 伪类 |
|
|
| :hover |
鼠标悬浮 |
|
| :active |
鼠标点击 |
|
| :focus |
获取焦点 |
|
| :first-child |
第一个子元素 |
|
| :last-child |
最后一个子元素 |
|
| :nth-child(n) |
第n个子元素，2n+1表示奇数行，2n表示偶数行 |
|
| :not() |
排除某个元素 |
|
伪元素
| 伪元素 |
|
|
| ::after |
元素前 |
|
| ::before |
元素后 |
|
1
2
3
4
|
p::after{
content: ''; // 插入的内容
... // 其余属性与其他元素无异
}
|
响应式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 当窗口大于1000px时，使用此样式
@media (min-width:1000px) {
}
// 当窗口小于500px时，使用此样式
@media (max-width:500px) {
}
// 当窗口介于500px~1000px之间时，使用此样式
@media (min-width:500px) and (max-width:1000px) {
}
|
问题
子元素设置浮动，父元素高度消失
给父元素设置 over-flow: hidden; 即可
禁用鼠标右键菜单
1
2
3
|
<body oncontextmenu="self.event.returnValue=false">
...
</body>
|
Practice
河边的错误 (gearinger.github.io)