第五章 CSS盒子模型-优快云博客

本文链接：https://blog.youkuaiyun.com/2402_87190919/article/details/142750403

5.1盒模型的定义

盒模型（Box Model）是Web开发中的一种概念，用于描述HTML元素如何在页面上占据空间。它将每个HTML元素看作是一个矩形盒子，并且定义了这个盒子由哪些部分组成，如何计算元素的总大小。盒模型包括以下四个区域：
1. 内容区域（Content）：显示元素的实际内容，如文本或图片。这是最内部的区域，定义了元素的宽度和高度。
2. 内边距（Padding）：内容区域与边框之间的空白区域。内边距会增加元素的整体尺寸，但它的背景颜色或图片可以扩展到内边距区域。
3. 边框（Border）：包围内边距和内容区域的边界。边框的厚度、样式和颜色都可以调整，且会增加元素的总宽度和高度。
4. 外边距（Margin）：元素外部与其他元素之间的距离。外边距不会被背景颜色或图片覆盖，它纯粹是用于控制元素之间的空隙。
盒模型的总宽度和高度计算公式为：
总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距
总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距
理解盒模型是掌握网页布局的关键，因为它直接影响元素的排列和页面的整体设计。

5.2 CSS元素的高度和宽度

5.2.1 盒模型的宽度
width 属性指定内容区域的宽度。
如果使用了 box-sizing: border-box;，那么设置的宽度会包含边框和内边距，即总宽度为设定值。
如果使用默认的 box-sizing: content-box;，则总宽度需要加上边框和内边距的大小。

5.1.2 盒模型的高度
height 属性指定内容区域的高度。
类似于宽度，如果设置了 box-sizing: border-box;，高度将包括边框和内边距。
对于块级元素，如果没有明确设置高度，它会根据内容自动扩展。

5.3 边距设置和边框设置

5.3.1 外边距设置

margin-top, margin-right, margin-bottom, margin-left 分别设置四边的外边距。
margin 简写属性可同时设置四个方向的外边距，例如 margin: 10px 20px 10px 20px; 表示上10px, 右20px, 下10px, 左20px。
如果只提供一个值，则所有方向都采用该值；两个值时，第一个值应用于上下，第二个值应用于左右；三个值时，依次为上、左右、下。
边距的取值
固定值（px, em, rem等）：例如 margin: 10px;，指定边距为固定像素。
百分比（%）：边距值是父元素宽度的百分比。例如，margin: 5%; 表示边距为父元素宽度的 5%。
自动（auto）：通常用于水平居中。元素的左右 margin 设置为 auto 时，它会自动分配空间，保证元素水平居中。

5.3.2 外边距的合并

外边距合并（Margin Collapsing）是指在CSS布局中，当两个或多个垂直方向上的外边距相遇时，它们会合并成一个单一的外边距。这种现象主要发生在块级元素之间，以及包含关系中的父元素和子元素之间。了解外边距合并对于正确地控制页面布局至关重要。

5.3.2.1 行级元素外边距合并

行级元素的外边距合并行为不同于块级元素。通常情况下，行级元素之间的垂直外边距不会合并。然而，如果将 display: inline-block; 应用到行级元素上，那么这些元素的上下外边距可能会发生合并。例如，相邻的 inline-block 元素如果有垂直外边距，它们之间只会显示较大的那个外边距值

5.3.2.2 块级元素外边距合并
块级元素的外边距合并是更为常见的情况。以下是一些具体的场景：
相邻兄弟元素：当两个垂直排列的块级元素有相邻的外边距时，比如第一个元素的 margin-bottom 和第二个元素的 margin-top，这两个外边距会合并为两者中较大的一个。例如，如果第一个元素的 margin-bottom 是 20px，而第二个元素的 margin-top 是 30px，那么最终这两个元素间的距离将是 30px，而不是 50px
父子元素：当一个块级元素内部包含另一个块级元素，并且没有内边距、边框或者浮动来分隔它们时，父元素的 margin-top 与子元素的 margin-top 会发生合并。同样的情况也适用于 margin-bottom。在这种情况下，合并后的外边距取较大者
例如，父元素有一个 40px 的 margin-top，而其子元素有一个 60px 的 margin-top，那么实际呈现出来的顶部外边距将会是 60px 而不是 100px。
空元素：即使是一个空的块级元素，只要它设置了上下外边距，这些外边距也会发生合并。这意味着一个空的 <div> 如果同时设置了 margin-top 和 margin-bottom，它们将合并成一个外边距，高度为两者中的较大值

