web前端入门到实战：CSS的逻辑属性与盒子模型

先开篇之前先提个问题：

为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？

先不要急着往下翻，大家先思考一下。

这个问题的答案，鱼头会在文章中给出，欢迎大家带着这个问题往下翻阅，如果已经知道答案，也可以看看跟大家所知道的答案是否一致。

CSS的逻辑属性

2017年5月18日，W3C的 CSS工作组(CSS Working Group) 发布了 CSS逻辑属性和值(CSS Logical Properties and Values Level 1) 的首份工作草案(First Public Working Draft)。不同的书写模式(writing mode)中，可以抽取出共性的抽象概念(如开始位置，或行)，这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。该 CSS 模块给出了用于通过逻辑方式(而不是基于物理坐标、书写方向和维映射等)控制布局的逻辑属性和取值(logical properties and values)。这个模块来源于CSS21中关于逻辑属性和值的特性。

对于前端来说，我们一直习惯于使用top 、 right 、 bottom、 left来定义我们的HTML元素，这跟我们物理上的概念是一致的。但是对于CSS这个原本是为了服务于图文展示才诞生的语言来说，其实是不匹配的，为什么这么说？

writing-mode

writing-mode：定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

writing-mode一共有以下5个改变HTML文本书写规则的值(还有几个是用在SVG上的，本文不予讨论)：

writing-mode: horizontal-tb;

writing-mode: horizontal-tb 定义了内容从左到右水平流动，从上到下垂直流动。下一条水平线位于上一条线下方。

writing-mode: vertical-rl;

writing-mode: vertical-rl 定义了内容从上到下垂直流动，从右到左水平流动。下一条垂直线位于上一行的左侧。

writing-mode: vertical-lr;

writing-mode: vertical-lr定义了内容从上到下垂直流动，从左到右水平流动。下一条垂直线位于上一行的右侧。

writing-mode: sideways-rl; (仅Firefox41+实现)

writing-mode: sideways-rl定义了内容从上到下垂直流动，所有字形，甚至是垂直脚本中的字形，都设置在右侧。

writing-mode: sideways-lr;(仅Firefox41+实现)

writing-mode: sideways-lr内容从上到下垂直流动，所有字形，甚至是垂直脚本中的字形，都设置在左侧。

源码如下：

.wm-htb {
    writing-mode: horizontal-tb;
}
.wm-vrl {
    writing-mode: vertical-rl;
}
.wm-vlr {
    writing-mode: vertical-lr;
}
.wm-srl {
    writing-mode: sideways-rl;
}
.wm-slr {
    writing-mode: sideways-lr;
}
.text-content {
    width: 200px;
    padding: 20px;
    border: 1px solid;
    display: inline-block;
    vertical-align: top;
    padding-right: 100px;
}

<div class="text-content wm-htb">writing-mode: horizontal-tb;</div>
<div class="text-content wm-vrl">writing-mode: vertical-rl;</div>
<div class="text-content wm-vlr">writing-mode: vertical-lr;</div>
<div class="text-content wm-srl">writing-mode: sideways-rl;</div>
<div class="text-content wm-slr">writing-mode: sideways-lr;</div>

图示如下：

从上图可以发现，当我们设置了padding-right: 100px;的时候，不同的书写规则，展示效果是不一样的。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

在最开始的时候，HTML与CSS只服务于英语国家，但是随着互联网的发展，逐渐各个不同书写规则的国家也开始流行了起来。

我们原来的CSS逻辑属性是按照物理逻辑，从上(top)、右(right)、下(bottom)、左(left)划分的。

那么按着这个规则去修改文本属性时，就会出现上述这种不符合语法规则的状态。

大概也是基于这个原因，所以W3C发布了新的逻辑属性与值。

新旧逻辑属性对比

CSS新旧逻辑属性是完全不同的两种模型。

我们首先来看看新旧有的逻辑属性的对比图示：

左旧右新

通过上图可以得知新旧逻辑属性对应关系如下：

旧的逻辑属性新的逻辑属性 margin-top margin-block-start margin-right margin-inline-end margin-bottom margin-block-end margin-left margin-inline-start border-top border-block-start border-right border-inline-end border-bottom border-block-end border-left border-inline-start padding-top padding-block-start padding-right padding-inline-end padding-bottom padding-block-end padding-left padding-inline-start width inline-size height block-size

