一、案例需求
给定一张精灵图 , 如下所示 :
将其设置到 Web 页面中 , 显示如下样式 :
二、案例核心要点分析
1、清除元素的默认内外边距样式 ★ ( 重点 )
HTML 标签元素 都有自己的...默认内边距 和 外边距 样式 , 如下所示 :
元素 : 默认外边距 常见为 8px 或 16px , 默认内边距 常为 0 ;
, , , , ,... 元素 : 默认的 上边距和下边距可能都在 16px 到 24px 之间 , 内边距 通常为 0 ;
元素 : 默认的上边距和下边距 为 16px 或 1em , 默认内边距 0 ;..., 元素 : 默认的上边距和下边距 16px 或 1em , 默认的左内边距 40px 或 2em ;
元素 : 默认外边距 0 , 默认的左内边距 20px 或 1em ;....box li {
/* 将 li 元素浮动到左侧,使它们在同一行显示 */
float: left;
浮动元素 会从其所在 块级容器 的 左侧或右侧 开始排列