关于display:inline-block使用
我在使用display:inline-block布局时候，在网上看资料的时候，说使用之后元素之间会有4px之间的差距，那是“空白字符压缩（white space collapse）是西文排版的必然结果。 SGML、TeX都是如此。不过对于不使用空格作为词分界的语言，比如东亚语言来说，就造成了问题。 我们知道造成「inline-block」元素空隙的本质是 HTML 中存在的空白符（whitespace） 作者：一丝 链接：https://www.zhihu.com/question/21468450/answer/18342657 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处
解决方法：一般都在父元素设置font-size：0即可。
但当插入图片时候，会发现图片会与其他元素间有4px的间距，查了下资料，我找到了两个解决方法：
1、img 默认是inline元素（内联元素、行内元素），计算高度时要加上 line-height 的默认值（4px）。 设置父元素的字体大小为0的方法解决。 From:https://www.anotherhome.net/1969
2、在img标签内设置" align="absmiddle"属性，意思是"让图像的中间与同一行中最大元素的中间对齐"
使用inline-block后，当两个不同高度的元素不在同一行的时候，会发现这两个元素不会以顶部进行对齐，这是因为inline-block元素的话，他们的对齐是基于基线的（baseline），这时候，只需要对元素进行“vertical-align: top” 声明即可，期间我发现了在两个font-siez不同的inline-block元素文本元素，使用这个属性无效，要用vertical-align: text-top才可以进行对齐。我想这是因为这个元素是文本属性导致的吧。
在使用浮动中的一些小总结
在进行布局时候，对前后的两个元素A，C分别进行左右浮动，而中间的元素B不浮动，结果发现，进行右浮动的元素C怎样也顶不上去，只能在一行，即使“看上去”盒子有空间
然后调整了下文档流的位置，将C放到B前面，发现就可以正常放在同一行上了。
原因是：浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素；内联元素则有空隙就插入。 所以加入C元素后再加入B元素时，B元素直接填充到A C元素的同一行；加入B元素后再加入C元素时，由于B元素一行没有空隙，C元素浮动到下一行。
margin-top无效的问题
（一）网上能找到的两种比较靠谱的解释： 1：“在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…” 2：当第一个层浮动，而第二个没浮动层的margin会被压缩，详见--浮动元素后非浮动元素的margin的处理。 得到解决问题思路：要浮动一起浮动，要就一起不浮动。 解决办法：1、.box2增加float属性2、box1与box2之间增加一层"clear:both;"
（二）子元素设置margin-top作用于父容器margin-top失效； 解决办法： 1.给父容器box加overflow:hidden;属性 2.父容器box加border除none以外的属性 3.用父容器box的padding-top代替margin-top
其实就是float的锅
HTML语义化
发现自己在写页面的时候对于这些标签还是不够熟悉，那些地方需要用到dt、 dl；哪些地方需要ul、a标签等都不清楚，基本上都是随便用，要注意HTML的语义化才行
写gallery页面中的h5标签问题
高度为0，不能显示内容，但在第一个DIV中却能显示，都是用同一个css样式，实在找不到原因。。。。。先记录下来，能以后解决吧。