Shulou(Shulou.com)06/01 Report--

This article is about how css implements no-load layout. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

No-load layout

No-load layout refers to the placeholder layout that is replaced by other forms when there are no nodes in the container. Is it also possible to display placeholders when the list collection is empty using JS? It is believed that many students who use the MVVM framework will render the virtual DOM using conditional judgment. If the list length is not 0, then render the list, otherwise render the placeholder.

... Empty

However, CSS provides a selector for null judgment: empty, which should be noticed by few students.

Empty acts on nodes that have no child nodes, which also include inline anonymous boxes (separate text content) The following three cases are regarded as non-empty states, and if these three states do not occur, they are regarded as empty states, and empty will only be triggered at this time.

Only nodes exist:

CSS

Only text exists: CSS

There are both nodes and text: Hello

CSS

1 2 3 4 5 6 7 8 9$ empty: "https://yangzw.vip/img/empty.svg";.empty-layout {overflow: auto; width: 200px; height: 150px; outline: 1px solid # 3c9; &: empty {display: flex; justify-content: center; align-items: center; background: url ($empty) no-repeat center/100px auto &:: after {margin-top: 90px; font-weight: bold; content: "No money, no data";}} li {padding: 0 10px; height: 30px; background-color: # 09f; line-height: 30px; color: # fff &: nth-child (even) {background-color: # f90;}

There is also a special no-load layout, that is, no processing is done. In this way, the final rendered DOM is only the container, and if margin/padding/border is declared but width/height is not declared, the following placeholder effect will occur. Containers without any child nodes also declare margin/padding/border, which looks awkward.

It's all right: empty will take care of it for you! The container without any child nodes directly declares that display:none resolves all invalid placeholders, of course, it can also act on the specified nodes. One move against the enemy, strength!

/ / works on all nodes: empty {display: none;} / / acts on specified nodes. Empty-layout:empty {display: none;} Thank you for reading! This is the end of the article on "how to achieve no-load layout in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.