css 备忘

• inline 和 inline-block 元素之间会有一个字符的间隙。

解决方法：

1、给父元素设置font-size：0px；

2、取消掉换行符，如这样：<span>aaaa</span><span>aaaa</span><span>aaaa</span>连续。

• 子元素左右居中

1.display:block 的情况下：

  margin:0,auto;

可以居中。

2.display:inline 的情况下：

text-align: center;

可以居中。

3.如果子元素 position: absolute; 的情况下想要居中可以：

1. left: 50%;
2. margin-left: -(元素宽度的一般)px;

• 子元素垂直居中

1.父元素的高度已知，把子元素的 line-height 设置为父元素高度一样即可。

2.父元素高度未知，把父元素设置为：

1. display: flex;
2. justify-content: center; // 左右居中
3. align-items: center;  // 上下居中

3.父元素高度未知，绝对定位结合margin:auto：

position : absolute;  

left : 0 ;  

top : 0 ;  

right : 0 ;  

bottom : 0 ;  

margin : auto;

• 背景铺满

body {

    width : 100 %;

    height : 100 %;

    position : fixed ;

    /* 加载背景图 */

    background : url ( ./message_wall_bg.png ) no-repeat ;

    /* 背景图垂直、水平均居中 */

    background-position : center center ;

    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */

    background-attachment : fixed ;

    /* 让背景图基于容器大小伸缩 */

    background-size : cover ;

    /* 设置背景颜色，背景图加载过程中会显示背景色 */

    /*　　　background-color: rgba(41, 50, 39, 1);*/

}