第6章 CSS进阶-【好程序员成长】HTML5从入门到精通

第6章 CSS进阶 CSS盒子模型 默认样式 块与内联 其他常用样式 CSS盒子模型 默认样式 块与内联 其他常用样式 目 录 CATALOUGUE 01 02 04 03 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 理解CSS盒子模型与组成 掌握重置样式方式 掌握块与内联的特点与区别 掌握默认样式方式 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 6.1 CSS盒子模型 6.1.1 初识盒子模型 6.1.2 content内容 6.1.3 padding内边距 6.1.4 border边框 6.1.5 margin外边距 6.1.6 margin叠加和传递 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 6.1 CSS盒子模型 当浏览网页时，可以发现网页是由很多个矩形组成的，这些矩形就是CSS盒子模型，它是搭建布局的重要组成。CSS盒子模型又称框模型 (Box Model)，它由内容（content）、内边距（padding）、边框（border）、外边距（margin）等几个重要的CSS元素构成。 为了更好地理解盒子模型，用生活中常见的快递盒子来理解盒子模型和元素分工，快递中的物品为CSS盒子模型的内容（content）部分，快递的包装纸箱为CSS盒子模型的边框（border）部分，为了防止物品损坏，物品和包装箱之间可能有一些泡沫填充物，这些泡沫填充物为CSS盒子模型的内边距（padding）部分，多个快递之间的距离为CSS盒子模型的外边距（margin）部分。 6.1.1 初识盒子模型 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 6.1 CSS盒子模型 下面用图来描述CSS盒子模型的元素组成，如图所示。 6.1.1 初识盒子模型 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 6.1 CSS盒子模型 content内容部分由CSS宽、高两个属性决定。 6.1.2 content内容 运行结果中，蓝色部分为content区域。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 6.1 CSS盒子模型 内边距部分由padding样式来设置。padding样式可以分成padding-left、padding-right、padding-top、padding-bottom和padding五个属性。 6.1.3 padding内边距 padding值可以通过复合写法设置成四个值或两个值或一个值。 背景部分是可以同时作用在content内容和padding内边距上的。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 6.1 CSS盒子模型 在前面的章节中已经学习过border的基本使用，这里不再赘述。下面将介绍border在盒子模型中的使用。当不设置padding时，边框紧挨着content内容。 当设置padding时，边框紧挨着padding内边距。 6.1.4 border边框 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 6.1 CSS盒子模型 外边距指的是盒子与盒子之间的距离，用margin样式来定义，同样margin和padding类似，也分为margin-left、margin-right、margin-top、margin-bottom、margin五个属性。 margin值也可以通过复合写法设置成4个值、2个值或1个值，基本格式如下所示。 6.1.5 margin外边距 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 6.1 CSS盒子模型 在margin操作过程中，经常会遇到mrigin叠加和margin传递问题，下面将详细介绍这两种情况。 1. margin叠加 当给两个盒子同时添加上下外边距时，就会出现叠加的问题。 6.1.6 margin叠加和传递 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 6.1 CSS盒子模型 例中，第一个<div>标签设置了margin-bottom值为20px，第二个<div>标签设置了margin-top值为30px，理论上可能会认为它们之间的距离为50px，但实际上它们之间的距离为30px。这是因为margin上下值同时存在时，不是把上下值累加到一起，而是把上下值中较大的一个值作为它们之间的距离，因此为30px。 上下margin会存在上下叠加问题，而左右margin不存在叠加问题。让盒子左右排列，会涉及到float属性，下一章节中会详细的介绍flo