盒模型
- 盒模型
html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
例：a{display:block;}
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
例：div{ display:inline;}
另：内联元素代码中换行，结果会显示空格。
内联块状元素 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点将元素<a>设置为内联块状元素
例：a{display:inline-block;}
盒子模型的边框（border）就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
div{ border-width:2px; border-style:solid; border-color:red;}
可缩写为：div{ border:2px solid red;}
想为 p 标签单独设置一条边框，而其它三边都不设置边框样式
div{border-bottom:1px solid red;}//设置下边框
div{border-top:1px solid red;}//设置上边框
div{border-right:1px solid red; }//设置右边框
div{border-left:1px solid red;}//设置左边框
注意：
1、border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）。
填充(padding)：元素内容与边框之间的距离
div{padding:20px 10px 15px 30px;}//填充分为上、右、下、左(顺时针)
相当于div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：div{padding:10px 20px;}
如果左和右的值相同为20px div{padding:10px 20px 30px 20px;}可缩写为：div{padding:10px 20px 30px;}
margin，border缩写方法一致。
边界（margin）:元素与其它元素之间的距离。
div{margin:20px 10px 15px 30px;}//边界也是分为上、右、下、左。
相当于div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写：div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写:div{ margin:10px 20px;}
同上。
宽度和高度：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
隐性改变display类型
当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1. position : absolute ；
2. float : left ；或 float:right ；
元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
ul标签在FF中默认只有padding值(即：padding-left:40px),而在IE中只默认有margin值（即：margin-left:40px）,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题。
