# 水平垂直居中
<div class="parent">
<div class="child"></div>
</div>
1
2
3
2
3
div.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* 或者 */
div.parent{
display:flex;
}
div.child{
margin:auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
div.parent {
position: relative;
}
div.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 下面是child指定宽高的情况 */
/* 或 https://jsfiddle.net/43nbegrq/15/ */
div.child {
width: 50px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -5px;
}
/* 或 https://jsfiddle.net/43nbegrq/16/ */
div.child {
width: 50px;
height: 10px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
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
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
<div class="parent-fix">
<div class="parent">
<div class="child"></div>
</div>
</div>
1
2
3
4
5
2
3
4
5
/* .parent的table-cell 是不支持设置 width: 100%; 想让 .parent 和 其容器宽度一致最好设置一个 dispaly: table; 父容器。*/
.parent-fix {
display: table;
width: 100%;
}
.parent {
height: 500px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
height: 200px;
width: 200px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent {
height: 500px;
text-align: center;
}
.parent:after {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.child {
display: inline-block;
width: 200px;
height: 200px;
vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="parent">
<div class="child"></div>
</div>
1
2
3
2
3
.parent {
display: grid;
}
.child {
justify-self: center; /* 水平居中 */
align-self: center; /* 垂直居中 */
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# CSS 三角形
CSS 扇形比三角形多一个border-radius属性而已
.triangle {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: #FFCCCC transparent transparent transparent;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 圣杯布局和双飞翼布局
圣杯：当main宽度小于left, 杯会碎掉，布局乱掉 双飞翼：增加一个标签，通过margin腾出左右位置
# 自适应屏幕宽度的正方形
- CSS3 vw(Viewport Width)实现
<div class="box"></div>
1
.box {
width: 100%vw;
height: 100%vw;
background: red;
max-height: 200px; /* 可以给定max-height*/
}
1
2
3
4
5
6
2
3
4
5
6
缺点：兼容性不好
- 设置垂直方向的padding撑开容器
按照规定，margin, padding 的百分比数值是相对 ==父元素宽度==计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形
.box{
width: 100%;
padding-bottom: 100%;/* padding百分比相对父元素宽度计算 */
height: 0;//避免被内容撑开多余的高度
}
1
2
3
4
5
2
3
4
5
优点：简洁明了，且兼容性好
缺点：正方形max-height会失效
- 利用伪元素的 padding-top 撑开容器
如果使用margin-top撑开父元素高度的时候，会因为外边距折叠导致撑不开父元素的高度（外边距溢出到父元素外面了）, 此时应对的方法是在父元素上触发 BFC：overflow:hiddden;
当元素内部一旦添加内容时，高度出现溢出，父元素高度等于内容高度+100%, 此时可以将内容放到独立的内容块中，利用绝对定位消除空间占用
<div class="container">
<div class="box">内容</div>
</div>
1
2
3
2
3
.container {
width: 100%;
background: #f2dede;
position: relative;
}
.container::after {
content: "";
display: block;
padding-top: 100%;
}
.container .box {
position: absolute;
width: 100%;
height: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# footer沉底
# CSS文字省略号
单行文本
div {
white-space: no-wrap;
overflow: hidden;
text-overflow: ellipsis;
}
1
2
3
4
5
2
3
4
5
多行文本
div {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
1
2
3
4
5
6
2
3
4
5
6
# 7. css3 0.5px线条
<style>
.line {
position: relative;
}
.line:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 1px;
width: 100%;
transform: scaleY(0.5);
background: red;
}
</style>
<div class="line"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# flex布局
# px em rem
px: 像素px是相对于显示器屏幕分辨率而言的。
em:
- 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 16px = 1em
- 简化运算，需要在css中的body选择器中声明font-size=62.5%, 这样的话，1em = 16 * 0.625px = 10px，设计稿的px换算成em就直接除以10就行， 例如20px ==> 2em。
- em会继承父级元素的字体大小。
下面例子，p的实际大小是4em, 40px!
<style>
body {
font-size: 62.5%;
}
.wrap {
font-size: 2em;
}
.wrap p {
font-size: 2em;
}
</style>
<div class="wrap">
ggggg
<p>ddddd</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
rem: rem是CSS3新增的一个相对单位（root em，根em)
通过rem既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
下面例子，设定root font-size是10px, 则.wrap和p的字体都是20px
<style>
html {
font-size: 62.5%;
}
.wrap {
font-size: 2rem;
}
.wrap p {
font-size: 2rem;
}
</style>
<div class="wrap">
ggggg
<p>ddddd</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15