Html任何一个元素(element)都可以当成一个盒子(box)来看待，可以结合现实中的盒子来理解下文，下文其中一些单词应该是通俗易懂的需要记录的单词。

基本情况

每一个盒子都有一个内容区域（content area）,例如盒子里的一堆文字或者一张图片的边界，其周围是具有一定宽度的padding area,border area,和margin area，还有cotent area（类似于下图中线条的中间跑道部分）。

每个area都是具有一定宽度或高度的，譬如在上下方的就是占用高度，在两侧的就是占用宽度。其边缘我们称之为edge（类似于下图中的线条部分，其实是没有占空间的，类似于area的最外层意思）。content area的边缘称之为content edge 或者 inner edge,padding area的边缘称之为padding edge，Border area的边缘称之为border edge，Margin area的边缘称之为margin edge or outer edge。

每个盒子标配margin-中文称之为外边距或外补白,padding内边距内补白,border边框三道，最里头才是我们的内容区域啦，比较形象的说明可见下图：

盒子的margin,padding,border可以分成四个方向，上，下，左，右，如上图，LM代表Left Margin,LB代表Left Border,LP代表Left Padding.

以上就是一个盒子模型的基本常识，也是页面CSS布局的基本单元，Margin,Padding,Border默认不占空间，其值由用户设定，比较简单，最重要的莫过于Content Area内容区域宽高的计算，Content Area的高度Content Area Height称之Content Height，响应宽度称之Content Wdith，不仅关乎自己占多大地盘，也关乎子孙后代是否有足够的地盘去发挥展示，影响其最终结果的主要有以下几因素：

自身Width 和 Height属性，我们所说的一般的Width和Height就是Content Width,Content Height，注意一点的是即使用户Css没指定其值，它也有自己的初始值auto，这是最基本的一点。

是否包含子元素内容，如文本或者还是一个box（不管是inline还是block），也就是子元素的可能宽高计算会影响到父元素；

自身display属性值类型，譬如table类型，如果inline类型的计算规则跟block的也不一样；

等等，关于这块的计算不在本文的范围内，这块也比较复杂，后期会进行专门讲解，名字暂定，any box之其宽高计算。

另外需要注意一点的是，Background的设置只会影响到Border area,Padding Area,Content Area，至于Margin Area的背景总是透明的。

举个栗子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<HTML>

  <HEAD>

    <TITLE>Examples of margins, padding, and borders</TITLE>

    <STYLE type="text/css">

      UL {

        background: yellow;

        margin: 12px 12px 12px 12px;

        padding: 3px 3px 3px 3px;

      }

      LI {

        color: white;

        background: blue;

        margin: 12px 12px 12px 12px;

        padding: 12px 0px 12px 12px;

        list-style: none

      }

      LI.withborder {

        border-style: dashed;

        border-width: medium;

        border-color: lime;

      }

    </STYLE>

  </HEAD>

  <BODY>

    <UL>

      <LI>我没有border

      <LI class="withborder">S我有border

    </UL>

  </BODY>

</HTML>

Chrome下会是这个样子：

解读这个结果：

  1. 每一个li box（Html学科称element/node，css学科称box）的content area
  2. 第一个li box的margin-bottom和第二个的margin-top的margin发生了margin合并现象，只有在同一个BFC环境下而且是上下margin才会发生margin合并。
  3. 可以看到margin的背景色是透明的，如果其在另一个content area下且此area有背景色的话，那看到的它就是这个颜色。
  4. 实际一个盒子的宽高，不仅仅只是Content Height，还包括其它，Box Height=Content Height+Top Padding Height+Top Margin Height+Top Border Height，宽度同理。譬如一条Css{width:100px;margin:1px;border:1px,padding:1px;},box其实际占用的宽度是103px而不是100.这是一个容易引起误解的地方，这点一定需要注意。

CSS如何使用

　　Margin

body { margin: 2em }         /* all margins set to 2em */

body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */

body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

　　说明：一个是简写代表的含义还有就是CSS具有优先级，最终上面的与下面效果等效：

body {

  margin-top: 1em;

  margin-right: 2em;

  margin-bottom: 3em;

  margin-left: 2em;        /* copied from opposite side (right) */

}

　　需要注意的一点是，同width,height属性一样，margin-top和margin-bottom不能应用于span类非可替换行内块级别的box上，即应用不起作用，

　　其它属性如margin-right，padding,border不受限制。

　　Padding

　　　　简写顺序与margin同，其它没啥可说的

