Parlons d'abord du modèle de flux. Flow est le mode de mise en page par défaut des pages Web. C'est-à-dire que les éléments Web HTML de la page Web dans l'état par défaut distribuent le contenu de la page Web selon le modèle de flux.
Le modèle de disposition fluide a deux caractéristiques typiques :
Premièrement, les éléments de bloc seront étendus verticalement et distribués dans l'ordre de haut en bas dans l'élément conteneur, car dans Par défaut, la largeur de les éléments de bloc sont à 100 %. En effet, les éléments de bloc occuperont leur position sous forme de rangées.
Ci-dessous, nous écrivons un exemple d'élément de bloc sous le modèle de flux. Le code est le suivant :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
#box1{
width:300px;
height:100px;
}
div,h1,p{
border:1px solid red;
}
</style>
</head>
<body>
<div id="box2">中国</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<h1>PHP 中文网</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<p>测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码</p>
<!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div id="box1">强军</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html> Dans le code ci-dessus, la largeur des trois étiquettes d'élément de bloc (div, h1). , p) s'affiche à 100%
section suivante