CSS（PC端）笔记
本篇只包括PC端部分的CSS笔记，若要查看移动端笔记，请在主页中查找。
选择器
标签选择器：例：
h1 {color: red;}
类选择器：例：
.red {color: red;} /* 在需要调用的标签处写类名如<h1 class="red"></h1> */- 类命名规则：
- 头：header
- 尾：footer
- 导航栏：nav
- 侧栏：sidebar
- 栏目：column
- 广告：banner
- 子导航：subnav
- 类命名规则：
ID选择器（只可调用一次）：一般和JS搭配使用。例：
#pink {color: pink;} /*在需要调用的标签处写ID如<h1 id="pink"></h1>*/
通配符选择器：使用”*****”定义，代表选择所有元素（标签），例：
* {color: pink;} /*通配符选择器不需要调用，自动就给所有的元素使用样式*/
CSS字体属性
字体系列：使用font-family属性定义文本的字体系列，例：
p {font-family: Arial, "Microsoft YaHei";} /*（若有Arial就套用Arial，若没有就用后面的YaHei），实际使用一般直接给<body>标签指定属性*/
字体大小：使用font-size属性定义字体大小，例：
body {font-size: 16px;} /*但标题标签（<h1>）比较特殊，需要单独指定文字大小*/
字体粗细：使用font-weight属性定义字体粗细，例：
.bold {font-weight: 700;} /*加粗是700或bold，不加粗是400或normal*/
- 字体样式：使用font-style属性定义文本的风格
- normal：默认值，浏览器会显示标准的字体样式
- italic：浏览器会显示斜体的字体样式
字体复合属性：{font:font-style font-weight font-size/line-height font-family;}（顺序不可颠倒），例：
div {font: italic 700 16px 'Microsoft YaHei';}
CSS文本属性
- 文本颜色：color属性用于定义文本的颜色
对齐文本：text-align属性用于设置元素内文本内容的水平对齐方式
left：左对齐（默认值）
right：右对齐
center：居中对齐
装饰文本：text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等
none：默认，没有装饰线（最常用）
underline：下划线，链接<a>自带下划线（常用）
overline：上划线（几乎不用）
line-through：删除线（不常用）
文本缩进：text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进，例：
{text-indent: 2em} /*指缩进2字符*/
- 行间距：line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
外部样式表
在目录中创建.css的样式文件，把所有CSS代码都放入此文件中
在HTML页面中，使用<link>标签引入这个文件：在<head></head>中写<link rel=”stylesheet” href=”.css文件路径”>
CSS的复合选择器
后代选择器（重要）：可以选择父元素里面的子元素，例：
ol li {color: pink;} /*可以选择ol中的li标签*/子元素选择器（重要）：只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素，例：
div>a {color: pink;} /*可以选择div中的最近一级的a标签*/并集选择器（重要）：可以选择多组标签，同时为他们定义相同的样式，例：
div, p {color: pink;} /*可以同时选中div和p标签*/伪类选择器：用于向某些选择器添加特殊的效果，伪类选择器书写的最大的特点是用冒号（:）表示，如
:hover :first-child- 链接伪类选择器（编写的时候必须按LVHA顺序）
- a:link：选择所有未被访问的链接
- a:visited：选择所有已被访问的链接
- a:hover：选择鼠标指针位于其上的链接
- a:active：选择活动链接（鼠标按下未弹起的链接）
- 链接伪类选择器在实际开发中的写法：
/* a是标签选择器 所有的链接 */ a { color: gray; } /* :hover 是链接伪类选择器 鼠标经过 */ a:hover { color: red; /* 鼠标经过的时候，由原来的灰色变成了红色 */ }:focus伪类选择器：用于选取获得焦点的表单元素。焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说，例：
input:focus {background-color: pink;} /*使输入框被选中时获得光标且背景色变为粉色*/
- 链接伪类选择器（编写的时候必须按LVHA顺序）
CSS的元素显示模式
块元素
- 独占一行
- 高度、宽度、外边距、内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
⚠️注意：<p>标签里面不能放块级元素，特别是不能放<div>
元素显示模式转换
- 转换为块级元素：display: block; ，例：
a {display: block;} /*将<a>标签转换为块级元素*/- 转换为行内元素：
display: inline;- 转换为行内块：
display: inline-block;
实现文字垂直居中
如果行高（line-height）小于盒子高度，文字会偏上
如果行高（line-height）大于盒子高度，则文字偏下
如果行高（line-height）等于盒子高度，文字会垂直居中
CSS的背景
背景颜色（默认值是transparent透明）：
background-color: #fff;背景图片：
background-image: none; /* 或url(images/1.png); */背景平铺：
background-repeat: repeat; /*默认平铺*/ no-repeat; /*背景图片不平铺*/ repeat-x; /*背景图片横向平铺*/ repeat-y; /*背景图片纵向平铺*/背景图片位置：
background-position: x y; /* x,y代表坐标，可以使用方位名词或者精确单位 */- length
- position（方位名词）
- top
- center
- bottom
- left
- right
例1：
background-position: center top; /*若两个参数都是方位名词，则顺序无所谓，即left top与top left是一样的*/例2：
background-position: 50px 100px; /*若参数值是精确坐标，则一定是x坐标 y坐标这个顺序。若只指定一个精确坐标，那一定是x坐标，另一个默认垂直居中*/
CSS的三大特性
层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
继承性：子标签会继承父标签的某些样式（text-，font-，line-这些元素开头的都可以继承，以及color属性），如文本颜色和字号。简单理解就是：子承父业
行高的继承性：
font: 12px/1.5 'Microsoft YaHei'; /*这个1.5就是行高等于当前元素文字大小font-size的1.5倍*/
优先级：当同一个元素指定多个选择器，就会有优先级的产生
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
选择器 选择器权重 继承 或者 * 0 元素选择器 1 类选择器，伪类选择器 10 ID选择器 100 行内样式 style=”” 1000 !important 重要的 ∞ 无穷大
⚠️注意：继承的权重为0
- 权重的叠加：例：li {}的权重是0,0,0,1，ul li {}的权重是1 + 1 = 2。权重虽然会叠加，但是永远不会进位
CSS的盒子模型
盒子模型的组成
边框：border
border-width：定义边框粗细，单位px
border-style：边框的样式
- 无边框：none
- 实线边框：solid
- 虚线边框：dashed
- 点线边框：dotted
border-color：边框颜色
边框复合写法：
border: 5px solid pink; /*顺序没有规定*/合并相邻边框：
border-collapse:collapse;
内容：content
内边距：padding（如果盒子已经有宽度、高度，再指定内边距会撑大盒子。若盒子没有指定width/height其中任意一个属性，则padding不会撑开盒子大小）
- padding-left：左内边距
- padding-right：右内边距
- padding-top：上内边距
- padding-bottom：下内边距
- 内边距复合写法：
值的个数 表达意思 padding: 5px; 1个值，代表上下左右都有5像素内边距 padding: 5px 10px; 2个值，代表上下内边距是5像素，左右内边距是10像素 padding: 5px 10px 20px; 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素 padding: 5px 10px 20px 30px; 4个值，上是5像素，右10像素，下20像素，左30像素 顺时针 外边距：margin（控制盒子与盒子之间的距离）
- margin-left：左外边距
- margin-right：右外边距
- margin-top：上外边距
- margin-bottom：下外边距
- 外边距复合写法与内边距一样
- 水平居中：margin: auto;或margin: 0 auto;
⚠️注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align: center;即可。
- 外边距合并
- 相邻块元素垂直外边距的合并：若上下相邻的两个块元素（兄弟关系）相遇时，上面的元素有margin-bottom，下面的元素有margin-top，则取两个值中的较大者。
- 嵌套块元素垂直外边距的塌陷：对于两个嵌套关系（父子关系）的块元素，父元素有margin-top同时子元素也有margin-top，此时父元素会塌陷较大的margin值
- 可以为父元素定义边框（border）
- 可以为父元素定义padding-top
- 可以为父元素添加overflow: hidden
清除内外边距：网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距：
* {padding: 0; margin: 0;}
⚠️注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
圆角边框（重点）
圆形的做法：
border-radius: 盒子宽度和高度的一半; /*盒子是正方形*/圆角矩形的做法：
border-radius: 盒子高度的一半;可以设置不同的圆角：
border-radius: 左上 右上 右下 左下;
盒子阴影（重点）
- 语法：
box-shadow: h-shadow v-shadow blur spread color inset;- h-shadow:必需。水平阴影位置。允许负值
- v-shadow:必需。垂直阴影位置。允许负值
- blur:可选。模糊距离（虚？实？）
- spread:可选。阴影的尺寸
- color:可选。阴影的颜色。请参阅CSS颜色值
- inset:可选。将外部阴影(outset)改为内部阴影
- 语法：
浮动
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
语法：选择器 {float: 属性值;}
- none：元素不浮动（默认值）
- left：元素向左浮动
- right：元素向右浮动
浮动特性（重难点）
- 浮动元素会脱离标准流（脱标）：脱离标准普通流的控制，浮动到指定位置，不再保留原先的位置
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性（可以直接设置宽度、高度）
注意⚠️：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
浮动布局注意点
浮动和标准流的父盒子搭配：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余的兄弟元素也要浮动：一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动
为什么需要清除浮动：由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
清除浮动的本质
- 本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
清除浮动（策略是闭合浮动）
语法：选择器{clear: 属性值;}
- left：清除左侧浮动的影响
- right：清除右侧浮动的影响
- both：同时清除左右两侧浮动的影响
- 实际开发中，几乎只用 {clear: both;}
清除浮动方法
额外标签法也称为隔墙法（不推荐）
- 在浮动元素末尾添加一个空的块级标签，例：<div style=”clear: both”></div>
父级添加overflow属性
- 给父级添加overflow属性，将其属性值设置为hidden、auto或scroll
父级添加after伪元素
- :after方式是额外标签法的升级版，也是给父元素添加
.clearfix:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7专有 */ *zoom: 1; }父级添加双伪元素
- 也是给父元素添加
.clearfix:before,.clearfix:after { content: ''; display: table; } .clearfix:after { clear:both; } .clearfix { *zoom: 1; }
图片格式
jpg图像格式：对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式
gif图像格式：最多只能储存256色，通常用来显示简单图形及字体，但可以保存透明背景和动画效果，实际经常用于一些图片小动画效果
png图像格式：结合了gif和jpeg的优点，具有存储形式丰富的特点，能保持透明背景。如果想要切成背景透明的图片，请选择png格式
PSD图像格式：PSD是Photoshop的专用格式，里面可以放图层、通道、遮罩等多种设计稿。对前端来说，可以直接从上面复制文字，获得图片，还可以测量大小和距离
CSS属性书写顺序（重点）
布局定位属性：display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…
头部制作
- 导航栏注意点：实际开发中，不会直接用链接a而是用li包含链接（ul>li>a）的做法
- li+a语义更清晰，一看这就是有条理的列表型内容
- 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
- 导航栏注意点：实际开发中，不会直接用链接a而是用li包含链接（ul>li>a）的做法
注意⚠️: 1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示
2.这个nav导航栏可以不给宽度，将来可以继续添加其余文字
3.因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度
定位
- 定义：定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
- 定位组成
- 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
- 定位=定位模式+边偏移
- 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
定位模式：定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：
static：静态定位（很少用）
relative：相对定位（重要）
- 元素在移动位置的时候，是相对于它原来的位置来说的，语法：选择器 {position: relative;}
- 原来在标准流的位置继续占有，后面的盒子依然以标准流的方式对待它（不脱标，继续保留原来位置）
absolute：绝对定位（重要）
- 元素在移动位置的时候，是相对于它祖先元素来说的，语法：选择器{position: absolute;}
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素作为参考点移动位置
- 绝对定位不再占有原来的位置（脱标）
fixed：固定定位（重要）
- 元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变，语法：选择器{position: fixed;}
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不再占有原先的位置
定位叠放次序z-index：在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）
- 语法：选择器{z-index: 1;}
- 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
- 边偏移：边偏移就是定位的盒子移动到最终位置。有top、bottom、left、right四个属性
- 定位的特殊特性
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
- 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字。但是绝对定位（固定定位）会压住下面标准流所有的内容
元素的显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们刷新页面，会重新出现
display显示隐藏
- display: none; ：隐藏对象（display隐藏元素后，不再占有原来的位置，用的地方更多，重点）
- display: block; ：除了转换为块级元素之外，同时还有显示元素的意思
visibility显示隐藏
- visibility: visible; ：元素可视
- visibility: hidden; ：元素隐藏（visibility隐藏元素后，继续占有原来的位置）
overflow溢出显示隐藏
- overflow: visible; ：默认值，不剪切内容也不添加滚动条
- overflow: hidden; :不显示超过对象尺寸的内容，超出的部分隐藏掉
- overflow: scroll; :不管超出内容与否，总是显示滚动条
- overflow: auto; ：超出自动显示滚动条，不超出不显示滚动条
注意⚠️: 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果有定位的盒子，请慎用overflow: hidden; 因为它会隐藏多余的部分。
CSS高级技巧（HTML5+CSS3）
精灵图
- 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
- 目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度
- 精灵图的使用
- 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 这个大图片也称为sprites 精灵图 或者 雪碧图（先用background: url( )导入精灵图）
- 移动背景图片位置，此时可以使用background-position
- 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同（x轴往右是正值，y轴往下走是正值）
- 因为一般都是往上往左移动，所以数值是负值
- 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
CSS三角（重点）
- 指定一个宽、高均为0的盒子，然后给一个border: 50px solid transparent;，再给盒子其中一边指定颜色，例：border-left-color: pink;
CSS用户界面样式
定义：就是更改一些用户操作样式，以便提高更好的用户体验
更改用户的鼠标样式
鼠标样式cursor，语法：
{cursor: pointer;}- default：默认
- pointer：小手
- move：移动
- text：文本
- not-allowed：禁止
表单轮廓
- 轮廓线outline
- 给表单（input type=”text”）添加outline: 0; 或者outline: none; 样式之后，就可以去掉默认的蓝色边框
- 轮廓线outline
防止表单域（textarea）拖拽
语法：
textarea {resize: none;}
Vertical-align：
- 用于设置图片或者表单（行内块元素）和文字垂直对齐（只针对于行内元素或者行内块元素有效）
语法：
{vertical-align: baseline;}- baseline：默认，把元素放置在父元素的基线上
- top：把元素的顶端与行中最高元素的顶端对齐
- middle：把此元素放置在父元素的中部（使用vertical-align: middle可以实现文字和图片垂直居中对齐）
- bottom：把元素的顶端与行中最低的元素顶端对齐
解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
解决办法：
给图片添加
vertical-align: middle /* 或top或bottom（提倡使用） */把图片转换成块级元素
display: block;
溢出的文字省略号显示（常用）
单行文本溢出显示省略号–必需满足三个条件
先强制一行内显示文本：
white-space: nowrap; /*默认是normal，会自动换行*/超出的部分隐藏：
overflow: hidden;文字用省略号代替超出的部分：
text-overflow: ellipsis;
多行文本溢出显示省略号（了解即可）
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）
超出的部分隐藏：
overflow: hidden;文字用省略号代替超出的部分：
text-overflow: ellipsis;弹性伸缩盒子模型显示：
display: -webkit-box;限制在一个块元素显示的文本的行数：
-webkit-line-clamp: 2;设置或检索伸缩盒对象的子元素的排列方式：
-webkit-box-orient: vertical;
常见布局技巧
margin负值的运用：当两个有边框的盒子float起来后会贴在一起，导致边框加倍，可以用margin-left: -1px; 来解决
若使用了margin-left: -1px; 后想让鼠标经过盒子的时候四个边框都变色，需要提高当前盒子的层级（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
文字围绕浮动元素：给盒子中的图片添加浮动后，盒子中的文字会自动围绕在浮动的图片旁边
行内块的巧妙运用：给父盒子添加text-align: center，里面的行内块元素会全部居中
CSS三角强化：要想做出直角三角形，可以先把左边和下边的边框宽度设为0，再把上边框调大和透明色（transparent）
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化（每个网页都必须首先进行CSS初始化）
结构伪类选择器（权重10）：主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素
E: first-child：匹配父元素中的第一个子元素E
E: last-child：匹配父元素中的最后一个子元素E
E: nth-child(n)：匹配父元素中的第n个子元素E（例：section div: nth-child(1)会先看nth-child(1)选择出第一个元素，再看div，判断第一个元素是否是div）
- 括号里的n如果是数字，就是选择第n个子元素，里面数字从1开始
- 括号里的n可以是关键字：even偶数、odd奇数
- 括号里的n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
- 2n：偶数
- 2n+1：奇数
- 5n：5的倍数
- n+5：从第5个开始（包含第5个）到最后
- -n+5：前5个（包含第5个）
E: first-of-type：指定类型E的第一个
E: last-of-type：指定类型E的最后一个
E: nth-of-type(n)：指定类型E的第n个（例：section div: nth-of-type(1)会先看div过滤出所有div，再看**nth-of-type(1)**选出第1个孩子）
伪元素选择器（权重1）（重点）：可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
::before：在元素内部的前面插入内容
::after：在元素内部的后面插入内容
语法：
element::before {content='';} /*element必须是父元素*/
注意⚠️:before和after必须有content属性。两者都是行内元素，不能直接设置宽度、高度。
CSS3盒子模型
- CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变
box-sizing: content-box /* 盒子大小为width+padding+border（以前默认的） */box-sizing: border-box /* 盒子大小为width（box-sizing: border-box;写在* {}中） */- 如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
CSS3过渡（重点）
- 定义：可以在不使用Flash或JS的情况下，当元素从一种样式变换为另一种样式时为其添加效果
- 现在经常和 :hover 搭配使用
语法：transition: 要过渡的属性 花费时间 运动曲线 何时开始;（给谁做过渡就写在谁的属性中，例：给div:hover做过渡，就写在div中）
属性：想要变化的CSS属性，宽度高度 背景颜色 内外边距都行。如果想要所有的属性都变化过渡，写一个all就可以。
花费时间：单位是 秒（必须写单位）比如0.5s
运动曲线：默认是ease（可以省略）
何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）
网站TDK三大标签SEO优化
SEO汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高知名度。
页面必须有三个标签用来符合SEO优化：title、description、keyword
- title：建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字），例：京东（JD.COM）-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
- description：简要说明我们网站主要是做什么的。例：
- keyword：是页面关键词，是搜索引擎的关注点之一。最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式。例：
LOGO SEO优化
- logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
- h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可
- 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来
- 方法1：text-indent移到盒子外面（text-indent:-9999px），然后overflow: hidden
- 方法2：直接给font-size: 0; 就看不到文字了
- 最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了
