Learn the front-end development from scratch-3, CSS box model

★ Box Model

(Standard box model)

The concept and composition of CSS box model

CSS box model is the cornerstone of CSS, each HTML tag can be regarded as a box model.

The CSS box model is made up of contents (content), padding or padding (padding), Border (border), margin (margin) four parts (specific)

1. Contents (content)

Width: value + unit;

Height: value + unit;

eg:. box{width:200px;height:100px;}

2. Padding or padding (sets the distance between the content and the border)

Syntax: padding: values + units;

A) Set a value

padding:10px; (padding in four directions are 10px)

b) Set the value of two

padding:20px 10px; (The first value represents the top and bottom, each 20px, the second value represents the left and right, each 10px)

c) Set the value of three

padding:20px 5px 10px; (The first value represents on, 20px, the second value represents about, 5px, and the third value is under, 10px)

d) Set the value of four

padding:20px 10px 5px 0; (Clockwise 20, right 10, bottom 5, left 0)

e) Padding values can also be set individually in one Direction

padding-top:20px; (top can also be changed to Left,right,bottom)

Note:

I.padding not allowed to set negative values

II. Background can be extended to the padding area

III. Add the Padding property to the parent element when we need to adjust the position relationship of the content in the parent container

Iv. when setting the padding value for the element, subtract the set padding value from the original width and height to ensure that the total width and height are constant.

3. Bezel (border)

A) Border type

Syntax: Border-style:solid (solid line) |dashed (dashed) |dotted (dotted line) |double (double line);

b) Border color

Syntax: border-color: color value;

c) Border width

Syntax: Border-width: Values + units;

d) Border Shorthand method

Syntax: border: Width line color;

eg:border:10px solid red;

e) You can also set a border in one Direction individually

Syntax: border-top:10px solid red; (top can be changed to Bottom,right,left)

Note:

I. Border hides or disappears when setting border to 0 or none

Eg:border-left:none; or border-left:0;

II. The background can be extended to the border area, and when the line is solid, the background will be obscured

Iii. when setting a border on an element, subtract the width of the set border from the original width height to ensure that the total width is not changed.

4. Margin (margin) (set outside the border)

Syntax: Margin setting method with padding

Note:

I.margin allow negative values to be set

II. Background cannot be extended to margin area

Iii. adjusting the position of child elements in the parent element, you can add margin to child elements

or adjust the position relationship between elements, add a margin to this element

Learn the front-end development from scratch-3, CSS box model