《Web前端技术（HTML+CSS+JavaScript）》课件_第6章 CSS盒模型与布局属性.pptxVIP

第6章CSS盒模型与布局属性

学习目标123能够正确识别CSS盒模型（BoxModel）能够正确使用CSS内边距、外边距、简写属性能够正确使用CSS边框及简写属性

学习目标456了解CSS轮廓属性能够正确使用浮动属性能够正确使用定位属性

本章架构★★★6.1CSS盒模型概述6.2应用CSS实现内边距、外边距属性设置6.3应用CSS实现边框、轮廓属性设置

本章架构★★★6.4应用CSS实现浮动属性设置6.5应用CSS实现定位属性设置6.6综合案例

6.1CSS盒模型概述

6.1CSS盒模型概述在HTML文档中，每个元素（element）都有盒模型（BoxModel），在Web世界里，盒模型（BoxModel）无处不在，掌握盒模型（BoxModel）也是实现网页设计、布局的基础。在网页设计中，CSS盒模型（BoxModel）包含的属性有：内容（content）、内边距/填充（padding）、边框（border）、外边距（margin）。

6.1CSS盒模型概述内容（content）：由内部虚线围成的区域，一般为实际的内容内边距/填充（padding）：内部虚线与实线间部分边框（border）：实线，即内边距的边缘外边距（margin）：外部虚线与实线间部分注意事项：⑴背景作用于由内容和内边距、边框组成的区域⑵外边距默认是透明的，因此不会遮挡其后的任何元素

6.1CSS盒模型概述元素（element）宽度计算公式如下：元素宽度=内容宽度+左内边距+右内边距+左边框+右边框+左外边距+右外边距元素（element）高度计算公式如下：元素高度=内容高度+上内边距+下内边距+上边框+下边框+上外边距+下外边距

6.1CSS盒模型概述内容（content）：70px内边距/填充（padding）：左内边距+右内边距=5+5=10px边框（border）：左边框+右边框=5+5=10px外边距（margin）：左外边距+右外边距=10+10=20pxdiv元素的宽度：70px+10px+10px+20px=110px若去除元素外边距，则元素宽度：70px+10px+10px=90px

6.2应用CSS实现内边距、外边距属性设置

6.2应用CSS实现内边距、外边距属性设置⒈内边距属性名称padding-left属性：设置元素左内边距padding-right属性：设置元素的右内边距padding-top属性：设置元素的上内边距padding-bottom属性：设置元素的下内边距padding简写属性：在一个声明中设置所有内边距属性⒉内边距属性常用取值⑴length：带有单位的数值，单位如像素等，默认值是0。⑵%：规定基于父元素的宽度/高度的百分比值。1内边距属性

6.2应用CSS实现内边距、外边距属性设置⒊注意事项以上属性不允许使用负值。⒋案例本案例演示了内边距属性常用取值效果，案例中设置前4个p元素其左、右、上、下内边距分别为10px，设置后4个p元素其内边距简写属性padding取值分别为4、3、2、1种的情况。1内边距属性

6.2应用CSS实现内边距、外边距属性设置padding简写属性说明：⑴“padding:10px20px30px40px;”表示设置元素上、右、下、左内边距分别为10px、20px、30px、40px。即第1个值代表上内边距，第2个值代表右内边距，第3个值代表下内边距，第4个值代表左内边距。⑵“padding:10px20px30px;”表示设置元素上内边距为10px，左、右内边距为20px，下内边距为30px。即第1个值代表上内边距，第2个值代表左、右内边距，第3个值代表下内边距。⑶“padding:10px20px;”表示设置元素上、下内边距为10px，左、右内边距为20px。即第1个值代表上、下内边距，第2个值代表左、右内边距。⑷“padding:10px;”表示设置元素上、右、下、左内边距均为10px。即1个值时，代表上、右、下、左内边距。1内边距属性

6.2应用CSS实现内边距、外边距属性设置例6-1chapter06_01.html!DOCTYPEhtmlhtmlheadmetacharse