文章标题

em、rem区别：em相对于父亲元素，rem相对于整体的html元素

---

/*选中文字效果*/
::selection {
    background-color:#b3d4fc;
    text-shadow: none;
}

/*清除浮动最新写法*/
clearfix:before,
clearfix:after {
    content:"";
    display:table;
}

clearfix:after {
    clear:both;
}

/*除了第一个元素后面的元素都选中的方法*/
header ul li+ li {
    /*选中了除了第一个li以外的li，以内第一个li后面没有兄弟元素*/
}

/*含有display:inline-block属性的元素如果书写之间有空格,那么会有3px的间隙处理，
处理方法1：加注释掉空隙。
处理方法2：margin-left:-3px;
处理方法3：父盒子font-size:0;
还有其他处理方法不一一列出*/


/*导航一左一右 左边可以float:left;
  右边的ul可以text-align:right;
  因为左边的浮动了，所以剩下的内容才不会换行
*/

/*写高度不要每一层都写，可以给最内层高度或者直接line-height撑起都不用设置居中
简单的说，给有实际内容的设置高度.
宽度一般都是不设定的，做响应式布局.
*/

/*盒子居中的几种方法
    1.margin:0 auto;
    2.text-align:center;
    3.设置定位left:50%; margin-left:-width/2;
    4.transform:translate(50%);(父盒子)
*/

/*letter-space:3px;设置字间距离*/

/*计算平均占有的百分比
    用自己该占有的百分比-所有相同元素的margin+padding/分成几份
    比如划分三份就是width:calc(33.33333333% - (margin+padding)/3);
*/

verticle-align:top可以实现文字的对齐

这三句话实现了文字单行显示超出会有省略号
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

用i标签记得text-style:none;

这是一个滤镜 设置为100%图片变为黑白
filter:grayscale(100%);

消除logo中的文字
text-indent:-999rem;