HTML&CSS基础查缺补漏

定位 - position

• absolute & relative：值得注意的一点是absolute绝对定位参照的是其最近有定位的父级元素，父级元素如何定位不影响。

盒模型

• 标准 & 怪异：标准宽高为content，怪异content+padding+border，可通过box-sizing改变

清除浮动 - clearfix

• 最后的浮动子元素加一个 <div> 并 clear: both （增加DOM元素，谨慎应用）

• 伪元素 :after

  .clearfix:after{
     content:"";
     display:block;
     height:0;
     clear:both;
     visibility:hidden;
    }
  

• 父元素变为BFC：overflow: hidden/auto

文字居中

• 水平居中用到的css：text-align
• 垂直居中用到的css：line-height。设置行高后会将多余部分平分到文字内容上下，只要 line-height 大于文字高度，效果为垂直居中
• 这里是关于line-height 和 vertical-align 的说明和原理

图片

有这样一道面试题：

如何加入一张图片？哪种加载方式更快？

很容易想到css中的background属性和img标签。理论上来说，在浏览器解析过程中，html比css代码先解析。因此由img引入的标签要比background先加载。使用img可能出现图片加载阻塞之后html内容加载的情况，css则不会影响正常内容的显示。

不过，有这样一位哥做了一个简单的实验，结果显示对于图片加载速度上区别不大。对于动画来说，img性能更好一下。但对于重要的图片如logo等，还是推荐用img标签方式，理论上来说还是会优先显示。

img还有一个pro是利于SEO，可设置alt属性应对加载失败情况，css则无法做到。