Quelles sont les mises en page CSS ? La mise en page CSS peut rendre la page plus belle et plus ordonnée. L'article suivant résume plusieurs méthodes de mise en page courantes en CSS, examinons-les en détail.
Chaque front-end doit l'avoir vu. Cette largeur fixe est centrée horizontalement. Nous pouvons également utiliser ce qui suit pour obtenir une largeur variable
2. tableau + marge
affichage : le tableau est similaire à l'élément de bloc dans les performances . Mais la largeur est large.
Pas besoin de définir le style de l'élément parent (prend en charge IE 8 et supérieur) Compatible avec IE 8. Les versions suivantes doivent être ajustées à
3. -block + text-align
<div>
<div>Demo</div>
</div>
<style>
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>Bonne compatibilité (même compatible avec IE 6 et IE 7)
absolu + margin-left
<div>
<div>Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px; /* width/2 */
}
</style>Largeur fixePar rapport à l'utilisation de la transformation, il a une meilleure compatibilité
5. Absolu + transformation
Positionnement absolu Être séparé du flux documentaire n'affectera pas la disposition des éléments suivants. <div>
<div>Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
transform est un attribut CSS3 et présente des problèmes de compatibilité
6. flex + justifier-content
Définissez simplement l'attribut du nœud parent, Pas besoin de définir des éléments enfants <div>
<div>Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;
}
</style>
flex a des problèmes de compatibilité
centré verticalement :
1. cellule + alignement vertical
Bonne compatibilité (les versions inférieures à IE 8 doivent ajuster la structure de la page en tableau<div>
<div>Demo</div>
</div>
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
2, absolu + transformation Le puissant absolu est bien sûr très simple pour de si petits problèmes
Le positionnement absolu est hors du flux du document et n'affectera pas la disposition des éléments suivants Mais si l'élément est positionné de manière absolue. est le seul élément. Ensuite, l'élément parent perdra également sa hauteur. <div>
<div>Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
transform est un attribut CSS3, qui présente des problèmes de compatibilité.
Le centrage horizontal peut également être réalisé en utilisant margin-top. centrage.
3. flex + align-itemsSi absolu est puissant, alors flex est tout simplement le plus fort, mais il a des problèmes de compatibilité
.
<div>
<div>Demo</div>
</div>
<style>
.parent {
display: flex;
align-items: center;
}
</style>
Centrage horizontal et vertical :
1 absolu + transformation
Rupures de positionnement absolu. loin du flux de documents, n'affectera pas la disposition des éléments suivants <div>
<div>Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
transform est un attribut CSS3 et présente des problèmes de compatibilité
2. -cellule + vertical. -align
Bonne compatibilité<div>
<div>Demo</div>
</div>
<style>
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
3. Seuls les attributs du nœud parent doivent être définis et les éléments enfants n'ont pas besoin d'être définis. Problèmes de compatibilité douloureux
<div>
<div>Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /*垂直居中*/
}
</style>
Une colonne a une largeur fixe et une colonne est adaptative
1. float + margin
<span style="font-family: Microsoft YaHei , Microsoft YaHei;">IE 6 aura 3 Pixel BUG, la solution peut être d'ajouter margin-left:-3px à .left. Bien entendu, il existe également des solutions pour résoudre ce petit bug comme suit : <strong> </strong></span>
<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>Cette méthode n'existera pas dans IE 6. Il y a un bug de 3 pixels, mais .left ne peut pas être sélectionné. Vous devez définir .left {position : relative} pour augmenter la valeur. niveau. Notez que cette méthode ajoute une structure inutile au texte HTML. Les programmeurs arrogants devraient abandonner les navigateurs dont la version est trop basse<span style="font-family: 微软雅黑, Microsoft YaHei;">IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下：</span>
<div>
<div>
<p>left</p>
</div>
<div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>2. float + overflow
Réglage du débordement : caché déclenchera le mode BFC (Bloquer Contexte de formatage) Contexte de formatage au niveau du bloc. Qu’est-ce que BFC ? En termes simples, peu importe ce que vous faites au sein de BFC, le monde extérieur ne sera pas affecté. Cette méthode a un style simple mais ne prend pas en charge IE 6
3. Les caractéristiques d'affichage du tableau<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right {
overflow: hidden;
}
</style>
tableau sont la largeur de cellule de chaque colonne et doivent être égal à la largeur du tableau. table-layout:fixed peut accélérer le rendu et également définir la priorité de mise en page. La marge ne peut pas être définie dans la cellule du tableau, mais l'espacement peut être défini via padding
4 flex<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell;
/*宽度为剩余宽度*/
}
</style>
Problèmes de compatibilité du navigateur de version basse<.>Problèmes de performances, uniquement adaptés à une mise en page à petite échelleAprès avoir appris la disposition d'une colonne avec une largeur fixe et une colonne avec une disposition adaptative, nous pouvons également facilement implémenter plusieurs colonnes avec une largeur fixe, une colonne avec une disposition multi-adaptative. colonne à largeur variable et une colonne à disposition adaptative Nous ne sommes pas les mêmes ici. Une fois expliqué, vous pouvez l'essayer vous-même, ou vous pouvez consolider les connaissances précédemment apprises
<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
</style>
et d'autres distributions <.> :
1. float Cette méthode est parfaitement compatible avec IE8 et supérieur
2. flex
<div>
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</div>
<style>
.parent {
margin-left: -20px;
}
.column {
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
</style>
Puissant et simple, mais présente des problèmes de compatibilité
3.table
<div>
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.column {
flex: 1;
}
.column+.column { /* 相邻兄弟选择器 */
margin-left: 20px;
}
</style>
Disposition des contours
<div>
<div>
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</div>
</div>
<style>
.parent-fix {
margin-left: -20px;
}
.parent {
display: table;
width: 100%;
/*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/
table-layout: fixed;
}
.column {
display: table-cell;
padding-left: 20px;
}
</style>
1. tableauLes caractéristiques du tableau sont que chaque colonne a une largeur égale et chaque ligne a une hauteur égale, ce qui peut être utilisé pour résoudre cette exigence
2, flex
<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
</style>
注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch
3、float
<div>
<div>
<p>left</p>
</div>
<div>
<p>right</p>
<p>right</p>
</div>
</div>
<style>
.parent {
overflow: hidden;
}
.left,
.right {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left {
float: left;
width: 100px;
margin-right: 20px;
}
.right {
overflow: hidden;
}
</style>
此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用position、flex 、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性目前flex兼容性较差。
相关文章推荐：
常见css水平自适应布局_html/css_WEB-ITnose
DIV+CSS布局中常见的10大错误_html/css_WEB-ITnose
CSS常用布局实现方法_html/css_WEB-ITnose
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!
