CSS basics 13: Box Model

CSS basics 13: Box Model
I. CSS box model Overview

The CSS box model specifies how the element content, inner margin, border, and outer margin are processed by the element box. A complete element includes content

Padding, border, and margin ).

Box Model diagram:

The inmost part of the element box is the actual content, and the content is directly surrounded by the padding. The padding shows the background of the element. The edge of the padding is the border.

The outer border is the outer margin, and the outer margin is transparent by default, so it does not block any subsequent elements. Therefore, the background is applied to the area composed of content and padding.

Domain.

The padding, border, and margin are optional. The default value is zero. However, many elements are configured with the outer and inner margins by the user proxy style sheet. Yes

Overwrite these browser styles by setting the margin and padding of the element to zero. This can be done separately, or you can use the universal selector

Set with elements:

 

* {  margin: 0;  padding: 0;}

 

In CSS, width and height indicate the width and height of the content area. Adding the padding, border, and margin does not affect the size of the content area,

However, the total size of the element box is increased. The padding, border, and outer margin can be applied to all edges of an element or individual edges. Margin

It can be a negative value. In many cases, the outer margin of a negative value is used.

Assume that each side of the box has a margin of 10 pixels and a margin of 5 pixels. If you want the element box to reach 100 pixels, you need

The capacity width is set to 70 pixels. See:

 

 #box {  width: 70px;  margin: 10px;  padding: 5px;}

The display attribute sets the type of the element's box model.

 

Possible values:

None is not displayed, hide

Inline element (intra-Row Element)

Block-level elements

Inline-block in-line block-level elements

Two padding

The padding of an element is between the border and the content area. The simplest attribute to control this area is the padding attribute. CSSpadding attributes define the element border and

Blank area between elements.

(1) padding attributes

The padding attribute defines the padding of an element. The padding attribute accepts length or percentage values, but does not allow negative values.

For example, if you want the sides of all h1 elements to have a 10-pixel padding, you only need:

h1 {padding: 10px;}

You can also set the padding of each edge in the order of top, right, bottom, and left. Different units or percentages can be used for each edge:

h1 {padding: 10px 0.25em 2ex 20%;}

(2) single-side padding attributes

You can also set the top, right, bottom, and left padding by using the following four independent attributes:

Padding-left: Set the left padding

Padding-right: set the right padding

Padding-top: top padding

Padding-bottom: Set bottom padding

You may have thought that the effects of the following rules are exactly the same as those described above:

h1 {  padding-top: 10px;  padding-right: 0.25em;  padding-bottom: 2ex;  padding-left: 20%;  }

(3) percentage value of the padding

As mentioned above, you can set a percentage value for the inner margin of an element. The percentage value is calculated relative to the width of its parent element, which is the same as the outer margin.

Sample. Therefore, if the width of the parent element changes, they also change. Note: The upper and lower margins are the same as the left and right margins.

Set the width relative to the parent element, rather than the height.

The following rule sets the padding of a paragraph to 10% of the width of the parent element:

p {padding: 10%;}

For example, if the parent element of a paragraph is a div element, its padding is calculated based on the width of the div.

This paragragh is contained within a DIV that has a width of 200 pixels.

Three border

The border of an element is one or more lines around the content and padding of the element. The border attribute allows you to specify the style, width, and color of the element border.

(1) Border

In HTML, we use tables to create borders around text. However, by using the CSS border attribute, we can create excellent edges.

And can be applied to any element. The outer margin of the element is the border of the element. The border of an element is one or more of the content and data of the element.

Line. Each border has three aspects: width, style, and color.

(2) border and background

CSS rules indicate that borders are drawn on the "background of elements ". This is important because some borders are "broken" (for example, dotted border or dotted line ).

Box), the background of the element should appear between the visible parts of the border. CSS2 indicates that the background only extends to the padding, not the border. Later, CSS2.1 entered

Corrected: the background of the element is the background of the content, padding, and border area.

(3) Border Style

Style is the most important aspect of the border, not because the style controls the display of the border (of course, the style does control the display of the border), but because

If there is no style, there will be no border at all. In CSS, the border-style attribute defines 10 different non-inheri styles, including none.

For example, you can define the border of an image as outset to make it look like a "Raised button ":

a:link img {border-style: outset;}

(4) define multiple styles

You can define multiple styles for a border, for example:

 

p.aside {border-style: solid dotted dashed double;}

 

The above rule defines four border styles for the section with the class name aside: solid line border, dot line right border, dotted line bottom border, and a double line left

Box.

(5) define a unilateral style

If you want to set a border style for an edge of the element box, instead of setting a border style for all the four sides, you can use the following unilateral border Style

Type property:

Border-top-style

Border-right-style

Border-bottom-style

Border-left-style

(6) Border Width

