大学课程《Web前端开发与应用教程》PPT教学课件：项目四任务2 盒子模型相关属性.pptxVIP

项目4盒子模型

掌握盒子相关属性1了解盒子模型的概念42理解元素的转换3熟悉元素的类型掌握理解了解熟悉?学习目标

任务二盒子模型相关属性

理解盒子模型的结构后，要想自如地控制页面中每个盒子的样式，还需要掌握盒子模型的相关属性。盒子模型的相关属性包括边框属性、内外边距属性、背景属性，通过设置这些属性可使元素的表现形式更加多样化。下面，将对盒子模型的相关属性进行详细讲解。

2.1边框属性为了分割页面中不同的盒子，常常需要给内容元素设置边框效果。CSS边框属性包括边框样式属性、边框宽度属性、边框颜色属性、单侧边框属性及边框的综合属性。强调一下，在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。常用取值单位为像素。

边框样式（border-style）属性值none：没有边框solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边框为双实线边框样式用于定义页面中边框的风格，在设置边框样式时既可以对四边分别设置，也可以综合设置四边的样式。border-style:上边[右边下边左边];border-style综合属性border-style:solid;/*四边均为实线*/border-style:soliddotted;/*上下实线、左右点线*/b