Résumé des façons intelligentes de styliser les CSS-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Résumé des façons intelligentes de styliser les CSS

高洛峰

Mar 07, 2017 pm 02:29 PM

css样式

Concernant la mise en œuvre de certains styles spéciaux que j'ai rencontrés auparavant, je ferai un résumé aujourd'hui dans deux buts : Premièrement, enregistrer ces méthodes afin qu'elles puissent être trouvées et utilisées en cas de besoin à l'avenir. La seconde est de poursuivre la cristallisation de la sagesse de ces grands dieux, afin que la majorité des programmeurs front-end puissent éviter les détours. Cet article est une mise à jour. S'il y a de bonnes compétences en style CSS à l'avenir, je le mettrai à jour de temps en temps.

1. Centrez les éléments horizontalement et verticalement (Merci spécial à : Xin Life. Les produits fabriqués par Brother Xin doivent être de haute qualité ! Je vous admire)

Pour le centrage horizontal et vertical d'un élément de bloc, il n'est pas nécessaire d'en dire beaucoup sur la méthode de centrage horizontal. Généralement, margin:auto et d'autres méthodes peuvent être utilisées pour y parvenir. Quant au centrage vertical, bien qu'il existe un attribut vertical-align:middle, il ne s'applique qu'aux balises de tableau, et tout le monde sait que l'effet des balises de tableau est difficile à contrôler. . . Par conséquent, notre méthode couramment utilisée consiste à définir l'attribut inline-block de l'élément enfant et à définir son attribut line height : line-height à la même hauteur que l'élément parent. Ici, je souhaite promouvoir une méthode dérivée de "Xin Life"

http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-absolute positionnement-horizontal and vertical centering /

Le code est le suivant :

html :

<body>
　　　　<p class="big">
　　　　　　<p class="small"></p>
　　　　　</p>
　　</body>

css Aspects :

.big{   
　　　　width:500px;   
　　　　height:500px;   
　　　　border:1px solid red;   
　　　　position:relative;   
　　　　}   
　　.small{   
　　　　width:200px; /*自己元素宽高可任意设定 */
　　　　height:200px;   
　　　　position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;   
　　　　margin:auto;   

}

Dans le code ci-dessus, la largeur et la hauteur des éléments enfants sont définies arbitrairement. Cet élément peut être affiché horizontalement et verticalement centré dans l'élément parent. Dans l'élément parent, nous utilisons l'attribut relatif de position. Dans l'élément enfant, après avoir défini son attribut de position sur absolu, nous définissons les valeurs dans les quatre directions sur 0px. Et rendre sa valeur de marge adaptative. En inspectant les éléments, nous pouvons constater qu'après ce paramètre, la zone de marge de l'élément enfant remplira tout l'élément parent et que les valeurs de marge gauche et droite sont égales, tout comme les valeurs de marge supérieure et inférieure. Cependant, cela n'est pas conforme à la règle selon laquelle lorsque les valeurs du code sont en conflit, la valeur supérieure et la valeur gauche sont analysées en premier. Parce que Xiaoge ne sait pas quel est le principe. . Si quelqu'un le sait, j'espère qu'il pourra m'éclairer. Mais c’est une bonne méthode et j’espère que tout le monde pourra l’apprendre et l’utiliser.

2. Effacer le flotteur après la pseudo-classe

Habituellement, après avoir défini le flotteur sur l'élément bloc, nous devons effacer le flotteur pour éviter confusion de mise en page. Il existe deux méthodes courantes pour effacer les flottants : 1) Écrivez "clear:both;" dans le sous-élément CSS suivant. 2) Écrivez "overflow:hidden" dans l'élément parent de l'élément flottant. Maintenant, nous pouvons utiliser la troisième méthode, en utilisant la pseudo-classe after pour écrire un attribut flottant, de sorte que chaque fois qu'il y a un endroit où le flottement est nécessaire, nous pouvons simplement ajouter un tel attribut flottant à son élément parent.

Le code est le suivant :

.clearfix:after{   

　　　　　content:"";   

　　　　　display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/

　　　　　clear:both;   

　　　　　}

Cette méthode a l'avantage de pouvoir être écrite dans reset et d'être appelée plusieurs fois plus tard.

L'article ci-dessus résume (recommandé) quelques méthodes intelligentes de style CSS, qui sont tout le contenu partagé par l'éditeur, j'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez le site Web PHP chinois.

Pour des méthodes plus ingénieuses de style CSS pour résumer les articles connexes, veuillez faire attention au site Web PHP chinois !

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

Où devrait «abonner au podcast» vers le lien?Apr 16, 2025 pm 12:04 PM

Pendant un certain temps, iTunes était le grand chien du podcasting, donc si vous avez lié "Abonnez-vous au podcast" pour aimer:

Diversité du moteur du navigateurApr 16, 2025 pm 12:02 PM

Nous avons perdu l'opéra lorsqu'ils sont devenus Chrome en 2013. Même accord avec Edge quand il est également devenu Chrome plus tôt cette année. Mike Taylor a qualifié ces changements de "de moins

Considérations UX pour le partage WebApr 16, 2025 am 11:59 AM

Des sites trash des appâts clics au plus d'août des publications, les boutons de partage sont depuis longtemps omniprésents sur le Web. Et pourtant on peut soutenir que ces

Actualités hebdomadaires de la plate-forme: Apple déploie des composants Web, rendu HTML progressif, ressources critiques d'auto-hébergementApr 16, 2025 am 11:55 AM

Au cours de cette semaine, Apple entre dans les composants Web, comment Instagram est des scripts à chargement Insta et de la réflexion pour l'auto-hébergement des ressources critiques.

Git PathSpecs et comment les utiliserApr 16, 2025 am 11:53 AM

Quand je regardais la documentation des commandes GIT, j'ai remarqué que beaucoup d'entre eux avaient une option. J'ai d'abord pensé que c'était juste un

Un sélecteur de couleurs pour les images de produitsApr 16, 2025 am 11:49 AM

Cela ressemble un peu à un problème difficile ne va pas? Nous n'avons souvent pas de photos de produits dans des milliers de couleurs, de sorte que nous pouvons nous déplacer avec. NOUS non plus

Un mode noir bascule avec React et ThemeproviderApr 16, 2025 am 11:46 AM

J'aime quand les sites Web ont une option de mode sombre. Le mode Dark facilite la lecture des pages Web et aide mes yeux plus détendus. De nombreux sites Web, y compris

Certains pratiques avec l'élément de dialogue HTMLApr 16, 2025 am 11:33 AM

C'est moi qui regarde l'élément HTML pour la première fois. J'en ai été conscient depuis un certain temps, mais il ne l'a pas encore pris pour un tour. Il a un peu cool et

See all articles