La
mise en page d' arrière-plan est inévitable dans notre développement frontal. Rappelez simplement le schéma de mise en page CSS pour votre référence et votre propre référence.
Disposition centrée
La disposition centrée ici est basée sur la prémisse de la largeur indéfinie, et le cas de la largeur fixe est également inclus.
Centré horizontalement
je
nline-block + text-align
.parent {
text-align: center;
}
.child {
display: inline-block;
}
Cette solution est compatible avec IE8. Pour IE567, le bloc en ligne n'est pas pris en charge, vous devez donc utiliser le hack css pour la compatibilité.
table + margin
.child {
display: table;
margin: 0 auto;
}
Cette solution est compatible avec IE8, vous pouvez utiliser à la
place de l'écriture css, et la compatibilité est meilleure.
absolute + transform
.parent {
position:relative;
height:1.5em;
}
.child {
position:absolute;
left:50%;
transform:translateX(-50%);
}
Cette solution est compatible avec IE9, en raison de la compatibilité de la transformation, si .child est un élément de largeur fixe, vous pouvez utiliser le libellé suivant pour améliorer la compatibilité.
.
parent {
position: relative;
height:1.5em;
}
.child {
position: absolute;
width:100px;
left:50%;
margin-left:-50px;
}
复制代码
flex + justify-content
.parent {
display:flex;
justify-content;
}
.child {
margin:0 auto;
}
La disposition flex est très puissante, mais elle est limitée par la compatibilité. Il peut être utilisé audacieusement quelle que soit la compatibilité.
Disposition centrée verticalement
table-cell + vertial-align
.parent {
display: table-cell;
vertical-align: middle;
}
Ce schéma peut être
remplacé par pour améliorer la compatibilité.
absolute + transform
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
La compatibilité des nouveaux attributs css3 n'est pas très bonne.
flex + align-items
.parent {
display: flex;
align-items: center;
}
La compatibilité n'est pas très bonne, ne considérez pas les navigateurs de version basse.
Centrer horizontalement et verticalement
inline-block + table-cell + text-align + vertical-align
.parent{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child{
display: inline-block;
}
Compatible avec IE8.
absolute + transform
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Mauvaise compatibilité, compatible avec IE10 et au-dessus
flex
.parent{
display: flex;
justify-content: center;
align-items: center;
}
Différence compatible
Disposition multi-colonnes
Une colonne à largeur fixe, une colonne adaptative
float + margin
.left{
float: left;
width: 100px;
}
.right{
margin-left: 120px;
}
Cette solution est préférable pour les mises en page à largeur fixe. La méthode suivante est recommandée pour les mises en page à largeur variable.
float + overflow
.left{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
Ce schéma peut être parfaitement mis en œuvre, qu'il s'agisse d'une largeur fixe à plusieurs colonnes ou d'une largeur variable, et en même temps, il peut obtenir une disposition à hauteur constante.
table
.parent{
display: table; width: 100%;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left{
width: 100px;
padding-right: 20px;
}
flex
.parent{
display: flex;
}
.left{
width: 100px;
padding-right: 20px;
}
.right{
flex: 1;
}
Plusieurs colonnes de largeur fixe, une colonne est adaptative
float + overflow
.left,.center{
float: left;
width: 100px;
margin-right: 20px;
}
.right{
overflow: hidden;
}
table
.parent{
display: table; width: 100%;
table-layout: fixed;
}
.left,.center,.right{
display: table-cell;
}
.right{
width: 100px;
padding-right: 20px;
}
flex
.parent{
display: flex;
}
.left,.center{
width: 100px;
padding-right: 20px;
}
.right{
flex: 1;
}
Une colonne est de largeur variable, une colonne est adaptative
float + overflow
.left{
float: left;
margin-right: 20px;
}
.right{
overflow: hidden;
}
.left p{
width: 200px;}
table
.parent{
display: table; width: 100%;
}
.left,.right{
display: table-cell;
}
.left{
width: 0.1%;
padding-right: 20px;
}
.left p{
width:200px;}
flex
.parent{
display: flex;
}
.left{
margin-right: 20px;
}
.right{
flex: 1;
}
.left p{
width: 200px;}
Plusieurs colonnes de largeur variable, une colonne est adaptative
float + overflow
.left,.center{
float: left;
margin-right: 20px;
}
.right{
overflow: hidden;
}
.left p,.center p{
width: 100px;
}
Diviser également le
flottant + la marge
.parent{
margin-left: -20px;
}
.column{
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
table + margin
.parent-fix{
margin-left: -20px;
}
.parent{
display: table;
width:100%;
table-layout: fixed;
}
.column{
display: table-cell;
padding-left: 20px;
}
flex
.parent{
display: flex;
}
.column{
flex: 1;
}
.column+.column{
margin-left:20px;
}
Contour
float + overflow
.parent{
overflow: hidden;
}
.left,.right{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left{
float: left; width: 100px;
}
.right{
overflow: hidden;
}
table
.parent{
display: table;
width: 100%;
}
.left{
display:table-cell;
width: 100px;
margin-right: 20px;
}
.right{
display:table-cell;
}
flex
.parent{
display:flex;
width: 100%;
}
.left{
width: 100px;
}
.right{
flex:1;
}
Côte à côte et également divisée, une seule ligne alignée sur la disposition de gauche
flex
.main {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.item {
display: inline-block;
}
.empty{
height: 0;
visibility: hidden;
}
Disposition du Saint Graal et disposition de la double aile volante Disposition du
Saint Graal
<div class="container">
<div class="header">header</div>
<div class="wrapper clearfix">
<div class="main col">main</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
<div class="footer">footer</div>
</div>
.container {
width: 500px; margin: 50px auto;}
.wrapper {
padding: 0 100px 0 100px;}
.col {
position: relative; float: left;}
.header,.footer {
height: 50px;}
.main {
width: 100%;height: 200px;}
.left {
width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {
width: 100px; height: 200px; margin-left: -100px; right: -100px;}
.clearfix::after {
content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
Disposition de l'aile volante double
<div class="container">
<div class="header">header</div>
<div class="wrapper clearfix">
<div class="main col">
<div class="main-wrap">main</div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
<div class="footer">footer</div>
</div>
.col {
float: left;}
.header {
height: 50px;}
.main {
width: 100%;}
.main-wrap {
margin: 0 100px 0 100px;height: 200px;}
.left {
width: 100px; height: 200px; margin-left: -100%;}
.right {
width: 100px; height: 200px; margin-left: -100px;}
.footer {
height: 50px;}
.clearfix::after {
content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}
Disposition de positionnement
<div class="header">header</div>
<div class="wrapper">
<div class="main col">
main
</div>
<div class="left col">
left
</div>
<div class="right col">
right
</div>
</div>
<div class="footer">footer</div>
.wrapper {
position: relative; }
.main {
margin:0 100px;}
.left {
position: absolute; left: 0; top: 0;}
.right {
position: absolute; right: 0; top: 0;}
Beaucoup de gens disent que l'apprentissage de la programmation est difficile, mais ce n'est pas difficile. La difficulté est qu'il y a tellement de tutoriels maintenant. Il n'y a pas de tutoriel systématique et il n'y a pas de réponse aux problèmes rencontrés lors de l'apprentissage. Ce type de problème est très facile à résoudre. Je recommande une jupe de réponse frontale pour tout le monde., Vous pouvez y demander si vous rencontrez quelque chose que vous ne savez pas en étudiant, les personnes âgées à l'intérieur sont très bonnes et elles peuvent y répondre gratuitement.
