CSS Extend

图像精灵

图像精灵是单个图像中包含的图像集合。

包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

使用图像精灵将减少服务器请求的数量并节约带宽。

响应式网页设计

为所有用户获得最佳体验的设计

可以使用许多不同的设备来查看网页：台式机、平板电脑和手机。无论使用哪种设备，您的网页都应该看起来美观且易用。

网页不应舍弃信息来适合较小的设备，而应使其内容适合任何设备：

橙色框均表示元素的外边距。图1展示的是子元素的外边距，图2则是父元素的。 可见，父子元素相邻的垂直外边距出现合并且最终使用了较大的外边距，而水平外边距不存在重叠问题。

兄弟元素

<div style="border:1px solid black; width: 100px;">
    <div style="margin: 10px; height: 50px; background-color: blue;"></div>
    <div style="margin: 5px; height: 20px; background-color: blue;"></div>
</div>