　　Border

　　　　没啥可说的

神奇的Margin合并效果

Margin或Padding，如何选择？


如果有border插一脚，包含Border的话，其实还是很好选择的，不同的选择，渲染出来的模样也会不一样。

Margin可以负值，可以实现类似于position定位的功能，能带着内容一起去旅游，Padding只能是不小于0。

Margin没背景，而Padding有，受盒子的Background属性影响。

Margin会发生合并现象，Padding不会。

这俩有时候的确能达到一样的效果，有一条原则是如果是涉及到跟其它box打架争地盘，还得靠Margin，如果想让自己的孩子过得好，显得不那么挤得慌，那就用Padding。

CSS基础深入之细说盒子模型的更多相关文章

  1. CSS学习篇核心之——盒子模型

    概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...

  2. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  3. CSS魔法（一） 盒子模型

    序言 盒子模型(橘子橘子皮) 一个盒子,包括:外边距(margin).边框(border).内边距(padding)以及最中间的内容(content). margin.padding <styl ...

  4. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  5. jQuery CSS操作及jQuery的盒子模型

    jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型

  6. CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型

    CSS中盒子模型的组成由内容区(content).内边距(padding).边框(border).外边距(margin)组成.内边距可细分为 padding-top.padding-right.pad ...

  7. css中的f弹性盒子模型的应用案例

    案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...

  8. CSS（六）：盒子模型

    一.什么是盒子模型 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版. 从上图可以看到标准的盒子模型范围包括margin(外边距).border(边框).padding(内边距).con ...

  9. CSS 样式、布局、盒子模型

    Css内容: 常用样式: 字体    颜色   背景 布局: 浮动   定位   标签特性 标签盒子模型:  边距   边框 动画: 旋转 渐变 注意:Css引路径从css文件里找   Html和js ...

随机推荐

  1. delphi 仅带下划线的TEdit控件

    在做录入框的时候,很希望有一个只带下划线的文本框,网上介绍的很多,有自己做组件的,须不知Delphi下只需要简单设置几个属性即可达到目的.

  2. java 中的this关键字的几种用法

    转自:http://blog.csdn.net/anmei2010/article/details/4091227 1.     当成员变量和局部变量重名时,在方法中使用this时,表示的是该方法所在 ...

  3. 爬虫学习之基于Scrapy的网络爬虫

    ###概述 在上一篇文章<爬虫学习之一个简单的网络爬虫>中我们对爬虫的概念有了一个初步的认识,并且通过Python的一些第三方库很方便的提取了我们想要的内容,但是通常面对工作当作复杂的需求 ...

  4. Huawei HG556a A版 刷 openwrt

    一直想玩玩openwrt,调研了一下 HG556a尽管散热很烂,但性价比超高,于是淘宝入手一台A版,A版和C版区别为wifi芯片: 到货后在网上找了几个教程便开始动手刷openwrt,但刷机的过程中还 ...

  5. table 中实现 控制 指定列的 左对齐 右对齐方式

    .listTable{ border-collapse:collapse; border-top:1px solid #8c9594; border-right:1px solid #8c9594; ...

  6. Asp.Net MVC过滤器小试牛刀

    在上学期间学习的Asp.Net MVC,基本只是大概马马虎虎的了解,基本处于知其然而不知其所以然.现在到上班,接触到真实的项目,才发现还不够用,于是从最简单的过滤器开始学习.不得不说MVC的过滤器真是 ...

  7. 在Hadoop分布式文件系统的索引和搜索

    FROM:http://www.drdobbs.com/parallel/indexing-and-searching-on-a-hadoop-distr/226300241?pgno=3 在今天的信 ...

  8. python学习笔记21（正则表达式）

    正则表达式模式: 模式 描述 ^ 匹配的开始的 $ 匹配行尾 . 匹配除换行符的任何单个字符.使用-m选项允许其匹配换行符也是如此. [...] 匹配括号内任何单个字符 [^...] 匹配非单个字符集 ...

  9. SwfUpload vs里运行可以上传文件，放到iis上上传就报404错误。

    网上的答案都是说swfupload 的upload_url 路径要设置成绝对路径,但是我也设置了,但是还是不行,然后又找了方法,终于找到了,点击这里查看 解决办法: <system.webSer ...

  10. 'vt100': unknown terminal type.

    在Linux终端执行clear或top命令时出现:vt100: unknown terminal type的错误 1.临时办法,下次启动失效,需要重新执行 执行以下命令 $ printenv | gr ...