深入理解和应用display属性（一）-tutoriel HTML-php.cn

Table des matières

一、None

二、Block

三、inline

Maison

interface Web

tutoriel HTML

深入理解和应用display属性（一）

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 22, 2016 am 12:00 AM

Display在官方定义：规定元素应该生成的框的类型。本文只重点分析常用的6个值：none、block、inline、inline-block、inherit、flex。其他table、list-item等都不再推荐使用。

一、None

此元素不会被显示。主要与visibility属性为hidden时相区分。

1) 当元素的none时，js可以获取此元素，但不能获取/设置此元素的可视化属性的值（但可以设置自定义属性的值），如Width、Height、background等Css属性的值，这也就表明当元素为none时，元素是不被浏览器渲染的。

2) 当元素的visibility值为hidden时，元素虽然不可见，但可以获取/设置元素的任何值，包含Css相关属性。这也就表明此时的元素是被浏览器渲染的（在文档流中是占有位置的），只是处于不可见的状态。

3) 示例代码如下：

Css代码：

<span style="color: #800000;">#div01</span>{<span style="color: #ff0000;"> 
                display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> red</span>;
            }<span style="color: #800000;">
            #div02</span>{<span style="color: #ff0000;">
                visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 100px</span>;
            }<span style="color: #800000;">
            #div03</span>{<span style="color: #ff0000;"> 
                width</span>:<span style="color: #0000ff;"> 100px</span>;
            }

Copier après la connexion

Js/html代码：

<div id="div01" data-name="div01"> div01</div>
        <div id="div02" data-name="div02"> div01</div>
        <div id="div03"> div03</div>
        <script type="text/javascript"><span style="color: #000000;">
            window.onload = <span style="color: #0000ff;">function<span style="color: #000000;">(){
                <span style="color: #0000ff;">var div01 = document.getElementById('div01'<span style="color: #000000;">);
                <span style="color: #0000ff;">var div02 = document.getElementById('div02'<span style="color: #000000;">); 
                <span style="color: #0000ff;">var div03 = document.getElementById('div03'<span style="color: #000000;">); 

                <span style="color: #008000;">//<span style="color: #008000;">output: div01:0 background:  name:div01
                console.log( 'div01:' + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"<span style="color: #000000;">));
                <span style="color: #008000;">//<span style="color: #008000;">output: div02:100 name:div02
                console.log( 'div02:' + div02.offsetWidth + " name:" + div02.getAttribute("data-name"<span style="color: #000000;">));
                <span style="color: #008000;">//<span style="color: #008000;">output: div03:100
                console.log( 'div03:' +<span style="color: #000000;"> div03.offsetWidth);
                
                div01.style.width = 1000<span style="color: #000000;">;
                div01.setAttribute("data-name","div0101"<span style="color: #000000;">);
                div02.style.width  = "800px"<span style="color: #000000;">;
                div02.setAttribute("data-name","div0202"<span style="color: #000000;">);
                div03.style.width  = 800<span style="color: #000000;">;

                <span style="color: #008000;">//<span style="color: #008000;">output: div01:0 background:  name:div0101
                console.log( 'div01:' + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"<span style="color: #000000;">));
                <span style="color: #008000;">//<span style="color: #008000;">output: div02:800 name:div0202
                console.log( 'div02:' + div02.offsetWidth + " name:" + div02.getAttribute("data-name"<span style="color: #000000;">));
                <span style="color: #008000;">//<span style="color: #008000;">output: div03:800
                console.log( 'div03:' +<span style="color: #000000;"> div03.offsetWidth);
            }
        </script>

Copier après la connexion

二、Block

设置元素为块级元素，可应用盒子模型相关属性。默认Width会100%，Height自适应。Margin、padding都有效。如果没有占宽或高的子元素存在，则高度为零。

代码如下：

<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="color: #800000; background-color: #f5f5f5;">
            #div01</span><span style="color: #000000; background-color: #f5f5f5;">{</span><span style="color: #ff0000; background-color: #f5f5f5;">
                background</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;"> red</span><span style="color: #000000; background-color: #f5f5f5;">;</span>
            <span style="color: #000000; background-color: #f5f5f5;">}</span><span style="color: #800000; background-color: #f5f5f5;">
            #div02</span><span style="color: #000000; background-color: #f5f5f5;">{</span><span style="color: #ff0000; background-color: #f5f5f5;">
                height</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;"> 100px</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;">
                background</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;"> gray</span><span style="color: #000000; background-color: #f5f5f5;">;</span>
            <span style="color: #000000; background-color: #f5f5f5;">}</span><span style="color: #800000; background-color: #f5f5f5;">
            #div03</span><span style="color: #000000; background-color: #f5f5f5;">{</span><span style="color: #ff0000; background-color: #f5f5f5;">
                background</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;"> green</span><span style="color: #000000; background-color: #f5f5f5;">;</span>
            <span style="color: #000000; background-color: #f5f5f5;">}</span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div01"</span> <span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div02"</span> <span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div03"</span> <span style="color: #0000ff;">></span>div03<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span>

