CSS学习笔记

CSS

CSS挺难啃的一天就学了一点点,还是要多动手,做出效果才更有动力 
OK笔记开始,笔记只是给自己整理一下思路,以及写一些重要的知识点,不会面面具到.

css的历史

1994年开始,哈肯提出css的建议,然后和波特一起设计.1997年W3C接管css,1998年发布css2,之后发布CSS2.1,2011年发布CSS3,将CSS分为多个模块单独升级(搜索css spec),再然后逐渐更新各个模块到level 4.然后,应该还没有然后.
LESS,SASS,PostCSS以后再学

敲黑板,划重点

1. 如何做横向布局(float+clearfix): 
   记住一种方法(背背背背背) 
   给子元素添加浮动,给父元素添加class="clearfix",下边是clearfix类的CSS代码 
   .clearfix::after{ 
   content: ‘‘; 
   display: block; 
   clear: both; 
   }

   1. 取色 量尺寸可以用QQ的截图,当然了我强烈推荐一个叫snipaste的软件(windows),有桌面版,也有UWP版,灰常好用.字体可以用word预览,ps啥的都行.
   2. 使用开发者工具,多用,就不写了
   3. 四种引入CSS的方式:style属性,style标签,css link, @import
   4. 常见的CSS属性(正在学,占个坑,以后补上): 
      font-family,font-size,font-weight 
      ul和body的默认的margin和padding 
      color,background-color,margin,padding 
      line-height 
      6.脱离文档流 
      position:fixed;

其他(边学边记,思路)

取消a标签的下划线:text-decoration: none; 
调整距离可以加padding 
word-break:.....可以用开发者工具看看选哪个 
文档流:文档内元素的流动方向 
内联元素:从左往右流动,注意回车产生的空格 
块级元素:每个占一行 
display:inline-block;尽量别用 
块级元素的高度由内部文档流元素的高度总和决定 
尽量别用height 
内联元素的高度(比较反直觉): 
文字的基线,上部和下部 
建议行高 比上部和下部多一点 每种字体的建议行高是不同的 
让banner在nav下方:让navbar脱离文档流position:fixed 
脱离文档流后,这个div会收缩(不占一整行了),解决办法:width:100%(这样不好,width+padding太宽了)最右边的其他靠到最边上了, 
怎么解决呢??? 
ok,在topNavBar里面加个div.topNavBar-inner,在这个里面加个左右padding,不topNavBar里加左右padding 了,或者把所有padding 都加到新的div里,,哈哈哈哈 搞定 修BUG真的好有乐趣 
为了学习,我不得不一直这样暗示自己 
水平居中:margin-left:auto;margin-right:auto; 
line-height可以确定内联元素高度 
span:当行高和高度相同时,会垂直居中 
hello的做法:display:inline-block;padding line-height

CSS画三角形: 
用border

阻断margin的合并: 
1 中间加个div,有border或者padding(不为0) 
2 display:table和 display: flex 
position:absolute---会让display:inline;变成display:block; 
display:inline-block;

继续,什么是伪类---- 
::before 和::after 可以当成个span来看待,所以改变display:block,完美 
那么伪类可以干嘛呢?

踩了一天的坑:改图标的fill,改成白色,就是显示黑色,开发者工具里也是黑色----原来是浏览器缓存搞的鬼 
还有更难受的,不开个本地http-server,请求阿里的图标就是file,不是https请求.难受