Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use div and span". In daily operation, I believe many people have doubts about how to use div and span. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use div and span". Next, please follow the editor to study!

Content summary

The basic usage and common attributes of DIV tags.

The meaning of DIV nesting and cascading.

Syntax of SPAN tags, flexible use of SPAN tags.

The difference in the use of DIV and SPAN tags. DIV is used for multiline, large area; SPAN is used for inline markup.

Use DIV+CSS for easy page layout.

HTML block-level elements

Block-level elements (block level element) usually start with a new line when displayed in a browser.

For example:,

、 、

HTML inline elements

Inline elements (inline element) do not usually start with a new line when displayed in a browser.

For example:,

HTML element

The HTML element is a block-level element, which is a container for combining other HTML elements.

Elements have no specific meaning. Because it is a block-level element, the browser displays line breaks before and after it.

When used with CSS, elements can be used to set style attributes on large blocks of content.

Another common use of elements is document layout. It replaces the old-fashioned method of using tables to define layouts.

Case 1:

The div element is a block-level element. Black; color {background-color: white; margin: 20px; / * Container margin * / padding: 20px / * container inner margin * /} London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

11111 2222 test hello

Note: make clear the three concepts of margin, padding and border, and do not confuse them.

Margin: the distance between the container itself and other containers

Padding: the distance between the contents inside the container (content) and the container border.

Border: the border of the container.

In addition: top stands for top, bottom for bottom, left for left, and right for right.

Case 2:

The div element has no specific meaning. Div {background-color: rgb (7,6,6); color: white; margin: 20px; padding: 20px;} span.red {color: red;} H2 {text-align: center } key point: div uses span to compare London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital and most populous city of France.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Explanation:

In this case, through the reasonable setting of margin and padding, there is a reasonable spacing between different div, and the internal text of div also has a proper spacing.

Note the use of the span tag, which is used for special handling of the specified content. In the above case, the font color is changed for "div use".

Case 3:

DIV nesting and cascading. Div1 {padding: 50px; background: red; width: 400px; height: 400px; position: relative; left: 10px Top: 10px;} .div2 {padding: 60px; background: green; position: absolute; left: 0px; top: 0px } use DIV+CSS for easy page layout

Explanation:

In .div1, it is defined that the internal margin of padding is 50 pixels, the background color of background is red, the width of width container is 400 pixels, the height of height container is 400 pixels, the positioning type of position is relative relative positioning (relative positioning moves the element according to its original position), left is 10 pixels on the left side of the container, and top is 10 pixels on the upper side of the container.

In .div2, the padding internal margin bit is 60 pixels, the background background color is green, and the position positioning type is absolute absolute positioning (absolute positioning will position the element according to the absolute position of the page, and the specified element can be placed in the specified position on the page through absolute positioning), left is 0 pixel on the left side of the container, and top is 0 pixel on the upper side of the container.

There are three types of postion positioning:

Focus on the second block, which is the normal state or the initial position when the relative positioning horizontal and vertical offset is 0:

Position:relative; relative positioning: set the relative positioning of an element, then the element will first appear in the document stream where it should appear, and then move according to the set offset according to that position.

-this is the result of the second block after the left offset is 50 pixels and the upper offset is 30 pixels using relative positioning. Please note that some of its content overlaps with the third block, but its initial position in the document stream is still occupied (marked in the dotted box), and its initial position will not be filled by the third block even if the offset is set to large. At the same time, its offset position will not squeeze other blocks away from the position of the document stream, if there is overlap, it will overlap with other elements.

Position:absolute; absolute positioning: elements are positioned relative to the absolute value of the page.

The second block in the following illustration is the style when absolute positioning is not used.

An element that uses absolute positioning will deviate from the document stream, that is, its original position will be occupied by other elements, and it will overlap with other elements.

Case study:

When you want to use absolute positioning, you must have two conditions (formula: father and son must be unique):

Positioning attributes must be added to the parent element (which can also be grandfather or great-grandfather), and position:relative is generally recommended.

Add an absolute positioning position:absolute to the child element, and specify the left, right, top, and bottom attributes.

+ the second block in the following figure is the style when absolute positioning is used.

Position:fixed; fixed positioning: places the element in a docked position in the browser window so that it does not move even if the window scrolls.

Fixed positioning makes the position of the element independent of the document flow, so it does not take up space.

Elements positioned by Fixed overlap with other elements.

Position:fstatic; static positioning: the default value of the HTML element, that is, no positioning, following the normal document flow object. In addition, statically positioned elements are not affected by top, bottom, left, and right.

HTML element

The HTML element is an inline element that can be used as a container for text.

Elements have no specific meaning.

When used with CSS, the element can be used to set style properties for the specified text.

And the difference

Used to define division partitions or section sections in a document.

Used to specify inline elements in the document.

Div layer

Div (division/section) definition

Is a block-level element with newline characters before and after it to define partitions or sections in the document.

Basic grammar

The contents of the block

Layer CSS Properti

Position: location, static | absolute | relative | fixed, where static is the default

Width | height: width of the layer | height of the layer

Left | top: left margin | Top margin

Border: border, "thick and thin shape color"