由上表可以得知，把Y轴方向的属性都改为了block，X轴方向的属性都改为了inline。

对于不同语系的国家，书写顺序会可能有很大的差异，意思就是block跟inline的方向不同。例如：

在英语国家 padding-inline-start=padding-left
在阿拉伯padding-inline-start=padding-right
在日本 padding-inline-start=padding-top

这就意味着旧的逻辑属性，在某些国家里会变得不合常理。

CSS定位

CSS的定位属性变化如下：

旧的逻辑属性新的逻辑属性 top inset-block-start bottom inset-block-end left inset-inline-start right inset-inline-end

例子如下：

/* 旧的逻辑属性 */
.popup{
  position:fixed;  
  top:0;
  bottom:0;
  left:0;
  right:0;
}
/* 新的逻辑属性 */
.popup{
   position:fixed;
   inset-block-start:0;  /*top - in English*/
   inset-block-end:0;    /*bottom - in English*/
   inset-inline-start:0; /*left - in English*/
   inset-inline-end:0;   /*right - in English*/
}
/* 新的逻辑属性支持简写 */
.popup{
   position:fixed;
   inset:0 0 0 0;   /*top, right, bottom, left - in English*/
}

CSS浮动

浮动float的属性也改了。

旧的逻辑属性新的逻辑属性 float: left float: inline-start float: right float: inline-end

text-align

文本text-align的属性也改了。

旧的逻辑属性新的逻辑属性 text-align: left text-align: start text-align: right text-align: end

direction

除了writing-mode，还有一个排版属性就是direction，跟writing-mode类似，不一样的是writing-mode是控住网页布局方向的，而direction是控制文本对齐方向的。属性如下：

direction: ltr;

默认值，让文本和其他元素从左到右显示。

direction: rtl;

让文本和其他元素从右到左显示。

吐槽一下，看到这里的切图仔们，抓紧跑路重构吧，等哪天此属性正式被启用，就真的GG了。不过我想应该会立个属性来选择性开启物理属性还是逻辑属性，不然这对前端来说将会是一场灾难！

CSS的盒子模型

基础盒模型(CSS basic box model)

当浏览器对一个render tree进行渲染时，浏览器的渲染引擎就会根据基础盒模型(CSS basic box model)，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由CSS来决定。

我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来包裹的，这些就是盒子

$$('*').forEach(e=> {
  e.style.border='1px solid';
})

图示如下：

每个盒子都由四个部分组成：

内容(content)

盒子(box) 的内容，显示标签内一切的文本，图案或者别的内容。

内边距(padding)

盒子(box) 内的填充物，样式为透明，主要负责扩展盒子内区域大小。

外边距(margin)

盒子(box) 外部的区域，样式为透明，负责隔离相邻的元素。

边框(border)

盒子(box) 的边界，负责隔离外边距以及内边距。

盒子模型的值

盒子模型一共有三个值：

content-box

content-box为标准的盒子模型。盒子的width跟height只包括盒子本身的width与height属性。

计算法则：

width=width

height=height

border-box

border-box为盒子模型可选的属性之一。盒子的width跟height包括content、padding跟border。这也是当文档处于 Quirks模式时Internet Explorer使用的盒模型。

计算法则：

width=width + border + padding

height=height + border + padding

padding-box

padding-box为非标准属性，曾经在Firefox中实现过，但是在Firefox 50中被删除。padding-box的width和height 属性包括内容和内边距，但是不包括边框和外边距。

图示：

这里吐槽一下，不知道为何没有margin-box，虽然并没有太大意义，当真实现了效果估计也很诡异，但是作为一个强迫症患者晚期，少了一个属性总感觉好不舒服。

视觉格式化模型(visual formatting model)

CSS的视觉格式化模型(visual formatting model) 是根据 基础盒模型(CSS basic box model) 将 文档(doucment) 中的元素转换一个个盒子的实际算法。
官方说法就是：它规定了用户端在媒介中如何处理文档树( document tree )。

每个盒子的布局由以下因素决定：

