探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念。在CSS中，只有块级元素有物理属性，而元素则有三种形态：
1. 块级元素：有物理属性，width,height写值起作用，而且要占据一行。
2. 行内元素：没有物理属性。但是margin，padding值有用。不占据一行，后边可以有兄弟元素。
3. 即是块又是行内，根据兄弟元素决定。
一般来说，将行内元素和块级元素进行转换的话是给其加上display这个属性。行内→块级，display:block;块级→行内,display：inline;
这也是大家都熟知的一种方式。而我今天看到了使用float将行内元素转换为块级元素。是否可以呢？我们尝试一下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="charset=utf-8"/> 5 <title></title> 6 <style type="text/css"> 7 p{ 8 background-color:yellow; 9 }10 a{ 11 background-color: silver;12 }13 </style>14 </head>15 <body>16 <p>test_1</p>17 <p>test_2</p>18 <p>test_3</p>19 <a href="#">我是链接</a>20 </body>21 </html>p是我们常用的块级元素，而a是我们常用的行内元素。黄色占据了文档流的一行，银色仅占据了内容的那一片区域。
我们再给它们加上物理属性上去。
<style type="text/css"> p{ background-color:yellow; width: 100px; height: 100px; } a{ background-color: silver; width: 100px; height: 100px; }</style>1-1
我们可以看到块级元素
受到了影响，而元素则没有受到影响。
我们再给元素添加一个浮动的属性。
<style type="text/css"> p{ background-color:yellow; width: 100px; height: 100px; } a{ background-color: silver; float: left; width: 100px; height: 100px; }</style>1-2
我们可以看到元素在添加了float属性后，我们原来设置的width和height生效了。如果我们再元素后再添加一个元素，效果如下。
1-3
结论：float就是隐性的把行内元素转化为块元素，对内的话拥有了物理特性。对外则还是是行内元素的属性，不占据一行。
既然float能让行内转换为块级。那么，用position是否也可以呢？
<style type="text/css"> p{ background-color:yellow; width: 100px; height: 100px; } a{ background-color: silver; position: absolute; width: 100px; height: 100px; }</style>我们发现使用了position以后呈现的效果和“1-2”是一样的。就是说position也可以使行内元素转换为块级元素。至于要使用absolute。这是因为absolute会使得元素脱离文档结构，这一点和float是一样的。再者如果这里设置了两个元素的话，第一个会被第二个元素盖住。有多个的话则遵循“后来者居上”的原则。
所以说，不管是float还是position，使用它们都可以将行内元素转换为隐式的块级元素，不过随之带来的坏处就是会影响兄弟元素。
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.
Article chaud
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)
Sujets chauds
1369
52
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é.
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant 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.
