CSS Basic Learning 13: Box model

a CSS Box model overview

The CSS box model specifies how the element frame handles element content, padding, borders, and margins. A complete element consists of content, internal

Margin (padding) (padding), Border (border), and margin (margin).

Box Model Diagram:

The inner part of the element box is the actual content, and the content is directly surrounded by the padding. The inner margin renders the background of the element. The edge of the padding is a border.

Outside the bounding rectangle is the margin, and the margin is transparent by default, so it does not obscure any subsequent elements. so the background is applied to the area composed of the content and the inner margin

Domain.

The padding, borders, and margins are optional and the default value is zero. However, many elements will have margins and padding set by the user-agent style sheet. Can

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

There are elements to set:

* {  margin:0;  padding:0;}

in CSS, width and height refer to the widths and heights of the content area. increasing the padding, borders, and margins does not affect the size of the content area.

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

can be negative, and in many cases a negative margin is used.

Assume that there are 10-pixel margins and 5-pixel padding on each edge of a box. If you want this element box to reach 100 pixels, you need to move the inner

The width of the tolerance is set to 70 pixels, see:

<span style= "FONT-SIZE:18PX;" > #box {  width:70px;  margin:10px;  padding:5px;} </span>

The display property sets the type of the element's box model

Possible values:

None not shown, hidden

inline inline element (inline Element)

Block-level elements

Inline-block inline block-level elements

Two inner margin padding

the inner margin of an element is between the border and the content area. The simplest property that controls the area is the Padding property. The Csspadding property defines the element border and

An empty area between the element contents.

(1) Padding property

The Padding property defines the inner margin of the element. The Padding property accepts a length or percent value, but does not allow negative values.

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

h1 {padding:10px;}

You can also set the padding for each edge in the order of top, right, bottom, and left, with different units or percent values for each edge:

</pre><pre name= "code" class= "CSS" >h1 {padding:10px 0.25em 2ex 20%;}

(2) Single-sided inner margin properties

The top, right, bottom, and left margins are also set by using the following four separate properties:

Padding-left set left inner margin

Padding-right Setting the right inner margin

Padding-top setting the On-padding

Padding-bottom Setting the inner margin

As you might have thought, the following rule implementation is exactly the same as the shorthand rule above:

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

(3) The percentage value of the inner margin

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

Sample. Therefore, if the width of the parent element changes, they will also change. Note: The upper and lower padding is consistent with the left and right margins, that is, the percentage of the upper and lower margins

Relative to the parent element width setting, not relative to height.

The following rule sets the inner margin of the paragraph to 10% of the parent element width:

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.

Three-Frame border

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

(1) border

In HTML, we use tables to create borders around text, but by using CSS border properties, we can create excellent edges

box, and can be applied to any element. The outer margin of the element is the bounding rectangle of the element. The border of an element is one or more of the contents of the element and the inner edge

Line. Each border has 3 facets: width, style, and color.

(2) Border and background

The CSS specification states that the border is drawn above the background of the element. This is important because some borders are "intermittent" (for example, a dotted border or a dashed line).

box), the background of the element should appear between the visible parts of the border. CSS2 indicates that the background extends only to the inner margin, not to the bounding rectangle. Later CSS2.1 into

OK, correct: the background of the element is the background of the content, padding, and bounding area.

(3) Style of border

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

If there is no style, there will be no border at all. The Border-style property in CSS defines 10 different non-inheri styles, including none.

For example, you can define a picture's border as outset to make it appear as 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 a paragraph with the class name aside: A solid top border, a dotted right box, a dashed bottom box, and a double line to the left

Box.

(5) Defining a single-sided style

If you want to set a border style for an edge of an element box instead of setting all 4 sides of the border style, you can use the following single-sided border sample

-style properties:

Border-top-style

Border-right-style

Border-bottom-style

Border-left-style

(6) Width of the border

You can specify a width for a border by using the Border-width property. There are two ways to specify a width for a border: You can specify a length value, such as 2px or

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

So, we can set the width of the border:

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

Or:

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

(7) Defining the single-sided width

You can set each side border of an element in the order of Top-right-bottom-left:

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

The above example can also be abbreviated (this is called value copying):

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

You can also set the width of each edge of the border individually by the following properties:

Border-top-width

Border-right-width

Border-bottom-width

Border-left-width

therefore, the following rules are equivalent to the above 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 certain border, you must set the border style, such as solid or outset. So if you put

Border-style is set to None, because the default value of Border-style is none, and if no style is declared, it is equivalent to Border-style:none. Because

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

(9) Color of the border

Setting the border color is simple. CSS uses a simple Border-color property that accepts up to 4 color values at a time. can use any

The color values of the type, for example, can be named colors, or hexadecimal and RGB values:

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

If the color value is less than 4, the value copy will work. 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 of the element itself. If no color is declared for the border, it will be the same as the text color of the element. The other party

Polygon, if the element does not have any text, assuming it is a table that contains only the image, then the border color of the table is the text color of its parent element

(because color can inherit). This parent element is most likely a body, Div, or another table.

(10) Define the side color

There are also some unilateral border color properties. They have the same principle as the single-sided style and width properties:

Border-top-color

Border-right-color

Border-bottom-color

Border-left-color

to specify a solid black border for the H1 element, and the right border is a solid red, you can specify:

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

Four margins margin

An empty area around the border of an element is the margin. Setting the margin creates an extra "blank" outside the element.

(1) Margin property

The simplest way to set the margin is to use the margin property, which accepts any length units, percentages, or even negative values. Margin can

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

The following example defines a different margin for each of the four sides of the H1 element, using pixels (px) in length:

<span style= "FONT-SIZE:18PX;" >h1 {margin:10px 0px 15px 5px;} </span>

Alternatively, you can set a percentage value for margin:

p {margin:10%;}

Percentages are calculated relative to the width of the parent element. The above example sets the margin for the P element to be 10% of the width of its parent element.

The default value for margin is 0, so if you do not declare a value for margin, there is no margin. However, in practice, browsers have many

The element already provides a predetermined style, and the margin is no exception. For example, in a browser that supports CSS, margins are on top of each paragraph element and

The following generates a "blank line." Therefore, if the margin is not declared for the P element, the browser may apply an outer margin on its own. Of course, as long as you make a special

Declaration, the default style is overwritten.

(2) Value copy

Sometimes, we'll enter some duplicate values. :

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

with value replication, you don't have to type this pair of numbers repeatedly. The above rules are equivalent to the following rules:

<span style= "FONT-SIZE:18PX;" >p {margin:0.5em 1em;} </span>

These two values can replace the previous 4 values. CSS defines rules that allow for margins to be specified with less than 4 values. The rules are as follows:

If the value outside the left is missing, the value of the right margin is used.

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

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

Provides a more intuitive way to understand this:

(3) Unilateral margin properties

You can use the unilateral margin property to set the value for the margin on the element's side. 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 properties to set only the corresponding margin, without affecting all other margins directly:

Margin-top

Margin-right

Margin-bottom

Margin-left

multiple Such unilateral attributes can be used in a rule, such as:

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

Of course, it may be easier to use margin for this scenario:

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

The results are the same whether you use a single-sided attribute or a margin. In general, if you want to set margins for multiple edges, use the

Margin will be easier. However, from the perspective of the document display, it is not important to actually use which method, so you should choose more

An easy way to do this.

CSS Basic Learning 13: Box model