砌墙记录

以下记录的是我自己遇到的一些问题和我自己的解决办法，如果有什么地方写错了，或者是理解有误，再或者…，总之就是如有错误，请批评指正，谢谢大家~

1. 背景色渐变：api；
   background-image: linear-gradient(45deg, #2f3944, #414d5a);
2. li不换行显示：li{ display:inline;}；
3. li没有修饰：ul{list-style: none;}；
4. ul通常会有自带的margin和padding，记得样式清除；
5. lineheight不能用百分比设置哦；
6. a的各种状态的样式设置；好奇a的样式清除是什么样的
7. button点击之后出现的蓝色边框button{ outline:none;};
8. relative
9. 注意a的有效区域，尽可能的人性化；
10. 背景图片
    我遇到的用例是这样的，页面主要内容区域是1200px，第一个绿色框是这样内容区域的宽度，画出来做标志物，2号框是文字内容的位置，3号为背景图片，底部的颜色为背景色，背景图片3的主体颜色和背景颜色一致。遇到的问题是页面宽度是多少并不知晓，背景图片始终是靠右的，背景颜色是布满整个宽度的，文字部分要和主体部分对齐，即2的左边的外边框要与1的左边的外边框对齐。
    我的做法是：
    （1）将2的宽度设置为主体内容宽度，在其内容添加新的子盒子，宽度为需要的宽度，然后设置2的margin:0 auto;已达到对齐的效果
    （2）开始的时候我不知道怎么处理背景图片，背景图片如下图所示，第一次的想法是，直接100%铺开，后面很明显图片会变形；于是乎我选择了，先把整条盒子填上背景色，然后将图片的position设置成relative，position: relative; top: -141px;,由于2的宽度占掉了一行的空间，所以，top值为负数才能挤上去，很幸运的是效果达到了，但不幸的是，因为使用了relative和top，导致我下面的内容受到了影响，目前还是没整明白为啥会有影响，后面琢磨清楚了，在补充记录；最后，我还是选择了使用背景图片，发现可以设置，背景图片的大小以及位置，就顺利完成了。
    其实如果一开始我了解background有哪些属性的话，就不用这么费劲的折腾了，所以所谓的基础，或许就是这样的吧。
    对于relative是真的不熟，要加强一下。

    background-color: #263842;
    background-image: url(../images/tuceng6.png);
    background-repeat: no-repeat;
    background-position: right;
    

    
    
    
11. 段落末行居中，text-align-last: center;
    （哇，就很神奇有没有，从来没有想过还会有这样的属性！！！）；
12. 你知道text-align要起效果的话，需要什么条件吗？内联元素！！！
    判断一下你内部的元素是否是display:inline或display:inline-block；
13. 没事的时候可以造造轮子，你会发现其实蛮有趣的，同时也会发现很多之前自己没有注意到的东西；
14. 背景渐变蛮好玩的，效果也蛮好看的；

---

tbc