基础整理三：个别标签和CSS的兼容HTML标签块级元素可以嵌套任意元素，行内元素只能嵌套行内元素，如果在p标签嵌套块级元

<p>
  <div></div>
</p>
// 解析后：
<p></p>
  <div></div>
<p></p>

<a href>
  <a href></a>
</a>
// 解析后：
<a href></a>
<a href></a>

<div class='box'>
  <img/>
  <img/>
  <img/>
  <img/>
  <img/>
</div>

如果给父级盒子1000px宽度，再在父级中写5个img，每个img都给200px宽，应该是正好能装下的，但是实际操作却不是这样的，会出现折行，这是因为行内块级元素会读取代码中的回车和空格，解析成一段距离，这一小段距离具体是多少不是确定的

解决的方法有两种，一是把空格和回车都去掉，五个img挨着，这样显然不好维护，二是给父级box设置font-size:0即可

margin合并：上下结构的两个块级元素，上边的盒子设置了margin-bottom，下边的盒子设置了margin-top，此时两个盒子的距离是谁大取谁的值，如果两个值相同，只取一个
margin塌陷：父子结构的两个元素，父级和子级都设置设置了margin-top，且父级没有设置上border和上padding的话，子级的margin-top会传递到父级元素上，也是谁的值大取谁的

在写代码的时候要注意这两点，多用margin-bottom或者padding-top，当然这两个问题也不是不能解决，第一个问题可以用display:inline-block，第二个可以给父级加边框等等，看具体需求了

opacity 这个比较冷门，也不经常用到或考到，了解即可：opacity只兼容IE9以上浏览器，不兼容的情况下要用filter: alpha(opacity=50)这样的写法，跟opacity: 0.5是一个效果
vertical-align 行内元素和行内块级元素默认的对齐方式是基线对齐，用这个属性可以调整他们的对齐方式，也可以调整图片和文字的对齐方式，这个属性除了固定的属性值外还可以设置具体数值，块级元素不能设置这个属性

这里写的都是我知道的或者实际碰到过的小问题，如果你遇到其他的欢迎补充。