3.5 盒模型-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元3 CSS基础 3.5 CSS盒子模型 主要内容 CONTENTS PART 01 盒子模型 PART 02 设置显示模式 PART 03 设置内边距与外边距 PART 04 外边距合并 2 盒子模型 盒子模型，是1996年W3C推出CSS时提出的Box Model（盒模型/框模型）的中文名称。盒子模型规定：网页中的所有元素都可看作被放在一个方框里，网页设计师可以通过 CSS来控制该方框的显示属性。 总宽度 content 外边距 内边距 边 盒子模型示意图 设置显示模式 HTML元素的类型决定了其CSS显示模式，HTML元素按显示模式分为块级元素、行级元素以及行内块元素等。 属性 描述 块级元素 块级元素在新行上开始，占据一整行，其宽度自动填满其父元素宽度,垂直向下排列。 块级元素可以设置宽高,并且宽度高度以及外边距,内边距都可随意控制。 块级元素内可以包含其它块级元素或行级元素。 典型块元素有h1`h6、div、p、ul、li等。通常使用块级元素来进行页面的总体布局。 行级元素 行级元素和其他行级元素无间隔地排列在一行。 行级元素不可以设置宽高，宽度高度由元素内容决定，可以设置行高（line-height）。设置外边距margin时，上下无效，左右有效。内边距padding可以随意设置。 行级元素不能包含块级元素，只能容纳文本或者其他行级元素。 典型元素有span、a等。 行内块元素 多个行内块元素排列在一行，元素间有间隔，在浏览器中按照从左到右一个接一个地排列。 行内块元素默认宽度是元素的宽度，宽、高、内外边距属性可以设置。 行内块元素内可以包含其它块元素或行级元素。 典型元素有img、input等。 设置显示模式 display属性设置元素显示模式的类型。 语法格式： none：隐藏元素，即，不显示元素。 inline：设置元素为行级元素。 block：设置元素为块级元素 inline-block：设置元素为行内块级元素。 display:none | inline | block | inline-block 设置内边距与外边距 padding属性设置元素的边框与元素的内容区之间的间距。 语法格式： length：用长度值来定义内边距的值，不允许负值。 percentage：用百分比来定义内边距的值。 padding:[length | percentage] 【案例3.5.1】设置元素的内边距样式 设置内边距与外边距 margin属性设置元素周围的留白区称为外边距，外边距从视觉上将元素相互隔开。 语法格式： auto:默认外边距值。 length：用长度值来定义外边距，可以为负值。 percentage：用百分比来定义外边距。 margin:[auto| length | percentage] 【案例3.5.2】设置元素的外边距样式 外边距合并 在CSS中，相邻两个元素的外边距可以合并成一个单独的外边距，称为外边距合并，或折叠。 外边距合并 兄弟关系外边距合并当两个元素在垂直方向上相邻时，上边元素的下外边距与下面元素的上外边距会自动发生合并，合并生成的外边距为两个边距中大的值。 【案例3.5.3】兄弟关系元素的外边距合并 外边距合并 父子包含外边距合并当父元素包含子元素时，父子元素在垂直方向的上边距或下外边距也会发生合并。 【案例3.5.3】父子包含外边距合并 外边距合并 自己外边距合并假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。 感谢观看 $