如何避免外边距合并
由于外边距合并可能导致布局问题，有时需要采取措施防止这种情况发生。以下是一些常用的方法来解决外边距合并的问题：
设置父元素的边框或内边距：给父元素添加任何非零的边框（如 border: 1px solid transparent;）或内边距（如 padding: 1px;），这样就可以阻止父元素与其子元素之间的外边距合并
使用 overflow 属性：将父元素的 overflow 设置为 hidden 或其他值（如 auto 或 scroll），可以创建一个新的块格式化上下文（BFC），从而阻止外边距合并。
浮动或绝对定位：通过将元素设置为浮动（float: left; 或 float: right;）或将 position 设置为 absolute 或 fixed，可以让该元素脱离正常文档流，这样就不会参与外边距合并了。
改变 display 属性：将块级元素的 display 属性更改为 inline-block 或 flex 也可以避免外边距合并。
使用伪元素：在父元素上使用 ::before 或 ::after 伪元素并设置适当的样式，如 content: ''; display: table;，同样可以创建新的BFC来防止外边距合并。

5.3.3 内边距设置

内边距（Padding）是CSS盒模型中的一个重要属性，它定义了元素内容与边框之间的空白区域。通过调整内边距，可以控制内容在元素内的布局，并且有助于提高可读性和美观性。内边距可以通过四个方向来单独设置，也可以使用简写形式一次性设置所有方向的内边距。
单独设置内边距
padding-top：设置元素顶部的内边距。
padding-right：设置元素右侧的内边距。
padding-bottom：设置元素底部的内边距。
padding-left：设置元素左侧的内边距。

5.3.4 边框设置

元素外边距内就是元素的边框 (border)，它是围绕内边距和元素内容的一条或多条线。在内边距和外边距之间。边框的四条边分别用 border-top、border -right、border-bottom、border-left 表示，它们的属性与内外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性。
边框作为盒模型的某个组成部分，边框的CSS 样式设置将直接影响到盒子的尺寸和外
观。而通过使用 border 属性，可以创建出更佳的边框效果，还可以应用于任何元素。

border属性设置通常有3种：

样式 (border-style)

宽度(border-width)

颜色 (border-color)

5.3.4.1上边框

语法：border-top: border-style I border-width I border-color
参数：该属性是复合属性。需要通过参数设置来实现。

5.3.4.2右边框

语法：border-right: border-style I border-width I border-color
参数：该属性是复合属性。需要通过参数设置来实现。

5.3.4.3下边框

语法：border-bottom:border-style I border-width I border-color
参数：该属性是复合属性。需要通过参数设置来实现

5.3.4.4 左边框

语法：border-left: border-style I border-width I border-color

参数：该属性是复合属性。需要通过参数设置来实现。

5.3.4.5 边框样式的设置

在CSS中，样式是边框最重要的一个设置，因为如果没有样式，在 Web 页面中边框就
不会显示。
border-shyle是一个复合属性，可以同时取1~4个值，取值方法与外边距相似。边框属
性有12个值可选，分别如下：

例如，创建一个实线边框，你可以使用以下CSS代码：

p {
border-style: solid;
}

边框宽度和颜色

border-width 属性允许你为边框指定宽度，可以使用像px、em等单位，或者使用关键字thick、medium、thin来定义。

border-color 属性用于设置边框的颜色，可以使用颜色名称、RGB值或十六进制值。例如，设置一个红色边框：

p {
border-style: solid;
border-color: red;
}

圆角边框

border-radius 属性可以用来创建圆角边框，这在创建按钮或卡片等元素时非常有用。例如，创建一个圆角为10px的边框：

div {
border-radius: 10px;
}

边框简写属性

