Maison >interface Web >tutoriel CSS >Structure et mise en page CSS
Structure et mise en page CSS
- 高洛峰original
- 2017-02-18 14:55:271372parcourir
0x00 min-content width adaptative
Nouvelle valeur d'attribut de largeur CSS3 width:min-content peut définir la valeur de largeur du conteneur sur la plus grande ligne incassable du conteneur La largeur (l'élément de mot, d'image ou de boîte le plus large avec une largeur fixe)
figure{
width:min-content;
margin: auto;
}
0x01 Définir les styles en fonction du nombre d'éléments frères
Nous savons que le sélecteur de pseudo-éléments : only -child, en fait, cela peut être équivalent à : first-child:last-child, c'est-à-dire que c'est le premier élément et le dernier élément en même temps, donc logiquement il est unique. Et :last-child est aussi un raccourci pour :nth-last-child(1).
Pensons ensuite à une question : que représente li:first-chidl:nth-last-child(4) Le résultat est _le premier élément d'une liste avec exactement quatre éléments de liste_, ok , combiné avec ? le sélecteur de frères et sœurs ~ pour frapper chaque élément après lui, vous pouvez atteindre un tel objectif : lorsqu'il contient exactement quatre éléments de liste, appuyez sur chaque élément
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
background: red;
}
Combiné avec SASS, simplifiez-le et réutilisez-le
/*定义混合器*/
@mixin n-items($n){
&:first-child:nth-last-child(#{$n}),
&:first-child:nth-last-child(#{$n}) ~ &{
@content;
}
}
/*调用*/
li {
@include n-items(4){
/*属性与值写在这里*/
background: red;
}
}
:nth-child()
Le pouvoir de nth-child() est qu'il accepte les expressions sous la forme d'un b, il peut donc être utilisé naturellement. Sa variante, nth-child( n 4), sélectionnera tous les éléments enfants à l'exception des 1er, 2e et 3e éléments enfants.
ul li:first-child:nth-last-child(n+4),
ul li:first-child:nth-last-child(n+4) ~ li{
/*当列表中至少包含四项时，命中包括该项之后的所有列表项*/
}
Bien sûr, plus que cela, le gameplay de :nth-child() dépend entièrement de votre imagination.
0x02 calc
Parfois, si nous devons implémenter une mise en page avec une largeur d'arrière-plan qui remplit l'écran et une largeur de contenu fixe, nous concevrons peut-être la structure DOM comme celle-ci
<footer> <p class="wrapper"> </p> </footer>
Style CSS :
footer{
background: #333;
}
.wrapper{
max-width: 900px;
margin: 1em auto;
height: 200px;
}
Après avoir utilisé la méthode calc(), il n'est pas nécessaire d'être aussi gênant. Nous n'avons besoin que de trois lignes de code pour y parvenir :
footer{
background:#333;
padding:1em calc(50% - 50px);
}Utiliser clac() Effectuer des opérations arithmétiques simples en CSS rend la structure DOM très concise sans aucune redondance. Bien sûr, les défauts sont également évidents. Le code ici ne verra l'effet que lorsque le parent de l'élément de pied de page dépasse 900. px.
Le pourcentage dans calc() est analysé en fonction de son parentMais, pour la première fois, nous avons découvert le tour de magie de cacl() en CSS3. 0x03 Centrage verticalSolution basée sur le positionnement absoluIl existe un phénomène très courant en CSS, et la vraie solution vient souvent de là où on l'attend le moins. Par exemple, vous pouvez combiner les attributs positon:absolute et transform:translate() pour obtenir un centrage verticalParce que le pourcentage dans la fonction de transformation translate() est converti en fonction de la largeur et de la hauteur de l'élément lui-même, ainsi, vous pouvez éliminer complètement la dépendance aux tailles fixes. Exemple : structure DOM
<body> <p class="main"> <h1>Am i center?</h1> <p>Center me ,please!</p> </p> </body>Code CSS :
.main{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
1. Dans certains navigateurs, cela peut provoquer un affichage flou car l'élément peut être placé sur un demi-pixel.
2. Lorsque le positionnement absolu ne convient pas. Et le positionnement absolu a un impact trop fort sur l’ensemble de la mise en page.
.main{
background: deeppink;
width: 50%;
height: 50%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
body {
min-height: 100vh;
display:flex;
flex-flow: column;
header{
/*heaer style*/
}
.main{
flex:1;
}
footer{
/*footer style*/
}
}Nous donnons au corps une hauteur de min-height:100vh afin qu'il occupe au moins la hauteur de toute la fenêtre d'affichage, puis nous donnons à main une valeur de flexion supérieure à 0.
Question : Que faire si le pied de page est fixé en bas de l'écran ? Comment s'assurer que le pied de page ne couvre pas la zone de contenu lorsque la page défile jusqu'à la fin ?Pour ce problème, c'est purement une idée personnelle. Vous pouvez ajouter un p#_footer après le pied de page. La structure du DOM à l'heure actuelle est la suivante :
<body> <header><header> <p class="main"></p> <footer></footer> <p id="_footer"></p> </body>Quant à p#_footer, il n'est pas nécessaire d'y ajouter du contenu ou du style, tant que sa hauteur est égal à la hauteur du pied de page. Voilà, et pour cela, cela peut être facilement fait en utilisant jQuery.
$('#_footer').height($('footer').height())De cette façon, vous n'avez pas à vous soucier de la mise en page réactive. Même si c'est un peu hacky, c'est une solution parfaite !
.