盒子的尺寸
盒子的类型：行内盒子 (inline)、行内级盒子 (inline-level)、原子行内级盒子 (atomic inline-level)、块盒子 (block)
定位：普通流、浮动、绝对定位
文档树中当前盒子的子元素 或 兄弟元素
视口(viewport) 的尺寸和位置
盒子内部图片的尺寸
其他某些外部因素

视觉格式化模型(visual formatting model) 的计算，都取决于一个矩形的边界，这个矩形，被称作是 包含块( containing block ) 。一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。

例子如下：

<div>
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>

以上代码为例，div 和 table 都是包含块。div 是 table 的包含块，同时 table 又是 td 的包含块，不是绝对的。

盒子的生成

盒子的生成是 CSS视觉格式化模型 的一部分，用于从文档元素生成盒子。盒子的类型取决于CSS display 属性。

块级元素当元素的display 为 block、list-item 或 table 时，它就是块级元素。
块级盒子块级盒子用于描述它与父、兄弟元素之间的关系。每个块级盒子都会参与块格式化上下文（block formatting context）的创建。每个块级元素都会至少生成一个块级盒子，即主块级盒子（principal block-level box） 主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与定位方案。一个同时是块容器盒子的块级盒子称为块盒子（block box）。
匿名盒子某些情况下需要进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能被CSS 选择器选中，也就是所有可继承的 CSS 属性值都为 inherit ，而所有不可继承的 CSS 属性值都为 initial。因此称为匿名盒子(anonymous boxes)。
行内元素当元素的display 为 inline、inline-block 或 inline-table 时，它就是行内级元素。显示时可以与其他行内级内容一起显示为多行。
行内盒子行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（inline formatting context）的创建。
匿名行内盒子类似于块盒子，CSS引擎有时候也会自动创建一些行内盒子。这些行内盒子无法被选择符选中，因此是匿名的，它们从父元素那里继承那些可继承的属性，其他属性保持默认值 initial。
行盒子行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。
run-in 盒子（在CSS 2.1的标准中移除了） run-in盒子可以通过display: run-in来设置，它既可以是块盒子，又可以是行内盒子，这取决于它后面的盒子的类型。

定位规则

一旦形成了盒子，CSS引擎就需要定位它们来完成布局。

定位所使用的规则如下：

普通流在普通流中，盒子会依次放置。在块格式化上下文（block formatting context）中，盒子在垂直方向依次排列。在行内格式化上下文（inline formatting context） 中，盒子则水平摆列。
浮动：当一个盒子的float不为none，并且position为static或relative时，该盒子为浮动定位。 float: left：盒子会定位到当前行盒子的开始位置（左侧）。 float: right：盒子会定位到当前行盒子的尾部位置（右侧）。
绝对定位：如果元素的position 为 absolute 或 fixed，该元素为绝对定位。在绝对定位中，盒子会完全从当前流中移除，并且不会再与其有任何联系。

作者：大前端世界
链接：https://www.jianshu.com/p/3446dd9b22a6

头条创作挑战赛#

页面布局的三大核心：盒子模型、浮动和定位。

今天来学习一下盒子模型，我们可以假设整个网页就好像是一个盒子，在盒子中分布排列多个大大小小的不同盒子。

盒子模型可以更好的帮助我们布局页面，使其整齐美观。

网页布局的本质：利用CSS将盒子在页面上整齐排列分布。

盒子模型组成：

边框(border)、外边距(margin)、内边距(padding)和实际内容(content)

盒子模型示意图

border：边框。

padding：内边距，盒子内容与盒子之间上下左右的距离。

margin：外边距，盒子与盒子之间上下左右的距离。

content：实际内容就是html元素，本篇就不多赘述。

边框（border）

border可以设置元素的边框属性。

border-width：边框宽度，也叫边框粗细。单位是px；

border-style：边框样式。常见样式有三种，solid实线、dashed虚线、dotted点线；

border-color：边框颜色。

复合语法：三个属性之间没有先后顺序。

border：border-width border-style border-color;

单独修改一条边框：border-top、border-right、border-bottom、borde-left。

