CSS文档流和盒模型-画彩虹实践

前端

2023-11-02 16:05:19

前言

CSS是Cascading Style Sheets的缩写，中文译为层叠样式表。它是用来HTML元素如何呈现的语言。CSS可以控制元素的颜色、字体、大小、边框等属性。同时，CSS还可以用来控制元素的布局。

文档流

文档流是指元素在浏览器中排列的方式。元素可以分为块级元素和行内元素。块级元素会独占一行，而行内元素则会和其他元素共用一行。

盒模型

盒模型是CSS中用来元素边框、内边距和外边距的模型。盒模型将元素分为四部分：内容区域、内边距区域、边框区域和外边距区域。

画彩虹实践

现在，让我们以画彩虹的实践为例，来学习CSS文档流和盒模型的知识。

步骤1：创建HTML代码

首先，我们需要创建一个HTML文件，并在其中添加以下代码：

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="rainbow">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="indigo"></div>
<div class="violet"></div>
</div>
</body>
</html>

步骤2：创建CSS样式

接下来，我们需要创建一个CSS文件，并在其中添加以下代码：

.rainbow {
display: flex;
flex-direction: row;
}

.red {
width: 100px;
height: 100px;
background-color: red;
}

.orange {
width: 100px;
height: 100px;
background-color: orange;
}

.yellow {
width: 100px;
height: 100px;
background-color: yellow;
}

.green {
width: 100px;
height: 100px;
background-color: green;
}

.blue {
width: 100px;
height: 100px;
background-color: blue;
}

.indigo {
width: 100px;
height: 100px;
background-color: indigo;
}

.violet {
width: 100px;
height: 100px;
background-color: violet;
}