Z-index: layers overlap, the child layer is always above the parent layer, and the larger the value, the higher the upper layer, provided that the value of the position attribute is "absolute".

Clear

Clear:none, the default value, allows floating elements on both sides.

Clear:left, no floating elements on the left.

Clear:right, no, there are floating elements on the right.

Clear:both, no floating elements.

Fload

Fload:left, the current element floats to the left.

Fload:right, the current element floats to the right.

Fload:none, the current element does not float.

Layer nesting and overlap

Layers contain other layers, called nesting of layers.

Layer nesting often needs to be used with CSS styles to more accurately control the display of the page.

Case 1, layer nesting:

Nesting of layers .inline _ div {display: inline-block; / * inline display * /} # wrap {width: 450px; height: 250px Border: 2px solid black;} # D1 {height: 100px; width: 225px; background-color: green; margin: 20px red; float: left / * margin indicates margin * /} # D2 {height: 100px; width: 225px; background-color: green; margin: 20px red; float: left / * margin indicates margin * /} # d2 {background-color: yellow;} # d3 {height: 80px; width: 400; border: 2px solid black Background-color: # 66ff33; margin: 0 auto; clear: both;} h4 {font-size: 28px; color: # 0033ff } the application layer of layer nesting contains other layers, which is called the nesting of layers. Layer nesting often needs to be used with CSS styles for DIV+CSS and easy page layout

Case 2, layer overlap:

Layer overlap body {margin: 0; / * margin indicates margin * /} div {position: absolute / * absolute positioning * / width: 200px; height: 200px;} # D1 {background-color: black; color: white / * z-index: the map is layered, and the child layer is always above the parent layer, and the larger the value, the higher the upper layer, as long as the value of the position attribute is "absolute". * / z-index: 0; / * the layer is at the bottom * /} # D2 {background-color: red; top: 25px; left: 50px Z-index: 1; / * the layer is in the middle * /} # d3 {background-color: yellow; top: 50px; left: 100px; z-index: 2 / * the layer is on top * /} div1 div2 div3

The difference between the use of div tags and span tags

Neither the div tag nor the span tag formats or renders the content within the tag by default, and it only appears different if you use CSS to define the corresponding style.

Div tags are block tags that generally contain a wide range and automatically wrap before and after an area; span tags are inline markers with a narrow range, usually within a line, and do not automatically wrap outside the range of this area.

In general, div tags can contain span tags, but span tags cannot contain div tags.

However, block tags and row tags are not absolute, and can be converted to each other by defining the display attribute of CSS.

Case study:

The use of div div {background-color: # f6f6f6; color: # 0000000; height: 2mm; margin: 2px / * margin indicates margin * /} .inline _ disp {display: inline; / * change div display * /} .block _ disp {display: block / * change the span display mode * / height: 4em; background-color: rgb (200,200,200); margin: 2px / * margin indicates margin * /} this is div1, this is div2, this is span1, this is span2, this is div3, this is div4, this is span3. In pages typeset with CSS, the div tag and the span tag are two commonly used tags. Using these two tags, coupled with the control of its style by CSS, you can easily achieve a variety of effects. This is span4, and the div tag and the span tag are two common tags in pages that use CSS typesetting. Using these two tags, coupled with the control of its style by CSS, you can easily achieve a variety of effects.

Display:inline; specifies that the element is displayed within the line.

Display:block; specifies that the element is displayed within the block.

Use the HTML layout of the element

Elements are often used as layout tools because they can be easily located through CSS.

Case study:

Layer overlap body {margin: 0; / * margin indicates margin * /} div {position: absolute / * absolute positioning * / width: 200px; height: 200px;} # D1 {background-color: black; color: white / * z-index: the map is layered, and the child layer is always above the parent layer, and the larger the value, the higher the upper layer, as long as the value of the position attribute is "absolute". * / z-index: 0; / * the layer is at the bottom * /} # D2 {background-color: red; top: 25px; left: 50px Z-index: 1; / * the layer is in the middle * /} # d3 {background-color: yellow; top: 50px; left: 100px; z-index: 2 / * the layer is on top * /} div1 div2 div3

Site layout using HTML5

The new semantic elements provided by HTML5 define different parts of the web page:

Tag usage header definition document or section header nav definition navigation link container section definition section article definition independent self-contained article aside definition content (such as sidebar) footer definition document or section footer details definition additional details summary definition details element title

Use, and to create a multi-column layout.

Case study:

Website layout using HTML5 header {background-color: black; color: white; text-align: center; padding: 5px;} nav {line-height: 30px; background-color: # eeeeee; height: 300px; width: 100px; float: left Padding: 5px;} section {width: 350px; float: left; padding: 10px;} footer {background-color: black; color: white; clear: both; text-align: center; padding: 5px } City Gallery London

Paris

Tokyo

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Copyright W3Schools.com

Display property of CSS

Display: specifies the type of display box that the element should generate.

For document types such as HTML, it can be dangerous to use display carelessly because it may violate the display hierarchy already defined in HTML.

Attribute usage none this element will not be displayed. Block this element will be displayed as a block-level element with line breaks before and after. By default, this element is displayed as an inline element with no line breaks before and after the inline. Inherit inherits the value of the display attribute of the parent element. At this point, the study on "how to use div and span" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.