07月13, 2016

前端学习笔记

由于经常发生自己写过的东西完全不记得的问题,所以觉得是时候记录了。不记录的程序员和咸鱼有什么区别[撇嘴]

HTML

关于字体

  • Google Fonts里面有很多不错的字体,找到合适的字体后可以通过Quick-use复制类似如下的代码到html文件中后,就可以在css文件中通过font-family来使用了。

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
    
  • 由于某些众所周知的问题,国内访问Google比较慢,可以通过360网站卫士代理访问Google字体库。只要把Google Fonts中的部分地址进行替换就可以了。(我通过这个方式调用的时候报了一个错误,还没弄清是什么问题,不过暂时没有影响使用)。

    <link href="http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext" rel="stylesheet">
    
  • 下载字体问题待续

CSS

关于子元素和父元素的height

  • height:auto 表示当前元素的高度随着其子元素的高度增大而增大。此时可以给父元素设置一个最小高度。

  • height:100% 表示当前元素的高度等于其父元素的高度。

关于伸缩盒

  • 居中问题

    • 通常来说水平居中只要通过margin:0 auto就可以实现。

    • 今天发现可以通过在父元素设置如下代码使其子元素完全居中[垂直居中&&水平居中]

        display: flex;
        align-items: center;
        justify-content: center;
      
  • 按百分比设定宽度

    当父元素宽度不固定的时候,想设定子元素为父元素宽度的三分之二时,可以将父元素设置为display:flex ,然后通过flex-basis 设置子元素设置其宽度占父元素百分比

JavaScript

  • 关于逻辑与&&和逻辑或||

    ​ 今天听课,看到屈屈在获得端口时是用的这样一条语句var serverPort = urlInfo.port || 80,意图是当没有指定端口的时候使用HTTP默认端口80。我一看到表示很懵逼,这个表达式的值不应该是true或者1麽。。

    ​ 查了一下,当逻辑与的表达式值为真时,返回最后一个为真的值,为假时,返回第一个为假的值。逻辑或同理,当表达式的值为真时返回第一个为真的值,当表达式为假时,返回最后一个为假的值。嗯,长知识。

杂项

  • HTML/CSS/JS Prettify快捷键 Ctrl + Shift + h

本文链接:http://crystalmiao.com/post/前端学习笔记.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。