盒子模型
需求分析
盒子模型是css网页布局的基础，它替代了传统的表格布局。只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。
认识盒子模型
盒子模型就是把HTML页面中的元素看作是一个矩形盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成。
内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中，外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间
盒子模型相关属性
盒子模型的相关属性包括边框属性、内外边距属性、背景属性和宽高属性，通过设置这些属性可使元素的表现形式更加多样化。需要注意的是，虽然盒子模型拥有边框、内外边距、背景、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性。
边框属性
为了分割页面中不同的盒子，常常需要给元素设置边框效果。在CSS中边框属性包括边框样式属性( border style )、边框宽度属性( border-width )、边框颜色属性( border- -color)、单侧边框的属性、边框的综合属性。
(1)设置边框样式( border- style )
边框样式用于定义页面中边框的风格，常用属性值如下。
, none:没有边框，即忽略所有边框的宽度(默认值)。
●solid; 边框为单实线。
●dashed:边框为虚线。
●dotted: 边框为点线。
●double: 边框为双实线。
在设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置四条边的样式，具体如下。. border- top -style:上边框样式。
●border-right-style: 右边框样式。
●border-bottom-style: 下边框样式。
●border-left-style: 左边框样式。
●border-style: 上边框样式右边框样式下边框样式左边框样式。
●border-style: 上边框样式左右边框样式下边框样式。
●border- -style:上下边框样式左右边框样式。
●border-style: 上下左右边框样式。
使用border- -style属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
例如<p>只有上边为虚线dashed,其他三边为单实线solid,可以使用border -style 综合属性分别设置各边样式:
p{ borer-style:dashed solid solid solid; }
或综合设置四条边，然后采用上边覆盖:
p{border-style:solid;}