CSS 基础框盒模型介绍
当对一个文档进行布局(lay out)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)。CSS 决定这些盒子的大小、位置以及属性(例如颜色、背景、边框尺寸…)。
每个盒子由四个部分(或称区域)组成,其效用由它们各自的边界(Edge)所定义(原文:defined by their respective edges,可能意指容纳、包含、限制等)。如图,与盒子的四个组成区域相对应,每个盒子有四个边界:内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
内容区域 content area ,由内容边界限制,容纳着元素的“真实”内容,例如文本、图像,或是一个视频播放器。它的尺寸为内容宽度(或称 content-box 宽度)和内容高度(或称 content-box 高度)。它通常含有一个背景颜色(默认颜色为透明)或背景图像。
如果 box-sizing
为 content-box
(默认),则内容区域的大小可明确地通过 width
、min-width
、max-width
、height
、min-height
,和 max-height
控制。
内边距区域 padding area 由内边距边界限制,扩展自内容区域,负责延伸内容区域的背景,填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。
内边距的粗细可以由 padding-top
、padding-right
、padding-bottom
、padding-left
,和简写属性 padding
控制。
边框区域 border area 由边框边界限制,扩展自内边距区域,是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。
边框的粗细由 border-width
和简写的 border
属性控制。如果 box-sizing
属性被设为 border-box
,那么边框区域的大小可明确地通过 width
、min-width
, max-width
、height
、min-height
,和 max-height
属性控制。假如框盒上设有背景(background-color
或 background-image
),背景将会一直延伸至边框的外沿(默认为在边框下层延伸,边框会盖在背景上)。此默认表现可通过 CSS 属性 background-clip
来改变。
外边距区域 margin area 由外边距边界限制,用空白区域扩展边框区域,以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。
外边距区域的大小由 margin-top
、margin-right
、margin-bottom
、margin-left
,和简写属性 margin
控制。在发生外边距合并的情况下,由于盒之间共享外边距,外边距不容易弄清楚。
最后,请注意,除可替换元素外,对于行内元素来说,尽管内容周围存在内边距与边框,但其占用空间(每一行文字的高度)则由 line-height
属性决定,即使边框和内边距仍会显示在内容周围。
参见
- 布局与包含块
- CSS 层叠介绍
- 层叠和继承
规范
规范 | 状态 | 注释 |
---|---|---|
CSS Basic Box Model | Working Draft | |
CSS Level 2 (Revision 1) | Recommendation |
Though more precisely worded, there is no practical change. 尽管有了更详尽的描述,但没有实际上的变化。 |
CSS Level 1 | Recommendation |
Initial definition. 最初的定义。 |
参见
- CSS Key Concepts: CSS 语法, @规则, 注释, 优先级和继承, the 盒模型, 布局模式和视觉格式化模型,以及外边距合并,或者初始、计算、解析、指定、使用和实际值。 Definitions of 值语法、简写属性和可替换元素。
CSS 基础框盒模型介绍相关推荐
- CSS基础必备盒模型及清除浮动
盒模型 盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...
- CSS基础(二)--盒模型与浮动
盒模型 认识width和height 一个盒子中主要的属性有5个:width.height.padding.border.margin. width是"宽度"的意思,CSS中wid ...
- CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...
- 前端基础速成day03--文本属性and盒模型介绍
day03 回顾: 二维数据展示标签 表格 宽度高度自适应 <table><tr><td>div>a>img+p</td></tr&g ...
- 深入css布局 (1) — 盒模型 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- 【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点 思维导图 ...
- css --- [读书笔记] 盒模型(边框、内外边距)
说明 源代码 学习 盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位 目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距 能说出内边距的作用,设置不同数值分别代表 ...
- CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 外边距 属性设置 块级盒子水平居中 文字居中以及盒子居中 插入图片和背景图片的区别 清除元素的默认内外边距 外边距合并(只存在垂 ...
- (10)CSS 常用样式--盒模型扩展应用
一.清除默认样式 大部分标签都有一个浏览器加载的默认样式,会对布局造成一些影响.为了避免默认样式对整体布局效果造成影响,一定要清除默认样式. 盒模型属性中内外边距:大部分容器级标签都有默认边距,要么用 ...
最新文章
- 微信小游戏开发教程-游戏实现3
- socket传输结构体,c++,发送OK,recv返回字节大小正确但接受数据为空
- Failed to resolve:aar
- C#枚举中的位运算权限分配浅谈
- 搜百度 php教程,jquery php 百度搜索框智能提示效果_PHP教程
- Spring积累总结
- 4-6:TCP协议之滑动窗口
- Netty框架多人聊天案例,代码示例
- csol永恒python属性_狗神弑神参上!CSOL缔造者新添Lua功能脚本
- 电脑黑屏系统没激活的几种解决方法,必看!
- mongodb的基本使用
- 迅雷修改tracker服务器,qBittorrent 添加自定义 Tracker 的方法
- 垃圾分类小程序拍照识别垃圾分类微信小程序开发源码
- 2022-2028全球独立水疗浴缸行业调研及趋势分析报告
- 信度和效度经典例子_信度和效度的区别
- [BJOI2019]排兵布阵
- 敏捷开发产品管理系列之四:新产品研发
- navicat for mysql v11企业版破解
- EAP-TLS/EAP-TTLS/EAP-PEAP
- Java 日志框架详解
热门文章
- 单元测试原来是这样的呼
- Hbase Interface HConnection
- servlet加载资源两种方式-内外(初始化参数).properties文件
- leetcode: Roman to Integer
- 十六进制字符串转整形
- 博客诞生过程与变革:十年来谁是写博客第一人?
- 842. Split Array into Fibonacci Sequence
- 机器学习的一些注意事项
- oracle 外部表 时间戳,Hive建立外部表与时间戳转换(含建dual表,修改列名,row_number() 函数等)...
- javascript option 菜单图标_MacBook上神奇的Option键