CSS还提供了border简写属性，允许你在一个声明中设置边框的宽度、样式和颜色。例如，创建一个5px宽、实线、红色的边框：

p {
border: 5px solid red;
}

总结：掌握如上这些属性就可以灵活地设计和实现各种边框效果，增强你的网页设计。记住，要使边框可见，必须设置border-style属性，否则即使你设置了其他边框属性，边框也不会显示。

5.3.5 新增边框属性

阴影效果 - `box-shadow`

box-shadow 属性不仅能够给整个元素添加阴影，还可以给元素的边框添加阴影效果，从而产生立体感。它可以接受多个参数来控制阴影的方向、模糊程度、扩展距离以及颜色。

基本语法：

.box-shadowed {
  box-shadow: h-offset v-offset blur spread color;
}

h-offset：水平偏移量，正值向右，负值向左。
v-offset：垂直偏移量，正值向下，负值向上。
blur：模糊半径，数值越大阴影越模糊。
spread：扩散半径，正数使阴影变大，负数使阴影缩小。
color：阴影的颜色。

案例：

.box-shadowed {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4); /* 水平5px, 垂直5px, 模糊10px, 黑色且透明度0.4 */
}

多重阴影

box-shadow 还支持多重阴影效果，只需在声明中通过逗号分隔不同的阴影即可。、

案例：

.multiple-shadows {
  box-shadow: 2px 2px 5px #ccc, 5px 5px 10px #999; /* 第一层阴影，第二层阴影 */
}

其他新特性
除了上述属性外，CSS3还增强了对边框颜色的支持，现在可以在一个声明中设置多于一种颜色，比如渐变颜色等。此外，对于某些复杂的布局需求，border-color 和 border-width 也可以被独立地应用到各个方向，提供更细粒度的控制。

总结：CSS3中的这些新增边框属性提供了极大的灵活性和创造性，让网页设计者能够构建出更加丰富和吸引人的用户界面。理解和熟练运用这些属性，可以帮助设计师更好地表达创意并提升用户体验。

5.4 CSS元素的定位

CSS中的元素定位是网页布局的重要组成部分，它允许开发者控制页面上元素的具体位置。CSS提供了多种定位方式，每种方式都有其特定的应用场景和特点。主要的定位方式包括：static（静态）、relative（相对）、absolute（绝对）、fixed（固定）以及sticky（粘性）。下面将详细介绍这些定位方法。

5.4.1 static 定位

定义：这是所有元素默认的定位方式。使用静态定位的元素按照文档流正常排列，不受top、 right、bottom、left等偏移属性的影响。
特点：不改变元素在正常文档流中的位置，因此不能通过定位属性来移动元素。
应用场景：当不需要对元素进行特殊定位时使用。
案例：

.static {
  position: static;
}

5.4.2 relative定位

定义：相对定位会相对于元素原本应该出现的位置进行定位。设置相对定位后，可以通过top、right、bottom、left属性来调整元素的位置。
特点：元素仍然占据原来的空间，不会影响其他元素的布局。但是，它的视觉位置可以被移动。
应用场景：常用于需要轻微调整元素位置但又不想影响整体布局的情况。

案例：

.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

5.4.3 absolute定位

定义：绝对定位的元素会被完全从文档流中移除，然后根据最近的非static定位的祖先元素进行定位；如果没有这样的祖先元素，则基于初始包含块（通常是视口）。
特点：绝对定位的元素不再占用文档流中的空间，所以它可以覆盖其他元素。如果设置了宽度和高度，那么元素尺寸会由内容决定。
应用场景：适合创建弹出层、工具提示等独立于文档流的元素。
案例：

.absolute {
  position: absolute;
  top: 20px;
  right: 30px;
}

5.4.4 fixed定位

定义：固定定位的元素与绝对定位类似，但它相对于浏览器窗口而不是最近的已定位祖先元素。无论用户如何滚动页面，固定定位的元素都会保持在屏幕上的同一位置。
特点：固定定位同样会使元素脱离文档流，且该元素的位置不受滚动条的影响。
应用场景：适用于导航栏、广告横幅等需要始终显示在屏幕上某个位置的元素。

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

5.4.5. 粘性定位 - `position: sticky;`

