css box model description and examples

1. What is a box:

1. The box model is also called the box model. All elements on the page can be regarded as boxes

2. The box is a container for elements. It is also the carrier of elements. In human terms, the box is the home of elements

2. Types and functions of boxes:

1. There are two types of elements: block-level elements and inline elements, so Their corresponding home: boxes, of course, there are two types: block-level boxes and in-line boxes

2. Block-level boxes are usually used as containers for other elements, and content is always placed in in-line boxes. Usually in-line boxes are placed

in block-level boxes 3. Arrangement of boxes:

1. Boxes are the arrangement order on the page. The chief scheduler: document flow has the final say, unless the box runs away from home. Breaking away from document flow

2. Document flow is both the way elements are arranged and the action of arranging them, so it is both a noun and a verb

4. Components of the box model:

1. Because boxes are mostly used as element containers, we mainly use block-level boxes as an example to introduce

2. The four major components of a box: content, padding, border (border), margin (outer margin)

5. We use four beauties to quickly memorize the box model:

1. Content: Our own wife or girlfriend, this is to see Something visible and tangible

2.Padding: It is transparent, just like your wife’s best friend, it always affects the relationship between you and your wife

3.border Border: It is visible, it is varied, charming, the most sultry and coquettish, just like your confidante, dream lover or little lover

4.margin outer margin: and padding inner edge The distance is also transparent, just like the boss's woman or your buddy's wife, they will always live in your imagination

6. Content content:

1. Support width and height settings

2. The interior can be a block element or an inline element

3. Supports background settings

7. Padding inner margin:

1. Supports setting size in four directions, arranged clockwise: top, right, bottom, left

2. You can also set it separately

padding-top: top margin

padding -right: right margin

padding-bottom: bottom margin

padding-left: left margin

3. Support abbreviation:

padding: 10px 5px 10px 5px; top 10px, right 5px, bottom 10px, bottom 5px

padding: 10px 20px 30px; top 10px, left and right 20px, bottom 30px

padding: 10px 20px; top and bottom 10p x, left and right 20px

padding: 10px; top, right, bottom and left are all 10px

8. Margin:

1. Support setting size in four directions, clockwise Arrangement: top, right, bottom, left

2. You can also set it individually

margin-top: top margin

margin-right: right margin

margin-bottom: bottom margin

margin-left: left margin

3. Support abbreviation:

margin: 10px 5px 10px 5px; top 10px, right 5px, bottom 10px, bottom 5px

margin: 10px 20px 30px; top 10px, left and right 20px, bottom 30px

margin: 10px 20px; top and bottom 10px, left and right 20px

margin: 10px; Top, right, bottom and left are all 10px

9. Border:

1. The inner and outer margins are transparent and invisible, so only the width can be set

2 The border is visible, so it has three sub-properties that can be set: width, style, color

3. Setting order: top, right, bottom, left

Set the top border:

border-top-width: 5px; //Set the width

border-top-style: solid; //Set the style

border-top-color: #f60; // Set the foreground color/color

border-top: 5px solid #f60; //Abbreviation

Set the right border:

border-right-width: 10px;

border-right-style: dashed;

border-right-color: #888;

border-right: 10px dashed #888;

Set the lower border :

          border-bottom-width: 10px;

            border-bottom-style: solid; border-bottom: 10px solid #555;

Set left border:

border-left-width: 8px;

border-left-style: dotted;

                                                                                      use   using the same setting with           using using using the same border using - border-left-color: #333;

            border-left: 8px dotted #333;  ; //Set the width of the four borders uniformly

Border-style: solid; //Set the style of the four borders uniformly

Border-color: gray; //Set the color of the four borders uniformly

                                                                                                                                      using   use of pictures with                    . Implementation can now be done through code

2: The border has four vertices, which can be set for each vertex

2.1: The upper left corner border-top-left-radius:20px;

2.2: Upper right corner border-top-right-radius:20px;

2.1: Lower right corner border-bottom-right-radius:20px;

2.1: Lower left corner border- bottom-left-radius:20px;

Note: Foreigners think differently from us. In the attribute, top, top and bottom are written before the left and right

The above is the detailed content of css box model description and examples. For more information, please follow other related articles on the PHP Chinese website!