Copier après la connexion

效果截图：

三、inline

行内元素或者通过display:inline修饰为行内元素的都具有行内元素的行为。

1) 多个inline元素会排成一行，并列的多个inline元素之间会存在8个像素左右的间隔，8像素间隔解决办法：

a). Html文本有意识的都排成一行，如下代码所示：

<span style="color: #0000ff;"><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a01<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a02<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span></span></span>

Copier après la connexion

b). 利用margin-left:-8px，也就是marginq负值实现，也可以在外层使用letter-spaceing和word-spaceing为负值的方式实现（此种试子元素需要重置被设置属性）

<span style="color: #800000;">.inline</span>{<span style="color: #ff0000;">
                display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
                padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
                margin-left</span>:<span style="color: #0000ff;"> -8px</span>;
            }

Copier après la connexion

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inline"</span><span style="color: #0000ff;">></span>inline01<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inline"</span><span style="color: #0000ff;">></span>inline02<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inline"</span><span style="color: #0000ff;">></span>inline03<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inline"</span><span style="color: #0000ff;">></span>inline04<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>

Copier après la connexion

c). 包裹inline元素的外层元素加上font-size:0px和-webkit-text-size-adjust:none实现

<span style="color: #800000;">a</span>{<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">  
                font-size</span>:<span style="color: #0000ff;"> 14px</span>;
            }<span style="color: #800000;">   
            .overWidth</span>{<span style="color: #ff0000;">
                white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
                border</span>:<span style="color: #0000ff;"> 1px solid gray</span>;<span style="color: #ff0000;">
                font-size</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
                -webkit-text-size-adjust</span>:<span style="color: #0000ff;"> none</span>;
            }

Copier après la connexion

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="overWidth"</span> <span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a01<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a000000002<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

Copier après la connexion

2) Inline元素的width和height无效

3) Inline元素的padding都有效，但margin左右有效，上下无效。

4) Inline元素包裹inline元素，外层元素的width和height会被内部的撑开

<span style="color: #800000;">.overWidth</span>{<span style="color: #ff0000;">
                display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
                border</span>:<span style="color: #0000ff;"> 1px solid gray</span>;
            }

Copier après la connexion

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="overWidth"</span> <span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a01<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a000000002<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

Copier après la connexion

5) Block/inline-block元素包裹inline元素，默认超width自动换行，height撑开。

a) 强制不换行可以通过white-space:nowrap来实现，此时超width的就会浮出来，可以通过overflow:hidden和text-overflow:ellipsis配合实现省略显示。

<span style="color: #800000;">.overWidth</span>{<span style="color: #ff0000;">
                white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
                border</span>:<span style="color: #0000ff;"> 1px solid gray</span>;<span style="color: #ff0000;">
                overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
                text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;
            }

Copier après la connexion

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="overWidth"</span> <span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a01<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a000000002<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

Copier après la connexion

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Will R.E.P.O. Vous avez un jeu croisé?

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7547

Tutoriel CakePHP

1382

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

See all articles