CSS

• 学习css搜css spec，即是css文档

  CSS学习方法

1. mdn
2. css tricks
3. 阮一峰关于CSS的博客
4. 张鑫旭的CSS博客
5. Codrops炫酷的CSS
6. CSS揭秘（书）
7. CSS2.1中文spec

本篇博客内容可在resume仓库中的文件展示

CSS样式

1. style内联样式，写在其他标签内
2. style标签，将需更改的属性包起来
3. link需要写rel说明html和这个链接文件的关系href，和HTML写法一样。其中rel很重要，不可省略。否则就无法实现CSS
4. 还可以在3方法中的链接文件里写上@import url(路径)，就会把路径里的文件一起访问，也可以在路径对应的文件写相关的CSS，都可被读取。

• 关于字体问题

  • 在office或者是unix的page里找字体，然后再放进去

• 一些上课的记录

  • 左上角LOGO的字之间有空格，可以在两个span标签之间打一个空格，也可以在CSS文件中写margin-right: 4px;
  • 如果CSS文件中有一个描述针对于比较常见的参数，该参数在HTML文件中其他部位也有出现，那么在写CSS文件时应写上需要更改样式的参数的所属，如.topNavBar .logo .card而不是只写个card。
  • 如果在一个父标签的里面的子标签有比较多的相同的属性，可以把这些属性都写在大参数里。减少写的代码。（一般字体相关属性都会被继承，其他的属性不一定）
  • 在CSS里面,>表示父子关系。float: left;可以让列表横着放。
  • float加上clearfix即解决横向布局。float写在横向布局的元素中，clearfix写在他们的爸爸里
  • rbga:red green blue alpha（透明度）
  • 关于属性的优先级，要么写的更具体，要么就是指定的更精准。优先级就更高。

写CSS的一些重点2017/10/25导航栏制作

1. 当列表前有小圆点时，可以在ul标签中加一句，即ul style="list-style: none;" class="clearfix">
2. 当把列表横起来之后，发现第一个标签与页面最左边有空白，是因为每个标签都有默认样式，这是由ul标签的默认样式引起的。（入门：CSS课程的制作导航的16:46），可以使用ul style="list-style: none; margin= 0; padding= 0;" class="clearfix">解决距离问题。
3. 当前把列表横过来，我们使用float，但是float会有bug。一般解决这个bug的办法是在CSS文件中写上：

   1 2 3 4 5

   .clearfix::after{ content: ''; display: block; clear: both; }

并且将clearfix写在所有的浮动元素的爸爸身上，即在父元素中加上class="clearfix"上面的这个三级代码要背下来。

1. 用QQ截图来量字的像素
2. 在CSS中写.topNavBar>nav>ul，这个>代表右边必须是左边的儿子。 这是我们学的第一个选择器
3. 看一个字体的实际像素大小，要去看审查元素的计算出来的font-size，即computed里面的字体大小，而不是styles中的字体大小
4. 不同操作系统渲染出的字，就算只给一个颜色，字的周围也会有虚边，并且中间的颜色不一定是他的颜色。
5. 解决鼠标浮动到选项上时，出现边框后其他选项会移动的问题的方法就算：原本就在其他选项上添加一个无色的边框。42:40
6. 在测hover的属性时，建议使用开发者工具，强制hover，去测出相关属性。
7. 当在li标签包裹着的a标签，如果两者的像素不同，则在a标签的CSS样式里加一个display: block;即可

LOGO制作

1. a标签默认为蓝色，可以在他的CSS样式中，给所有的a标签加上color: inherit;，即继承父元素的颜色。
2. 应该明确告诉a标签它的颜色，这样优先级才高。
3. 在不会下载字体的时候，用word去找最接近的字体。
4. CSS遇到重名的对象，应该加上一个范围。如.topNavBar .logo .card而不是直接.card
5. padding可以写成一句话，顺序是上右下左。用空格隔开

背景图制作

1. 工具的使用很重要，如果在浏览别人的页面时，需要经常用到开发者工具去找到你想了解的标签样式。还可以从network去看它的请求。
2. 让导航栏相对于屏幕固定，与背景图重叠用到了

   1 2 3

   position: fixed; top: 0; left: 0;

