Web前端开发实例教程——HTML5 CSS3 JavaScript 第6章 CSS盒模型.pptVIP

第6章 CSS盒模型 Web前端开发实例教程 ——HTML5+CSS3+JavaScript 6.1 盒模型的概念 盒模型的概念 盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成，如图6-1所示。对象的尺寸与边框等样式表属性的关系，如图6-2所示。 6.2 边框、外边距与内边距 6.2.1 边框 1．所有边框宽度（border-width） 语法：border-width : medium | thin | thick | length 2．上边框宽度（border-top） 语法：border-top : border-width || border-style || border-color 3．右边框宽度（border-right） 语法：border-right : border-width || border-style || border-color 4．下边框宽度（border-bottom） 语法：border-bottom : border-width || border-style || border-color 5．左边框宽度（border-left） 语法：border-left : border-width || border-style || border-color 6.2 边框、外边距与内边距 6.2.1 边框 6．边框颜色（border-color） 语法：border-color : color 7．边框样式（border-style） 语法：border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 8．圆角边框（border-radius） 语法：border-radius : length {1,4} 6.2 边框、外边距与内边距 6.2.1 边框 【例6-1】边框样式的不同表现形式，本例文件6-1.html在浏览器中的显示效果如图6-4所示。 【例6-2】制作珠宝商城栏目的圆角边框，本例文件6-2.html在浏览器中的显示效果如图6-5所示。 6.2 边框、外边距与内边距 6.2.2 外边距 1．上外边距（margin-top） 语法：margin-top : length | auto 2．右外边距（margin-right） 语法：margin-right : length | auto 3．下外边距（margin-bottom） 语法：margin-bottom : length | auto 4．左外边距（margin-left） 语法：margin-left : length | auto 5．外边距（margin） 语法：margin : length | auto 6.2 边框、外边距与内边距 6.2.3 内边距 内边距用于控制内容与边框之间的距离，padding属性定义元素内容与元素边框之间的空白区域。内边距包括了4项属性：padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距），内边距属性不允许负值。与外边距类似，内边距也可以用padding一次性设置所有的对象间隙，格式也和margin相似，这里不再一一列举。 6.2 边框、外边距与内边距 6.2.4 案例——盒模型的演示 【例6-3】演示盒模型的border、margin和padding之间的关系，本例文件6-3.html在浏览器中的显示效果如图6-7所示。 6.3 盒模型的尺寸 6.3.1 盒模型的宽度与高度 1．盒模型的宽度 盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right） 2．盒模型的高度 盒模型的高度=上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom） 6.3 盒模型的尺寸 6.3.2 块级元素与行级元素 【例6-4】块级元素与行级元素宽度和高度的区别，本例文件6-4.html在浏览器中的显示效果如图6-8所示。 6.4 盒子的margi