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

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

高洛峰

Libérer： 2017-03-07 14:29:30

original

1292 Les gens l'ont consulté

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>

Copier après la connexion

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;   

}

Copier après la connexion

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;   

　　　　　}

Copier après la connexion

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 !