Résumé des styles CSS courants

Cette fois, je vais vous présenter un résumé des styles CSS couramment utilisés. Quelles sont les précautions à prendre pour utiliser les styles CSS couramment utilisés. Voici des cas pratiques, jetons un coup d'œil.

Centrage

Le centrage est une technique très importante en mise en page. Maîtriser la technique du centrage est très important pour la

saisie

1. bordure extérieure : contour : aucun
2. Supprimer le remplissage : rembourrage : 0
3. Supprimer les boutons de rotation type="number" de type haut et bas :

input::-webkit-outer-spin-button {-webkit-appearance: none; }
input::-webkit-inner-spin-button {-webkit-appearance: none; }
input[type="number"]{-moz-appearance:textfield;}
注意：使用 number 时，安卓下可以调出数字键盘，并且只能输入数字，苹果手机不可以。

4. Pour afficher la recherche du clavier logiciel du téléphone mobile, vous devez utiliser la balise from sur les téléphones Apple,

input::-webkit-search-cancel-button {display:none} 去除小差号
-webkit-appearance: textfield; 去除默认样式

background

1.background-image : doit être suivi du chemin de l'image, par exemple, background-image:url(xxx.jpg),url(xxx.png),...
2.background-position : lorsqu'il est utilisé, il doit être cohérent avec l'image du chemin correspondant, tel que , background-position:0 0,100px 100px,...
3.background-repeat : Les règles d'utilisation sont les mêmes que pour background -position
4.background-color : Définissez la couleur d'arrière-plan
Remarque : Lorsque vous utilisez l'arrière-plan, si vous n'utilisez pas plusieurs arrière-plans, vous pouvez utiliser l'écriture composite. Sinon, écrivez-les séparément pour éviter un affichage incorrect en arrière-plan. Il convient de souligner que si l'image d'arrière-plan est utilisée, elle ne peut être suivie que d'une URL.
Vous devez définir la position à l'aide de background-position et savoir si vous devez réutiliser background-repeat, sinon une erreur se produira.

box-shadow

box-shadow : h-shadow v-shadow flou de propagation de l'encart de couleur ;
1.h-shadow : obligatoire. La position de l'ombre horizontale. Les valeurs négatives sont autorisées. [Position par rapport à la limite la plus proche]
2.v-shadow : Obligatoire. La position de l'ombre verticale. Les valeurs négatives sont autorisées. [Position par rapport à la limite la plus proche]
3.blur : facultatif. Longueur floue [la longueur réelle est la moitié de la longueur donnée]
4.spread : facultatif. La taille de l'ombre. [Peut être négatif]
5.color : facultatif. La couleur de l'ombre. Voir les valeurs de couleur CSS.
6.inset : Facultatif. Changez l'ombre extérieure (début) en ombre intérieure.

