Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to set the properties of box mode in Web development". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to set the properties of box mode in Web development.

Virtually every HTML tag in body is surrounded by an invisible rectangle called a "box".

Box model

First of all, the classification of tags in HTML is introduced.

1. There are two kinds of HTML tags: block tags and introverted tags.

1. Block tag: occupies the entire width of the container. The container refers to the body tag. The box in which each block tag is located occupies the entire width of the page as much as possible, which is to occupy the entire line of the browser.

Block tags: include p, div, ul, ol, li, h2~h7, etc.; block tags occupy a single line, with the effect of line wrapping; except for div, general block-level tags have inner and outer margins, width and height.

2. The inline tag: it will not occupy a whole line of the container, it will be with the content around it, and will be displayed naturally from left to right in a single line. The width of the inline tag is determined by the amount of content.

Inline tags: including span,a,img,input,label, etc.

How does the browser know what the distance between the box and the box should be? Box mode will be used.

Second, box mode

Box mode is a way to describe the borders and spacing of labels

1. The box mode consists of four parts.

1) content area contentarea

The content area contains the real content of the box (text, pictures, etc.)

2) blanking or inner margin padding

Padding is surrounded by the edge of the content area, divided into four areas: top, right, bottom, and left.

3) Border border

Border is surrounded by the edge of padding, which is also divided into four areas: top, right, bottom and left.

4) margin margin

Margin surrounds the top, right, bottom and left edges of border

Box mode

2. How to set the properties of the box mode?

1) set one value of the padding property at a time

H2 {

Padding-top:6px

Padding-right:3px

Padding-bottom:0

Padding-left:0

}

Padding attribute

Or set it clockwise all at once: up, right, down, left

H2 {

Padding:6px3px00

}

Padding attribute

2) set three properties about border

H2 {

Border-width:6px

Border-style:solid

Border-color:#ffff00

}

Border attribute

Or use an abbreviated form.

H2 {

Border:6pxsolid#ffff00

}

Border attribute

You can also set only the border on one side of it.

H2 {

Border-bottom:6pxsolid#ffff00

}

Border attribute

4) add margin in the same way as padding, such as:

H2 {

Margin-top:6px

Margin-right:0

Margin-bottom:6px

Margin-left:0

}

Margin attribute

Or set it clockwise all at once.

H2 {

Margin:6px06px0

}

Margin attribute

When the upper and lower parameters are the same as the left and right parameters, you can also set them like this, as follows:

H2 {

Margin:6px0

}

3. Calculate the size of the box

In all the tags, there are layers of padding,border,margin surrounded by the outside of the content area. After the four parts are set, the size of the whole box is calculated as follows:

Width of the whole box = width of the content area left padding right padding left border right border left margin right margin

Height of the whole box = height of content area upper padding, lower padding, lower border, lower border, lower margin, lower margin.

4. Default browser style

When you do not define a style for the page, the browser will use the default style, add the following code to your CSS at the beginning of partially overriding the default style of the browser, the code contains the tags we have introduced earlier, so that we can freely control the page according to our own needs, this process is called CSS initialization, in the actual project, initialization is an essential part.

Html,body,h2,h3,h4,p,ol,ul,li,a {

Padding:0

Border:0

Margin:0

}

At this point, I believe you have a deeper understanding of "how to set the properties of box mode in Web development". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.