CSS学习笔记（三）：盒子

一、盒子的基本

　　通常情况下，盒子的大小刚好容纳其内容。

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