<style>
        div {
            width: 150px;
            height: 150px;
            /* border-width:边框粗细 */
            border-width: 5px;
            /* border-color：边框颜色 */
            border-color: purple;
        }
        .boxSolid {
            /* border-style：边框样式   solid:实线*/
            border-style: solid;
        }
        .boxDashed {
            /* 虚线边框 */
            border-style: dashed;
        }
        .boxDotted {
            /* 虚线边框 */
            border-style: dotted;
        }
        .boxFh {
            border: 5px solid yellowgreen;
        }
        .boxDuli {
            /* 运用了层叠性 */
           border: 5px solid blue;
           border-top: 5px dotted green;
        }
        .boxFour {
            border-top: 5px dotted green;
            border-right: 2px solid  red;
            border-bottom: 4px dashed blue;
            border-left: 3px solid antiquewhite;
        }
    </style>
<div class="boxSolid">solid实线边框</div><br>
    <div class="boxDashed">dashed虚线边框</div><br>
    <div class="boxDotted">dotted点线边框</div><br>
    <div class="boxFh">边框的复合写法</div><br>
    <div class="boxDuli">单独设置一条边框</div><br>
    <div class="boxFour">四条边框样式皆不同</div>

测量盒子大小的方法：

第一种方法：在测量盒子的宽高时，直接测量边框内部的宽高，就能得到盒子实际大小。

第二种方法：首先从边框外部直接测量全部宽高，然后再减去边框宽高，就是盒子实际大小。

注意：边框会影响盒子的实际大小。

盒子宽度=实际内容宽度+左边框的值+右边框的值。

盒子高度=实际内容高度+上边框的值+下边框的值。

内边距（padding）

padding：是指在盒子模型中边框与实际内容之间的距离。

例如粉笔盒作为一个盒子，粉笔与粉笔盒子之间的距离就是padding值。

默认状态下，盒子中的实际内容紧贴盒子的左上角。

padding-top：上内边距。

padding-right：右内边距。

padding-bottom：下内边距。

padding-left：做内边距。

padding属性复合写法时可以有一到四个属性值。

1个值：代表上右下左四个相同内边距。

2个值：第一个值代表上下相同内边距。第二个值代表左右相同内边距。

3个值：第一个值代表上边距，第二个值代表左右内边距，第三个值代表下边距。

4个值：第一个值代表上边距，第二个值代表右边距，第三个值代表下边距、第四个值代表左边距。

<style>
        div {
            width: 150px;
            height: 150px;
            border: 1px solid black;
        }
        .boxPone {
            padding: 10px;
        }
        .boxPTwo {
            padding: 15px 15px;
        }
        .boxPthree {
            padding: 20px 15px 20px;
        }
        .boxPfour {
            padding: 25px 10px 15px 20px;
        }
        .boxGD {
            padding-top: 30px;
        }
</style>
<div class="boxPone">
  一个属性值代表<br>上下左右<br>四个相同内边距
</div><br>
<div class="boxPTwo">
      两个属性值：第一个数值代表上下相同的内边距，<br>
      第二个数值代表左右相同的内边距
</div>
    <br><div class="boxPthree">
      三个数值：第一个数值代表上边距，<br>
      第二个数值代表左右相同的内边距，<br>
      第三个数值代表下边距。
</div>
    <br><div class="boxPfour">
      四个数值：代表上右下左内边距，顺时针排序。
</div>
    <br><div class="boxGD">
      单独设置某一方位的内边距，其他方位内边距不变。<br>
      在关键词padding后加方位词。<br>
      如padding-top。
</div>

注意：

当盒子有设置宽高时padding值会影响盒子实际大小。当

当盒子已经有了宽高，再添加内边距时，会撑大盒子。

盒子宽度=实际内容的宽度+左右边框两个宽度+左右padding两个值。

盒子高度=实际内容的高度+上下边框两个高度+上下padding两个值。

当盒子没有单独指定宽高时不会撑大盒子。

外边距（margin）

margin属性用于设置外边距，也就是盒子与盒子之间的距离。

还是拿粉笔盒作为一个盒子的话，margin的值就是粉笔盒与粉笔盒之间的距离。

同内边距一样，外边距也同样是具有上右下左四个方位，顺时针排序。

