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

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>

Set the style in the managed CSS

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

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>

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

Case 2

In CSS

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

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.

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7530

15

CakePHP Tutorial

1378

52

What is the format of the account name of steam

82

11

win11 activation key permanent

54

19

nyt connections hints and answers

21

76

Show More