CSS 框模型 |
您所在的位置:网站首页 › 用css为表单添加边框怎么弄 › CSS 框模型 |
w3school 在线教程
HTML 系列教程
浏览器脚本
服务器脚本
编程教程
XML 系列教程
建站手册
参考手册
CSS 基础教程
CSS 教程
CSS 简介
CSS 语法
CSS 选择器
CSS 使用
CSS 注释
CSS 颜色
CSS RGB 颜色
CSS HEX 颜色
CSS HSL 颜色
CSS 背景
CSS 背景图像
CSS 背景重复
CSS 背景附着
CSS 简写背景属性
CSS 边框
CSS 边框宽度
CSS 边框颜色
CSS 边框各边
CSS 简写边框属性
CSS 圆角边框
CSS 外边距
CSS 外边距合并
CSS 内边距
CSS 高度/宽度
CSS 框模型
CSS 轮廓
CSS 轮廓宽度
CSS 轮廓颜色
CSS 简写轮廓属性
CSS 轮廓偏移
CSS 文本
CSS 文本对齐
CSS 文本装饰
CSS 文本转换
CSS 文字间距
CSS 文本阴影
CSS 字体
CSS 字体样式
CSS 字体大小
CSS 谷歌字体
CSS 简写字体属性
CSS 图标
CSS 链接
CSS 列表
CSS 表格
CSS 中级教程
CSS Display
CSS max-width
CSS 定位
CSS 溢出
CSS 浮动
CSS 清除浮动
CSS 布局 - 浮动实例
CSS inline-block
CSS 对齐
CSS 组合器
CSS 伪类
CSS 伪元素
CSS 不透明度
CSS 导航栏
CSS 垂直导航栏
CSS 水平导航栏
CSS 下拉菜单
CSS 图片库
CSS 图像精灵
CSS 属性选择器
CSS 表单
CSS 计数器
CSS 网站布局
CSS 单位
CSS 特异性
CSS3 高级教程
CSS 圆角
CSS 边框图像
CSS 背景
CSS 颜色
CSS 渐变
CSS 径向渐变
CSS 阴影
CSS box-shadow
CSS 文本效果
CSS 网络字体
CSS 2D 转换
CSS 3D 转换
CSS 过渡
CSS 动画
CSS 工具提示
CSS 图像样式
CSS object-fit
CSS 按钮
CSS 分页
CSS 多列
CSS 用户界面
CSS 变量
CSS 覆盖变量
CSS 变量 - JavaScript
CSS 变量 - 媒体查询
CSS Box Sizing
CSS Flexbox
CSS 媒体查询
CSS 媒体查询实例
CSS 响应式设计
RWD 简介
RWD 视口
RWD 网格视图
RWD 媒体查询
RWD 图像
RWD 视频
CSS 网格教程
CSS 网格布局模块
CSS 网格容器
CSS 网格项目
CSS 实例
CSS 实例
CSS 测验
CSS 测验
CSS 参考手册
CSS 参考手册
CSS 浏览器支持
CSS 选择器
CSS 函数
CSS 单位
CSS 听觉
CSS 网络安全字体
CSS 可动画制作
CSS 单位
CSS 颜色
CSS 颜色值
CSS 默认值
CSS 实体
CSS 框模型
CSS 高度/宽度
CSS 轮廓
CSS 框模型
所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒模型”或“框模型”。 CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括:外边距、边框、内边距以及实际的内容。下图展示了框模型: 对不同部分的说明: 内容 - 框的内容,其中显示文本和图像。 内边距 - 清除内容周围的区域。内边距是透明的。 边框 - 围绕内边距和内容的边框。 外边距 - 清除边界外的区域。外边距是透明的。框模型允许我们在元素周围添加边框,并定义元素之间的空间。 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。 提示:背景应用于由内容和内边距、边框组成的区域。 内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置: * { margin: 0; padding: 0; }在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。 假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图: #box { width: 70px; margin: 10px; padding: 5px; }提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。 提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。 实例演示框模型: div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; }亲自试一试 元素的宽度和高度为了在所有浏览器中正确设置元素的宽度和高度,您需要了解框模型如何工作。 重要提示:使用 CSS 设置元素的 width 和 height 属性时,只需设置内容区域的宽度和高度。要计算元素的完整大小,还必须把内边距、边框和外边距加起来。 实例元素的总宽度将是 350px: div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; }亲自试一试 计算如下: 320px(宽度) + 20px(左+右内边距) + 10px(左+右边框) + 0px(左+右外边距) = 350px元素的总宽度应该这样计算: 元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距 元素的总高度应该这样计算: 元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距 CSS 高度/宽度 CSS 轮廓 CSS 参考手册 CSS 实例 CSS 测验 CSS 课外书W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有,保留一切权利。 关于 W3School 帮助 W3School 使用条款 隐私条款 技术支持:赢科 蒙ICP备06004630号 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |