css block-level tags, inline tags, conversion of inline block tags-CSS Tutorial-php.cn

css block-level tags, inline tags, conversion of inline block tags

高洛峰

Release： 2017-02-20 13:38:38

Original

2189 people have browsed it

CSS block -level label, in -line label, the conversion of inner block labels

In Basic 1, I talked about the common attributes of CSS in detail, several different selectors. Further understand their characteristics to better learn and master related development skills.

Classification of HTML tags

When talking about tag classification, as beginners, when we first use tags, we will find that some attributes do not work on some tags, such as width, height, Horizontal centering, in fact, the use of this attribute only works when used on block-level tags. Personally, I think this is something that beginners can easily overlook, so I wrote it down!

First of all, we can divide HTML tags into block-level tags, inline tags, and inline block tags according to different displays; we will introduce them separately now.

Block-level tag

Features: Occupies one line, and takes effect for the settable attribute values of height, width, line height, and top and bottom margins; if no width is given, the block-level element will The default is the width of the browser, that is, 100% width;

Typical block-level tags are:

, h series,

, < ;p> ,

Inline label

Features: Multiple labels can exist in one line, but the height, width, line height and top of the inline label cannot be directly set. And the bottom margin, the width and height are completely dependent on the content!

Typical inline tags are: , , , , , , ,

Inline block tags:

Features: Combining inline and block-level advantages, not only can it take effect on the width and height attribute values, but also multiple tags can be displayed in one line ;

Typical inline tags include: css block-level tags, inline tags, conversion of inline block tags ,

Then some students will think, can’t I control the width and height of span or font? ? Yes, let’s put aside floating and positioning this time, and let’s convert them to each other through the display attribute:

1. Convert block-level tags to inline tags: display: inline;

2. Convert inline tags to block-level tags: display:block;

3. Convert to inline block tags: display:inline-block;

As long as you use the display attribute for the corresponding label and take the corresponding value, you can convert the display modes to each other.

Please see the following example:

1: Convert inline tags to block-level tags

<!DOCTYPE html>
<html>
    <head>
        <title>行内标签转块级标签</title>
        <style type="text/css">
            a{
                width: 200px;
                height: 200px;
                background-color: red;
                display: block; 
            }
        </style>
    </head>
    <body>  <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
        <a href="https://www.baidu.com">百度</a>
    </body> <!--而当你用display: block;代表行内标签转为块级标签-->
</html>

Copy after login

The running results are as follows; click red to jump to any area Baidu, so he can expand the scope of links.

css block-level tags, inline tags, conversion of inline block tags

2: Convert inline tags to inline block tags

The difference between inline block-level tags and block-level tags has been mentioned above, and I will emphasize it again. : Both block-level tags and in-line block-level tags can be set in length and width, but block-level tags

will wrap automatically after you set them. You cannot put other things in this line, and Inline block-level tags can place multiple inline tags on the same line. I have a case to explain specifically.

<html>
    <head>
        <title>块级和行内块级</title>
        <style type="text/css">
            a{
                width: 100px;
                height: 100px;
                background-color: green;
                display: inline-block;  
            }
            div{
            width:100px;
            height:100px;
           background-color: red;
           margin-top:10px;  /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
           }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com">百度</a>   <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
        <a href="https://www.baidu.com">百度一下</a>
        <div>我是div1</div>   <!--这个是一般的块级标签，会上下分行-->
        <div>我是div2</div>
    </body>
</html>

Copy after login

Running result:

css block-level tags, inline tags, conversion of inline block tags

3. Convert block-level tags to inline tags

<!DOCTYPE html>
<html>
    <head>
        <title>块级标签转行内标签</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                display: inline;
            }
        </style>
    </head>
    <body>
         <div>谷歌</div>  <!--按道理div是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->
         <div>https://www.google.com</div>
    </body>
</html>

Copy after login

The effect is as follows ：

css block-level tags, inline tags, conversion of inline block tags