训练4：CSS盒子模型练习
时间：2023年5月22日
训练 4：盒子模型练习 3
培训目的：
？ 1.对盒模型的概念有深入的理解；
2、掌握隔离箱的内部结构；
？ 3.掌握并理解多个盒子的相互关系。
培训内容：
1、制作页面效果如下：页面由四个盒子“box1\box2\box3\box4”组成，盒子123是连续的，盒子4在盒子2的正下方，每个盒子的宽度为400px，高度为200px，边框为5px黑色，框间距为10px；
2.实现如下图，练习盒子模型：
要求：-上：30px；-右：50px；-：30px；-左：50px； 图像内边距：20px；
3、图片排版、练习盒模型；
要求：
1、与图标的布局基本一致（各元素的大小和定位值可自由设置），模板显示区域居中显示，达到“联动”效果；
2、控制文字的大小和样式：超链接12px正常情况下是黑色无下划线，鼠标经过时出现蓝色下划线；
3、将三里区域排成一排；
4、整体排版合理，布局协调有序；
4、图片排版、练习盒模型；
5、使用盒模型实现如下图所示的页面效果：
第二部分：CSS盒子模型详解
详细的 CSS 盒子模型
CSS 框模型指定元素框如何处理元素内容、填充、边框和边距。
那么为什么叫盒子呢？ 先说一下我们在网页设计中经常听到的属性名称：()、()、()、()，CSS盒子模式就有这些属性。
我们可以把它想象成现实中一个顶部有开口的盒子，然后从顶部往下看。 框架相当于盒子的厚度，内容是相对于盒子内所盛物体的空间。 填充相当于在盒子上加了一个盒子，起到防震的作用。 里面填充了泡沫，边界相当于盒子周围留有一定的空间，方便拆除。 这样盒模型是不是很容易理解呢？
所以页面中整个盒模型的宽度是由左边框+左边框+左内边距+内容+右内边距+右边框+右边框组成，而在CSS中，宽度和指的是内容区域的宽度和高度，这是很多朋友容易混淆的地方
这里的边框又称为：外边距、外补丁； 也称为：内边距、内补丁。
() 元素的 () 是围绕元素内容和填充的一条或多条线。 CSS 属性允许您指定元素边框的样式、宽度和颜色。 CSS 边框 在 HTML 中，我们使用表格来创建文本周围的边框，但通过使用 CSS 属性，我们可以创建可应用于任何元素的漂亮边框。 元素的边距内是元素的 ()。 元素的边框只是围绕元素内容和填充的一条或多条线。 每个边框都有 3 个方面：宽度、样式和颜色。 在接下来的内容中，我们将从这三个方面为您详细讲解。 边框和背景 CSS 规范规定边框是“在元素背景的顶部”绘制的。 这很重要，因为某些边框是“断开的”（例如，点线或虚线），并且元素的背景应出现在边框的可见部分之间。 CSS2 规定背景仅延伸到内边距，而不延伸到边框。 这个问题后来在 CSS2.1 中得到了纠正：元素的背景是内容、内边距和边框区域的背景。 大多数浏览器都遵循 CSS2.1 定义，尽管某些旧版浏览器的行为可能有所不同。 边框的样式样式是边框最重要的方面之一，不是因为样式控制边框的显示（它们当然控制），而是因为没有样式就根本没有边框。 CSS 的 -style 属性定义了 10 种不同的非样式，包括无样式。 例如，您可以将图像的边框定义为看起来像“凸起的按钮”： a:link img {-style: ;} 定义多种样式 您可以为边框定义多种样式，例如： p.aside {- style:solid ;} 上面的规则为带有类名的段落定义了四种边框样式：实线边框、点线右边框、虚线底部边框和双线左边框。
我们再次看到这里的值是从右上到左的顺序，我们在讨论使用多个值设置不同的填充时也看到了这一点。 定义单面样式 如果您希望为元素框的一侧而不是所有 4 侧设置边框样式，则可以使用以下单面边框样式属性： ？ ？ ？ -top-style -right- style --style -left-style 所以这两种方法是等价的： p {-style: Solid Solid Solid none;} p {-Style: Solid; -left-style: none;} 注意：如果要使用第一种方法，单面属性必须放在简写属性后面。 因为如果将单侧属性放在 -style 之前，简写属性的值将覆盖单侧值 none。 边框的宽度 您可以使用 -width 属性指定边框的宽度。 有两种方法指定边框的宽度：可以指定长度值，例如 2px 或 0.1em； 或者使用 3 个关键字之一，即“thin”（默认值）和“thick”。 注意：CSS 没有定义 3 个关键字的具体宽度，因此一个用户代理可能将 Thin 和 Thick 分别设置为 5px、3px 和 2px，而另一个用户代理将它们分别设置为 3px、2px 和 1px。 所以，我们可以这样设置边框的宽度：p {-style:solid; -width: 5px;} 或: p {-style:solid; -width:thick;} 定义单边的宽度可以按照top-right--left的顺序设置元素每一侧的边框：
p {-样式：实心； -width: 15px 5px 15px 5px;} 上面的例子也可以缩写为（这就是所谓的值复制）： p {-style: Solid; -width: 15px 5px;} 还可以通过以下属性分别设置边框每一边的宽度： ? ？ - 顶部宽度：15px； -右宽度：5px； --宽度：15px； -左宽度：5px； 在前面的示例中，您已经看到，如果您希望出现某种边框，则必须设置边框样式，例如实心或。 那么如果将 -style 设置为 none 会发生什么： p {-style: none; -width: 50px;} 虽然边框的宽度是50px，但是边框样式设置为none。 这样的话，不仅边框的样式没有了，而且它的宽度也变成了0。边框消失了，为什么呢？ 这是因为如果边框样式为 None，即边框根本不存在，则边框不能有宽度，因此边框宽度会自动设置为 0，无论您最初定义什么。 记住这一点非常重要。 事实上，忘记声明边框样式是一个常见的错误。 根据以下规则，h1 元素都不会有任何边框，更不用说宽度为 20px：h1 {-width: 20px;}
由于-style的默认值为none，因此如果没有声明样式，则相当于-style: none。 因此，如果想要出现边框，就必须声明边框样式。 边框颜色 设置边框颜色非常简单。 CSS 使用简单的 -color 属性，一次最多接受 4 个颜色值。 可以使用任何类型的颜色值，例如命名颜色或十六进制和 RGB 值： p { -style:solid; -颜色: 蓝色 rgb(25%,35%,45%) # 红色; 如果颜色值小于4，则值重复将起作用。 例如，以下规则声明段落的上下边框为蓝色，左右边框为红色： p { -style:solid; -颜色：蓝红； 注意：默认边框颜色是元素本身的前景色。 如果没有为边框声明颜色，它将与元素的文本颜色相同。 另一方面，如果元素没有任何文本，假设它是一个仅包含图像的表格，那么表格的边框颜色就是其父元素的文本颜色（因为颜色可以继承）。 该父元素可能是 body、div 或另一个表格。 定义单面颜色和一些单面边框颜色属性。 它们的工作方式与单面样式和宽度属性相同： ？ ？ ？ -top-color -right-color --color -left-color 指定如下： h1 { -style: Solid; -颜色：黑色;
-右颜色：红色； }透明边框我们刚才说了，如果边框没有样式，那么它就没有宽度。 然而，在某些情况下，您可能希望创建不可见的边框。 CSS2 引入了边框颜色值。 该值用于创建不可见的宽度边框。 看一下下面的例子：我们为上面的链接定义了以下样式：a:link, a: { -style:solid; -宽度：5px； -颜色： ; } a:hover {-color: grey;} 查看以上样式的效果，请点击：TIY。 从某种意义上说，使用边框就像额外的填充； 另一个好处是能够在您需要时让它们可见。 此透明边框相当于填充，因为元素的背景延伸到边框区域（如果有可见背景）。 重要提示：在 IE7 之前，IE/WIN 不提供对 . 在以前的版本中，IE 会根据元素的颜色值设置边框颜色。
( ) 元素的填充位于边框和内容区域之间。 控制区域最简单的属性是属性。 CSS 属性，定义元素边框和元素内容之间的空白。 CSS 属性 CSS 属性定义元素的填充。 该属性接受长度或百分比值，但不允许负值。 例如，如果希望所有 h1 元素每边都有 10px 的内边距，只需这样做： h1 {: 10px;} 也可以按照上、右、下、左的顺序分别设置每边的内边距side 可以使用不同的单位或百分比值： h1 {: 10px 0.25em 2ex 20%;} 单边 属性还使用以下四个单独的属性分别设置上、右、下、左 ： ? ？ ？ ？ -top -right - -left 正如你所想象的，下面的规则的效果与上面的简写规则完全相同： h1 { -top: 10px; -右：0.25em； -：2ex； -左：20%； }
前面提到了的百分比值，可以设置元素的的百分比值。 百分比值是相对于其父元素的宽度计算的，就像边距一样。 因此，如果父元素的宽度发生变化，它们也会发生变化。 以下规则将段落的内边距设置为父元素宽度的 10%： p {: 10%;} 例如：如果段落的父元素是 div 元素，则其内边距根据div 的宽度。
这是一个宽度为 200 的 DIV。
注意：上下与左右相同； 也就是说，顶部和底部填充的百分比将相对于父元素的宽度设置，而不是相对于高度。 CSS 填充属性 属性 - -left -right -top 描述 简写属性。 作用是在声明中设置元素的属性。 设置元素的底部填充。 设置元素的左内边距。 设置元素的右填充。 设置元素的顶部填充。
边距 ( ) 元素边框周围的空白区域称为边距。 设置边距会在元素外部创建额外的“空白”。 设置边距的最简单方法是使用该属性，该属性接受任何长度单位、百分比值甚至负值。 设置边距的最简单方法是使用 CSS 属性。 该属性接受任何长度单位，可以是像素、英寸、毫米或 em。 可以设置为自动。 更常见的是设置边距的长度值。 以下语句在 h1 元素的每一侧设置 1/4 英寸宽的边距： h1 { : 0.25in;} 下面的示例为 h1 元素的四个边定义不同的边距，使用的长度单位是像素 ( px): h1 { : 10px 0px 15px 5px;} 与内边距的设置相同，这些值的顺序是从顶部外边距（上）开始，围绕元素顺时针旋转： : 右上left 此外，还可以设置一个百分比值： p { : 10%;} 百分比是相对于父元素的宽度计算的。 上面的示例为 p 元素设置了父元素宽度的 10% 的边距。 的默认值为 0，因此如果您不声明 的值，则不会出现边距。 然而，在实践中，
浏览器已经为许多元素提供了预定的样式，边距也不例外。 例如，在支持 CSS 的浏览器中，边距会在每个段落元素的上方和下方生成“空白行”。 因此，如果没有为 p 元素声明边距，浏览器可能会自行应用边距。 当然，只要您专门声明它，默认样式就会被覆盖。 价值复制还记得吗？ 我们在前两节中提到了价值复制。 下面我们解释一下如何使用值复制。 有时，我们会输入一些重复的值： p {: 0.5em 1em 0.5em 1em;} 通过复制该值，您不必重复键入这对数字。 上面的规则等价于如下：p{:0.5em 1em;}这两个值可以替代前面的4个值。 这是怎么做到的？ CSS 定义了允许指定少于 4 个边距值的规则。 规则如下： ? ？ ？ 如果左边距的值缺失，则使用右边距的值。 如果缺少底部边距的值，则使用顶部边距的值。 如果右边距的值缺失，则使用上边距的值。 下图提供了更直观的方式来查看这一点：换句话说，如果为 指定 3 个值，则第 4 个值（即左边距）是从第 2 个值（右边距）复制得到的。 如果给定两个值，则第 4 个值从第 2 个值复制，第 3 个值（下边距）从第 1 个值（上边距）复制。 在后一种情况下，如果只给出一个值，则从该值复制其他 3 个边距（顶部边距）。 通过这种简单的机制，您只需要指定必要的值，而不需要应用所有 4 个值，例如：h1 {: 0.25em 1em 0.5em;} h2 {: 0.5em 1em;} p {: 1px;}/ * 相当于 0.25em 1em 0.5em 1em */ 这个方法有一个小缺点，你最后肯定会遇到这个问题。 假设您要将 p 元素的上边距和左边距设置为 20 像素，将下边距和右边距设置为 30 像素。 在这种情况下，需要写：
p {: 20px 30px 30px 20px;} 以获得您想要的结果。 不幸的是，在这种情况下，所需值的数量无法减少。 让我们看另一个例子。 如果你想让除了左边距（左边距为20px）以外的所有其他边距都是auto： p {:auto auto auto 20px;} 一样，这样就可以得到你想要的效果了。 问题是输入这些汽车有点麻烦。 如果您只想控制元素单侧的边距，请使用 -side- 属性。 单边边距属性 您可以使用单边边距属性来设置元素单边边距的值。 假设您要将 p 元素的左边距设置为 20px。 您可以使用以下方法来代替使用 auto（大量输入）： p {-left: 20px;} 您可以使用以下任何属性来仅设置相应的上边距，而不直接影响所有其他边距： ? ？ ？ ？ -top -right - -left 一条规则中可以使用多个这样的单边属性，例如： h2 { -top: 20px; -右：30px； -：30 像素； -左：20px； 当然，对于这种情况，使用 p {: 20px 30px 30px 20px;} 无论您使用单面属性还是使用 ，您都会得到相同的结果。 一般来说，如果要设置多边的边距，
使用起来会更方便。 但是，从文档的角度来看，使用哪种方法并不重要，因此您应该选择对您来说更容易的方法。
提示和注释
提示：IE 为 body 标签定义的默认 () 值为 8px。 歌剧则不然。 相反，Opera将inner ()定义为默认值8px，所以如果你想调整整个网站的边缘部分并在Opera中正确显示，就必须自定义body。
CSS 边距属性
属性
描述简写属性。 在一个声明中设置所有边距属性。 设置元素的下边距。 设置元素的左边距。 设置元素的右边距。 设置元素的上边距。
折叠边距
边距折叠意味着当两个垂直边距相遇时，它们会形成单个边距。
合并边距的高度等于两个合并边距的高度中的较大者。
折叠边距
边距折叠（堆叠）是一个相当简单的概念。 然而，在实践中布局网页时，它可能会引起很多混乱。 简单地说，边距折叠意味着当两个垂直边距相遇时，它们形成单个边距。 合并边距的高度等于两个合并边距的高度中的较大者。
当一个元素出现在另一个元素的顶部时，第一个元素的下边距与第二个元素的上边距合并。 请看下图：
亲自
尝试一下
当一个元素包含在另一个元素中时（假设没有分隔边距的填充或边框），它们的顶部和/或底部边距也会合并。 请看下图：
亲自
尝试一下
尽管这看起来很奇怪，但边距甚至可以自行合并。
假设您有一个带有边距的空元素，但没有边框或填充。 在这种情况下，顶部和底部边距接触并合并：
如果
该边距满足另一个元素的边距，也合并：
这是
这就是一系列段落元素占用很少空间的原因，因为它们的所有边距组合在一起形成一个小边距。
乍一看，边距折叠可能有点奇怪，但实际上，这是有道理的。 以由多个段落组成的典型文本页面为例。 第一段上方的空间等于该段落的上边距。 如果没有边距折叠，所有后续段落之间的边距将是相邻顶部和底部边距的总和。 这意味着段落之间的空间是页面顶部空间的两倍。 如果发生边距折叠，段落之间的顶部和底部边距将被合并，以便各处的距离保持一致。
笔记
注意：边距折叠仅发生在正常文档流中块框的垂直边距上。 内联框、浮动框或绝对定位之间的边距不会合并。
