Part1:font:inherit
字體的設置
設置所有元素的字體保持一致：
- 所有元素：*{font:inherit;} /* IE8+ */
- body體用percent：body{font:100%/1 sans-serif;}
- 其余用em：div{font-size:1.2em;}
- 參考：
- css-font-size-em-vs-px-vs-pt-vs
- css inherit
table {font-size:inherit;font:100%;}
該屬性設置元素的字體大小。注意，實際上它設置的是字體中字符框的高度；實際的字符字形可能比這些框高或矮（通常會矮）。值描述xx-small x-small small medium large x-large xx-large 把字體的尺寸設置為不同的尺寸，從 xx-small 到 xx-large。默認值：medium。smaller把 font-size 設置為比父元素更小的尺寸。larger把 font-size 設置為比父元素更大的尺寸。length把 font-size 設置為一個固定的值。%把 font-size 設置為基於父元素的一個百分比值。inherit規定應該從父元素繼承字體尺寸。
font-family: inherit;什意思
繼承父元素的字體系列樣式，如黑體，宋體等。
注意：
1、所有主流瀏覽器都支持 font-family 屬性。
2、任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"
----------------------------------20180108-----------------------------
Part2:display: inline-block;
你可以創建很多網格來鋪滿瀏覽器。在過去很長的一段時間內使用 float 是一種選擇，但是使用 inline-block 會更簡單。讓我們看下使用這兩種方法的例子：
1、
.box { float: left; width: 200px; height: 100px; margin: 1em; }
.after-box { clear: left; }
/*使用after-box 的一格則不會浮動在box的后面*/
2、使用最簡單的方式
.box2{ display: inline-block; width: 200px; height: 100px; margin: 1em;}
你得做些額外工作來讓IE6和IE7支持 inline-block 。有些時候人們談到 inline-block 會觸發叫做 hasLayout 的東西，你只需要知道那是用來支持舊瀏覽器的。
推薦文章：
浮動布局-基於display:inline-block的列表布局