一、盒子的基本
通常情况下，盒子的大小刚好容纳其内容。
1. 盒子的大小：width, height
指定盒子大小的单位为像素、百分数或em值。这里百分数表示相对于父元素的比值。如果这个盒子是顶级盒子，那么父元素为窗口。例如：
div.box {
height: 300px;
width: 400px;
}
p{
height: 75%;
width: 75%;
}
2. 大小限制：min-width, max-width, min-height, max-height
与盒子大小定义一样，单位为像素、百分数或em值。例如：
td.description {
min-width: 450px;
max-width: 650px;
min-height: 10px;
max-height: 30px;
}
3. 内容溢出：overflow
当盒子内容超出盒子本身时如何显示。有两种属性值可选，hidden: 隐藏多余内容； scroll: 盒子上添加滚动条。
p.one {
overflow: hidden;
}
二、边框、外边距和内边距
对于一个盒子而言，这三个距离很重要。边框（border）表示盒子边框的宽度。外边距（margin）表示盒子边框外的空白的宽度。内边距（padding）表示盒子边框内空白的宽度。
1. 边框(border)
border-width: 边框宽度。属性值可以是像素或thin, medium, thick。此外还可以有border-top-width, border-right-width, border-bottom-width, border-left-width来指定各个边框的宽度。
p.one{
border-width: 2px;}
p.two{
border-width: thick;}
p.three{
border-width: 1px 4px 12px 4px;}
可以对border-width指定4个值来指定4个方向的宽度，顺序为上、右、下、左
border-style: 边框样式。可选值为：solid实线，dotted方形点，dashed虚线，double两条实线，groove凹槽，ridge凸起，inset嵌入，outset凸出屏幕，hidden/none无边框。同样，可以在用类似border-top-style来指定某个方向的边框样式。
border-color: 边框颜色。
border: 以上三个特性的快捷方式，例如
p {
width: 250px;
border: 3px dotted #0088dd;}
2. 内边距(padding)
以像素、百分数或em值为单位。 与border类似，可以采用padding-top的形式，或快捷方式来指定各个方向的内边距。
p {
width: 275px;
border: 2px solid #0088dd;}
p.example {
padding: 10px;}
3. 外边距(margin)
与内边距类似。可能会出现以下情况：
margin: 10px 20px;
表示左右外边距为10px，上下外边距为20px。
外边距折叠：垂直方向上相邻的两个外边距(margin)会合并成一个，最终的大小，是两个中较大的。
三、内容居中
把盒子的左右外边距设置为auto，盒子就将居中显示。例如
p.example {
margin: 10px auto 10px auto;
}
四、其他特性
1. display: 内联元素和块级元素的转换。可选值inline, block, inline-block, none。
2. 盒子的隐藏：visibility: hidden，visible.
3. 盒子边框投影: box-shadow
4. 盒子圆角: border-radius