Maison interface Web tutoriel HTML css浮动与绝对定位的关系_html/css_WEB-ITnose

css浮动与绝对定位的关系_html/css_WEB-ITnose

Jun 24, 2016 am 11:15 AM

  人还是要学会思考。我初学css时候,老觉得浮动与绝对定位的功能很类似,原因很简单,因为他俩都能使正常html元素脱离元素流。

相对于绝对定位强悍的功能,浮动其实并没有完全脱离元素流,这个后面会说。

  那么什么是脱离元素流呢?要搞清楚这个问题,首先得了解什么是元素流。我的理解,元素流是html标签本应该出现在页面的位置,比如下面这段代码。

1 <div>2     <p class="p1">p1</p>3     <p class="p2">p1</p>4     <p class="p3">p3</p>5 </div>
Copier après la connexion

 1 div>p{ 2   line-height:20px;   3 } 4 .p1{ 5   background-color:red;   6 } 7 .p2{ 8   background-color:blue;   9 }10 .p3{11   background-color:pink;  12 }
Copier après la connexion

页面效果

正常情况下p2应该处于p1的下面,p3的上面。这是p2处在正常元素流的位置。如果给p2加一个左浮的样式会发生什么:

神奇吧,p2貌似跑到了p3的头顶,但还是位于p1下面,同时p3上面的文字却没有在p2下面,这就是p2半脱离元素流的效果(为什么是半脱离,因为它只是使它后面的元素位于它的下面,并没有影响它与p1的关系,同时p3上面的文字不会出现在p2的下面)

说到这里,你可能还是糊涂的,到底什么是真正的脱离元素流。其实,css是一门十分感性的语言,某些效果需要有强大的想象力支持才能想的通。

举个例子,我们凡人就好比没有脱离元素流的p1、p2、p3,世世代代生活在地球上,受重力影响,受诸多条件限制,老二排在老大后面,老三最小。突然有一天,老二造出了一对翅膀(浮动),随时可以离开他世世代代生活的地方(元素流)去蓝天翱翔,但是他毕竟是凡人,只是征服了蓝天而已,仍然脱离不了地球的束缚飞出大气层。况且他的翅膀是人造的,功能相对于鸟类来说还是弱爆了,他只能占据他的弟弟头顶上那一片蓝天,无法改变位置(只能去最左边或者最右边),而且如果他弟弟中也有人‘飞’起来了,他们会处在同一片天空下。

不知道看懂了没有,这就是半脱离元素流的效果,虽然享受到了蓝天的自由,但仍受到诸多限制。也许你会好奇,为什么p3上面的文字不会处在p2下面,这其实并不是bug,这才是浮动设计的初衷,浮动最初是为了实现文字环绕效果而被提出来的。

 

下面说一说position:absolute,还是刚才的p1、p2、p3,如果给p3绝对定位会发生什么:

和浮动效果很类似,只不过p2完全位于p3的上面,其实这时候p2位于p1与p3的最上面,只不过他默认会出现在他自己头顶的位置。

其实这也很好理解,刚才的浮动效果是p2借助人造翅膀实现的,是半脱离元素流的,这次p2直接成仙了,直接飞出来地球(完全脱离元素流),完全掌控他们头顶上的那一片天空,而且通过left、right、top、bottom可以控制他的位置,真是想去哪去哪。

仙人也是有等级的,佛教讲欲界六天,从低到高分别是四天王天、忉利天、夜摩天、兜率天、乐化天、他化自在天。这刚好对应绝对定位的z-index,一层盖一层,自己体会。

 

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

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

HTML est-il facile à apprendre pour les débutants? 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 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? 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.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Apr 04, 2025 pm 11:30 PM

L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Apr 05, 2025 am 06:15 AM

Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

HTML, CSS et JavaScript: outils essentiels pour les développeurs Web HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

See all articles