Maison > Article > interface Web > Quelles sont les méthodes de mise en page natives CSS ?
Quelles sont les méthodes de mise en page natives CSS ?
- 零下一度original
- 2017-06-26 09:14:451059parcourir
Avant-propos
Il existe en fait de nombreuses méthodes de mise en page native des pages Web sur Internet, probablement Flow (modèle de mise en page de flux), Float (modèle de mise en page flottant) et Layer (modèle de mise en page hiérarchique).
fc430c7db1eecf4621f4fc8a5479f894
Mise en page de flux
Le modèle de mise en page de flux est en fait 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.
La disposition du flux aura deux caractéristiques typiques.
Premièrement, les éléments au niveau du bloc seront distribués verticalement et séquentiellement de haut en bas dans l'élément conteneur parent le plus proche, car par défaut, la largeur des éléments au niveau du bloc est de 100. % (c'est-à-dire 100 % de la largeur de l'élément parent). En fait, les éléments de bloc occuperont des positions sous forme de lignes. Comme indiqué dans le code suivant,
<html><body><h1>我是h1</h1><div>我是div</div></body></html>
Comme indiqué dans le code ci-dessus, sans l'influence des styles externes, la largeur de h1 et div sera de 100 % (la largeur par défaut de la page).
Deuxièmement, dans le modèle de flux, les éléments en ligne seront affichés horizontalement de gauche à droite dans l'élément conteneur parent le plus proche.
<html><body><a>我是a</a><span>我是span</span></body></html>
Les éléments en ligne n'occupent pas une ligne par eux-mêmes comme les éléments de niveau bloc.
Mise en page flottante
Tout élément est dans l'ensemble du flux de documents par défaut et ne flottera pas. Lorsque nous définissons float sur un élément, nous pouvons laisser l'élément sortir du flux de documents actuel et devenir un élément flottant.
Le code suivant définit float pour l'élément div afin que les deux div puissent être affichés côte à côte.
div{width:200px;height:200px;border:2px red solid;float:left;
}<div id="div1">我是div1</div> <div id="div2">我是div2</div>
Une chose à noter ici est que si le flotteur que j'ai défini pour le div est float : right, alors div1 sera attaché au côté droit et div2 sera attaché à la gauche. côté de div1.
Disposition des calques
Qu'est-ce que le modèle de disposition hiérarchique ?
Le modèle de mise en page hiérarchique est similaire à la fonction d'édition de calques très populaire du logiciel d'image PhotoShop. Cependant, dans le domaine de la conception Web, en raison de la mobilité de la taille des pages Web. , le modèle de disposition hiérarchique. Ce n'était pas un succès. Cependant, l’utilisation d’une disposition hiérarchique localement sur une page Web présente toujours son utilité.
La disposition hiérarchique des applications nécessite souvent la coopération des attributs de positionnement. Il existe 3 types de positionnement en CSS,
Positionnement absolu (position : absolue)
Positionnement relatif (position : relative)
Positionnement fixe (position : fixe)
Positionnement absolu
Si vous souhaitez définir le positionnement absolu dans le modèle de présentation hiérarchique pour le élément, vous devez le définir position:absolute (ce qui signifie positionnement absolu), la fonction de cette instruction est de faire glisser l'élément hors du flux de documents, puis d'utiliser les attributs gauche, droite, haut et bas pour effectuer un positionnement absolu relatif à 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.
Positionnement relatif
Si vous souhaitez définir le positionnement relatif dans le modèle de présentation hiérarchique pour un élément, vous devez définir position: relative (indiquant le positionnement relatif), qui détermine l'élément par la gauche Attributs , right, top et bottom Une position décalée dans le flux de documents normal. 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.
La plus grande différence entre le positionnement relatif et le positionnement absolu est que le premier ne s'est pas détaché du flux de documents actuel et le second s'est détaché du flux de documents actuel. Le détachement du flux de documents actuel signifie que les éléments avant et après l'élément ne calculeront plus la taille et la position de l'élément lors du calcul de la position et du décalage.
Positionnement fixe
position : fixe, indiquant un positionnement fixe, similaire au type de positionnement absolu, mais ses coordonnées de mouvement relatif sont la vue (fenêtre de page Web à l'intérieur de l'écran) elle-même. Étant donné que la vue elle-même est fixe, elle ne changera pas à mesure que la barre de défilement de la fenêtre du navigateur défile, à moins que vous ne déplaciez la position de la fenêtre du navigateur sur l'écran ou que vous ne modifiiez la taille d'affichage de la fenêtre du navigateur, de sorte que les éléments positionnés de manière fixe seront être toujours dans une certaine position de la vue dans la fenêtre du navigateur qui ne sera pas affectée par le flux du document. Cela a la même fonction que l'attribut background-attachment:fixed (utilisé pour positionner l'image d'arrière-plan) ; .
Le positionnement fixe est utile dans certains scénarios, lorsque nous devons afficher un certain élément de manière fixe à une certaine position sur la page sans être affecté par la barre de défilement de la page. Par exemple, le bouton commun « Retour en haut ».
Utilisation mixte
Dans la mise en page moderne des pages Web, le positionnement relatif et le positionnement absolu sont souvent mélangés pour atteindre des objectifs plus flexibles. Le code suivant,
<style>#box1{width:200px;height:200px;position:relative; /* 前辈元素的定位必须设置为relative */
}#box2{position:absolute; /* 相对于最近的一个定位设置为relative的前辈元素的绝对定位 */top:20px;left:30px;
}</style><div id="box1"><div id="box2">相对参照元素进行定位</div></div>signifie que box2 est positionné de manière absolue par rapport à box1. Lorsque la position de box1 est modifiée, les éléments enfants à l'intérieur de box1 ne changeront pas car ils sont tous positionnés de manière absolue par rapport à box1.
Méthode de mise en page commune (deux colonnes)
Dans le cas de deux colonnes, la largeur du côté gauche est provisoirement de 100PX
Première méthode :
float + calc().right {width: calc(100% - 100px);
}Deuxième méthode :
position / float + margin-left//html部分同上//css.left { position:absolute;left: 0; /*或 float:left; */ width: 100px; background: blue;
}
.right{ margin-left: 100px; background: red; text-align:center;
}Dans une mise en page à deux colonnes, comment le côté gauche peut-il être fixe et le côté droit adaptatif.
1. Flottez à gauche, utilisez margin-left à droite. La longueur est la largeur fixe à gauche et la largeur est de 100 %
.2.利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建：
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible
三列布局左右固定中间自适应
圣杯
思路
首先有三行，头部和尾部各占一行，中间内容区一行，头尾不重要
中间内容分为三列对应三个div,为了先展示中间的主要内容所以把中间那列放前面，然后是左和右对应的div
中间内容自适应宽度为100%，此时已经把3个div所在的父容器占满了，所以想办法让左右2个div放置在左右侧，
左侧采取margin-left取-100%让其在最左侧，
右侧同理取值-200px(像素值为宽度大小)，保证刚好占满自身宽度
这时候测试发现已经有自适应效果了，但是缩小到一定程度页面就出问题了，左右不在了，
所以加上最低宽度就是左右2个DIV的宽度（另外得考虑浏览器默认的body下的margin为8px,做了样式重置不考虑）
这时候发现中间的内容文字被左右遮挡了，对父容器用pading左右值为左右元素宽度，
为什么不对中间的DIV设置padding,我发现设置了不起作用，具体的原因我暂时也搞不懂来龙去脉，
发现padding后左右有留白，这个时候左边需要用 left: -200px;position: relative;来设置DIV位置，
办法确实巧妙。右边实现同理。
这时候发现已经大致有了点样子了，效果也看的到，此时典型的三栏布局，左右固定，中间内容自适应已经完成。
总结：
其实这个布局已经有点年头（圣杯布局），通过左右两块DIV来遮挡了中间div宽度为100%的区域，
然后压缩了三个DIV共有的父容器，来实现对中间内容展示的完善，也使左右2个不在遮挡中间了。
然后我又趁机试了下z-index属性，这里有个小问题要注意（要让z-index起作用有个小小前提，
就是元素的position属性要是relative，absolute或是fixed）我之前的想法是让中间的内容置于顶层，不受div会因为某种hack导致位置变更遮挡了中间内容。
只需要设置下z-index属性值即可，左右可不设置，也可以设置以防万一，不同浏览器对z-index的默认值解析不同，可能会导致问题。基本的布局架构就是如此，根据实际项目需求在此架构上完善，或者以后遇到这种类似的问题能打开思路，便算是有点收获了。
核心代码
<style>body {/*因为浏览器默认body为margin:8px所以多加了16px*/min-width: 616px;
}header {width: 100%;height: 40px;background-color: darkseagreen;
}.container {/*height: 200px;*//*overflow: hidden;*/padding: 0 200px;
}.middle {width: 100%;height: 200px;background-color: deeppink;float: left;/*position: relative;*/
}.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;left: -200px;position: relative;
}.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;right: -200px;position: relative;
}footer {clear: both;width: 100%;height: 30px;background-color: darkslategray;
}</style><header><h4>Header内容区</h4></header><div class="container"><div class="middle"><h4>中间弹性区</h4><p>
我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容</p></div><div class="left"><h4>左边栏</h4></div><div class="right"><h4>右边栏</h4></div></div><footer><h4>Footer内容区</h4></footer>双飞翼
思路
双飞翼布局的方式跟圣杯在前部分是一样，不同之处主要在于如何处理中间的内容块被遮挡的问题
圣杯用padding的思路，使之压缩，但是父容器压缩，左右DIV位置变更，只能用相对位置进行left
设置位移为元素宽度来调整
而双飞翼的路线为采用的方式相比圣杯的父容器padding，
改变的是中间内容的内层div的外边框，相对来说对布局的破坏不大，
但是要采用这种方式又不破坏页面结构，就只能在中间内容div内部的再加个DIV设置margin或padding.
使之内容变相“压缩”等同padding效果，并且不会改变中间内容DIV外部的结构，只是内部的。
细心的人留意下我注释的代码，这里其实还有个CSS浮动的样式问题，出现这种情况有各种方式清除浮动，
我就不多讲解。大概有6种。
清除浮动(常用)
1.一般目前常用就是用：after伪元素给使用的浮动的父容器设置。
新浪使用方式.clearfix:after{ content: '';display: block;clear: both;height: 0;visibility: hidden;
}.clearfix:after{ /*最简方式*/content: '';display: block;clear: both;
}2.给父元素定高
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.outer{border: 1px solid black;width: 300px;height: 50px;
}.inner{width: 50px;height: 50px;background-color: #ff4400;margin-right: 20px;float: left;
}.footer{background-color: #005FC3;width: 200px;height: 100px;
}</style></head><body><div class="outer"><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><div class="footer"></div></body></html>3.利用 overflow:hidden 属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.outer{border: 1px solid black;width: 300px;overflow: hidden;zoom: 1;/*兼容 IE*/
}.inner{width: 50px;height: 50px;background-color: #ff4400;margin-right: 20px;float: left;
}.footer{background-color: #005FC3;width: 200px;height: 100px;
}</style></head><body><div class="outer"><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><div class="footer"></div></body></html>核心代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>双飞翼</title><style>header {width: 100%;height: 40px;background-color: darkseagreen;
}.container {/*height: 200px;*//*overflow: hidden;*/
}.middle {width: 100%;height: 200px;background-color: deeppink;float: left;word-break: break-all;
}.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;
}.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;
}footer {width: 100%;height: 30px;background-color: darkslategray;clear: both;
}.div-middle {margin: 0 200px;/*padding: 0 200px;*/
}</style></head><body><header><h4>Header内容区</h4></header><div class="container"><div class="middle"><div class="div-middle"><h4>中间弹性区</h4><p>
我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容</p></div></div><div class="left"><h4>左边栏</h4></div><div class="right"><h4>右边栏</h4></div></div><footer><h4>Footer内容区</h4></footer></body></html>End
本篇只做阶段性的初级总结，原谅我没有贴出代码的效果图，以后有机会再扩展并进行效果图片展示，希望大家自己在编辑器下尝试效果。
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!