HTML+CSS Facile à démarrer avec les éléments de bloc du modèle fluide
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>流動(dòng)模式下的塊狀元素</title>
<style type="text/css">
#box1{
width:300px;
height:100px;
}
div,h1,p{
border:1px solid red;
}
</style>
</head>
<body>
<div id="box2">中國(guó)</div><!--塊狀元素，由于沒(méi)有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<h1>PHP 中文網(wǎng)</h1><!--塊狀元素，由于沒(méi)有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<p>測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼</p>
<!--塊狀元素，由于沒(méi)有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<div id="box1">強(qiáng)軍</div><!--塊狀元素，由于設(shè)置了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%
