Pour les pages statiques, nous devons d'abord analyser la mise en page de la page globale, le type de méthode de mise en page à utiliser, analyser la page de haut en bas et écrire des styles. Pour les pages publiques, nous pouvons les écrire dans un composant et appelez-les directement en cas de besoin.
brève description html
| Nom | traits | La largeur et la hauteur peuvent-elles être modifiées | Éléments communs |
|---|---|---|---|
| Élément de bloc | Fête exclusive | pouvez | div ， p ， h1-h6 ， ul ， ol ， li |
| Élément de bloc en ligne | Une ligne peut afficher plusieurs | pouvez | entrée ， img ， zone de texte ， sélectionnez ， option |
| Éléments de la ligne | Une ligne peut afficher plusieurs | Non, cela dépend de la taille du contenu | span ， a ， strong ， em ， del ， ins |
bref css
1. Définir le centrage
1.1
Centrage horizontal 1.1.1 Centrage horizontal des éléments au niveau du bloc, vous devez définir la largeur des éléments au niveau du bloc pour obtenir un centrage horizontal global
width:100px;
margin:0 auto
1.1.2. Les éléments en ligne, le centre horizontal des éléments de bloc en ligne, s'ajoutent à leur élément parent
text-align：center
1.2 Centrage vertical
1.2.1 La hauteur de ligne est la même que la valeur de hauteur pour obtenir un centrage vertical.
height:100px;
line-height:100px
1.2.2. Réglez le bloc en ligne pour obtenir un centrage vertical par alignement vertical: milieu
display:inline-block;
vertical-align:middle
2. Flotter (flotter)
une grande boîte (ul) est remplie de plusieurs petites boîtes (li) en écriture courante
ul {
/*若父元素没有高度，要清除浮动*/
overflow：hidden
}
li {
float: left;
margin-right: 20px;
}
li:last-child {
margin-right: 0;
}
/*或者使用:not选择器*/
li:not(:last-child){
margin-right: 20px;
}
3. Positionnement (position)
Le positionnement fixe est souvent utilisé pour le
style de calque de masque lorsque le cadre de puce apparaît.N'oubliez pas d'écrire à gauche: 0, sinon il y aura un bloc blanc sur la gauche.
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
L'enfant est absolument parent (l'élément enfant se déplacera par rapport à son élément parent le plus proche)
enfant: position:
parent absolu : position: relatif est
utilisé pour afficher certains éléments qui ne sont affichés que sous certains événements
.select{
position: absolute;
top: 40%;
left: 10px;
z-index: 999;
}
content必须要有，一个伪元素三角形
.select::before{
position: absolute;
content: '';
left:50%;
top:18px;
transform: translateX(-50%);
border-bottom: 9px solid #fff;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
}
Utilisation avec animation ( animation )
li {
position: relative;
.rotate {
position: absolute;
}
&:hover .turntable {
animation: spin 2s linear 2;
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}