CSS 框模型

一,CSS 框模型 (Box Model)

规定元素框处理元素内容、内边距边框 和 外边距 的方式。

如下图所示:

二,CSS padding属性

CSS padding 属性定义元素边框与元素内容之间的空白区域。padding 属性接受长度值或百分比值,但不允许使用负值。

可以直接设置四个方向(上,右,下,左)的内边距:

  1. h1 {padding: 10px;}
  2.  
  3. 或者
  4. h1 {padding: 10px 0.25em 2ex 20%;}

也可通过使用下面四个单独的属性,分别设置上、右、下、左内边距:

内边距的百分比数值

前面提到过,可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。

下面这条规则把段落的内边距设置为父元素 width 的 10%:

  1. p {padding: 10%;}

例如:如果一个段落的父元素是 div 元素,那么它的内边距要根据 div 的 width 计算。

  1. <div style="width: 200px;">
  2. <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
  3. </div>

注意:上下内边距与左右内边距一致;即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。

默认值: 0
继承性: no
版本: CSS1
JavaScript 语法: object.style.padding="10px 5px"

可能的值

描述
auto 浏览器计算内边距。
length 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的内边距。
inherit 规定应该从父元素继承内边距。

三,CSS 边框属性

CSS border 属性允许你规定元素边框的样式(border-style)、宽度(border-width)和颜色(border-color)。(如果有可见背景的话,元素的背景会延伸到边框区域,因为元素的背景是内容、内边距和边框区的背景)

既可以直接定义边框的样式、宽度、颜色,也可以定义单边样式、宽度、颜色。如下图所示:

属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

四,CSS margin属性

围绕在元素边框的空白区域是外边距(默认是空白的。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

可以直接设置四个方向(上,右,下,左)的外边距:

  1. h1 {margin: 10px;}
  2.  
  3. 或者
  4. h1 {margin: 10px 0.25em 2ex 20%;}

也可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:

默认值: 0
继承性: no
版本: CSS1
JavaScript 语法: object.style.margin="10px 5px"

可能的值

描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。
下面介绍:外边距合并

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。(ps:只有普通文档流中块框的垂直外边距才会放生外边距合并,行内框、浮动框或绝对定位框之间的外边距不会合并。)

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

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

尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。

假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:

如果这个外边距遇到另一个元素的外边距,它还会发生合并:

这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距:

 

CSS 框模型的更多相关文章

  1. CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

    转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...

  2. CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  3. CSS学习总结2:CSS框模型

    1.CSS框模型概述 CSS框模型规定了元素框处理元素内容.内边框.边框和外边框的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外 ...

  4. CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

  5. KB006: CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

  6. CSS框模型:一切皆为框 — 从行框说起

    一 行框 看图说话 css 行框 各部分详解 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最 ...

  7. CSS| 框模型-定位及相關屬性

    CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...

  8. css框模型

    元素的背景是内容.内边距和边框区的背景. css中:width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. bootstr ...

  9. CSS| 框模型-margin

    CSS margin 属性 设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做 ...

随机推荐

  1. test markdown

    Markdown和Haroopad介绍文档 [TOC "float:right"] 什么是Markdown Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John ...

  2. 在Package中处理 bit column

    SQL Server没有boolean类型,使用bit 类型来代替,bit类型有两个值:0 和 1. SSIS package中有boolean类型,SSIS自动将bit 类型转换成boolean类型 ...

  3. LINQ系列:Linq to Object元素操作符

    元素操作符从一个序列返回单个指定的元素. 1. DefaultIfEmpty DefaultIfEmpty操作符将一个空集合替换为包含默认的单个值的集合.在返回序列为空且又需要返回一些对象时,可以通过 ...

  4. 【Win 10应用开发】如何知道UAP在哪个平台上运行

    面向22世纪的现代化应用程序可以同时在多种设备上运行,于是有朋友会有一个疑问:有时候,我们还真的需要判断一下,UAP应用程序在哪个平台上运行.尽管大多情况下我们不必要这样做,但某些特殊情况还得考虑.比 ...

  5. WPF绘制折线

    WPF后台绘制折线,填充到一个GRID下 private void btnPreview_Click(object sender, RoutedEventArgs e) { GridImg.Child ...

  6. IOS各种集合遍历效率对比

    前言: 对于ios项目开发中总会遇见各种集合遍历,出于对各种遍历效率的好奇心,所以准备写个测试程序测试一下 首先:先声明一个NSMutableArray,测试数据量分别是1000条,10000条,10 ...

  7. iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流

    上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewControlle ...

  8. 【记录】ASP.NET MVC View 移动版浏览的奇怪问题

    ASP.NET MVC View 中的一段代码: <span id="span_Id">@Model.ID</span> 没什么问题吧,浏览器浏览正常,查看 ...

  9. Oracle Tuning 基础概述01 - Oracle 常见等待事件

    对Oracle数据库整体性能的优化,首先要关注的是在有性能问题时数据库排名前几位等待事件是哪些.Oracle等待事件众多,随着版本的升级,数量还在不断增加,可以通过v$event_name查到当前数据 ...

  10. CodeIgniter-Lottery - php ci 抽奖辅助函数

    CodeIgniter-Lottery - php ci 抽奖辅助函数 Github https://github.com/xjnotxj/CodeIgniter-Lottery 用法 1. 移入文件 ...