CSS Box Model Overview
Within the element is content to be displayed inside the padding, margin, border will be involved in the calculation of the size of the box, for example: there is a box the size of 100px, margins 10px, padding 5px, to show only the actual content 70px 
To make it easier control elements on the page, it is best to clear the default margins and external elements:
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}content calculated width and height
A width property width and height attributes may control the height size of the box.
Attribute value of width and height may be different units or values with respect to the percentage% of the parent element, the most common practice is the pixel value.
Most browsers, such as Firefox, IE6 and above have adopted the W3C specification, in line with norms of the CSS box model total width and total height calculation principles are:
/*外盒尺寸计算（元素空间尺寸）*/
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为内容宽度）note:
1, the width of the width and height attributes height attribute applies only to block-level elements (except img tag and input) of the inline element is not valid.
2, when calculating the total height of the box model, should also be considered where the upper and lower margins combined vertical boxes.
3, if the box is not given a width / height or his father's width / height, the padding size does not affect the present case .
Box frame (border)
border : border-width || border-style || border-colorBorder properties - set the border style (border-style)
Style, border style is used to define a page frame, the attribute value is used as follows:
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线Box frame written summary table
| Set content | Style properties | Common property values |
| On the border | border-top-style: style; border-top-width: Width; border-top-color: color; border-top: width style color; | |
| Bottom border | border-bottom-style: style; border- bottom-width: the width; border- bottom-color: color; border-bottom: width style color; | |
| Left border | border-left-style: style; border-left-width: Width; border-left-color: color; border-left: width style color; | |
| 右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; | |
| 样式综合设置 | border-style:上边 [右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
| 颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 边框综合设置 | border:四边宽度 四边样式 四边颜色; |
表格的细线边框
表格线变粗原因是因为边框重叠
table{ border-collapse:collapse; } collapse 单词是合并的意思
border-collapse:collapse; 表示边框合并在一起。
圆角边框(CSS3)
语法格式：
border-radius: 左上角 右上角 右下角 左下角;案例:
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
div:first-child { /* 结构伪类选择器 选亲兄弟 */
border-radius: 10px; /* 一个数值表示4个角都是相同的 10px 的弧度 */
}
div:nth-child(2) {
/*border-radius: 100px; 取宽度和高度 一半 则会变成一个圆形 */
border-radius: 50%; /* 100px 50% 取宽度和高度 一半 则会变成一个圆形 */
}
div:nth-child(3) {
border-radius: 10px 40px; /* 左上角 和 右下角 是 10px 右上角 左下角 40 对角线 */
}
div:nth-child(4) {
border-radius: 10px 40px 80px; /* 左上角 10 右上角 左下角 40 右下角80 */
}
div:nth-child(5) {
border-radius: 10px 40px 80px 100px; /* 左上角 10 右上角 40 右下角 80 左下角 右下角100 */
}
div:nth-child(6) {
border-radius: 100px;
height: 100px;
}
div:nth-child(7) {
border-radius: 100px 0;
}
</style>内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
| 2个值 | padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 3个值 | padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 4个值 | padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
外边距（margin）
margin property is used to set margins. Set margins would create "gaps" between the elements, this usually can not be placed blank else.
margin-top: on the margins
margin-right: Right Margin
margin-bottom: bottom margin
margin-left: on the margins
margin: Margin Right Margin on bottom margin left outside
The value of the order with the same padding.
From outside the box to achieve the middle
Allows a box to achieve the middle level, we need to meet two conditions:
- It must be block-level elements.
- Box must specify the width (width)
Then give about margins are set to Auto , can make the block-level elements centered horizontally.
Common practice in this way the page layout, the following sample code:
.header{ width:960px; margin:0 auto;}Centered text box Pictures and background differences
- Text is horizontally centered text-align: center
- Box horizontally centered around margin changed to auto
text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */- Products such as inserting pictures up to class we use
- Our background images are generally used for large or small icons background background image
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 */
}Margin merger
When two vertically adjacent block elements meet, if the above element has bottom margin margin-bottom, has the following elements from the outer margin-top, the vertical spacing than the margin-bottom margin-top between them the sum, but the larger of the two. This phenomenon is referred to as adjacent block elements combined vertical margins (also referred to collapse margins).
Margin encountered another element from the outside, it will merge happen:
solution