定义：粘性定位是一种混合了相对定位和固定定位的特性。元素首先按相对定位处理，直到达到某个阈值（如top, bottom, left, right其中之一），之后就像固定定位一样“粘”在指定位置。
特点：只有当用户滚动到元素的阈值位置时，它才会变成固定状态。在此之前，它表现得像相对定位一样。
应用场景：适用于侧边栏、头部等希望在一定条件下固定的元素。

示例：

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

元素层级 - z-index
定义：z-index 属性用于控制重叠元素的堆叠顺序。具有较高z-index值的元素将会覆盖较低z-index值的元素。
特点：仅适用于定位元素（即position值不是static的元素）。正数或负数都可以用作z-index的值。
应用场景：当多个元素重叠时，用来决定哪个元素出现在最上方。
示例代码：

.higher-layer {
  position: relative;
  z-index: 2;
}
 
.lower-layer {
  position: absolute;
  z-index: 1;
}

5.5 CSS元素的浮动

CSS中的float属性是一个强大的布局工具，它允许块级元素向左或向右移动，并且周围的文本和其他内容会环绕这个浮动的元素。最初，float是为了让文字可以围绕图片而设计的，但后来它被广泛应用于创建复杂的网页布局。

5.5.1 盒子的浮动添加

浮动的基本概念
定义：float属性指定一个元素应该沿着其容器的左侧或右侧放置，允许文本和内联元素环绕它。浮动元素从正常的文档流中移除，但仍然保持部分流动性（与绝对定位不同）。
特点：浮动元素不会影响前面的内容，但是会影响后面的内容。后面的元素会重新排列以适应浮动元素的位置。
应用场景：常用于多列布局、图像环绕文本等场景。
float属性值
left：元素向左浮动。
right：元素向右浮动。
none：默认值，表示元素不浮动。
inherit：继承父元素的float属性。

示例：

.float-left {
  float: left;
}
 
.float-right {
  float: right;
}

浮动的影响
当一个元素设置了浮动之后，它会被移出正常的文档流，这意味着其他非浮动元素将忽略它的存在并占据它原来的空间。这种特性使得创建多列布局变得容易，但也可能导致一些布局问题，比如父元素的高度塌陷。

5.5.2 盒子的浮动清除

由于浮动会导致某些布局上的问题，例如包含浮动元素的父元素高度塌陷，因此需要使用清除浮动的方法来解决这些问题。常见的清除浮动方法包括：

额外标签法：在最后一个浮动元素后添加一个空的HTML元素，并设置clear:both;。
父级添加overflow属性：给包含浮动元素的父元素添加overflow: hidden;或overflow: auto;。
伪类清除：使用:after伪元素配合content, display, clear等属性来实现。
BFC (Block Formatting Context)：通过创建一个新的BFC环境来包裹浮动元素，通常可以通过设置overflow: hidden;或其他触发BFC的方式实现。
示例：：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后在HTML中应用.clearfix类到需要清除浮动的父元素上。

多个浮动元素

当多个元素同时设置为浮动时，它们会尽可能地靠近在一起，直到没有足够的空间为止。如果空间不足，后续的浮动元素将会换行显示。这使得浮动成为创建多列布局的一种有效手段。

示例：

<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
 
<style>
.column {
  float: left;
  width: 33.33%; /* 为了简化，假设每列宽度相等 */
  box-sizing: border-box; /* 确保边框和填充不会增加元素宽度 */
}
</style>

注意事项
当使用浮动进行布局时，要确保清理浮动，以避免布局错乱。
在现代布局技术如Flexbox和Grid出现后，对于许多情况，浮动已经不是首选的布局方式了。然而，在特定情况下，特别是对于较简单的布局或者需要向后兼容旧浏览器时，浮动仍然是一个有用的工具。

5.6 综合案例——昵心美食空间

