Understanding the basic knowledge of div css layout_html/css

The Brisket news release system uses a lot of BS technology, and a large part of the beautiful web pages we see are realized by div css technology, which is a web page layout method.

is an HTML tag. It constitutes a block-level element. There will be line breaks before and after the content marked by it. When it appears as a div element on the web page, it will automatically break lines before and after. It can break large pages into multiple parts. Then you can style these parts separately in CSS, and compared with table layout, div CSS separates content and style performance.

To learn a technology, you must start by mastering its basic concepts. Let’s take a look at the basic concepts in div css.

First let’s take a look at the effect of the div display on the page

First write the tags in the html, where the tag is inline

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

Copy after login

Set the style in the managed CSS

<span style="font-size:24px;">.cs { /*给所有class是cs的加上边框*/border:2px solid #00f;} </span>

Copy after login

Result: The span tag occupies a position size equal to the content The same size, while the div tag occupies a whole row.

Standard flow: It can be understood that the order of content displayed on the web page and the order of content written in HTML are consistent with the standard flow.

As in the above example, test 1, test 2, test 3, test 4, the display order in the web is the same as the order written in html. Because Test 1 and Test 2 are marked with , they will be displayed on the same line. Test 3 should be displayed next to Test 2 but because the

tag is used, there will be a line break in front of it, causing Test 3 to start on a new line. Test 4 is the same

Box Model: First look at a picture

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

Padding: padding, divided into top, bottom, left and right. It is equivalent to the distance from the object we put in the box to the border of the box. These four distances are also adjustable.

Border: The border, that is, the thickness of the box, is also adjustable.

Margin: External margin, divided into top, bottom, left and right. The above three parts can be regarded as a box containing objects, and the distance between boxes and between boxes and other borders is determined by margin.

Float : Elements that use float will break away from the standard flow. As shown below

The first one is without floating, and the three elements are displayed in order. The second picture is Left floating is used for element 1, so that element 1 is out of the standard stream, so there are only elements 2 and 3 in the standard stream, and they are still displayed in order.

Positioning : divided into relative positioning and absolute positioning.

Relative positioning : The element is positioned relative to its original position, as in the following example:

Before relative positioning is used

After using relative right positioning for test 2

It does not break away from the standard flow, it just deviates from its original position .

Absolute positioning: The element is positioned relative to its nearest positioned parent tag.

Case 1

In HTML

In CSS

<span style="font-size:24px;">        <div class=”yellow”>	<div class=”green”>	<div id="cs1" class="cs">测试一</div>    	<div id="cs2" class="cs">测试二</div>    	<div id="cs3" class="cs">测试三</div></span>

Copy after login

<span style="font-size:24px;">         .yellow{		/*不使用position进行定位*/	  }	  .green{		position:absolute;/*使用position进行定位*/	  }	  #cs2{		position:absolute;right:30px;	  }</span>

Copy after login

Case 2

In CSS

<span style="font-size:24px;">         .yellow{		position:absolute;/*使用position进行定位*/	  }	  .green{		/*不使用position进行定位*/	  }  	  #cs2{		position:absolute;right:30px;	  }</span>

Copy after login

Case 3

If there is no positioned parent tag, the absolute positioning of the element will be based on the browser's border.

Summary

Div css is a very important technology for designing web page layout, and mastering these basic knowledge can better help us Design the web page and style it well.

Related labels：

div+css布局基础知识理解

source：php.cn

Previous article：The web page is placed on the mobile page, scaling problem_html/css_WEB-ITnose Next article：Awkward handling of min-height when mobile device page height is insufficient_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Understanding the basic knowledge of div css layout_html/css_WEB-ITnose