讲解CSS中常见的属性

一只天蝎的晋升之路2024-08-03 9:37

全局设置

css 复制代码

html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    margin: 0%;
    height: 100%;
    width: 100%;
    background-color: rgb(255, 255, 255);
}

全屏显示 ：将height和width设置为100%使得html和body元素填充整个浏览器窗口，不留任何边距或空间。
overflow: hidden;确保如果页面内容超出浏览器窗口的大小，超出部分将被隐藏，不会显示滚动条，从而避免内容溢出影响页面布局的整洁性。
将body的margin设置为0%去除浏览器默认的边距。
background-color设置为白色，确保页面的背景颜色一致。

样式一致的各个面板

css 复制代码

.framework {
    border: solid;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    border-width: 1px;
    border-color: rgb(237, 237, 238);
}

.frameworkTitle {
    width: 100%;
    height: 25px;
    background-color: rgb(237, 237, 238);
    font-size: 12px;
    padding-top: 2px;
    padding-left: 5px;
    font-weight: bold;
    font-family: Georgia;
}

.frameworkBody {
    width: 100%;
    height: calc(100% - 25px);
}

.framework 类作为父容器，主要负责设置整个面板粗略的样式：圆角、实线、颜色、宽度等等。
.frameworkTitle 类在父容器的div的下面一层div，主要负责设置标题区域的样式 。
- width: 100%：使标题部分宽度占满其父容器的宽度。
- height: 25px：设置标题部分的高度为25像素。
.frameworkBody 类也在父容器的div的下面一层div，主要负责设置内容区域的样式 。
- width: 100%：使内容部分宽度占满其父容器的宽度。
- height: calc(100% - 25px)：计算内容部分的高度，为父容器高度减去标题的高度，确保内容部分不包含标题的高度。

讲解CSS中常见的属性

目录

全局设置

样式一致的各个面板