CSS 基础点

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的列表布局