Learning the html (11) CSS box model from scratch-css from scratch

Learning the html (11) CSS box model from scratch-css from scratch
I. Element Classification

In CSS, tag elements in html are divided into three different types: block elements, inline elements (also called intra-row elements), and inline block elements.

Common block elements include:

<Div>, <p>,

Common inline elements include:

<A>, <span>, <br>, <I>, <em>, <strong>, <label>, <q>, <var>, <cite>, <code>

Commonly used inline block elements include:

, <input>

Ii. Element classification-block-level elements

1 <! Doctype html> 2 Element classification-block-level elements
What is a block-level element? In html, <div>, <p>, 
Setdisplay:blockDisplays the element as a block-level element. The following code converts inline element a into a block element to make element a block element.
a{display:block;}
Block-level element features:
1. Each block-level element starts from a new row, and the subsequent element also starts from another row. (A block-level element excludes one row)
2. You can set the height, width, row height, and top and bottom margins of an element.
3. If the element width is not set, it is 100% of its parent container (consistent with the width of the parent element) unless a width is set.
Try it: Feel the features of block-level elements
Enter various block-level labels in the Code Editor and try their features.
 
3. Element classification-inline Elements
1 <! Doctype html> 2 Element classification-inline Element
In html, <span>, <a>, <label>, <strong>, and <em> are typical inline elements.
Of course, block elements can also be passed through codedisplay:inlineSet the element as an inline element. The following code converts a block element div into an inline element, so that the div element has the characteristics of an inline element.
Div {display: inline;} ...... <div> I want to become an inline element </div>
Inline element features:
1. and other elements are on one row;
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.
There is a gap between inline elements.
Try it: Feel the characteristics of inline Elements
Enter various inline element tags in the Code Editor and try their features.
 
When there is a gap bug between elements in the row:
1. When there are "Carriage Return", "tab", and "space" between elements in the row, a gap will appear.
The following code:
<Div>
<A> 1 </a>
<A> 2 </a>
<Span> 33333 </span>
<Span> 44444 </span>
<EMS> 555555 </em>
</Div>

Solution:
1. Write a line without spaces or other symbols.

2. Use font-size: 0
Div {font-size: 0 ;}
A, span, em {font-size: 16px ;}
If you want div {font-size: 0;} to take effect, enclose the element in the row:

<Div>

<A> I am a link </a>

<Span> I am a row space </span>

</Div> 4. Element classification-inline block elements
1 <! Doctype html> 2 Element classification-inline block elements
Inline block elements (inline-block) are both inline elements and block elements,
Codedisplay:inline-blockSet the element to an inline block element. (Added in css2.1). The  and <input> labels are inline block labels.
Features of inline-block elements:
1. and other elements are on one row;
2. You can set the height, width, row height, and top and bottom margins of an element.
Try to copy the page number Design
In the Code Editor, we can see that we have set the width and height for element a, but they do not play a role,
The reason is that a is an inline element by default, and the inline element cannot be set to width or height.
In line 2 of the editor, enter:
Display: inline-block;
 
Converting block or intra-row elements into intra-row elements paves the way for subsequent courses,
You only need to know that the element in the row cannot be set to high width. After conversion, you can set it. Block elements cannot be displayed in one row after conversion.
After a label changes to an inline block element, the center setting means that the number is displayed in the center of each block, rather than the entire a label is centered on the page.
Inline: inline element {
1. width and height cannot be set;
2. The elements in multiple rows are arranged in one row, and the new row will not be added until the row does not fit;
3. Only margins in the horizontal direction can be set, such as margin-left, margin-right, padding-left, and padding-right.
}
Block: block-level element {
1. Each block-level element occupies only one row;
2. You can set width and height. The default width is an integral line, unless the width is set separately;
3. You can set the margin and padding attributes.
}
Inline-block {
In short, it means that the elements can be displayed in one row, and the width and height margins can be set.
}
 

 
By default, block-level elements occupy a whole row. No matter whether its width is full or not, no space is used for other elements.
Attribute: display: block;
By default, the entire row occupies the default width. You can set the width and height for only one row.
 
Inline (in-row) elements define a piece of content (text). Other inline elements can be used together for space not fully occupied in this line.
Property: display: inline;
A row with a width or height cannot be set with multiple sizes determined by the content.
 
Inline block elements (intra-row block-level elements)
Attribute: display: inline-block;
You can set the width and height.
One row can have multiple
5. What is a box model?
Video Course