Three ways of CSS page layout

Layout of elements in web pages

The There are many elements in a web page, so what are these elements sorted by? It cannot be groundless. Why do some elements occupy a whole row while others can be displayed in a row. This article will tell you the arrangement basis of elements in the page in detail.

Types of elements

The Elements in HTML can be divided into the following types:

Block element

The This type of element has the following characteristics:

The 1. Exclusive row display, vertical arrangement. This is the most basic feature of a block element.

The 2. You can set the size (the width and height attributes work on expired elements)

The most common block level elements are h1~h6 titles, p, section, header, footer, etc., of which div is the most representative

Inline element

The This type of element has the following characteristics:

1. Arrange horizontally, and do not monopolize a row.

2. Cannot set size (width and height attributes have no effect on elements of this type)

Common inline elements include a, span, etc.

Inline block element

The This type of element combines the characteristics of the above two elements:

1. Arrange horizontally, and do not monopolize a row.

2. The size of the element can be set (the width and height attributes work on expired elements)

Common inline block elements include img and input.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			
			div {
				width: 200px;
				height: 200px;
				background-color: red;
				margin: 10px;
			}
			input {
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="">
			This is a block level element
		</div>
		<div id="">
			This is a block level element
		</div>
		<a href="#"> this is an inline element</a>	
		<a href="#"> this is an inline element</a>	
		<a href="#"> this is an inline element</a> 	< Br> <br>
		
		<input type="text" name="" id="" value="Inline block element" />
		<input type="text" name="" id="" value="Inline block element" />
	</body>
</html>

Results:

Conversion between elements

The These elements can be converted to each other before. The css attribute used is the meaning of display. Let's take a look at the values it needs to use to transform elements.

The Display:block - when this style is set, the element is displayed in the form of a block element. Its other function is to display elements.

The display:inline - block when the style is set, the element is displayed as an inline block element.

The display:inline when this style is set, the element is displayed as an inline element.

With these styles, you can convert the three elements in a web page to each other.

Three ways of page layout - normal document flow, floating and positioning

The On the page, we often see the order of some elements, some horizontal and some vertical. There are also some elements in every corner of the page. What are these elements arranged by?

Normal document flow

The The elements in the page are sorted by default, that is, block level elements are arranged vertically and horizontal elements are rendered horizontally. In a web page, the layout of such elements is called normal document flow. A normal document stream is also called a standard stream. The above figure shows the arrangement of normal document streams. At this time, all the elements are in the same plane.

float

The This type of layout is also common in pages. As can be seen from the creation name, it is a layout method that is separated from the document flow (that is, floating elements and ordinary flow elements are not in the same plane). Floating elements can be placed above other ordinary elements in the page and defined with the float attribute. Its values mainly include left and right, representing left and right floating respectively.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			
			div {
				width: 200px;
				height: 200px;
				background-color: red;
				margin: 10px;
		</style>
	</head>
	<body>
		<div id="">
			This is a block level element
		</div>
		<div id="">
			This is a block level element
		</div>
		<div id="">
			This is a block level element
		</div>
	</body>
</html>

Results:

The above three boxes belong to the elements of ordinary flow, because they are block level elements arranged vertically. At this time, the three elements are in the same plane. After floating is set for 3 boxes, the result is as follows:

It can be seen from the above results that the elements have changed from vertical arrangement to horizontal arrangement. Because all three elements float to the left, the three elements are arranged vertically from the first.

[note]: from here on, the three elements have been separated from the document flow (standard flow), which is generally referred to as element de labeling. If there is a normal flow element below the element, it will be arranged to the top left. As shown below:

The light blue box is the element of the ordinary document flow. Originally, it was behind the Div. because the three divs have been off marked, the original position of the page has been emptied. At this time, the element of the ordinary document flow will be added. (the three div's and the box below are no longer in the same plane.)

What would happen if there was a normal flow element at the top?

As a result, the floating elements cannot affect the elements in front of them. Therefore, if the previous elements are block level elements, they will monopolize a row according to the arrangement of the normal flow, and the floating elements in this row will start a new row. This leads to a conclusion:

Floating elements cannot affect the elements before them, but only the elements after them.

<div id="">
			This is a block level element
		</div>
		<div id="">
			This is a block level element
		</div>
		<div id="">
			This is a block level element
		</div>
		<p>dhoeuicfhjoeifhceowihfjwei0ohfyo0</p>

Results:

According to our thinking, the following elements will be added to the front, because there is no element in the front (the previous element is de labeled), in fact, the p element is already in the front:

The question is why does the text appear on the right?

The Since the initial function of floating is not to layout page elements, but to set the text wrapping effect, it should be known that floating will automatically adjust the text in the following elements to its own surroundings, which is related to its initial function. Up to now, I still haven't forgotten my original intention. It really moved me. Sobbing, sobbing MMJ MMJ MMJ

The Even floating will cause off standard, which will inevitably affect other elements when used. css also provides an attribute that can be used to eliminate the impact of floating, that is, the clear attribute. Its values are as follows: left, right, and both. It is used to clear the left, right and both sides respectively.

For example, the following scenarios are often encountered in actual development:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			
			div {
				width: 200px;
				height: 200px;
				background-color: red;
				margin: 10px;
				float: left;
				}
				
			header {
				width: 800px;
				height: 40px;
				background-color: green;
			}	
			footer {
				width: 800px;
				height: 40px;
				background-color: blueviolet;
			}	
		</style>
	</head>
	<body>
		
		<header>
			This is the title
		</header>

		<div id="">
			Content 1
		</div>
		<div id="">
			Content 2
		</div>
		<div id="">
			Content 3
		</div>
		<footer>
			footer
		</footer>
	</body>
</html>

Results:

After the contents between the footers of this page are floated, the following contents will be affected. To eliminate this insidious, you can use the clear attribute to set it on the footer, and the footer float will be cleared, so that it is displayed in the form of standard flow:

In order to arrange elements normally, you need to clear the elements behind the float:

Tags: css

Posted by Ghost_81st on Mon, 30 May 2022 11:13:17 +0530