The display mode of elements in CSS

Time:2020-6-29

In CSS, according to the different element labels of element display mode, they are divided into two categories: inline level and block level.

1. First of all, what are inline elements and what are block level elements?

1.1. An in line element is an element that does not monopolize a line, for example: span Buis strong EM ins del, etc

1.2, block level elements are elements that can monopolize a row, such as P div h UL ol DL Li DT DD, etc

2. What are the differences between inline elements and block level elements?

2.1. An element in a row does not have one row exclusive, while a block level element has one row exclusive;

2.2, the width and height of an in line element cannot be set. Its width and height will change with the change of text. Block level elements can set width and height,

If the width and height are not set, the height is 0 if it is the same width as the parent element by default;

2.3. The following example is to set the style for the row element span and the block level element div to reflect the differences between the row and the block level


 <style>
        span{
            height: 200px;
            width: 300px;
            background-color: red;
            font-size: 40px;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: green;
            margin: 100px auto;
        }
        .son{
            background-color: blue;
        }
    </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > the display mode of CSS elements < / Title >
</head>
<body>
    <span>I'm span</span>
    <div class="father">
        I'm father
        < div class = "son" > I'm son < / div >
    </div>
</body>
</html>

3. Sometimes, we not only need to set the width and height of the element, but also hope that the element will not monopolize a row. At this time, the in line block element appears. The common in line block level elements are < img > / < input > / < td >, etc.

4. How to change the display mode of CSS elements?

4.1, set the display attribute of the element

4.2. Display values: inline, block, inline block

4.3, the following example is to convert span’s display mode to block level, div’s display attribute to in line block level, and img’s display mode to block level

<style>
        /*Convert span to block level element--*/
        *{
            margin: 0;
            padding: 0;
        }
        span{
            display: block;
            background-color: red;
            width: 400px;
            height: 400px;
        }
        /*Convert div to inline block level elements*/
        div{
            display: inline-block;
            background-color: green;
            width: 300px;
            height: 300px;
        }
        /*Convert img to block level elements*/
        img{
            display: block;
            width: 200px;
        }
    </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > the display mode of CSS elements < / Title >
</head>
<body>
    <span>I'm span</span>
    < div > I'm div < / div >
    <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg">

</body>
</html>

summary

This article about the CSS elements in the display mode of the article introduced here, more related CSS display mode content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you will support developeppaer more in the future!