序:知识的荒原

小学基本都在qtt、画王八课上度过，初中节节微机课都是office三贱课加frontpage，终于大学了……dreamweaver 知识来自于(类似)👇

终于挨到了社会 学习基本靠在网上翻博客 那时候csdn还挺火，然后发现 犀牛书、红宝书😢 多么的无知！插一句 这两本书 还是推荐 红宝书～😊

寻真-追溯本源

But!有时候会想 这些网上博文都是哪来的？？有的是摘书的、有的是译文的、还有的是实际经验的，怎么他们就知道这些“冷知识”，哪来的？？托梦吗？？总有个出处吧！

比如有一个考点经常出现在前端笔面上，14年左右简直就是必考题目👇
“我和你妈掉水里……”厄不是 👩👩是 “什么是块级元素、行内元素，有何区别，分别列举各不少于3个” 😢

记得刚毕业时候对这种题就是搜 然后看博文 惊叹 “搜的寺内” 😺
直到后来去访问了World Wide Web Consortium (W3C) 惊叹 “MMP 不都在这嘛-_-#”

还是上面的问题👃

块级元素(块级格式) 粗线就是一道面试题🐔

• 块级元素垂直方向上设置margin 叠加的问题

9.4.1 Block formatting contexts
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context,(这里)** boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse**.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

再来看行内元素 除了交代了行内元素的特征，行内元素垂直居中对其的方法 还藏了一道面试题🐔

• 行内元素能不能设置垂直方向的边距、边框呀

9.4.2 Inline formatting contexts
An inline formatting context is established by a block container box that contains no block-level boxes. In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block.** Horizontal margins, borders, and padding are respected between these boxes**. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

（里面还有很多细节可供了解学习）
除此之外 对于各种布局模型 也是正版详尽

标准是很详细的 毕竟要作为各个浏览器厂商实现的基准描述。
建议刚入行的 在对前端宽泛的了解 使用后，如果哪部分知识有困惑 有问题 有兴趣 可以翻翻相关标准，同理javascript也是一样，翻翻ECMAScript 你就知道为毛能看见诸如

<a href="javascipt:void(0)"></a>

if(target==void(0)){}

这样的写法。
顺溜完标准 再查查浏览器的实现，毕竟脑袋里想的和动手做出来的会有差别
这一个捏泥巴班上有IE 有Chrome 有火狐 还有几个淘气的旁听生(360 搜狗 遨游) 难免捏出来的有不一样。