- 浏览: 567637 次
- 性别:
- 来自: 苏州
文章分类
- 全部博客 (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 10681. input 高度 .input-defau ... -
单行文本过长 自动换行
2012-05-04 12:47 1677white-space:pre-wrap;/*css-3*/ ... -
input中readonly和disable的区别
2012-02-05 18:36 1714<input type="text&q ... -
Web小细节
2010-12-20 20:09 7621.div标签居中显示要加上属性margin:auto; ... -
插入样式表的方法
2010-12-19 11:01 1038插入样式表的方法: a)内联式样式表:直接写在HTML标签中。 ... -
CSS列表、表格、轮廓
2010-12-13 10:46 2251CSS 列表 CSS 列表属性允许你放置、改变列表项标志,或 ... -
CSS背景、文本、字体
2010-12-13 10:13 2125CSS 背景 CSS 允许应用纯色作为背景,也允许使用背 ... -
插入CSS样式表的三种方式
2010-12-13 09:43 3912如何插入样式表 当读 ... -
CSS选择器
2010-12-13 09:21 1004CSS,层叠样式表 (Cascadin ... -
为什么要使用XHTML
2010-12-10 08:36 988我们认为万维网上的许多页面都包含着糟糕的 HTML 代码。 ... -
如何升级至 XHTML
2010-12-09 11:36 1044添加文件类型声明 将下面的文件类型声明添加至每页的首行: ... -
XHTML DTD
2010-12-09 10:29 9223种文档类型声明 DTD 规定了使用通用标记语言(SG ... -
XHTML 语法
2010-12-09 10:17 1065编写 XHTML 代码需要纯净的 HTML 语法。 ... -
XHTML 与 HTML 之间的差异
2010-12-09 10:00 1016最主要的不同: XHTML 元素必须被正确地嵌套。 ... -
HTML 4.01 / XHTML 1.0标签列表(按功能排列)
2010-12-09 09:41 1733按功能类别排列 DTD:指示在哪种 XHTML 1.0 DT ... -
HTML 4.01/XHTML 1.0标签列表(按字母排列)
2010-12-09 09:21 2005按字母顺序排列 DTD:指示在哪种 XHTML 1.0 DT ... -
HTTP 状态消息
2010-12-09 09:14 8611xx: 信息 消息: 描述 ... -
HTML事件属性
2010-12-09 09:07 1169HTML4的新特性之一是可 ... -
div和span的区别
2010-11-22 11:41 1191DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象 ... -
<%@ include file=""%><jsp:include page=">区别
2010-11-19 13:57 1181我们都知道在jsp中include有两种形式,分别是 & ...
相关推荐
HTML元素的框架模型,理解它在网页中设计HTML元素的样式很简单,而且让你的元素在网页中的布局显示更容易上手
CSS 框模型概述word文档,内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。
前端学习笔记-CSS(2)_css框模型 8.边框(盒子模型) margin,外边框,指当前标签的边框和其他标签或父标签的距离。 padding,内边框,指当前标签的边框和内部文本的距离。
单元二 CSS3样式表端基础前Web单元2-6 框模型(盒子模型)13内边距框模型概述42边框外边距文档结构与标准文档流span为inline元素,若干个inline元素是水平排列的body,ul,li为block元素,它们独占一整行,兄弟之间...
.
做过前台设置的都知道css存在两种盒模型,W3C标准的方框模型和IE浏览器的方框模型。除IE以外的大多数浏览器只支持W3C方框模型。IE浏览器能够根据页面的呈现模式的定义而是用对性的方框模式。已用哪中呈现的模式取决...
CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。 内边距、边框和外边...
1.1 CSS盒子模型概述 1.3 CSS 盒子模型边框 1.4 CSS盒子模型外边距 1.5CSS盒子模型的应用
css笔记整理(精简) 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式,集合样式) ...CSS 框模型概述
开元css框架 对css感兴趣的朋友可以下载看看
CSS3样式表- 框模型之补充.pptx
CSS教程——什么是CSS,CSS概述,CSS语法,CSS 高级语法,什么是CSS选择器,如何设置CSS背景,什么是CSS文本,如何设置CSS字体,如何设置CSS 列表属性,什么是CSS框模型,如何设置CSS边距,如何设置CSS边框,网页布局...
想深入理解CSS布局的可以看看这个了,详细讲解了网页新布局概念中的CSS架构-CSS盒子模型的行内框问题,希望大家多多讨论啊研究。
CSS 将所有的网页元素都看做是一个矩形框,这个框由元素的内容、填充(padding)、边框(border)和边界(margin)组成。
整个盒子模型在网页中所占的宽度:左边界+左边框+左填充+内容+右填充+右边框+右边界 CSS盒子模型的属性:内容属性:宽=width 高=height内填充属性(内容与边框之间的距离):padding外边距属性:margin(使用该...
CSS+HTML前言CSSHTML实战CSS+DIV布局(HTML内容可自行补充) 前言 大家好, 为了入门几能完成一个HTML+CSS的一个网页,所以我把CSS放在HTML的前面讲。...层: 这里需要引入CSS的重要盒模型 (CSS 框模型 (Box Mo
网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。CSS...