What does the div in HTML mean?

Source: Internet
Author: User

<DIV> is called a spacer Marker. Function: set the position of the word, picture, table, etc. When you place a word, image, or other in a div, it can be called a div block, or a DIV element or a css-layer, or simply a layer. And in Chinese we call it the "hierarchy". So when you see these nouns later, you know that they refer to a section of HTML in a DIV.

<DIV> applied to style Sheet (style Sheet) will be more powerful, its ultimate goal is to give designers another organizational ability, have Class; Style; title; attributes, such as ID, will be detailed in the "Style Sheet" section, where only one property setting is Introduced.
Take <div align= "center" > for example:
align= "center"
Optional Values: center; left; Right. Determines whether words, pictures, tables, etc. are centered, left, or on the Right.
<div align= "center" > is the same as the center Mark <CENTER>, the former is the standard starting from HTML3.0, the latter is a general-purpose long-time labeling Method.

Position and hierarchy of CSS Cells-div tags

We all know that using HTML to locate text and images on a Web page is a "heartbreaking" thing. We must use table tags and implicit gif images, even if this does not guarantee accurate positioning, because the difference between the browser and the operating platform will change the displayed Results.
And CSS allows you to see the dawn of Hope. With the CSS properties we're going to learn today, you can precisely set the location of the features, stack the positioned features on top of each other, and ... And also...... Take a look at it yourself!
Cascading Style Sheets (CSS) is the basis for DHTML. CSS is used to set how the elements on your page are Displayed. Cascading Style Sheets Positioning (css-p) is an extension of CSS that can be used to control the position of anything on a Web page or in a window. Please remember these two nouns: CSS and Css-p. The following four English URLs provide detailed documentation and explanations of CSS and CSS-P.
1. Using div tags (div)

When we use css-p, we mainly use it on the DIV (division) tag. When you place a word, image, or other in a div, it can be called a div block, or a DIV element or a css-layer, or simply a layer. And in Chinese we call it the "hierarchy". So when you see these nouns later, you know that they refer to a section of HTML in a DIV.
The way to use DIV is the same way you use other tags:
<div>this is a DIV tag .</div>
If you use a DIV alone without any css-p, the effect on the Web page is the same as using <P></P>.
But when we use the css-p in the DIV, I can strictly set its Position. First we need to give this DIV an ID or name that can be controlled by css-p. For example, the name we give to the following DIV is Truck. The purpose of giving a name is that we later use JavaScript to control it, such as moving it or changing some of its properties, and so On.
<div id= "truck" >
This is a truck
</DIV>
The name of the hierarchy is arbitrary, the name can be any English letter and number, but the first must be a letter. There are two ways to apply css-p to a DIV.
Inline Css:inline is the most commonly used Method.
<div id= "truck" style= "styles go here" >
This is a truck.
</DIV>
External STYLE tag: The result of using the External method is the Same. We will explain this method in detail later in the Course. Now we are mainly talking about the inline method. Notice the relationship between the ID in the STYLE and the DIV in the External method.
<style type= "text/css" >
<!--#truck {styles Go here}--
</STYLE>
<div id= "truck" >this is a truck .</div>

Cross-browser CSS properties:
The main purpose of our course is to make the pages you write work on both NS4 and IE4, so we mainly discuss the properties that are common to both. The following properties conform to the standards given by the CONSORTIUM.

Position determines how the DIV tag is Placed. "relative" means that the position of the div is relative to the other tag, and "absolute" is that the position of the DIV tag is relative to the window where it is Located.
Left relative to the position of window
The position of top relative to the top of the window
Width of the DIV tag. All the text or HTML in the DIV is Inside.
Height of the DIV tag. This property is rarely used unless you want to Clip Layers.
Clip gives the clipping (visible) portion of the Layer. Clip allows the DIV to be displayed as a well-defined, precise block. You can use the following four values to give the Block's DIV position and Size.
Clip:rect (top,right,bottom,left);
Visibility hide or show div according to its value "visible", "hidden", "inherit".
Z-index DIV Tag's Stereo Position. The larger the value of the DIV, the higher the Position.
Background-color the color of the DIV background.
Layer-background-color Netscape's DIV Background Color.
The background image of the Background-image DIV.
Layer-background-image the background image of the Netscape DIV.
2. Absolute positioning and relative positioning (position)

Absolute Positioning:
Positioning attributes will be the key to the Web-worm's opening of the gates of Happiness:
H4 {position:absolute; left:100px; top:43px}
This CSS rule allows the browser to accurately set the starting position of <H4> to 100 pixels from the left side of the browser and 43 pixels from its top. Note that the only setting here is the left and the top, and it says that the text will be left-to-right, from top to bottom and downloaded into the browse WINDOW.
The left and top properties are intuitive, the left side sets the distance from the left side of the browser window, and the top sets the distance from the top of the browser window. When you set these distances, you can use the various degrees or scale values you've Learned. When you use a scale value, the scale value is relative to the size of the parent Feature.
What can you position? Any thing! paragraphs, words, gif and JPEG images, QuickTime movies, and More.
Relative positioning:
Absolute positioning allows you to pinpoint the location of features on the page, regardless of the location of other features on the Page. Relative positioning refers to the position of the feature you are locating relative to the location assigned in the File. Cases:
I {position:relative; left:40px; top:10px}
The key to relative positioning is that the position of the positioned feature is positioned relative to where it normally should be. The relative positioning unit appears in the lines of the normal static positioning unit, and does not completely separate itself from the static positioning unit when Positioned. If you stop using relative positioning, the position of the text will return to Normal. Be careful when using relative positioning, otherwise it is easy to make the page very messy.
In addition to relative positioning and absolute positioning, you can also use the static (static) parameter Values. Static is the default value for the position Attribute. It is used in the same way as normal html, and cannot attach special positioning settings. In other words, except for the margin characteristics, or by using the Float property to affect the positioning of the unit, the other can Not.

3. Control of the positioning unit (width, height, Visiblility)

In addition to controlling the position of the upper-left corner of the positioning unit, you can also control the width and height of the unit and the visibility of the unit on the Page.

Width: The positioned feature remains visible from left to right when it is displayed on the Page. The Width property allows you to set the limit for the character to flow to the right, that is, the width of the Feature.
DIV {position:absolute; left:200px; top:40px; width:150px}
When the browser receives this rule, it displays the text according to the effect specified by the rules, and limits the maximum horizontal size of the paragraph to 150 pixels.
The Width property is only available for absolutely positioned Features. You can use any of the length units we've learned, or use proportional values to set the width, which refers to the proportions relative to the parent Feature. In IE 4, This property can also be used for Images. You can artificially pull or compress images by width setting.

Height: theoretically, The height should be similar to the width setting, except in the vertical direction:
DIV {position:absolute; left:200px; top:40px; height:150px}
Here I use "theoretically", because some browsers do not support the height Attribute.

Visibility: with css, You can hide features so that they can't be seen on the Page. This property applies to both positioned and not positioned Features.
H4 {visibility:hidden}
Options:

Visible so that the features can be seen
Hidden make features hidden
Inherit refers to the visibility settings that it inherits from the parent Feature.
The value inherit is the default Value. This enables the unit to inherit the visibility of the parent Cell. so, if a paragraph is hidden, any inline cells It contains are also Hidden. This inheritance can be superseded by explicitly specified Visibility. For example, the EM cell in the paragraph is specified as visible, and if the segment is hidden, all other content within the paragraph disappears, and only the text in the Em cell is Visible.

What does the div in HTML mean?

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.