讲解CSS中常见的属性

目录

全局设置

css 复制代码
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    margin: 0%;
    height: 100%;
    width: 100%;
    background-color: rgb(255, 255, 255);
}
  • 全屏显示 :将heightwidth设置为100%使得htmlbody元素填充整个浏览器窗口,不留任何边距或空间。
  • overflow: hidden;确保如果页面内容超出浏览器窗口的大小,超出部分将被隐藏,不会显示滚动条,从而避免内容溢出影响页面布局的整洁性
  • bodymargin设置为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):计算内容部分的高度,为父容器高度减去标题的高度,确保内容部分不包含标题的高度。
相关推荐
王夏奇15 分钟前
python中的__all__ 具体用法
java·前端·python
大家的林语冰1 小时前
《前端周刊》尤大开源 Vite+ 全家桶,前端工业革命启动;尤大爆料 Void 云服务新产品,Vite 进军全栈开发;ECMA 源码映射规范......
前端·javascript·vue.js
jiayong231 小时前
第 8 课:开始引入组合式函数
前端·javascript·学习
田八1 小时前
聊聊AI的发展史,AI的爆发并不是偶然
前端·人工智能·程序员
zhanghongbin011 小时前
AI 采集器:Claude Code、OpenAI、LiteLLM 监控
java·前端·人工智能
IT_陈寒2 小时前
Python的列表推导式里藏了个坑,差点让我加班到凌晨
前端·人工智能·后端
吴声子夜歌2 小时前
ES6——正则的扩展详解
前端·mysql·es6
天***88522 小时前
Edge 浏览器离线绿色增强版+官方安装包,支持win7等系统
前端·edge
漫游的渔夫2 小时前
别再直接 `json.loads` 了!AI 返回的 JSON 坑位指南
前端·人工智能
软件工程师文艺2 小时前
从0到1:Claude Code如何用React构建CLI应用
前端·react.js·前端框架