最外层大的功能区块要使用 id 选择器。像 class="header"、class="title"、class=footer 这些 class 的名称太常见了，如果在css 中这样定义样式 .header{margin: 10px}很容易出现误伤，因为这个 class 很有可能在其他地方也被使用。正确的写法是最外层功能区块用 id: <div id="header"></div> <div id="footer"></div>。
命名要能体现功能,比如 像 header、footer倒还好，根据名字我知道它在页面的作用，但像 title、text1、text2让人不明所以。如何命名呢？最简单的方法是看看页面上对应区块是有什么作业，然后翻译成英文，用中横线链接即可。比如id="services"、class="contact-wrap"。
对于一个单词不好表示的命名用中横线而不是下划线连接,全小写(这虽然不是强制规定，但有这个意识容易养成好的代码习惯)。比如footer-wrap
去除无用标签。 比如 items 的父容器只写了个 div，这样很不合适。要不把这个 div 加个 class 或者 id，让它体现一定功能。要不直接把这个 div 去掉。
根据页面功能去写样式。比如上面代码中写了两个 .items ，每个 items 里面包含两个产品。代码作者的意思可能是因为页面上该区域有两行，每行两个元素。但实际上这样写不但出现了很多无用标签，让语义化也大打折扣，在现实实现的时候也很麻烦。 正常的写法是一个 ul,下面4个 li，设置浮动，换行自己会换的。
样式无重用。比如上例中，text1-wrap和text2-wrap的功能是类似的，都是让区块居中。我们可以用一个text-wrap代替即可。
<body>
<div id="header">
<div class="layout">这是标题</div>
</div>
<div id="product-desp">
<div class="layout">这是大段描述</div>
</div>
<div id="service-desp">
<div class="layout">这也是大段描述</div>
</div>
<div id="product-title">
<div class="layout">这是中间某段标题</div>
</div>
<div id="products">
<div class="layout">
<ul class="items">
<li>这是产品1</li>
<li>这是产品2</li>
<li>这是产品3</li>
<li>这是产品4</li>
<ul>
</div>
</div>
<div id="footer">
<div class="layout">footer</div>
</div>
</body>
对于下面这种并列卡片的展示很多同学使用 inline-block，其实最建议大家使用浮动，副作用小并且兼容性好。
这个例子看起来简单，实际上涉及很多知识点，浮动、清除浮动、外边距合并、BFC 取消外边距合并、负边距、盒模型宽度计算)
在使用浮动的时候需要注意下面几个点：
下面是实现方式
高度
一般来说，元素的高度由子元素或者 padding 自动撑开，不需要给元素添加固定高度height(可以试想加入给容器添加了固定高度，里面的内容发生变化了怎么办)。当然有些场景下可以给元素添加固定高度，一般是针对高度在任何情况下都不需要变的场景，比如顶部导航条，或者上图张卡片的高度(卡片某些卡片高度发生变化会导致浮动错乱)。
居中
居中最场景的问题是绝对居中的滥用。前面课程里讲了水平垂直绝对居中的写法，很多同学在写页面时只要看到了类似水平垂直居中就使用绝对居中(absolute+负 margin)。实际上只有很有限的场景才使用绝对居中，比如父容器不宽高不固定，子元素需要在父亲内容绝对居中。
大部分情况下垂直居中只需要设置margin 或者 padding 填充即可，文字水平居中用 text-align:center， 块级元素水平居中用margin-left:auto; margin-right: auto。
