[Notes CSS 7] Modèle de mise en page CSS

1. Modèle de mise en page CSS
Après avoir clarifié les concepts de base et les types de modèles de boîte du modèle de boîte CSS, nous pouvons nous plonger dans le modèle de base de la mise en page des pages Web. Le modèle de mise en page, comme le modèle de boîte, est le concept le plus basique et le plus central de CSS. Mais le modèle de mise en page est basé sur le modèle de boîte et est différent de ce que nous appelons souvent styles de mise en page CSS ou modèles de mise en page CSS. Si le modèle de mise en page est la base, alors le modèle de mise en page CSS est la fin, l'expression externe.
CSS contient 3 modèles de mise en page de base, résumés en anglais comme suit : Flow, Layer et Float.
Dans les pages Web, les éléments ont trois modèles de mise en page :
1. Modèle de flux (Flow)
2. Modèle flottant (Float)
3. , Modèle de flux 1

Parlons d'abord du modèle de flux. Flow est le mode de mise en page par défaut des pages Web. C'est-à-dire que les éléments Web HTML de la page Web dans l'état par défaut distribuent le contenu de la page Web selon le modèle de flux.

Le modèle de disposition fluide a deux caractéristiques typiques :

Premièrement, les éléments de bloc seront étendus verticalement et distribués dans l'ordre de haut en bas dans l'élément conteneur, car dans Par défaut, la largeur de les éléments de bloc sont à 100 %. En effet, les éléments de bloc occuperont leur position sous forme de rangées.

3. Modèle de flux 2

Deuxième point, sous le modèle de flux, les éléments en ligne seront affichés horizontalement de gauche à droite dans l'élément conteneur. (Les éléments en ligne ne sont pas aussi dominateurs que les éléments de bloc et occupent une ligne qui leur est propre)

4. Modèle flottant

Les éléments de bloc sont si dominateurs qu'ils occupent une ligne qui leur est propre. Si maintenant nous en voulons deux. bloquer les éléments à afficher côte à côte, Que faire ? Ne vous inquiétez pas, définir l'élément sur float peut réaliser ce souhait.

Aucun élément ne peut être flottant par défaut, mais il peut être défini comme flottant à l'aide de CSS. Des éléments tels que p, p, table, img, etc. peuvent être définis comme flottants. Le code suivant peut afficher deux éléments p sur une seule ligne.

Bien sûr, vous pouvez également faire flotter deux éléments en même temps pour obtenir un affichage sur une seule ligne.

p{ width:200px; height:200px; border:2px red solid; float:left; } <p id="p1"></p> <p id="p2"></p>

Une ligne peut-elle être affichée en définissant deux éléments, un à gauche et un à droite ? Bien sûr :

p{ width:200px; height:200px; border:2px red solid; float:right; }

5. Qu'est-ce que le modèle de calque

p{ width:200px; height:200px; border:2px red solid; } #p1{float:left;} #p2{float:right;}

Qu'est-ce que le modèle de disposition des calques ? Le modèle de disposition des calques ressemble à la fonction d'édition des calques très populaire du logiciel d'image PhotoShop. Chaque calque peut être positionné et utilisé avec précision. Cependant, dans le domaine de la conception Web, la disposition des calques n'a pas été populaire en raison de la mobilité des tailles de pages Web. . Cependant, il existe toujours des avantages à utiliser la disposition des calques localement sur une page Web. Découvrons la disposition des couches en HTML.

Comment positionner avec précision les éléments HTML dans les pages Web, tout comme les calques du logiciel d'image PhotoShop, chaque calque peut être positionné et utilisé avec précision. CSS définit un ensemble de propriétés de positionnement pour prendre en charge le modèle de disposition des couches.

Le modèle de calque a trois formes :

1. Positionnement absolu (position : absolue)

2. Positionnement relatif (position : relative)

3. . Positionnement fixe (position : fixe)

6. Modèle de calque : positionnement absolu

Si vous souhaitez définir le positionnement absolu dans le modèle de calque pour un élément, vous devez définir la position : absolue (indiquant l'absolu). positionnement). Cette instruction Faites glisser l'élément hors du flux de documents, puis utilisez les attributs gauche, droite, haut et bas pour le positionner de manière absolue par rapport à son bloc contenant le parent le plus proche avec un attribut de positionnement. Si aucun bloc contenant de ce type n’existe, il est relatif à l’élément body, c’est-à-dire par rapport à la fenêtre du navigateur.

Le code suivant peut déplacer l'élément p de 100 px vers la droite et de 50 px vers le bas par rapport à la fenêtre du navigateur.

7. Modèle de calque : positionnement relatif

p{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <p id="p1"></p>

Si vous souhaitez définir le positionnement relatif dans le modèle de calque pour un élément, vous devez définir la position : relative (indiquant le positionnement relatif), qui utilise left, right, top, La propriété bottom détermine la position de décalage de l'élément dans le flux normal du document. Le processus de positionnement relatif consiste à générer d'abord un élément en mode statique (flottant) (et l'élément flotte comme une couche), puis à se déplacer par rapport à la position précédente. La direction et l'amplitude du mouvement sont déterminées par la gauche et la droite. , top et bottom , la position avant le décalage reste inchangée.

Le code suivant se déplace de 50 px vers le bas et de 100 px vers la droite par rapport à la position précédente ;

Qu'est-ce que « la position avant le décalage reste inchangée » ?

#p1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <p id="p1"></p>

Vous pouvez faire une expérience et écrire du texte dans la balise span. Le code suivant :

Bien que l'élément p soit décalé par rapport à sa position précédente, la position précédente de l'élément p est toujours conservée, donc l'élément span suivant est affiché derrière la position précédente du p élément. .

<body> <p id="p1"></p><span>偏移前的位置还保留不动，覆盖不了前面的p没有偏移前的位置</span> </body>

八、层模型：固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#p1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; } 
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> ....

九、relative和absolute组合使用

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

<p id="box1"><!--参照定位的元素--> <p id="box2">相对参照元素进行定位</p><!--相对定位元素--> </p>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入

position:relative; #box1{ width:200px; height:200px; position:relative; }

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{ position:absolute; top:20px; left:30px; }

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

 以上就是【CSS笔记七】CSS布局模型的内容，更多相关内容请关注PHP中文网（www.php.cn）！