文档章节

CSS 盒子模型 Box Model

ivon_lee
 ivon_lee
发布于 2014/04/19 10:22
字数 1177
阅读 327
收藏 30

CSS 盒子模型概述

  • element : 元素。

  • padding : 内边距,也有资料将其翻译为填充。

  • border : 边框。

  • margin : 外边距,也有资料将其翻译为空白或空白边。


盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。 

盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟悉的标准盒子模型


和上面看到的图有些区别,这里把各属性支持也画出来。

IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。 

1、W3C的标准Box Model:

  /*外盒尺寸计算(元素空间尺寸)*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算(元素大小)*/
  Element Height = content height + padding + border (Height为内容高度)
  Element Width = content width + padding + border (Width为内容宽度)

 2、IE)传统下Box Model(IE6以下,不含IE6版本或“QuirksMode下IE5.5+”):

  /*外盒尺寸计算(元素空间尺寸)*/
  Element空间高度 = content Height + margin (Height包含了元素内容宽度,边框宽度,内距宽度)
  Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
  /*内盒尺寸计算(元素大小)*/
  Element Height = content Height(Height包含了元素内容宽度,边框宽度,内距宽度)
  Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

具体举例:
例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,

如果用标准 W3C 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2+10*2+50=112px,盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;

如果用IE 盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px

那应该选择哪中盒子模型呢?当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢?很简单,就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明,那么各个浏览器会根据自己的行为去理解网页,即 IE 浏览器会采用 IE 盒子模型去解释你的盒子,而 FF 会采用标准 W3C 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,如果加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了

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

提示:背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {
  margin: 0;
  padding: 0;
}

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

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}


提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。

提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。



参考地址:http://www.w3school.com.cn/css/css_boxmodel.asp

本文转载自:

ivon_lee
粉丝 3
博文 15
码字总数 14962
作品 0
宝山
私信 提问
加载中

评论(1)

Weathery
Weathery
很好。
前端进阶之什么是BFC?BFC的原理是什么?如何创建BFC?

作者:陈大鱼头 github: KRISACHAN 链接:github.com/YvetteLau/S… 背景:最近高级前端工程师 刘小夕 在 github 上开了个每个工作日布一个前端相关题的 repo,怀着学习的心态我也参与其中,...

陈大鱼头
05/29
0
0
CSS 框模型(Box Model)

CSS 框模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实...

toddler
2014/12/28
821
2
【Hello CSS】第二章-CSS的逻辑属性与盒子模型

首发:krisachan.github.io 作者:陈大鱼头 github: KRISACHAN 在上一篇的第一章CSS的语法与工作流中介绍了的语法规则以及基本的渲染流程。本篇则会分享的逻辑属性以及盒子模型。 首先开篇之...

陈大鱼头
03/06
0
0
想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC

视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子。 哪些因素控制了这些布局 下文...

mooonx
2017/11/29
0
0
深入CSS基础之box model

阅读注意事项 本篇文章的依赖主要是CSS2.1 specification 8. box model 和 CSS Box Model Module Level 3。 本篇整体比较细节和理论,可能会看起来枯燥,我尽量讲的逻辑简单些。个人认为有时...

JunYu
02/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SSH安全加强两步走

从 OpenSSH 6.2 开始已经支持 SSH 多因素认证,本文就来讲讲如何在 OpenSSH 下启用该特性。 OpenSSH 6.2 以后的版本多了一个配置项 AuthenticationMethods。该配置项可以让 OpenSSH 同时指定...

xiangyunyan
34分钟前
4
0
C或C++不是C/C++

http://www.voidcn.com/article/p-mucdruqa-ws.html

shzwork
今天
6
0
OSChina 周六乱弹 —— 如何将梳子卖给和尚

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @for_ :划水五分钟,专注两小时。分享Various Artists的单曲《贝多芬第8号钢琴奏鸣曲悲伤的第三乐章》: 《贝多芬第8号钢琴奏鸣曲悲伤的第三乐...

小小编辑
今天
198
8
ES5

什么是ES5:比普通js运行要求更加严格的模式 为什么:js语言本身有很多广受诟病的缺陷 如何:在当前作用域的顶部添加:"use strict" 要求: 1、禁止给未声明的变量赋值 2、静默失败升级为错误...

wytao1995
今天
7
0
c++ 内联函数调用快的原因

见图片分析

天王盖地虎626
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部