HTML+CSS Easy to Get Started with Block Elements of Fluid Model

Let’s talk about the flow model first. Flow is the default web page layout mode. That is to say, the HTML web elements of the web page in the default state distribute the web page content according to the flow model.

The fluid layout model has two typical characteristics:

First, the block elements will be vertically extended and distributed in order from top to bottom within the containing element, because in By default, the width of block elements is 100%. In fact, block elements all occupy positions in the form of rows.

Below we write an example of a block element under the flow model. The code is as follows:

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

The width of the three block element labels (div, h1, p) in the above code is displayed as 100%

Continuing Learning

new file

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

submit Reset Code

Automatic operation

HTML+CSS Easy to Get Started with Block Elements of Fluid Model

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]