脱离了文档流

1. 当用到宽度100%的时候，如果还存在padding，那么很容易出现bug，这个时候常用div标签，用div标签包裹住这个宽度100%的标签，然后把padding写在这个新的div标签。
2. 尽量不要写width: 100%;
3. 当一个div写了max-width后，想居中，只需要加上margin-left: auto; margin-right: auto;即可
4. span不接受设置宽高。
5. 养成写line-height的习惯，防止在不同电脑中，效果不同
6. 绝对定位的写法：

   1 2	在子元素上写position: absolute; 在父元素上写position: relative;

• 这样就知道子元素相对于父元素绝对定位。也是脱离文档流的方法之一。让子元素相对于父元素的第一个relative定位。
• 这里的top: 100%是指距离父元素的最上方有100%的距离。详见resume仓库的简历CSS文件。

2017.10.25更新

1. wall heaven背景天堂
2. 块级元素的高度是由其内部文档流元素的高度总和决定（文档流：文档内元素的流动方向。内联元素从左往右流动，宽度不够时会自动换行继续从左往右流动。例如span。块级元素，每个块占一行，从上往下依次往下流动。）
3. 当一个内联元素，一个单词过长超出了一行的长度，这个单词不会换行。（浏览器会把这个过长的单词当成一个整体，不会分开）如果想让它们分开，请记住：word-break: break-all（其他的选项请看开发者工具）
4. 想让块级元素不再独占一行，可以用float，或者是display: inline-block（这个有很多BUG，不推荐用）
5. 字体对称是基线对称，不是中线对称。
   
6. 100像素指的到底是什么？指的是该字体中最高一点到最低一点的大小。
7. 为什么span会比字体还要高呢？因为字体的上下位置还会有建议行高。可以理解成，两行字上下之间也不会紧贴，空余部分是一行的一部分。
8. span的行高一般是由字体的建议行高以及字体设计的相关因素决定。
9. 如果一个div（块级元素）包含两个span（内联元素），这个块级元素的高度由较高的这个内联元素决定。如果想让高度定下来，需要强行写height: ??px。如果用line-height定义，如果文字大小不是过大，并且高度写的不是特别小，是可以定的。否则可能会不生效（这个不能绝对。就像是牛顿的第一定律，当速度超过了一定范围以后，就不成立了。）可以理解为line-height设置要大于字体本身的建议行高（也不能完全确定）→深入了解的文章
10. 一个DIV高度由文档流决定，如果强行给高度，出BUG的几率非常高
11. 想让背景图和导航栏不分离，就让背景图脱离文档流。一旦脱离文档流，父元素的高度就不再包含他。并且使用了position: fixed之后，元素就会收缩在一起，不再扩展开来。这时可以用width: 100%。但是容易出现bug，会出现子元素比父元素还要宽，但是如果没有左右padding，紧贴着又很丑。这时候套路可以是在topNavBar这里多加一个div，然后div的左右padding为需要的像素即可，就不会超出屏幕了。
12. 用div的.mask来做到遮挡图片，做出朦胧感。
13. 图片也可以水平居中，bg-position。用bg-size: cover可以做到图片自适应div变化。
14. max-width和width的区别在于：写了最大宽度会有自适应，会根据浏览器大小变化，而不写的话就不会自适应。
15. 记住：margin-left: auto;/nmargin-right: auto;就会自动居中。
16. 头像的尺寸可以写到div中，做一个默认尺寸。
17. span不接受设置宽高，设置宽高需要先写一个display: inline-block;可以从上下左右padding增加，和目标像素尽量一致。最好不要直接设置宽高。最好还要明确写一下line-height: ??px（防止不同机器上行高不同）
18. iconfont.cn，工具网站
19. 当图标上下空间不一样，写vertical-align: top;
20. border-radius: 50%;可以把包裹的边框变成圆形
21. 写高度的时候一定要记得写行高，会比较好
22. href会跳到外部，src一般在页面内呈现
23. margin在ie下有bug
24. border-box和padding一同使用比较好