设计套路--

· 

一定要记得写！！有时候都找不到错误
*{
    margin: 0;
    padding: 0;
}

1.可以设计一个公共类放在base.css，将避免高度塌陷，清除浮动写在公共类中。
2.（1）怎么确保在一个li中的a，整个li都能点击，写display:block;
这样就能让超链接设置宽度和高度。
（2）行内块，为了边框和文字一致 文字多宽，边框就多宽
（3）

我们想要去更改字体颜色的时候，我们一般会这么写
.header a{
        color: black;
      }
而不是这样的
.header ul li{
        color: black;
      }
这样写没有任何的效果，这是为什么呢？
是因为当页面中有a标签的时候，a标签的优先级是高于li标签的

3.伪元素必须设置content属性和display，不然伪元素是不会显示的，不想设置content的内容，就将该属性设置为‘’

/*想在li前面添加一个小正方形的点点*/
    li::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: black;
        margin-bottom: 4px;
        margin-left: 10px;
    }

4.文字 图标水平居中text-align:center; 竖直居中：line-height: 宽度值
让图片居中，可以设置具体的margin值

text-align: center; 居中不能设置给a，它是设置给块元素，作用给文本元素的

5.当下拉框难以选中，查看元素的时候，可以右击选择hover，也可以在文字中添加
`
6.有的时候父元素中设置的line-height会无意间影响下面的内容，有时候文字溢出啊，图片溢出啊，记得将line-height:1,表示设置为1倍。
7. 给a中的文字设置颜色，把颜色设置给a元素就行。
8. 商业性质的网站,logo一般放在h1标签中。
9. 三个元素同时浮动，如何保证她们的位置能够正常的显示

10. li中能放div
11.当我们想隐藏某个li，隐藏之后让那个位置保持空白，而不是消失，记得不要使用display：none，这样的话就是真的没了，而且不会占据位置！！
我们使用visibility：none

12.去掉上方的阴影，可以使阴影下移，但是下面的就会增大，或者通过设置层级，让上面的白色部分`盖住阴影，就可以了。

13.慢慢展开的方式，先将高度设置为0，并且加上transition：height，3s这种，然后hover的时候，将高度设置为合适的值。
14.有的时候，元素浮动之后，在行内的位置变化了，可能是因为浮动之后元素脱离文档流，原先设置的lineheight失效了，所以这个时候再给它设置一次
15如果一个元素的优先级不够，可以给提它前面使劲加它的前缀，.nav .home li a之类的。

16，开启定位之后，竖直居中或者水平居中的方式（前提是被设置的元素有宽度或者高度）

为了使一个元素在页面内垂直水平居中，这种居中方式只适应于元素的大小方向确定的
 position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

17.一般来说，在每一个li前面加上某个线，或者某个图标，要用伪元素来做，这个地方可以区分一下伪元素和伪类。

/*行内块，为了边框和文字一致  文字多宽，边框就多宽*/
        display: inline-block;`

19 想让a相对于img-list定位，就需要让img-list有定位，
为了不影响img-list,我们将定位设置为relative，
因为relative不设置top，它的性质就不会改变
20.让图片适应于外面的wrapper，记得一定是要img这个标签属性里面width:100%,父元素还需要指定一个宽度

<!--
    设置网站的图标（在标题栏和收藏栏）
    网站图片一般都存储在网站的根目录下，名字一般叫做 favicon.ico
-->
<link rel="icon" href="//s01.mifile.cn/favicon.ico">

<h1 class="logo" title="小米">
title中的文字就是鼠标移上去显示 的文字