communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

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>流动模式下的块状元素</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%

Formation continue
||
<!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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492784 joue