HTML learning (5): CSS box model

1. Element Classification

Before explaining the CSS layout, we need to know some knowledge in advance. In CSS, the label elements in html are roughly divided into three different types: block elements, inline elements (also called inline elements) and inline block element.

Common block elements are:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

Common inline elements are:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

Common inline block elements are:

<img>、<input>

2. Element classification – block-level elements

What are block-level elements? In html <div>、 <p>、<h1>、<form>、<ul>and <li>is block-level elements. Setting display: block displays elements as block-level elements. The following code is to convert the inline element a into a block element, so that the a element has the characteristics of a block element.

a{display:block;}

Block-level element features:

1. Each block-level element starts on a new line, and subsequent elements also start on a new line. (True overbearing, a block-level element on its own line)

2. The element's height, width, line height, and top and bottom margins can be set.

3. If the element width is not set, it is 100% of its own parent container (same as the width of the parent element), unless a width is set.

3. Element classification-inline elements

In HTML, the <span>、<a>、<label>、 <strong>sum <em>is a typical inline element (inline element) (inline) element. Of course, block elements can also be set as inline elements through the code display: inline. The following code is to convert the block element div into an inline element, so that the div element has the characteristics of an inline element.

 div{
     display:inline;
 }

......

<div>我要变成内联元素</div>

Features of inline elements:

1. And other elements are on one line;

2. The height, width and top and bottom margins of the element cannot be set;

3. The width of an 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) is also have the characteristics of inline elements, the block elements, the code display:inline-blockis set to the inline element block element. (new in css2.1), the <img>、<input>label is this inline block label.

Inline-block element characteristics:

1. And other elements are on one line;

2. The element's height, width, line height, and top and bottom margins can be set.

5. CSS box model

Video viewing address

6. Box model-frame (1)

The border of the box model is the line around the content and the filler. You can set its thickness, style and color (three attributes of the border) for this line.

For example, the following code is div to set the border thickness to 2px, the style to solid, and the border to red:

div{
    border:2px  solid  red;
}

The above is the abbreviated form of border code, which can be written separately:

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

note:

1. Common styles for border-style are:

   dashed | dotted | solid.

2. The color in border-color can be set to hexadecimal color, such as:

   border-color: # 888; // Do not forget the number sign in front.

3. The width in border-width can also be set to:

   thin | medium | thick (but not very common), the most common is to use pixels (px).

7. Box model-frame (2)

Now there is a problem, what if you want to set a lower border for the p label alone, and do not set the border style on the other three sides? The css style allows you to set the style for only one direction of the border:

div{border-bottom:1px solid red;}

You can also use the following code to achieve the other three sides (upper, right, left) border settings:

border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;

result:

8. Box model-width and height

The width and height of the box model are different from what we usually say about the width and height of the object. The width and height defined in CSS refer to the content range filled in.

Therefore, the actual width of an element (the width of the box) = left border + left border + left padding + content width + right padding + right border + right border.

The height of the elements is the same.

such as:

css code:

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

HTML code:

<body>
   <div>文本内容</div>
</body>

The actual length of the element is: 10px + 1px + 20px + 200px + 20px + 1px + 10px = 262px , as shown below: The

result:

9. Box model-filling

The distance between the element content and the border can be set, which is called "filling". Filling can also be divided into up, right, down, left (clockwise) . The following code:

div{padding:20px 10px 15px 30px;}

The order must not be confused. The above code can be written separately:

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

If the top, right, bottom, and left padding are all 10px; you can write

div{padding:10px;}

If the top and bottom padding are 10px, and the left and right are 20px, you can write:

div{padding:10px 20px;}

10. Box model-boundary

The distance between an element and other elements can be set using margins. The boundary can also be divided into upper, right, lower and left. The following code:

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 top, bottom, right, and left borders are all 10px; you can write:

div{ margin:10px;}

If the upper and lower borders are 10px, and the left and right are 20px, you can write:

div{ margin:10px 20px;}

To sum up: the difference between padding and margin, padding is in the border, margin is outside the border.