margin-top：上外边距

margin-right：右外边距

margin-bottom：下外边距

margin-left：左外边距

复合写法同内边距一样，数值的排列顺序也是顺时针上右下左。

<style>
div {
            width: 150px;
            height: 150px;
            border: 1px solid black;
        }
        .boxMarginB {
            margin-bottom: 20px;
        }
        .boxMall {
            margin: 10px;
        }
        .boxMtwo {
            margin: 15px 20px;
        }
        .boxMthree {
            margin: 5px 15px 20px;
        }
        .boxMfour {
            margin: 20px 15px 10px 30px;
        }
</style>
<div class="boxMarginB">外边距</div>
    <div>外边距</div>
    <div class="boxMall">
        一个数值
    </div>
    <div class="boxMtwo">两个数值</div>
    <div class="boxMthree">三个数值</div>
    <div class="boxMfour">
        四个数值
    </div>

当块级元素盒子有指定的宽度，且左右外边距设置为auto时，块级元素盒子可水平居中。

常见写法：margin：0 auto; || margin：auto;

.boxCenter {
            /* 使块级盒子水平居中。 */
            margin: 0 auto;
        }


<div class="boxCenter">水平居中</div>

小贴士：

在嵌套关系中，父元素和子元素同时具有上外边距时，父元素会塌陷较大的上外边距值。

也就是说父元素上外边距为20px，子元素上外边距为15px，则只会显示父元素上外边距20px，子元素的上外边距不显示也不生效。

解决方案：

为父元素定义上边框；

为父元素定义上内边距；

为父元素添加overflow：hidden。

清除内外边距

默认情况下不同的网页元素自身会带有不同的内外边距，且不同浏览器的默认值也不统一。

在布局前，首先要设置全局清除内外边距。在css将第一行写入该全局选择器。

* {
padding:0;
margin:0;
}

以上就是今天新的学习内容，下次再会。

实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

看透网页布局的本质

网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？

其实，行内元素比如文字类似牛奶，也需要一个盒子把他们装起来，双标签都是一个盒子。有了盒子，我们就可以随意的，自由的，摆放位置了。

看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

盒子模型（Box Model）

首先，我们来看一张图，来体会下什么是盒子模型。

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

盒子边框（border）

边框就是那层皮。橘子皮。。柚子皮。。橙子皮。。。

语法：

border : border-width || border-style || border-color

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线 
dotted：边框为点线
double：边框为双实线

盒子边框写法总结表

表格的细线边框

以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。让我们真的相信，CSS就是我们的白马王子（白雪公主）。

table{ border-collapse:collapse; } collapse 单词是合并的意思

border-collapse:collapse; 表示边框合并在一起。

圆角边框(CSS3)

从此以后，我们的世界不只有矩形。radius 半径（距离）

语法格式：

border-radius: 左上角 右上角 右下角 左下角;

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注意：后面跟几个数值表示的意思是不一样的。

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

文字盒子居中图片和背景区别

文字水平居中是 text-align: center
盒子水平居中左右margin 改为 auto

text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */

插入图片我们用的最多比如产品展示类
背景图片我们一般用于小图标背景或者超大背景图片

section img { 
 width: 200px;/* 插入图片更改大小 width 和 height */
 height: 210px;
 margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
 margin-left: 50px; /* 插入当图片也是一个盒子 */
 }
aside {
 width: 400px;
 height: 400px;
 border: 1px solid purple;
 background: #fff url(images/sun.jpg) no-repeat;
 
 background-size: 200px 210px; /* 背景图片更改大小只能用 background-size */
 background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
 }

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
}

注意：行内元素是只有左右外边距的，是没有上下外边距的。内边距，在ie6等低版本浏览器也会有问题。

我们尽量不要给行内元素指定上下的内外边距就好了。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

 /*外盒尺寸计算（元素空间尺寸）*/
 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为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

盒子模型布局稳定性

开始学习盒子模型，同学们最大的困惑就是，分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？

答案是：其实他们大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。

但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：

按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。

 width > padding > margin

原因：

margin 会有外边距合并还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
width 没有问题（嗨皮）我们经常使用宽度剩余法高度剩余法来做。
?

盒子阴影