HTML+CSS 流体モデルのブロック要素で簡単に始められる

まずフローモデルについて説明しましょう。フローはデフォルトの Web ページレイアウトモードです。つまり、デフォルト状態の Web ページの HTML Web 要素は、フローモデルに従って Web コンテンツを配信します。

流体レイアウトモデルには 2 つの典型的な特性があります:

まず、デフォルト状態ではブロック要素の幅がすべて 100% であるため、ブロック要素は含まれる要素内で上から下に順番に垂直に拡張されて分散されます。実際、ブロック要素は行の形式でその位置を占めます。

フローモデルの下にブロック要素の例を書いてみましょう。コードは次のとおりです。

<!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>

上記のコードでは、3つのブロック要素タグ(div,h1,p)の幅が100%で表示されています

学び続ける

新しいファイル

<!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> <h1>PHP 中文网</h1> <p>测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码</p>  <div id="box1">强军</div> </body> </html>

提出するリセットコード

自動運転