Explication :
1. Lorsque h-shadow et v-shadow sont tous deux égaux à 0, cela signifie aucun décalage, ce qui signifie une diffusion dans toutes les directions.
2.blur : représente la longueur du flou. la distance de flou réelle est la valeur définie. Demi
3. Définissez le côté spécifié, qui contrôle principalement la position de l'ombre horizontale et verticale, par exemple en spécifiant les quatre côtés respectivement :
.box{ box-shadow : 0 -2px 0 0 red, 2px 0 0 0 red, 0 2px 0 0 red, -2px 0 0 0 red;}
Vous pouvez utiliser cet attribut pour remplacer la bordure. attribut de la bordure. L'avantage est que l'ombre ne prend pas de place et l'animation ne bougera pas
Par exemple :
box{background:green;width:200px;height:200px;}
/ / Le traitement de la position est effectué, sinon cela affectera la mise en page
.box1:hover{border:2px solid # ffffff;box-sizing:border-box;position:relative;top:-2px;left:-2px;
.box2:hover{box-shadow:0 0 0 2px #ffffff;}

font

1.font-size-adjust : Définissez la police pour être plus lisible dans les petites polices.
Par exemple, si vous définissez la police sur 100 px, la valeur de réglage est de 0,58, ce qui est petit. La taille est de 58 px, ce qui facilite la lecture. Détails

2.-webkit-text-size-adjust La valeur par défaut pour les téléphones mobiles est automatique, ce qui ajuste automatiquement la taille de la police. Généralement, vous devez désactiver cette fonction et définir la valeur sur aucun ou 100 %. , sinon cela pourrait entraîner des problèmes de style.

user-modify

user-modify a trois valeurs d'attribut : write-only (écriture seule), lecture-écriture (lecture-écriture), lecture seule (lecture seule), qui est utilisé pour l'attribut ordinaire. La possibilité de modification d'un élément fonctionne de la même manière que l'attribut concentraitable. Vous devez ajouter un préfixe de navigateur lors de son utilisation. Le test a révélé que Firefox ne prend pas en charge la

visibilité. La différence entre

et l'opacité est que lorsqu'il est utilisé, l'attribut est défini sur caché, ce qui occupe de l'espace mais n'affecte pas le déclenchement des événements. . Par exemple, si un élément utilisant l'attribut masqué recouvre complètement un autre élément, les événements de l'élément couvert se déclencheront toujours normalement. Et ses propres événements ne seront pas déclenchés. Affichez les éléments en définissant l'attribut visible

flex

Pour comprendre la disposition flex, comprenez d'abord 2 points

Premièrement : l'attribut de la boîte parent. Comprendre 2 axes dans la boîte parent.

Direction horizontale

flex-direction : 属性决定主轴的方向（即项目的排列方向）
    row : 横向，按元素顺序，居左[主轴为水平方向，起点在左端]
    row-reverse ：横向，倒序，居右[主轴为水平方向，起点在右端]
    column ：纵向，按元素顺序，[主轴为垂直方向，起点在上沿]
    column-reverse : 纵向，倒序[主轴为垂直方向，起点在下沿]
flex-wrap : 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
    nowrap : （默认）不换行，盒子会自适应
    wrap : 换行，第一行在上方
    wrap-reverse : 换行，第一行在下方
flex-flow ：<flex-direction> || <flex-wrap> 合并写法
justify-content : 属性定义了项目在主轴上的对齐方式，控制水平方向
flex-start : 左对齐
flex-end : 右对齐
center : 水平居中
space-between : 子元素间隔相等并自适应
space-around : 子元素两端间隔自适应

Direction verticale

align-items : 属性定义项目在交叉轴上如何对齐，控制垂直方向
    flex-start : 上对齐
    flex-end : 下对齐
    center : 垂直居中
    baseline : 文字低端对齐
    stretch : 如果项目未设置高度或设为auto，将占满整个容器的高度( 默认值 )
align-content ：属性定义了多根轴线的对齐方式。
 如果项目只有一根轴线，该属性不起作用。( 多个轴 )，控制垂直方向
    flex-start : 多轴上对齐
    flex-end : 多轴上下对齐
    center : 多轴居中
    space-between ： 两端对齐，均分剩余空间

Deuxième : Attributs de sous-boîte

order : 指定元素权重，默认为 0，权重越大，对应的元素越靠后。在使用时注意 flex-direction 的属性值
flex-grow ：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
        分配空间的权重，按权重比均分剩余空间(注意是宽度，不包含 padding 和 margin )
flex-shrink : 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
        值为 0 ：不缩小
flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex : 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self : 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。[注意换行]
    auto ：默认值
    flex-start ：上对齐
    flex-end ：下对齐
    center : 垂直居中
    baseline : 文本基线对齐(设置所有的item)

Autres

 1. 去除苹果点击事件的灰色阴影:-webkit-tap-highlight-color: rgba(0,0,0,0);有些元素需要设置背景色。
 2. 溢出出现省略号 : white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
 3. 指定宽度数字不换行，需要指定换行属性：overflow:hidden; word-wrap:break-word;
 4. 文字平滑：-webkit-font-smoothing：none: 无抗锯齿；subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows；antialiased: 灰度平滑 常用于Android和iOS等移动设备的

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour mettre en évidence les li sélectionnés dans la mise en œuvre de React

Un résumé pratique de l'utilisation de la bibliothèque de dessins EasyCanvas dans le développement du projet Pixeler

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!