/* 对body元素设置样式 */
body{
    /* 超出body元素范围的内容隐藏起来，避免出现滚动条等情况，用于控制页面整体的显示范围 */
    overflow: hidden;
    /* 设置body元素的宽度为540px，限定整个页面主体的宽度 */
    width: 540px;
}

/* 定义名为wrapper的类选择器样式，通常用于包裹页面中的一部分内容区域 */
.wrapper {
    /* 设置上下外边距，上外边距为10px，下外边距自动（会根据父元素宽度等情况自动调整，实现水平居中效果），左外边距为0，让其在水平方向上相对父元素居中显示 */
    margin: 10px auto 0;
    /* 设置字体大小为12px，统一该区域内文字的字号 */
    font-size: 12px;
    /* 超出该元素范围的内容隐藏起来，避免内部元素溢出显示异常 */
    overflow: hidden;
    /* 设置宽度为520px，确定这个包裹区域的宽度 */
    width: 520px;
    /* 设置高度为315px，确定这个包裹区域的高度 */
    height: 315px;
}

/* 定义名为clear的类选择器样式，一般用于清除浮动带来的影响，确保后续元素的布局正常 */
.clear {
    /* 清除左右两侧的浮动元素，使该元素不会受到前面浮动元素的影响，能按正常流布局显示 */
    clear: both;
}

/* 对同时应用了wrapper类和left类的元素设置样式，通常用于布局中靠左边的部分内容 */
.wrapper.left {
    /* 让元素向左浮动，使其能在同一行内从左到右依次排列（前提是有足够宽度），常用于多栏布局 */
    float: left;
    /* 设置左外边距为10px，拉开与左边元素或容器边界的距离 */
    margin-left: 10px;
}

/* 对同时应用了wrapper类和right类的元素设置样式，通常用于布局中靠右边的部分内容 */
.wrapper.right {
    /* 让元素向右浮动，使其能在同一行内从右到左依次排列（前提是有足够宽度），常用于多栏布局 */
    float: right;
    /* 设置左边框为2px的点状边框，颜色为#EDEDED，用于视觉上区分左右两部分内容区域 */
    border-left: 2px dotted #EDEDED;
    /* 设置左内边距为15px，增加内部内容与左边框的距离，使显示更美观 */
    padding-left: 15px;
}

/* 定义名为section的类选择器样式，可能用于页面中不同的功能或内容板块 */
.section {
    /* 设置下外边距为15px，拉开与下方相邻元素的距离，增加板块之间的间隔 */
    margin-bottom: 15px;
    /* 设置宽度为240px，限定每个板块的宽度 */
    width: 240px;
    /* 超出该元素范围的内容隐藏起来，避免内部元素溢出显示异常 */
    overflow: hidden;
}

/* 对类名为section下的h3元素设置样式，一般用于板块内的标题样式设置 */
.section h3 {
    /* 设置字体加粗，突出标题显示效果 */
    font-weight: bold;
    /* 设置上下内边距为5px，增加标题内容的上下空白区域，使其更美观 */
    padding: 5px 0;
    /* 设置下外边距为10px，拉开与下方相邻元素（比如标题下方的列表等内容）的距离 */
    margin-bottom: 10px;
    /* 设置下边框为1px的实线边框，颜色为#EDEDED，用于视觉上对标题区域进行区分 */
    border-bottom: 1px solid #EDEDED;
    /* 设置字体大小为12px，统一板块标题的字号 */
    font-size: 12px;
}

/* 对类名为section下的ul元素设置样式，通常用于设置板块内的无序列表样式 */
.section ul {
    /* 去除列表默认的项目符号样式，可能会根据后续需求自定义列表项的显示样式 */
    list-style: none;
    /* 超出该元素范围的内容隐藏起来，避免内部元素溢出显示异常 */
    overflow: hidden;
    /* 清除左右两侧的浮动元素，确保列表在布局中正常显示，不受前面浮动元素影响 */
    clear: both;
}

/* 对类名为section下的li元素设置样式，用于设置板块内列表项的样式 */
.section li {
    /* 让列表项向左浮动，使其能在同一行内从左到右依次排列（前提是有足够宽度），实现多列布局效果等 */
    float: left;
    /* 设置列表项的宽度为120px，控制每个列表项的水平占宽情况 */
    width: 120px;
}

/* 对类名为section下的tone类元素设置样式，可能是特定用途的元素样式，比如表示某种色调之类的元素 */
.section.tone {
    /* 设置宽度为80px，限定该类元素的宽度 */
    width: 80px;
}

/* 对类名为section下的preview类元素设置样式，可能用于展示预览相关内容的元素 */
.section.preview {
    /* 设置宽度为220px，限定该类元素的宽度 */
    width: 220px;
}

/* 对类名为section下的preview类中的table元素设置样式，用于设置表格的整体样式 */
.section.preview table {
    /* 设置表格内容水平居中对齐 */
    text-align: center;
    /* 设置表格内容垂直居中对齐，使表格内文字等内容在单元格中垂直方向上处于中间位置 */
    vertical-align: middle;
    /* 设置表格内文字颜色为#666，统一表格内容的文字颜色 */
    color: #666;
}

/* 对类名为section下的preview类中的caption元素设置样式，一般用于表格标题的样式设置 */
.section.preview caption {
    /* 设置字体加粗，突出表格标题显示效果 */
    font-weight: bold;
}

/* 对类名为section下的preview类中的td元素设置样式，用于设置表格数据单元格的样式 */
.section.preview td {
    /* 设置边框宽度为1px，四条边的边框样式都为实线，后续可通过border-color等属性设置边框颜色等 */
    border-width: 1px;
    border-style: solid;
    /* 设置单元格的高度为22px，统一表格数据单元格的高度 */
    height: 22px;
}

/* 对类名为section下的preview类中的th元素设置样式，用于设置表格表头单元格的样式 */
.section.preview th {
    /* 设置边框样式为实线，通过border-color属性可以设置不同边的边框颜色 */
    border-style: solid;
    /* 设置边框颜色，上边框宽度为2px，左右下边框宽度为1px，且颜色都为#DDD */
    border-color: #DDD;
    border-width: 2px 1px 1px 1px;
    /* 设置单元格的高度为22px，统一表格表头单元格的高度 */
    height: 22px;
    /* 设置表头单元格的背景颜色为#F7F7F7，用于视觉上区分表头和数据单元格 */
    background-color: #F7F7F7;
}