/* 选择类名为 'wrapper' 的元素，并设置其样式 */
.wrapper{
    width: 370px;
    /* 设置元素的宽度为 370 像素，用于控制该元素在页面中的水平尺寸大小 */
    margin: 10px auto;
    /* 设置元素的上下外边距为 10 像素，左右外边距自动（auto），使元素在水平方向上自动居中，常用于将某个模块在页面中水平居中显示 */
    zoom: 1;
    /* 通过设置 zoom 属性为 1，触发元素的 hasLayout 属性（主要针对低版本 IE 浏览器的兼容性处理），以解决一些布局相关的问题，确保元素能按照预期的样式和布局规则进行显示 */
}

/* 选择类名为 'tabbody' 的元素，并设置其样式 */
.tabbody{
    height: 360px;
    /* 设置元素的高度为 360 像素，用于限定该元素在页面中的垂直尺寸大小 */
}

/* 选择类名为 'tabbody' 下的类名为 'panel' 的元素，并设置其样式 */
.tabbody.panel{
    width:100%;
    /* 设置元素的宽度占满其父元素的宽度，使其自适应父元素的宽度大小，常用于实现布局上的全屏或全宽效果 */
    height: 360px;
    /* 设置元素的高度为 360 像素，与父元素（.tabbody）的高度保持一致，可能用于创建具有固定高度的面板区域 */
    position: absolute;
    /* 将元素设置为绝对定位，使其可以根据 'left'、'top' 等定位属性精确地在页面中定位，脱离文档流，方便进行层叠布局以及与其他元素的位置重叠等效果实现 */
    background: #fff;
    /* 设置元素的背景颜色为白色（#fff），用于提供一个清晰的背景视觉效果 */
}

/* 选择类名为 'tabbody' 下的类名为 'panel' 的元素内部的 h1 标题元素，并设置其样式 */
.tabbody.panel h1{
    font-size:26px;
    /* 设置 h1 标题元素的字体大小为 26 像素，用于控制标题的文字大小，使其更加醒目突出 */
    margin: 5px 0 0 5px;
    /* 设置元素的上、左外边距为 5 像素，下、右外边距为 0，使标题在面板内有一定的内边距间隔，呈现出合适的排版位置 */
}

/* 选择类名为 'tabbody' 下的类名为 'panel' 的元素内部的 p 段落元素，并设置其样式 */
.tabbody.panel p{
    font-size:12px;
    /* 设置 p 段落元素的字体大小为 12 像素，通常用于正文内容的文字大小设置，使其与标题等元素区分开来，保持合适的层次结构 */
    margin: 5px 0 0 5px;
    /* 同样设置元素的上、左外边距为 5 像素，下、右外边距为 0，让段落文字在面板内有合适的排版间隔 */
}

/* 选择类名为 'tabbody' 下的 table 表格元素，并设置其样式 */
.tabbody table{
    width:90%;
    /* 设置表格的宽度占其父元素宽度的 90%，使其在父元素内按一定比例自适应宽度，而不是占满整个父元素宽度，提供一定的布局灵活性 */
    line-height: 20px;
    /* 设置表格内行高为 20 像素，用于控制表格内文字行与行之间的垂直间距，影响文字的排版效果和可读性 */
    margin: 5px 0 0 5px;
    /* 设置表格的上、左外边距为 5 像素，下、右外边距为 0，让表格在父元素内有一定的间隔位置，呈现出合适的布局效果 */
}

/* 选择类名为 'tabbody' 下的 table 表格元素内部的 thead 表头元素，并设置其样式 */
.tabbody table thead{
    font-weight: bold;
    /* 设置表头元素内文字的字体粗细为粗体（bold），使其在视觉上与表格主体内容区分开来，更突出表头的重要性和标识作用 */
    line-height: 25px;
    /* 设置表头行的行高为 25 像素，通常表头可能需要更大一点的行高来保证文字显示效果和美观性，与表格主体行高（前面设置的 20 像素）有所区别 */
}