当前位置：网站首页>37 element mode (inline element, block element, inline block element)

37 element mode (inline element, block element, inline block element)

2022-07-25 14:43:00 【hello_ sunny123】

CSS Element display mode

Understanding the display mode of elements can better let us layout the page .

1. What is the display mode of elements

effect : There are lots of tags on Web pages , Different types of tags are used in different places , Understanding their characteristics can better layout our web pages .

The element display mode is the element ( label ) How to display , such as <div> Own a line , For example, you can put more than one in a row <span>.

HTML Elements are generally divided into block elements and inline elements .

2. Classification of element display patterns

One . A block element

Common block elements are <hl>~<h6>、<p>、<div>、<ul>, <ol>、<li> etc. , among <div> Tags are the most typical block elements .

Characteristics of block level elements ：

(1) More domineering , Own a line .

(2) Height , Width 、 Both the outer and inner margins can be controlled .

(3) The width is the container by default ( Parent width ) Of 100%

(4) It's a container and a box , It can release internal or block level elements .

Be careful ：

Block level elements cannot be used inside elements of a text class

<p> Labels are mainly used for storing words , therefore <p> You can't put block level elements in it , In particular, we can't put <div>

Empathy , <hl>~<h6> And so on are text class block level labels , You can't put other block level elements in it

Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Block-level elements </title>
    <style> div {
       width: 200px; height: 200px; background-color: pink; } </style>
</head>

<body>
    <div> More domineering , Own a line </div> shivering 
    <!-- <p> <div> There's a problem here </div> </p> -->
</body>

</html>

Running results

Insert picture description here

Error demonstration code ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Block-level elements </title>
    <style> div {
       /* width: 200px; */ height: 200px; background-color: pink; } </style>
</head>

<body>
    <div> More domineering , Own a line </div> shivering 
   /* `<p>` Labels are mainly used for storing words , therefore `<p>` You can't put block level elements in it , In particular, we can't put `<div>`*/
    <p>
    <div> There's a problem here </div>
    </p>
</body>

</html>

Running results

Insert picture description here

Two . Inline elements

Common inline elements are <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> etc. , among <span> Tags are the most typical inline elements .

In some places, inline elements are also called inline elements .

Characteristics of the elements in the line :

(1) Elements in adjacent lines are on one line , One line can display multiple .

(2) high 、 The direct setting is invalid .

(3) The default completion is the completion of its own content .

(4) Inline elements can only hold text or other inline elements .

Be careful ：

No more links in the links

Special case Links You can put block level elements in it , But to It's safest to switch to block level mode

Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Inline elements </title>
    <style> span {
       width: 100px; height: 100px; background-color: hotpink; } </style>
</head>

<body>
    <span>pink Teacher, how do you wear good clothes </span> <strong> Clothes of good taste </strong>
    <span>pink teacher </span> <strong> Clothes of good taste </strong>
</body>

</html>

Running results

Insert picture description here

3、 ... and . Inline block element

Inline block element

There are several special tags in the line elements <td>、<input/>、<img/> , They have the characteristics of both block elements and inline elements .

Some data call them inline block elements .

Characteristics of block elements in the line :

(1) And the adjacent line elements ( Block in row ) On one line , But there will be gaps between them . One line can display multiple ( In line element features ).

(2) The default width is the width of its own content ( In line element features ).

(3) Height , Row height 、 Both the outer and inner margins can be controlled ( Block level element features ).

Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Inline block element </title>
    <style> input {
       width: 249px; height: 25px; } </style>
</head>

<body>
    <input type="text">
    <input type="text">
</body>

</html>

Running results

Insert picture description here

summary

Insert picture description here

3. Element display mode conversion

原网站

版权声明
本文为[hello_ sunny123]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/206/202207251440409039.html

边栏推荐

猜你喜欢

随机推荐