Maison interface Web tutoriel CSS Exemples d'abréviations pour margin, padding, border, background et font sous CSS_Experience Exchange

Exemples d'abréviations pour margin, padding, border, background et font sous CSS_Experience Exchange

May 16, 2016 pm 12:05 PM
background border css font margin padding 缩写

Vous trouverez ci-dessous des exemples de certains des attributs les plus couramment utilisés.

marge

margin-top:1px;
margin-right:1px
margin-bottom:1px; Simplifié en : margin:1px

margin-top:1px;
margin-right:2px
margin-bottom:1px
margin-left:2px; Pour : margin:1px 2px

margin-top:1px;
margin-right:2px
margin-bottom:3px; Pour : margin:1px 2px 3px

margin-top:1px;
margin-right:2px
margin-bottom:3px; Simplifié en : margin : 1px 2px 3px 4px

Remarque : Lorsque la valeur de l'attribut est 0, l'unité n'a pas besoin d'être écrite, par exemple : 0px directement écrit sous la forme 0

padding

padding La méthode d'écriture est similaire à margin

padding-top:1px;
padding-right:1px
padding-bottom:1px; ;
Simplification du code Pour : padding:1px

padding-top:1px
padding-right:2px
padding-bottom:1px; :padding:1px 2px

padding-top:1px;
padding-right:2px
padding-bottom:3px
padding-left:2px; simplifié en :padding:1px 2px 3px

padding-top:1px;
padding-right:2px
padding-bottom:3px; Simplification du code Pour : padding:1px 2px 3px 4px

border

border-width:1px
border-style:solid
border-color:#000000; > Code simplifié à : border:1px solid #000

background

background-color:#CCFFFF;
background-image:url(picture path) ; :repeat -x;
background-position:5px 4px
Le code est simplifié en : background:#CFF url (chemin de l'image) répéter-x 5px 4px

police

font-size :26px;
font-weight:bold;
font-family: "宋体"
Le code est simplifié en : font:26px bold "宋体"

color valeur d'attribut

Couleur : #000000 ;
Couleur : #ff0000
Le code est simplifié en : couleur : #000, couleur : #f00 ;

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD
Musée à deux points: toutes les expositions et où les trouver
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment afficher les lignes cachées dans XML Comment afficher les lignes cachées dans XML Apr 02, 2025 pm 11:45 PM

Il existe deux façons courantes de masquer les lignes dans XML: utilisez la propriété d'affichage dans CSS pour définir sur None Utilisez XSLT pour sauter les lignes cachées via la copie conditionnelle

Comment afficher le contenu de l'interface avec XML Comment afficher le contenu de l'interface avec XML Apr 02, 2025 pm 11:48 PM

XML est largement utilisé pour créer et gérer les interfaces utilisateur. Il définit et affiche le contenu de l'interface via les étapes suivantes: Définissez les éléments d'interface: XML utilise des balises pour définir les éléments d'interface et leurs propriétés. Construire une hiérarchie: XML organise des éléments d'interface selon des relations hiérarchiques pour former une structure d'arbres. Utilisation de styles: les développeurs utilisent des langages de feuille de style tels que CSS ou XSL pour spécifier l'apparence visuelle et le comportement des éléments. Processus de rendu: un navigateur ou une application utilise un analyseur XML et une feuille de style pour analyser un fichier XML et rendre des éléments d'interface pour le rendre visible à l'écran.

Comment jouer des séquences d'image en douceur avec l'animation CSS? Comment jouer des séquences d'image en douceur avec l'animation CSS? Apr 04, 2025 pm 05:57 PM

Comment réaliser la lecture de photos comme des vidéos? Plusieurs fois, nous devons implémenter des fonctions de lecteur vidéo similaires, mais le contenu de lecture est une séquence d'images. direct...

Comment vous assurez-vous que certaines opérations ne sont effectuées qu'une seule fois lors de l'utilisation du crochet UseEffecte dans l'application de React.tsx? Comment vous assurez-vous que certaines opérations ne sont effectuées qu'une seule fois lors de l'utilisation du crochet UseEffecte dans l'application de React.tsx? Apr 04, 2025 pm 06:33 PM

Dans les projets React, nous rencontrons souvent des problèmes avec l'utilisation des fonctions de cycle de vie, en particulier en ce qui concerne la rafraîchissement de la page, comment garantir que certaines opérations uniquement ...

Comment utiliser Vue 3 pour implémenter la fonction de chargement de défilement similaire aux enregistrements de chat WeChat? Comment utiliser Vue 3 pour implémenter la fonction de chargement de défilement similaire aux enregistrements de chat WeChat? Apr 04, 2025 pm 03:51 PM

Comment atteindre le chargement de défilement vers le haut similaire aux enregistrements de chat WeChat? Lors du développement d'applications similaires aux enregistrements de chat WeChat, une question courante est de savoir comment ...

Comment utiliser CSS pour obtenir l'effet de lecture en douceur des séquences d'images? Comment utiliser CSS pour obtenir l'effet de lecture en douceur des séquences d'images? Apr 04, 2025 pm 04:57 PM

Comment réaliser la fonction de jouer des images comme des vidéos? Plusieurs fois, nous devons réaliser des effets de lecture vidéo similaires dans l'application, mais le contenu de lecture n'est pas ...

Comment implémenter une animation de transition serrée dans React à l'aide du groupe React-Transition? Comment implémenter une animation de transition serrée dans React à l'aide du groupe React-Transition? Apr 04, 2025 pm 11:27 PM

L'utilisation du groupe React-Transition dans React pour réagir à la confusion quant à la suite d'animations de transition. Dans React Projects, de nombreux développeurs choisiront d'utiliser la bibliothèque de groupes React-Transition pour ...

La largeur des espaces EMSP en HTML est incohérente. Comment implémenter de manière fiable l'indentation de texte? La largeur des espaces EMSP en HTML est incohérente. Comment implémenter de manière fiable l'indentation de texte? Apr 04, 2025 pm 11:57 PM

En ce qui concerne le problème de la largeur incohérente des espaces EMSP dans les caractères HTML et chinois dans de nombreux tutoriels Web, il est mentionné que l'occupation de la largeur d'un caractère chinois, mais la situation réelle n'est pas ...

See all articles