前端基础知识复习之CSS

发表于 | 更新于: |
字数统计: 486 | 阅读时长 ≈ 2

居中问题

文本居中

1
2
3
4
5
6
7
/* 文字行 水平居中对齐，如p、h1-h6 */
text-align: center;
/* 文字块 水平居中对齐 */
margin-left: auto;
margin-right: auto;
/* 文字行和列 垂直居中对齐，需要指定高度，如height、line-height或min-height等 */
vertical-align: middle;

CSS level 3 居中

  • 水平+垂直居中一体：外层relative，内层absolute+top+transform。
1
2
3
4
5
6
7
8
9
10
11
12
div.container {
    height: 10em;
    position: relative;
}
div.container p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%; /* 注意这里的margin-right! 用来补偿'left:50%'造成的可用元素宽度减少的50%。 详见链接中网页最下方：https://www.w3.org/Style/Examples/007/center.zh_CN.html */
    transform: translate(-50%, -50%);
}
  • 水平+垂直居中：flex。
1
2
3
4
5
6
7
8
9
10
11
div.container {
    height: 10em;
    display: flex;
    /* 垂直方向 */
    align-items: center;
    /* 水平方向 */
    justify-content: center;
}
div.container p {
    margin: 0;
}

相关资料：

Flexbox布局

  • Flex Container
1
2
3
4
5
6
7
display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  • Flex Item
1
2
3
4
5
6
order: <integer>;
flex-grow: <number> (default:0);
flex-shrink: <number> (default:1);
flex-basis: <length> | auto (default:auto);
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
align-self: auto | flex-start | flex-end | center | baseline | stretch;

相关资料：

单位

绝对单位

  • 屏幕

单位px，在低分辨率的设备上为1像素，在高分辨率设备上大约为1英尺的1/96。

1in = 96px

  • 打印机

1in = 2.54cm = 25.4mm = 72pt = 6pc

相对单位

字体相对单位

1
2
3
4
em: 该元素计算后的字体大小
rem: 文件的根元素(html)的字体大小
ch: 0的字体宽度。
ex: 小写字母x的字体高度，1ex约为0.5em

视口百分比长度

1
2
3
4
vw: 容器块视口1%的宽度
vh: 容器块视口1%的高度
vmin: vw和vh中最小的
vmax: vw和vh中最大的

相关资料：