`

CSS 框模型

CSS 
阅读更多


元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

  • element : 元素。
  • padding : 内边距,也有资料将其翻译为填充。
  • border : 边框。
  • margin : 外边距,也有资料将其翻译为空白或空白边。

由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果您希望边框出现,就必须声明一个边框样式。

外边距合并

外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。

简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。

外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。
 

  • 大小: 7.8 KB
分享到:
评论

相关推荐

    css框架模型

    HTML元素的框架模型,理解它在网页中设计HTML元素的样式很简单,而且让你的元素在网页中的布局显示更容易上手

    CSS 框模型概述word文档

    CSS 框模型概述word文档,内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。

    前端学习笔记-CSS(2)_css框模型

    前端学习笔记-CSS(2)_css框模型 8.边框(盒子模型) margin,外边框,指当前标签的边框和其他标签或父标签的距离。 padding,内边框,指当前标签的边框和内部文本的距离。

    CSS3样式表-框模型(盒子模型).pptx

    单元二 CSS3样式表端基础前Web单元2-6 框模型(盒子模型)13内边距框模型概述42边框外边距文档结构与标准文档流span为inline元素,若干个inline元素是水平排列的body,ul,li为block元素,它们独占一整行,兄弟之间...

    css框模型概述及css边框.docx

    .

    JQuery 确定css方框模型(盒模型Box Model)

    做过前台设置的都知道css存在两种盒模型,W3C标准的方框模型和IE浏览器的方框模型。除IE以外的大多数浏览器只支持W3C方框模型。IE浏览器能够根据页面的呈现模式的定义而是用对性的方框模式。已用哪中呈现的模式取决...

    css盒子模型 css margin 外边框合并

    CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。 内边距、边框和外边...

    tytttta#CSS-learning#五CSS盒子模型1

    1.1 CSS盒子模型概述 1.3 CSS 盒子模型边框 1.4 CSS盒子模型外边距 1.5CSS盒子模型的应用

    css笔记整理_1.pdf

    css笔记整理(精简) 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式,集合样式) ...CSS 框模型概述

    开元css框架

    开元css框架 对css感兴趣的朋友可以下载看看

    CSS3样式表- 框模型之补充.pptx

    CSS3样式表- 框模型之补充.pptx

    CSS教程

    CSS教程——什么是CSS,CSS概述,CSS语法,CSS 高级语法,什么是CSS选择器,如何设置CSS背景,什么是CSS文本,如何设置CSS字体,如何设置CSS 列表属性,什么是CSS框模型,如何设置CSS边距,如何设置CSS边框,网页布局...

    CSS行内框架构

    想深入理解CSS布局的可以看看这个了,详细讲解了网页新布局概念中的CSS架构-CSS盒子模型的行内框问题,希望大家多多讨论啊研究。

    css box模型祥解

    CSS 将所有的网页元素都看做是一个矩形框,这个框由元素的内容、填充(padding)、边框(border)和边界(margin)组成。

    css盒子模型详解加示例

     整个盒子模型在网页中所占的宽度:左边界+左边框+左填充+内容+右填充+右边框+右边界 CSS盒子模型的属性:内容属性:宽=width 高=height内填充属性(内容与边框之间的距离):padding外边距属性:margin(使用该...

    HTML+CSS实战入门这篇就够了

    CSS+HTML前言CSSHTML实战CSS+DIV布局(HTML内容可自行补充) 前言 大家好, 为了入门几能完成一个HTML+CSS的一个网页,所以我把CSS放在HTML的前面讲。...层: 这里需要引入CSS的重要盒模型 (CSS 框模型 (Box Mo

    看完不迷糊的 CSS 盒子模型介绍

    网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。CSS...

Global site tag (gtag.js) - Google Analytics