CSS box model descriptions and examples

First, what is a box:

1. Box model is also called box model, all elements on the page can be regarded as the box

2. The box is the container of the element and the carrier of the element, saying that the box is the home of the element.

Second, the type and function of the box:

1. There are two types of elements: block-level elements and inline elements, so they correspond to the home: The box, of course, there are two kinds: block-level box, in-Line box

2. Block-level boxes are usually used as containers for other elements, where the contents are always placed inside the box, usually in a block-level box.

Three, the arrangement of the box way:

1. The box is the order of the page, the general dispatcher: the flow of documents to decide, unless the box ran away from the document flow

2. Document flow is both the arrangement of elements and the actions of the arrangement, so both nouns and verbs

Iv. part of the box model:

1. Because the box is mostly used in container, we mainly introduce the block-level box as an example.

2. Four main components of the box: content (contents), padding (padding), Border (border), margin (margin)

Five, we use four beauties to quickly remember the box model:

1.content content: Our own wife or girlfriend, this is visible, the touch of something

2.padding padding: It's transparent, like your wife's girlfriends, and it's always affecting your relationship with your wife.

3.border border: It is visible, it is changeable, amorous feelings, the most sultry people, like your confidante, dream lover or Little lover

4.margin margin: The same as the padding inside the same transparent, like the eldest woman, brother's wife, always live in your imagination

Vi. Content Contents:

1. Support Width and height setting

2. Internal can be a block element, or it can be an inline element

3. Support Background settings

Vii. padding inner margin:

1. Support Four directions to set the size, in a clockwise arrangement: top, right, bottom, left

2. Can also be set separately

Padding-top: Top margin

Padding-right: Right margin

Padding-bottom: Bottom Margin

Padding-left: Left Margin

3. Support Shorthand:

padding:10px 5px 10px 5px; On 10px, right 5px, next 10px, Lower 5px

padding:10px 20px 30px; On 10px, around 20px, under 30px

padding:10px 20px; Up and down 10px, around 20px

padding:10px; Up, right, down, left all 10px

Margin outside margin:

1. Support Four directions to set the size, in a clockwise arrangement: top, right, bottom, left

2. Can also be set separately

Margin-top: Top margin

Margin-right: Right margin

Margin-bottom: Bottom Margin

Margin-left: Left Margin

3. Support Shorthand:

margin:10px 5px 10px 5px; On 10px, right 5px, next 10px, Lower 5px

margin:10px 20px 30px; On 10px, around 20px, under 30px

margin:10px 20px; Up and down 10px, around 20px

margin:10px; Up, right, down, left all 10px

Nine, Border border:

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

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

3. Set the order: up, right, bottom, left

Set the top border:

border-top-width:5px; Set width

Border-top-style:solid; Set style

Border-top-color: #f60; Set foreground/color

border-top:5px solid #f60; Shorthand

Set the right border:

border-right-width:10px;

border-right-style:dashed;

Border-right-color: #888;

border-right:10px dashed #888;

Set the bottom border:

border-bottom-width:10px;

Border-bottom-style:solid;

Border-bottom-color: #555;

border-bottom:10px solid #555;

Set the left border:

border-left-width:8px;

border-left-style:dotted;

Border-left-color: #333;

border-left:8px dotted #333;

All borders use uniform settings:

border-width:10px; Four border uniform set width

Border-style:solid; Four borders uniform styling

Border-color:gray; Four borders set color uniformly

border:10px solid Gray; Four-border unified set shorthand

Ten, the Corner box's setting technique:

1: Set the fillet: Before all is done by the picture way, now through the code can

2: Border has four vertices and can be set for each vertex

2.1: 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: The foreigner and we think differently, the attribute is to put the upper top under bottom written in the left and right before

<! DOCTYPE html>