How much do you know about css (10)--display_html/css_WEB-ITnose

1. Introduction

All elements of the web page, except "block", are "flow", and "flow" is included in the "block" (the outermost body is a "block"). When we talked about "Browser Default Style" at the beginning of this series, everyone also saw that the browser default style stipulates which html elements belong to "blocks" (the rest is "flow"). This part of knowledge is very important and very basic, so in all front-end interview questions, you will be asked which elements are "blocks" and which elements are "flows".

　

In fact, this part of knowledge is included in the display style setting. Look up all the properties of display on the Internet, and you will find that there are many of them, but not all of them are commonly used, and you may even have never used most of them. It doesn't matter, you can apply what you learn. If you don't need it, you don't need to learn it. Just know it. When will you use it? When will you learn it in detail? The premise is that you know that there is such a thing, otherwise you will not be able to start.

　

Look at the picture above. Commonly used attributes are: none, block, inline, inline-block, and inherit. Inherit is the style that inherits the parent element. Needless to say, the others will be explained in detail below. Others are not commonly used, but some still need to be pointed out. In fact, these have been mentioned in the "Browser Default Style" section. Here is a brief description. For details, please refer to the "Browser Default Style" section.

1. list-item: It can simulate the li list style;
2. table: It is also a "block", but compared with block, table is wrapped;
3. table-cell: The latest multi-column layout solution;

2. inline

Commonly used inline is text and pictures. In fact, there is really nothing to say about inline. You can imagine it as a cup The water, which is "flow", has no size or shape, and its width depends on the width of the parent container.

Therefore, for inline tags, it is invalid for you to set the width and height. Through monitoring, you can know that the actual width and height of the element are auto, not the values ​​we set.

A very basic question: How to convert the inline element into a "block" element? I believe that most people's answer is display:block, but you should know that this is not the only answer. At least I can set display:table, right?

There are two situations you should know about (if you don’t know):

First, set float for inline elements

Or In the example just now, we add a float:left to the span element, run it and see the effect, you will be surprised. Judging from the display effects and monitoring results, the span element has been "blocked". Note that we just finished talking about float in the previous section. Don’t forget the “destructiveness” and “wrapping properties” of float. They also apply here.

 

                                                                                                                                                                                 ​This time, you can guess the effect of adding absolute/fixed to the span element, which is the same as adding float. As for the characteristics of absolute/fixed, they will be mentioned in the next section when introducing position.

　 3. block 　This series has a section that focuses on the "Box Model". I don't know if you have seen it, or you already know the box model very well.

In fact, for block, I think it is the "box model". Once an element is set to block, it must follow the rules of the box model. Therefore, I won’t write about it in detail here. You can go to the box model section and take a closer look, that’s all.

4. inline-block

This topic has to start from the section "Browser Default Style". The browser's default style stipulates that several html elements are display:inline-block. Let's review.

　

Beginners may be unfamiliar with inline-block. It doesn’t matter, just do it step by step. First of all, you should know what inline looks like, which is general text and pictures; secondly, you should know what block looks like, which is a general div; finally, inline-block, as the name suggests, has both the characteristics of inline and For the characteristics of blocks, you can think about what ordinary buttons and inputs look like.

That button is an example. We entered several into the page and found that they are arranged in a "flow" style (you can compare the arrangement of several

). But for a button, we can also customize its shape so that it has the characteristics of a "block".

Therefore, the characteristics of Inline-Block can be summarized: the outside seems to be "flow", but it is indeed a "block" itself. I don’t know if everyone understands it?

5. Summary

I saw that the content about display in the "CSS Design Guide" book is less than one page. It reflects that the content of display is not very much, but it also depends on how you understand and apply it. If you taste it in detail , still very interesting. If you have any opinions, you can leave a message to exchange them.

----------------------------------------------- -------------------------------------------------- ---------------

Welcome to follow my tutorial: "From Design to Pattern" " In-depth understanding of javascript prototypes and closures Series 》《Microsoft petshop4.0 source code interpretation video》《json2.js source code interpretation video》

You are also welcome to follow my open source project??wangEditor, a simple and easy-to-use web rich text editor Device

---------------------------------------- -------------------------------------------------- ------------------

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn