The box model of HTML and CSS

This time brings you the HTML and CSS box model, the use of HTML and CSS box model of attention to what, the following is the actual case, together to see.

I. Borders (top)

1. What border?

A border is a line that wraps around the width and height of a label

2. Formatting of border properties

2.1 ligatures (also set four edges of the border)
border: The color of the style border of the border's width border;

Shortcut keys:

bd+ border:1px solid #000;

Note the point:

1. The color attribute in ligatures format can be omitted, the default is black after omitting
2. The style in the ligatures format cannot be omitted, the border is not visible after omitting
3. The width of the ligatures format can be omitted, or you can see the border after omitting

2.2 ligatures (four-edge border set separately)

Border-top: The color of the style border of the border's width border;
Border-right: The color of the style border of the border's width border;
Border-bottom: The color of the style border of the border's width border;
Border-left: The color of the style border of the border's width border;

Shortcut keys:

bt+ border-top:1px solid #000;
br+
bb+
bl+

Two. border (bottom)

2.3 ligatures (border with four edges respectively) set border based on three features

Border-width: Upper right Down left;
Border-style: Upper right Down left;
Border-color: Upper right Down left;

Note the point:

1. The values of these three properties are assigned in clockwise order, that is, according to the upper right and left to assign values, rather than according to the daily life of the upper and lower

2. The rule of omitting the value of these three attributes

2.1 upper right lower left > upper right bottom > left side value is the same as right

2.2 Upper Right Left > upper right > left side is the same as the bottom value and the same as the top

2.3 upper right lower left > Upper > Right lower left value same as top

3. Non-ligatures (direction + features)
border-left-width:20px;
border-left-style:double;
Border-left-color:pink;

Three. Inner margin

1. What is an internal margin?

The distance between the border and the content is the inner margin

2. Format

2.1 Non-ligatures
Padding-top:;
Padding-right:;
Padding-bottom:;
Padding-left:;

2.2 ligatures

padding: upper right down left;

3. The rule of omitting the value of the attribute

3.1 upper right lower left > upper right bottom > left side value is the same as right
3.2 upper Right Left > upper right > left side is the same as the bottom value and the same as the top
3.3 upper right lower left > Upper > Right lower left value same as top

Note the point:

1. After setting the inner margin of the label, the width and height of the label will vary.
2. After setting the padding for the label, the padding will also have a background color.

Four. Margin

1. What is an outer margin?

The distance between the label and the label is the margin

2. Format

2.1 Non-ligatures
Margin-top:;
Margin-right:;
Margin-bottom:;
Margin-left:;

2.2 ligatures
Margin: upper right down left;

3. The rule of omitting the value of these three attributes

3.1 upper right lower left > upper right bottom > left side value is the same as right
3.2 upper Right Left > upper right > left side is the same as the bottom value and the same as the top
3.3 upper right lower left > Upper > Right lower left value same as top

Note the point:

That part of the margin is no background color.

Five. Margin merger phenomenon

1. In the vertical direction of the default layout, the margin is not superimposed by default, there will be merging phenomenon, whose margin is relatively large to listen to;
2. No merger occurs in the horizontal direction;

Margin merge phenomenon (collapse)

Six. CSS box model

1. What is a CSS box model?
The CSS box model is just an image metaphor, and all the tags in the HTML are boxes.

Conclusion

1. All the tags in the HTML can be set
Width/Height = = Specifies the area where the content can be stored
padding = = = Filler in margin
border = = Phone Box yourself
Margin = the gap between box and box

Seven. Width and height of the box model

1. Width and height of content

is the width and height set by the Width/height property

2. Width and height of elements

width = left Border + Left inner margin + width + right padding + right border
High degree of empathy can be proven

3. Width and height of element space

width = left margin + left Border + left inner margin + width + right padding + right border + right margin
High degree of empathy can be proven

Eight. Box Box-sizing properties

A new box-sizing attribute is added to the 1.CSS3, which guarantees that the width and height of the box element will not change after we add padding and border to the box.

2.box-sizing property is how to ensure that after adding padding and border, the width and height of the box element is the same as the principle we learned before, adding padding and border to ensure that the width and height of the box element is constant, Then you must subtract the width and height of a portion of the content

3.box-sizing value

3.1content-box (default value)
Element's Width height = border + padding + content width

3.2border-box (the width and height of the element will not change)
The width height of the element = the width of the width/height

Nine. Center box

Note points (1)

1. If two boxes are nested, the outer margin of the top of a box is set, and a box will be topped down.
2. If the outside box does not want to be fixed together, you can add a border property </a> or <a> set Overflow:hidden to the box outside <a>. Properties </a>
3. In enterprise development, in general, if you need to control the distance between nested relationship boxes, you should first consider the padding, and then consider the margin
Margin is essentially used to control the gap between fraternal relationships.

Note Points (2)

1. In a nested relationship box, we can use margin:0 Auto to make the inside box horizontally centered in the outside box
2.margin:0 Auto; Only the horizontal direction is valid, the vertical direction is not valid, the vertical direction can only be calculated by the pixel center;

10. Text-align:center; and margin:0 auto; difference

Text-align:center N. A function

Set the text/picture stored in the box to center horizontally

margin:0 Auto; function

Center the box to its own level

Eleven. Clear default Margins

1. Why to empty the default margins (margins and padding)

In enterprise development, in order to better control the position of the box and calculate the width of the box and so on, so in enterprise development, the first thing before writing code is to empty the default margin

2. How to empty the default margins

Format

*{margin:0;padding:0;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{            margin:0;padding:0}

3. Attention Points

The wildcard selector will guide (traverse) all the tabs in the current interface, so performance is not good

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS Background and sprite diagram

What you have to know about CSS three big features

CSS usage tips you don't know