网易云头部底部

网页logo
要用h1标签来定义，最高等级
使用text-indent：-9999px以及display来使文字隐藏

问题:text-indent无法作用于行内元素
解决办法：将行内元素变为块级元素：display:block;或inline-block;

    .header .top_nav1 .logo a {
        width: 157px;
        height: 100%;
        text-decoration: none;
        text-indent: -9999px;
        /* overflow: hidden; */
        display: inline-block;
    }

.header .top_nav2 ul li a em {
    display: inline-block;
    padding: 0 13px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #9b0909;
    border-radius: 20px;
}

长方形边框圆角
让border-radius的值与高度一样时就能变成椭圆形

知识点：

background:transparent;
/* 默认。背景颜色是透明的（基本内容将会穿透）。*/
background-size:cover;
/*将图片放大(当然了，如果图片本身大于容器，图片会等比缩放到合适宽高的)以适应容器大小*/
background-size:contain;
/*将图片缩小以在容器中显示完整图片。当容器的宽高比例与图片不一致时，可能会出先上下或左右留出空隙*/

css幽灵空白节点

I am very good

 

在解决这个问题之前，需要了解几个概念：

vertical-align

首先，vertical-align 这个属性，用来指定行内元素(inline)、行内块级(inline-block)或表格单元格(table-cell)元素的垂直对齐方式。

也就是说，它对于块级元素(block)是无效的。

其次，他的默认值是 baseline ，也就是元素的基线。

解决方法：
1、只有元素是行内元素或行内块元素，vertical-align这个属性才生效。所以我们想让vertical-align失效，那么就让img变成块级元素—设置display属性值为block

2、设置vertical-align的值不使用baseline，使用其他的比如 bottom top middle等等都可以

3、这个缝隙是文字的大小改变的，所有我们可以对文字设置font-size为0 前提是这个行框不能出现文字

4、我们改变文字的高度也是可以解决间隙的问题，将高度设置为0即可，但是文字的高度也可以由line-height决定,所以设置line-height为0也可以解决

a标签target属性