Home Web Front-end HTML Tutorial Is the tag li a block-level element analysis?

Is the tag li a block-level element analysis?

Jun 27, 2017 pm 01:24 PM
element analyze

Block-level elements: block-level, I believe everyone knows it (or Google it). When I was writing code in the past, I always felt strange when facing the

  • tag. Why can it set the height, but unlike the

    elements, it feels like it is a "semi-inline" (inline: inline[text]-level) element. HTML 4 is described like this:

    The following elements may also be considered block-level elements since they may contain block-level elements:

    This description seems to be saying that <li /> is a "semi-inline" element. Of course, elements similar to <td /> in this list have also caused me such doubts. Today I took a look at the default CSS of each browser. The result is this:

    ##IE8+ / Webkit / Firefox / Opera
    Browsers CSS
    IE6/IE7 li{<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:block;}
    li{display:list-item;}
    Here, it’s basically clear. In A-Grade browsers other than IE6/7, it is a "semi-inline" element. Mentioning

    display:list-item;, in fact, even though all A-Grade browsers now support it, not many people use it. Why? In fact, it is of no use. In Quirks Mode, PPK says this:

    display: list-item means that the element is displayed as a list-item, which mainly means that it has a bullet in front of it (like an UL), except in IE 5 on Mac where it gets a number (like an OL). The numbers are buggy: all previous LI's in the page count as one, so this example starts with number 5 (the screenshot was made before I inserted my compatibility-LI's).

    Live example:

    display: block

    display: list-item

    display: list-item

    Right. In fact, this does not mean much. But it can be regarded as solving one of my doubts. Share it. If you also have such doubts, maybe if a bug or other question arises next time when coding, you will probably be able to respond quickly.

    • DD – Definition description

    • DT – Definition term

    • FRAMESET – Frameset

    • LI – List item

    • TBODY – Table body

    • TD – Table data cell

    • TFOOT – Table foot

    • TH – Table header cell

    • THEAD – Table head

    • TR – Table row

The above is the detailed content of Is the tag li a block-level element analysis?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Two Point Museum: All Exhibits And Where To Find Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to implement data statistics and analysis in uniapp How to implement data statistics and analysis in uniapp Oct 24, 2023 pm 12:37 PM

How to implement data statistics and analysis in uniapp 1. Background introduction Data statistics and analysis are a very important part of the mobile application development process. Through statistics and analysis of user behavior, developers can have an in-depth understanding of user preferences and usage habits. Thereby optimizing product design and user experience. This article will introduce how to implement data statistics and analysis functions in uniapp, and provide some specific code examples. 2. Choose appropriate data statistics and analysis tools. The first step to implement data statistics and analysis in uniapp is to choose the appropriate data statistics and analysis tools.

Analysis of the reasons why the secondary directory of DreamWeaver CMS cannot be opened Analysis of the reasons why the secondary directory of DreamWeaver CMS cannot be opened Mar 13, 2024 pm 06:24 PM

Title: Analysis of the reasons and solutions for why the secondary directory of DreamWeaver CMS cannot be opened. Dreamweaver CMS (DedeCMS) is a powerful open source content management system that is widely used in the construction of various websites. However, sometimes during the process of building a website, you may encounter a situation where the secondary directory cannot be opened, which brings trouble to the normal operation of the website. In this article, we will analyze the possible reasons why the secondary directory cannot be opened and provide specific code examples to solve this problem. 1. Possible cause analysis: Pseudo-static rule configuration problem: during use

CSS transition effect: how to achieve the sliding effect of elements CSS transition effect: how to achieve the sliding effect of elements Nov 21, 2023 pm 01:16 PM

CSS transition effect: How to achieve the sliding effect of elements Introduction: In web design, the dynamic effect of elements can improve the user experience, among which the sliding effect is a common and popular transition effect. Through the transition property of CSS, we can easily achieve the sliding animation effect of elements. This article will introduce how to use CSS transition properties to achieve the sliding effect of elements, and provide specific code examples to help readers better understand and apply. 1. Introduction to CSS transition attribute transition CSS transition attribute tra

Analyze whether Tencent's main programming language is Go Analyze whether Tencent's main programming language is Go Mar 27, 2024 pm 04:21 PM

Title: Is Tencent’s main programming language Go: An in-depth analysis. As China’s leading technology company, Tencent has always attracted much attention in its choice of programming languages. In recent years, some people believe that Tencent mainly adopts Go as its main programming language. This article will conduct an in-depth analysis of whether Tencent's main programming language is Go, and give specific code examples to support this view. 1. Application of Go language in Tencent Go is an open source programming language developed by Google. Its efficiency, concurrency and simplicity are loved by many developers.

Performance analysis and optimization strategy of TP6 Think-Swoole RPC service Performance analysis and optimization strategy of TP6 Think-Swoole RPC service Oct 12, 2023 am 10:34 AM

Performance analysis and optimization strategies of TP6Think-SwooleRPC service Summary: This article mainly analyzes the performance of TP6 and Think-SwooleRPC services, and proposes some optimization strategies. First, the response time, concurrency and throughput of the RPC service were evaluated through performance testing. Then, corresponding solutions and practices are proposed from two aspects: server-side performance optimization and client-side performance optimization, including code examples. Keywords: TP6, Think-Swoole, R

How to use CSS to achieve an element's transparency gradient effect How to use CSS to achieve an element's transparency gradient effect Nov 21, 2023 pm 01:38 PM

How to use CSS to achieve the transparency gradient effect of elements In web development, adding transition effects to web page elements is one of the important means to improve user experience. The gradient effect of transparency can not only make the page smoother, but also highlight the key content of the element. This article will introduce how to use CSS to achieve the transparency gradient effect of elements and provide specific code examples. Using the CSS transition attribute To achieve the transparency gradient effect of an element, we need to use the CSS transition attribute. t

CSS transformation: how to achieve the rotation effect of elements CSS transformation: how to achieve the rotation effect of elements Nov 21, 2023 pm 06:36 PM

CSS transformation: How to achieve the rotation effect of elements requires specific code examples. In web design, animation effects are one of the important ways to improve user experience and attract user attention, and rotation animation is one of the more classic ones. In CSS, you can use the "transform" attribute to achieve various deformation effects of elements, including rotation. This article will introduce in detail how to use CSS "transform" to achieve the rotation effect of elements, and provide specific code examples. 1. How to use CSS’s “transf

Analyze the advantages and disadvantages of static positioning technology Analyze the advantages and disadvantages of static positioning technology Jan 18, 2024 am 11:16 AM

Analysis of the advantages and limitations of static positioning technology With the development of modern technology, positioning technology has become an indispensable part of our lives. As one of them, static positioning technology has its unique advantages and limitations. This article will conduct an in-depth analysis of static positioning technology to better understand its current application status and future development trends. First, let’s take a look at the advantages of static positioning technology. Static positioning technology achieves the determination of position information by observing, measuring and calculating the object to be positioned. Compared with other positioning technologies,

See all articles