You can use the border-width attribute to specify the border width. You can specify the width of a border by specifying the length value, such as 2px or

0.1em; or use one of the three keywords, which are thin, medium (default), and thick.

Therefore, we can set the Border width as follows:

p {border-style: solid; border-width: 5px;}

Or:

p {border-style: solid; border-width: thick;}

(7) define the width of a single side

You can set the borders of the elements in the order of top-right-bottom-left:

 

p {border-style: solid; border-width: 15px 5px 15px 5px;}

 

The preceding example can also be abbreviated as (this is called value replication ):

p {border-style: solid; border-width: 15px 5px;}

You can also set the width of each edge of the border by using the following attributes:

Border-top-width

Border-right-width

Border-bottom-width

Border-left-width

Therefore, the following rules are equivalent to the preceding example:

p {  border-style: solid;  border-top-width: 15px;  border-right-width: 5px;  border-bottom-width: 15px;  border-left-width: 5px;  }

(8) No border

In the previous example, you have seen that if you want to display a border, you must set a border style, such as solid or outset. If

Border-style is set to none. Because the default value of border-style is none, if the style is not declared, it is equivalent to border-style: none. Because

If you want the border to appear, you must declare a border style.

(9) border color

It is very easy to set the border color. CSS uses a simple border-color attribute, which can accept up to four color values at a time. You can use any

Type of color value. For example, it can be named color or hexadecimal or RGB value:

p {  border-style: solid;  border-color: blue rgb(25%,35%,45%) #909090 red;  }

If there are less than four color values, copying the values will take effect. For example, the following rule declares that the upper and lower borders of a paragraph are blue and the left and right borders are red:

 

p {  border-style: solid;  border-color: blue red;  }

 

Note: The default border color is the foreground color of the element. If the color is not declared for the border, it will be the same as the text color of the element. Other party

Surface. If the element does not contain any text, if it is a table containing only images, the border color of the table is the text color of its parent element.

(Because color can be inherited ). This parent element may be body, div, or another table.

(10) define the color of a single side

There are also some color attributes of a single border. They work in the same way as the single-side style and width attributes:

Border-top-color

Border-right-color

Border-bottom-color

Border-left-color

To specify the solid-line black border for the h1 element, and the right-side border is solid-line red, you can specify this as follows:

h1 {  border-style: solid;  border-color: black;  border-right-color: red;  }

Four margin

The margin is centered around the blank area of the element border. When the margin is set, an extra "blank" is created outside the element ".

(1) margin attributes

The simplest way to set the margin is to use the margin attribute, which accepts any length unit, percentage value, or even negative value. Margin can

Set to auto. A more common practice is to set the length value for the outer margin.

The following example defines different margins for the four sides of the h1 element. The unit of length used is pixel (px ):

 

h1 {margin : 10px 0px 15px 5px;}

 

You can also set a percentage value for margin:

 

p {margin : 10%;}

 

The percentage is calculated relative to the width of the parent element. In the preceding example, the margin set for the p element is 10% of the width of its parent element.

The default value of margin is 0, so if a value is not declared for margin, no margin will appear. However, in reality

The element already provides a predefined style, and the margin is no exception. For example, in a browser that supports CSS, the margin is

The following generates "Empty rows ". Therefore, if the outer margin is not declared for the p element, the browser may apply the outer margin by itself. Of course, as long as you do something special

Declaration will overwrite the default style.

(2) Copying values

Sometimes, we enter repeated values:

 

p {margin: 0.5em 1em 0.5em 1em;}

 

By copying values, you do not have to repeat these numbers. The above rules are equivalent to the following rules:

 

p {margin: 0.5em 1em;}

 

These two values can replace the first four values. CSS defines rules that allow you to specify less than four values for the margin. The rules are as follows:

If the left outer margin value is missing, the right outer margin value is used.

If the value of the margin is missing, the value of the margin is used.

If the value of the right margin is missing, the value of the top margin is used.

It provides a more intuitive way to understand this:

(3) Unilateral margin attributes

You can use the single-side margin attribute to set the value of the single-side margin of an element. Suppose you want to set the left margin of the p element to 20px.

p {margin-left: 20px;}

You can use any of the following attributes to set only the corresponding margin, without directly affecting all other margins:

Margin-top

Margin-right

Margin-bottom

Margin-left

Multiple such unilateral attributes can be used in a rule, for example:

h2 {  margin-top: 20px;  margin-right: 30px;  margin-bottom: 30px;  margin-left: 20px;  }

Of course, in this case, using margin may be easier:

p {margin: 20px 30px 30px 20px;}

The results are the same regardless of whether a single-side attribute or a margin attribute is used. In general, if you want to set the margin for multiple edges, use

Margin is easier. However, from the perspective of document display, it doesn't matter which method is actually used, so you should choose more for yourself.

Easy way.