CSS Learning Box model

1. Preface

Box model, English is box models. Whether it's div, span, or a is a box.

However, images and form elements are all treated as text, and they are not boxes. This is a good understanding, for example, a picture does not put things, it is their own content.

2. The area in the box

The main attributes in a box are 5: width, height, padding, border, margin. As follows:

• Width and Height: the content is wide and high (not the width or height of the box).
• padding: inner margin.
• border: Border.
• margin: margin.

Box Model:

Standard Box Model:

Show:

• The CSS box model specifies several ways to manipulate elements: content, padding, borders, margins.
• In the standard box model of CSS, width and height refer to the widths and heights of thecontent area . Increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box.

True occupancy width = left border + Left padding + width + right padding + right border

If you want to keep the real width of a box intact, then add width to reduce padding. When you add padding, you should reduce the width. Because the box gets fatter is disastrous, it will squeeze the other boxes down.

3. Recognize padding3.1 padding area also has color

Padding is the inner margin. Padding area has background color, css2.1 premise, and background color must be the same as the content area. That is, Background-color will populate all areas within the boder.

3.2 padding has four directions.

The padding is in 4 directions, so we can describe padding in 4 directions respectively. There are two kinds of methods, the first write small property, the second write comprehensive property, separated by a space.

The notation for small attributes:

padding-top:30px;padding-right:20px;padding-bottom:40px;padding-left:100px;

General attributes: (top, right, bottom, left) (clockwise, separated by a space.) The same is true of margin)

padding:30px 20px 40px 100px;

If four values are written, the order is: top, right, bottom, left.

If only three values are written, the order is: top, right, bottom. The same as the right.

If you write only two values, say:

padding:30px 40px;

The order is equivalent to: 30px 40px 30px 40px;

To understand, cascade large attributes with small attributes . Like what:

padding:20px;padding-left:30px;

4. Understanding Border

border is the border. The border has three features: pixel (thickness), linetype, color. If the color is not written, the default is black. The other two properties do not write, kill, show no border.

4.1 Border-style

The border of all the lines are as follows: (we can get it by viewing CSS参考手册 )

4.2 Border Split

Border is a large comprehensive attribute. For example:

border:1px solid red;

is to put 4 borders, all set to 1px width, line solid line, red color.

The border attribute is capable of being disassembled, and there are two major ways to disassemble it:

• (1) by three elements: Border-width, Border-style, Border-color. (A border attribute is a combination of three small attributes)

• (2) by direction: Border-top, Border-right, Border-bottom, Border-left.

Now we understand that a border attribute is synthesized from three small attributes . If a small property is followed by a space-separated number of values, it is the upper-right-left order. Examples are as follows:

border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;

(1) Split by three elements:

border-width:10px;    Border width border-style:solid;   Linear border-color:red;     Color.

Equivalent to:

border:10px solid red;

(2) According to the direction of the demolition:

border-top:10px Solid red;border-right:10px Solid red;border-bottom:10px solid red;border-left:10px solid red;

Equivalent to:

border:10px solid red;

Transferred from: https://www.cnblogs.com/smyhvae/p/7256371.html

CSS Learning Box model