css项目知识小汇总

背景图片

background: url('../../assets/image/video_img_1.png') no-repeat center ; 
background-size: 100% auto;   //图片宽度充满，高度自适应
background: url('../../assets/image/video_img_1.png') no-repeat fixed top ;  //背景固定在顶部 
background-size:cover;   //背景铺满
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

calc的使用

height:calc(100% - 80px)   //注意这里的 - 两侧都必须有空格，否则无法识别。
height:calc(100vh - 80px)  
注：calc也支持+-*/，只不过用的不多

span标签里文字换行，但数字字母不自动换行

span 不是块状元素。本身自带有左浮动的效果，并且连续的英文字母跟数字是没办法自动换行的，必须要强制换行
span设置样式word-break:break-all
若无效果，再 给定宽度 以及设置 white-space:normal

字体描边

text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff;
水平阴影 垂直阴影 模糊距离 颜色

字体间距

letter-spacing: 2px;  //每个字之间的横向间距

字体两边对齐

text-align:justify;

首行缩进

text-indent:20px;

关于:nth-child() 选择器

nth-child(2)的意思是当前元素的父元素的第二个子元素

<div>
    <i>好</i>                         //i:nth-child(1)
    <i>好</i>                         //i:nth-child(2)
    <span>哈</span>           //span:nth-child(3)
    <span>哈</span>           //span:nth-child(4)
    <span>哈</span>           //span:nth-child(5)
    <i>好</i>                         //i:nth-child(6)
    <span>哈</span>           //span:nth-child(7)
</div>

包裹图片的父级盒子边缘多出一部分（或者说图片本身自带空隙怎么解决）

<div><img /></div>
原因：img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符（匿名文本），这个文本外有一个匿名行级盒子，它默认的vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把父级盒子撑高了

解决：
父级盒子 div{line-height:0} 或 div{font-size:0}
或者img标签 img{display:block} 或 img{vertical-align:bottom} 或 img{vertical-align:top}

下划线

text-decoration:none

li的点

list-style:none

关于flex:1和flex:auto的区别（IE8-不支持flex属性）

flex:1，是每一个flex区间都是固定的宽度（如上图，不论字多字少，两个丨之间宽度是一样的），不会随该区间内元素的改变而改变，只会根据区间的数量来适应
flex:auto，是每一个区间的宽度都是自适应的，区间内元素宽一点，区间也会宽一点（如上图，两个丨之间宽度不一样，但是字与字之间的宽度是一样的）
具体见上图理解

:hover的使用

a:hover{   //鼠标移入a标签后，改变a标签本身的样式
    color:#dcdcdc;
}

a:hover span{   //鼠标移入a标签后，改变a标签子元素span的样式(注意必须是其子元素才能生效)
    display:inline-block;
}

li标签横向排列出现间隙

间隙出现原因：<li>标签和<li>标签之间有换行空格引起；
解决：float:left

设置了display:inline-block的元素出现空白的问题

因为display:inline-block默认会有空格或者换行符，和以上li标签排列出现间隙的道理是一样的
给父级元素加上font-size：0，消除空白即可解决

如图出现空白：
如图父级盒子添加font-size:0后，空白消失