Basic knowledge of div + css layout, basic knowledge of divcss Layout

Basic knowledge of div + css layout, basic knowledge of divcss Layout

The niugu news publishing system uses a lot of BS technology, and a large part of the exquisite webpage we see is implemented by div + css technology, div + css is a webpage layout method. <Div> is an HTML tag, which constitutes a block-level element. line breaks are generated before and after the TAG content, on the web page, a line break is automatically displayed before and after a div element. It can split a large page into multiple parts. In css, you can set the styles for these parts separately. In addition, compared with the table layout, div + css separates the content and style.

To learn the same technology, you must first master its basic concepts. Let's look at the basic concepts in div + css.

First, let's take a look at the effect of div on the page.

First, write the tag in html, where the <span> tag is in the row

<Span style = "font-size: 24px; "> <span class =" cs "> Test 1 </span> <span class =" cs d2 "> Test 2 </span> <div class =" cs "> Test 3 </div> <div class = "cs d1"> Test 4 </div> </span>

Set the style in the managed CSS

<Span style = "font-size: 24px;">. cs {/* adds a border to all classes that are cs */border: 2px solid # 00f ;}</span>

Result: The size of the position occupied by the span tag is the same as that of the content, while that of the div tag occupies a whole line.

Standard stream: It can be understood that the order in which the content is displayed on the web page is consistent with the order in which the content is written in HTML.

In the preceding example, Test 1, Test 2, Test 3, and test 4 are displayed in the same order as they are written in html. Because Test 1 and Test 2 are marked by <span>, they are displayed in the same row. Test 3 should be followed by Test 2, but because the <div> flag is used, there will be a line break before it, resulting in another line from Test 3. Test 4 likewise

 

Box Model: First, let's look at a chart.

Content: Content area, equivalent to the size of the object we put in the box. However, in the box model, the "object size" can be adjusted using the height and width attributes.

Padding: Padding, divided into upper, lower, and left. This is equivalent to the distance from the box object to the border of the box. The four distances are also adjustable.

Border: Border, that is, the thickness of the box.

Margin: Margin, divided into upper, lower, and left. The preceding three parts can be regarded as a box containing objects, while the distance between the box and other borders is determined by margin.

 

Floating: Floating elements are used to exit the standard stream. For example

The first one is not floating, and the three elements are displayed in order. The second figure uses the left floating for element 1, so that element 1 is out of the standard stream, therefore, only element 2 and element 3 are displayed in sequence in the standard stream.

Positioning: Divided into relative positioning and absolute positioning.

Relative positioning: Locate the element relative to its original location, as shown in the following example:

Before relative positioning is used

Use relative orientation to the right after test 2

It is not isolated from the standard stream, but deviated from its original position.

 

Absolute Positioning: Locates the parent tag closest to the element.

Scenario 1

In HTML

<Span style = "font-size: 24px; "> <div class =" yellow "> <div class =" green "> <div id =" cs1 "class =" cs "> Test 1 </div> <div id = "cs2" class = "cs"> Test 2 </div> <div id = "cs3" class = "cs"> Test 3 </div> </span>

In CSS

<Span style = "font-size: 24px;">. yellow {/* do not use position for locating */}. green {position: absolute;/* use position to locate */} # cs2 {position: absolute; right: 30px ;}</span>

Case 2

In CSS

<Span style = "font-size: 24px;">. yellow {position: absolute;/* use position to locate */}. green {/* positioning without position */} # cs2 {position: absolute; right: 30px ;}</span>

Case 3

If no parent class tag is located, the absolute positioning of the element is based on the border of the browser.

Summary

Div + css is an important technology for designing webpage la S. Mastering these basic knowledge can help us better design webpage styles.