<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>昵心美食空间</title>
	    <style type="text/css">
	        * {
	            margin: 0;
	            padding: 0;
	            background-color: #fff999;
	        }
	        a {
	            color: red;
	            text-decoration: none;
	        }
	        .all {
	            width: 700px;
	            height: 650px;
	            margin: 10px auto;
	            padding: 5px;
	            background-image: url('4465CAF7A217F1A5103C23623BE7CD18.jpg');
	            background-size: cover;
	        }
	        .banner, .menu, .bottom {
	            width: 100%;
	            height: 70px;
	        }
	        .menu {
	            height: 40px;
	        }
	        .main {
	            width: 700px;
	            height: 450px;
	            margin: 5px 0;
	            position: relative;
	            overflow: hidden;
	        }
	        .left, .right {
	            width: 150px;
	            height: 440px;
	            border: 1px solid #999;
	            float: left;
	            overflow: hidden;
	        }
	        .middle {
	            width: 384px;
	            height: 450px;
	            margin: 0 5px;
	            float: left;
	            font-size: 20px;
	            font-family: "楷体";
	            font-weight: 700;
	            color: #0000ff;
	        }
	        .one {
	            width: 380px;
	            height: 155px;
	            border: 1px solid #999;
	            padding: 10px;
	            box-sizing: border-box;
	        }
	        .two {
	            width: 255px;
	            height: 100px;
	            border: 1px solid #999;
	            margin: 20px 0;
	            border-radius: 25px;
	            display: flex;
	            align-items: center;
	            justify-content: center;
	        }
	        .three {
	            width: 380px;
	            height: 135px;
	            border: 1px solid #999;
	            padding: 10px;
	            box-sizing: border-box;
	        }
	        .bottom {
	            width: 700px;
	            height: 70px;
	            text-align: center;
	            font-family: "楷体";
	        }
	    </style>
	</head>
	<body>
	    <div class="all">
	        <div class="banner">
	            <img src="照片/banner.jpg" width="700" height="70" alt="Banner"/>
	        </div>
	        <div class="menu">
	            <img src="照片/menu.jpg" width="690" height="40" alt="Menu"/>
	        </div>
	        <div class="main">
	            <div class="left">
	                <marquee direction="up">
	                    <img src="照片/mm_1.jpg" width="150" height="140" alt="Image"/>
	                    <img src="照片/mm_2.jpg" width="150" height="140" alt="Image"/>
	                    <img src="照片/mm_3.jpg" width="150" height="140" alt="Image"/>
	                </marquee>
	            </div>
	            <div class="middle">
	                <div class="one">
	                    <img src="照片/font.jpg" width="25" height="25" alt="Icon"/> 为您推荐
	                    <br/><br/>
	                    <img src="照片/x_1.jpg" width="80" height="40" alt="Recommendation"/>
	                    <img src="照片/x_2.jpg" width="80" height="40" alt="Recommendation"/>
	                    <img src="照片/x_3.jpg" width="80" height="40" alt="Recommendation"/>
	                    <img src="照片/x_4.jpg" width="80" height="40" alt="Recommendation"/>
	                    <img src="照片/x_5.jpg" width="80" height="40" alt="Recommendation"/>
	                    <img src="照片/x_6.jpg" width="80" height="40" alt="Recommendation"/>
	                </div>
	                <div class="two">
	                    <h1>昵心美食空间</h1>
	                </div>
	                <div class="three">
	                    <img src="照片/font.jpg" width="25" height="25" alt="Icon"/>
	                    <br/>
	                    <a href="#">1. 火锅团购</a><br/>
	                    <a href="#">2. 烧烤团购</a><br/>
	                    <a href="#">3. 自助餐团购</a><br/>
	                    <a href="#">4. 新春特惠</a><br/>
	                </div>
	            </div>
	            <div class="right">
	                <marquee direction="up">
	                    <img src="照片/good_1.jpg" width="150" height="140" alt="Image"/>
	                    <img src="照片/good_2.jpg" width="148" height="140" alt="Image"/>
	                    <img src="照片/good_3.jpg" width="148" height="140" alt="Image"/>
	                </marquee>
	            </div>
	        </div>
	        <div class="bottom">
	            <hr color="#0000ff">
	            版权所有&copy;昵心美食空间<br/>
	            地址:江门市大学路XXX号 邮编:500000 电话:0750-9999999
	        </div>
	    </div>
	</body>
	</html>