斌

css

这里方代码实现，如果想看基础总结，查看xmind文件夹下的css文件

css脑图

两栏布局

一般来说是左边固定宽度，右边自适应

  • 利用浮动和margin-left
.outer {
  height: 100px;
}

.left {
  float: left;
  width: 200px;
  background-color: tomato;
}

.right {
  margin-left: 200px;
  width: auto;
  background-color: gainsboro;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • 左侧左浮动，右侧触发bfc，bfc元素不会重叠。
.outer {
  height: 100px;
}

.left {
  float: left;
  width: 200px;
  background-color: tomato;
}

.right {
  width: auto;
  background-color: red;
  overflow: hidden;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • 使用flex布局
.outer {
  height: 100px;
  display: flex;
}

.left {
  width: 200px;
  flex: 0 0 200px;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • 绝对定位
.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

三栏布局的实现

一般是左右固定，中间自适应的布局

  • 利用绝对定位
.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background-color: yellowgreen;
}

.center {
  margin-left: 200px;
  margin-right: 200px;
  height: 100px;
  background-color: gold;
}
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
  • flex布局
.outer {
  height: 100px;
  display: flex;
}

.left {
  width: 200px;
  flex: 0 0 200px;
  height: 100px;
  background-color: tomato;
}

.right {
  flex: 0 0 200px;
  width: 200px;
  height: 100px;
  background-color: yellowgreen;
}

.center {
  flex: 1;
  height: 100px;
  background-color: gold;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  • 圣杯布局 中间一列放在最前面
.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}
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
  • 双飞翼布局
.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}
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
  • 使用flex实现center在最前面的三栏布局 推荐
.outer {
  height: 100px;
  display: flex;
}

.left {
  width: 200px;
  flex: 0 0 200px;
  height: 100px;
  order: -1;
  background-color: tomato;
}

.right {
  flex: 0 0 200px;
  width: 200px;
  height: 100px;
  background-color: yellowgreen;
}

.center {
  flex: 1;
  height: 100px;
  background-color: gold;
}









 















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

水平垂直居中

  • 绝对定位，使用了css3属性
.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
1
2
3
4
5
6
7
8
9
10
  • 绝对定位margin
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
  • 绝对定位，已知盒子
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;     /* 自身 height 的一半 */
  margin-left: -50px;    /* 自身 width 的一半 */
}
1
2
3
4
5
6
7
8
9
10
11
  • flex 现代浏览器基本不考虑ie，推荐使用
.parent {
  display: flex;
  justify-content:center;
  align-items:center;
}
1
2
3
4
5

实现一个三角形

border是由四个三角形组成的，所以可以用来实现三角形

div {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: orange blue red green;
}
/* 下三角形 */
div {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

实现一个扇形

div {
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-radius: 100px;
  border-top-color: tomato;
}
1
2
3
4
5
6
7

如何解决1px问题

  • 直接写，这样兼容性不行 在ios端是可以，安卓系统则不行

  • 伪元素缩放，最常用的方法

<div id="container" data-device={{window.devicePixelRatio}}></div>
1
#container[data-device="2"] {
  position: relative;
}
#container[data-device="2"]::after{
    position:absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    content:"";
    transform: scale(0.5);
    transform-origin: left top;
    box-sizing: border-box;
    border: 1px solid #333;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Last Updated: