Points
  1. 单行文字垂直居中
1
2
3
4
5
/* 令行间距与块高度相等 */
#point1 {
height=100px;
line-height=100px;
}
  1. background-position
1
2
3
4
5
6
7
background-position: x y;
/* position: top|center|bottom|left|right */
background-position: center top;
/* length: percentage|float */
background-position: 50px 20px;
/* 只写一个参数时,另外一个为居中 */
/* 可以混合使用 */
  1. background-attachment
1
2
3
4
/* 背景是否固定 */
/* 可用于制作视差滚动 */
/* Default: scroll */
background-attachment: scroll | fixed;
  1. rgba(red,green,blue,alpha)
1
2
3
background: rgba(0,0,0,0.3);
/* 背景色透明效果 */
/* alpha为透明度,取值范围在0~1间 */
  1. dsplay
1
2
3
4
5
6
7
8
/* 默认为行内元素 */
display: inline;
/* 块元素,有自己的高度和宽度 */
display: block;
/* 有高度宽度的行内块元素 */
display: inline-block;
/**/
display: flex
  1. CSS样式冲突时按照就近原则加载样式
  2. 网页元素很多都带有默认的内外边距
1
2
3
4
5
6
/* 不同浏览器默认内外边距不同 */
/* 添加如下代码清除内外边距 */
* {
margin: 0;
padding: 0;
}
  1. 块元素居中
1
margin: auto;
  1. 元素居中
1
2
3
4
5
6
/* 水平居中 */
width: fit-content;
margin-left: auto;
margin-right: auto;
/* 垂直居中 */
align-items: center;