CSS Box Model

1 element classification

Tag elements in HTML are broadly divided into three different types: block elements, inline elements, and inline block elements

The common block elements are:

<div>,<p>,

Common inline elements are:

<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,< Cite>,<code>

used in Inline block Elements are:

,<input>

2 Element Classification-block-level elements

Block-level element features:

1. Each block-level element begins with a new row, and the element that follows is also a row. (A block-level element has a single row);

2. Element height, width, row height and top and bottom margin can be set;

3. If the element width is not set, it is 100% of the parent container of the TA itself (consistent with the width of the parent container), unless a width is set;

3 element Classification-inline elements

Features of inline elements

1. And other elements are on one line;

2. The height and width of the element, the row height and the top and bottom margins are not set;

3. The width of the element is the width of the text or image it contains, and cannot be changed.

4 Element Classification-inline block elements

Inline block elements (inline-block) are features that have inline elements, block elements, and code

Display:inline-block

is to set the element to inline block elements. (css2.1 New),, <input> tag is this inline block tag.

Inline-block Elemental Features:

1, and other elements are on one line;

2, the height of the element, width, row height, and the top and bottom margin can be set.

5 Box Model-border

The border of the box model is the line around the content and the filler, which you can set its thickness, style and color (border ternary)

The following code is div to set the border thickness to 2px, the style is solid, the color is red border

Div {    border-width:2px;     border-color:red;     border-style:solid;          }

can also be abbreviated as

Div {Border:2px solid red;}

1.border-style Common styles are: dashed (dashed) |dotted (dotted line) |solid (solid line)

2.border-color can be set to 16 binary color

The width in the 3.border-width can also be set to: Thin|medium|thick can also be set to pixels px

4.border can set the upper and lower left and right four-direction border, respectively, Border-top,border-left,border-right,border-bottom

6 box Model-width and height

The width and height of the box model are not the same as the width and height of the object we normally speak, the width (width) and high (height) defined within the CSS, meaning the range of content outside the padding, so the actual width of an element (width of the box) = left border + Left box + Left padding + content width + right padding + Right Border + right edge.

The height of the element is also the same.

7 Box Model-boundary

The elements can be set using margin, which is also divided into upper, lower, left, and right. Such as

Div {margin:20px 10px 15px 30px;}

You can also write separately:

Div {   margin-top:20px;    margin-right:10px;    margin-bottom:15px;    margin-left:30px;}

If the upper-right bottom-left boundary is 10px, you can write this:

Div { margin:10px;}

If the upper and lower bounds are the same as 10px, and about the same 20px, you can write:

Div { margin:10px 20px;}

Sum up: The difference between padding and margin, padding in the border, margin outside the border

8 Box Model-fill

You can set the distance between the element content and the border, which is called padding. Fills can also be divided into top, right, bottom, and left. The following code:

Div {padding:20px 10px15px 30px;}

The order must not be confused. You can write the above code separately:

Div {   padding-top:20px;    padding-right:10px;    padding-bottom:15px;    padding-left:30px;}

If the top, right, bottom, and left fills are 10px; you can write this.

Div {padding:10px;}

If the upper and lower fills are the same as 10px, about the same as 20px, you can write:

Div {padding:10px 20px;}

Reference to--www.imooc.com

CSS Box Model