CSS element classification

This paper is based on the learning notes in Mu-net.

Element classification

Before we explain the CSS layout, we need to know some knowledge in advance.

In CSS, tag elements in HTML are broadly divided into three different types: block elements , inline elements (also called inline elements) , and inline block elements .

The most common block elements are:

<div>, <p>,

The commonly used inline elements are:

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

used in Inline block Elements are:

, <input>

Block-level elements

What is a block-level element? In HTML <div>, <p>,

The display:block setting is to display the element as a block-level element. The following code is the conversion of inline element a into a block element , so that the a element has a block element feature.

A{display:block;}

block-level element features:

1. Each block-level element starts with a new line, and the subsequent element also begins a row. (True overbearing, one block-level element exclusive row )

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

3, the element width is not set, is its own parent container of 100% (and the width of the parent element consistent), unless a width is set.

Inline elements

In HTML,,<span>, <a>, <label>, <input>, , <strong> and <em> are typical inline elements (inline element ) element.

Of course, block elements can also display:inline be coded to set elements as inline elements .

The following code is to convert a block element div into an inline element , using a DIV element from the page with an inline element feature.

Inline element Features:

1, and other elements are on one line ;

2, the height of the element, width, row height and the top and bottom margin is not set;

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

A scenario in which a gap bug occurs between elements in a row:

<div>
<a>1</a>
<a>2</a>
<span>33333</span>
<span>44444</span>
<em>555555</em>
</div>

Workaround:

1, write in a line, do not have spaces and other symbols.

<div>
<a>2</a><span>44444</span><em>555555</em>
</div>

2. Using font-size:0

div{font-size:0;}
a,span,em{font-size:16px;}

Inline block elements

Inline block elements (inline-block) are features that have inline elements, block elements, and code display:inline-block that sets elements as 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 .

We set the width and height for a element, but none of it works,//Because A is an inline element at the default, and inline elements are not set and high. a{        width:20px;/* Width does not work by default */    height:20px;/* height does not work by default */    background:pink;/* Set background color is pink *    / Text-align:center; /* Set the text center to display */    Display:inline-block;}

CSS element classification