初探盒模型

原文链接：http://learn.shayhowe.com/html-css/opening-the-box-model/

本篇文章为上述链接文章的一些阅读笔记和心得。也是周计划交付物的一部分。

文章的核心内容是介绍css中非常重要的盒模型概念，来回答“网页元素是如何表示在页面上”这样一个问题。
为了回答这个问题，在学习盒模型前需要了解css的一个属性display

display

每个元素都有一个默认的display属性，根据元素类型的不同默认值也不同，常见的display属性有block,inline,inline-block,none
块级元素的默认值为block, 内联元素的默认值为inline. 其中block将使该元素成为块级元素，inline将使该元素成为内联元素。
当使用inline-block时，该元素就像块级元素一样将接受所有盒模型的属性，但是又可以和其它元素一起共占一行。
使用none时，该元素将彻底消失在页面中，并且不占任何空位，就像不存在一样。

盒模型

重点中的重点 页面上的每个元素都是矩形
css中有一系列的属性来决定一个矩形元素的尺寸。 通常有以下几个元素决定： display, width, height, padding, border, margin.

一个元素宽度可以由以下公式计算

margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

高度计算公式如下：

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

下面将简单介绍各个属性：

width && height

width的默认值取决于display的属性，如果时块级元素，那么width将默认为100%，占据整行的宽度。Inline和inline-block元素如果在一行中放不下会被挤到下一行中。内联元素是不能有固定尺寸的，width和height只作用于非内联元素。
height的默认值是由内容本身决定的。

margin

margin属性为环绕某元素的周围空间。它使得元素之间保持一个优雅的距离。需要注意的是margin的top和bottom不被内联元素接受。

padding

padding属性和margin类似，但是它在元素的border内部而不像margin一样在外部。padding的top和bottom能够被内联元素使用，但是可能会溢出到元素的外部。

margin和padding的声明

div {
margin: 20px; #四个属性都是20px
margin: 10px 20px; #top和bottom为10px，left和right为20px
margin: 10px 20px 0 15px; #从top开始顺时针旋转设置四个属性 
margin-top: 10px; #只设置top属性
}

border

border在margin和padding之间，给元素提供一个边框。border属性需要三个值，width，style和color。使用长表达式为 border-width, border-style, border-color.
举个短表达式的例子：

div {
border: 6px solid #923233;
}

同时也可以只允许某个方向出现border，border-bottom可以只显示底部的border。

另一种布局方式 Box sizing