- 浏览: 578723 次
- 性别:
- 来自: 苏州
文章分类
- 全部博客 (206)
- Flask (1)
- JavaScript (3)
- Core Java (41)
- XML (1)
- Oracle (11)
- 软件安装及环境配置 (0)
- 其它 (9)
- 面试/笔试 (5)
- 项目 (0)
- JDBC (11)
- Servlet (4)
- MySql (4)
- JNDI (0)
- Hibernate (11)
- Java模式和构架设计 (0)
- Web设计 (22)
- JSP (8)
- Struts (13)
- Tomcat (2)
- Marven (2)
- SVN (2)
- Swing/AWT (1)
- jQuery (2)
- ExtJS (8)
- Python (22)
- Flex (1)
- Django (7)
- 算法 (5)
- English (1)
- Twisted (1)
- Linux (3)
- Rails (1)
- SVG (3)
- PostgreSQL (1)
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
- element : 元素。
- padding : 内边距,也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距,也有资料将其翻译为空白或空白边。
由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果您希望边框出现,就必须声明一个边框样式。
外边距合并
外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。
简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。
发表评论
-
css note
2012-09-05 22:43 11201. input 高度 .input-defau ... -
单行文本过长 自动换行
2012-05-04 12:47 1742white-space:pre-wrap;/*css-3*/ ... -
input中readonly和disable的区别
2012-02-05 18:36 1782<input type="text&q ... -
Web小细节
2010-12-20 20:09 8071.div标签居中显示要加上属性margin:auto; ... -
插入样式表的方法
2010-12-19 11:01 1084插入样式表的方法: a)内联式样式表:直接写在HTML标签中。 ... -
CSS列表、表格、轮廓
2010-12-13 10:46 2299CSS 列表 CSS 列表属性允许你放置、改变列表项标志,或 ... -
CSS背景、文本、字体
2010-12-13 10:13 2172CSS 背景 CSS 允许应用纯色作为背景,也允许使用背 ... -
插入CSS样式表的三种方式
2010-12-13 09:43 3961如何插入样式表 当读 ... -
CSS选择器
2010-12-13 09:21 1043CSS,层叠样式表 (Cascadin ... -
为什么要使用XHTML
2010-12-10 08:36 1030我们认为万维网上的许多页面都包含着糟糕的 HTML 代码。 ... -
如何升级至 XHTML
2010-12-09 11:36 1081添加文件类型声明 将下面的文件类型声明添加至每页的首行: ... -
XHTML DTD
2010-12-09 10:29 9753种文档类型声明 DTD 规定了使用通用标记语言(SG ... -
XHTML 语法
2010-12-09 10:17 1118编写 XHTML 代码需要纯净的 HTML 语法。 ... -
XHTML 与 HTML 之间的差异
2010-12-09 10:00 1055最主要的不同: XHTML 元素必须被正确地嵌套。 ... -
HTML 4.01 / XHTML 1.0标签列表(按功能排列)
2010-12-09 09:41 1784按功能类别排列 DTD:指示在哪种 XHTML 1.0 DT ... -
HTML 4.01/XHTML 1.0标签列表(按字母排列)
2010-12-09 09:21 2067按字母顺序排列 DTD:指示在哪种 XHTML 1.0 DT ... -
HTTP 状态消息
2010-12-09 09:14 9091xx: 信息 消息: 描述 ... -
HTML事件属性
2010-12-09 09:07 1219HTML4的新特性之一是可 ... -
div和span的区别
2010-11-22 11:41 1249DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象 ... -
<%@ include file=""%><jsp:include page=">区别
2010-11-19 13:57 1223我们都知道在jsp中include有两种形式,分别是 & ...
相关推荐
HTML元素的框架模型,理解它在网页中设计HTML元素的样式很简单,而且让你的元素在网页中的布局显示更容易上手
CSS框模型是网页布局的基础,它定义了网页元素如何占据空间,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。内容是元素实际显示的信息,内边距则提供了元素内容与边框之间的空间,通常用于...
总之,CSS框模型是理解和创建复杂网页布局的关键,通过精确控制内容、内边距、边框和外边距,可以实现各种视觉效果和布局需求。在实践中,要注意浏览器的兼容性问题,并灵活运用内边距和外边距来调整元素间的空间...
前端学习笔记-CSS(2)_css框模型 8.边框(盒子模型) margin,外边框,指当前标签的边框和其他标签或父标签的距离。 padding,内边框,指当前标签的边框和内部文本的距离。
**CSS3 框模型(盒子模型)详解** 在网页设计中,CSS3框模型(Box Model)是理解和布局页面元素的关键概念。它定义了网页元素如何占据和影响页面空间,包括元素的内容区域、内边距、边框和外边距。框模型使得开发者...
**CSS盒模型详解** 在网页设计与开发中,CSS(层叠样式表)盒模型是理解元素布局和尺寸计算的关键概念。盒模型定义了元素如何占据空间,包括内容区域、内边距、边框和外边距。了解CSS盒模型对于优化页面布局和解决...
做过前台设置的都知道css存在两种盒模型,W3C标准的方框模型和IE浏览器的方框模型。除IE以外的大多数浏览器只支持W3C方框模型。IE浏览器能够根据页面的呈现模式的定义而是用对性的方框模式。已用哪中呈现的模式取决...
**CSS盒模型** 在网页设计中,CSS(层叠样式表)盒模型是理解布局的基础。它描述了HTML或XML元素如何占据空间并相互影响。盒模型由元素的内容区域、内边距(padding)、边框(border)以及外边距(margin)组成,...
**CSS盒模型详解** 在网页设计中,CSS(Cascading Style Sheets)盒模型是理解元素布局的关键。盒模型描述了HTML或CSS元素如何占据空间并与其他元素交互。这个概念对于精确控制页面布局至关重要,特别是在响应式...
【CSSDesk CSS沙盒模型制作工具详解】 在Web前端开发中,CSS(Cascading Style Sheets)是用于控制网页布局和样式的语言。为了便于测试和调试CSS代码,开发者们通常会利用各种在线沙盒环境,如CssDesk,来快速预览...
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素(图片、段落、单元格等)进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法,才能真正地控制好页面中的各个元素。本节主要介绍...
CSS盒子模型是网页布局的基础,它是CSS(Cascading Style Sheets)中用于描述网页元素在屏幕上占用空间的方式。深入理解盒子模型对于精确控制网页元素的布局至关重要。在本实战中,我们将探讨盒子模型的各个组成部分...
9. CSS框模型:CSS框模型是指HTML元素的框模型,包括margin、border、padding和content区域。 10. CSS超链接和设置光标属性:CSS可以设置超链接的样式,包括链接的颜色、背景颜色、文字装饰、hover效果等。也可以...
### CSS盒模型的应用知识介绍与基础教学 #### CSS盒模型概念 CSS盒模型(CSS Box Model)是一个核心的概念,它定义了元素如何在网页中呈现以及元素之间如何相互作用。简单来说,每个HTML元素都可以被视为一个矩形...
- **CSS框模型**:讲解盒模型的概念,包括边距、边界、填充和宽度之间的关系。 - **CSS定位**:探讨不同的定位方式,如静态定位、相对定位、绝对定位和固定定位。 - **CSS高级**:涵盖更复杂的CSS技巧,如伪类、...
CSS 盒模型详解 CSS 盒模型是 HTML+CSS 中最核心的基础知识之一,它规定了网页元素如何显示以及元素间相互关系。CSS 盒模型是由 content(内容区)、padding(填充区)、border(边框区)和 margin(外边距区)四个...
CSS 盒子模型结构剖析 CSS 盒子模型结构是 div+css 技术的基础组成部分,它主要解决了传统的 table 表格嵌套问题。盒子模型可以看成是网页的一个区块,也可以看成是大区块中的一个“区块元素”。既然是区块,...
【彻底弄懂CSS盒模型】 CSS盒模型是前端开发中至关重要的概念,它定义了网页元素如何占据空间和相互布局。CSS盒模型由四个部分组成:内容(content)、内边距(padding)、边框(border)和外边距(margin)。理解盒模型...
CSS提供了一种机制来定义元素的布局,这一部分通常称为CSS框模型。在框模型中,每个元素被看作一个矩形的盒子,它包括内容、内边距(padding)、边框(border)和外边距(margin)。在进行Web设计时,这个模型非常...
**CSS盒子模型详解** 在网页设计与开发中,CSS(层叠样式表)扮演着至关重要的角色,其中CSS盒子模型是理解布局和元素尺寸计算的关键概念。本资料将深入探讨CSS盒子模型,帮助你掌握这一核心知识。 **一、基本概念...