Dino Geek essaye de t'aider

Comment utiliser la fonction calc() en CSS?


La fonction CSS calc() permet d’effectuer des calculs lors de la définition des valeurs de propriété CSS. C’est très utile lorsque vous avez besoin d’une valeur qui dépend d’autres valeurs ou qui doit être calculée en fonction d’autres valeurs.

Voici comment vous pouvez utiliser calc() en CSS:

1. Pour définir la largeur:

```
.element { width: calc(100% – 80px);
}
```
Dans cet exemple, la largeur de `.element` sera toujours le 100% de la largeur du conteneur moins 80 pixels.

1. Pour définir la hauteur:

```
.element { height: calc(100vh – 60px);
}
```
Dans cet exemple, la hauteur de `.element` sera toujours la hauteur de la fenêtre de visualisation (100vh) moins 60 pixels.

1. Pour définir la marge supérieure:

```
.element { margin-top: calc(50px + 2em);
}
```
Ici, la marge supérieure de `.element` sera toujours de 50 pixels plus deux fois la taille de la police de l’élément.

Remarque: N’oubliez pas de toujours mettre un espace autour des opérateurs (+, -, \*, /). Donc “calc(50%-30px)” sera incorrect, utilisez plutôt “calc(50% – 30px)”.

L’utilisation de calc() est supportée par tous les navigateurs modernes, donc elle est assez sûre à utiliser dans votre code CSS.


Générez simplement des articles pour optimiser votre SEO
Générez simplement des articles pour optimiser votre SEO





DinoGeek propose des articles simples sur des technologies complexes

Vous souhaitez être cité dans cet article ? Rien de plus simple, contactez-nous à dino@eiki.fr

CSS | NodeJS | DNS | DMARC | MAPI | NNTP | htaccess | PHP | HTTPS | Drupal | WEB3 | LLM | Wordpress | TLD | Nom de Domaine | IMAP | TCP | NFT | MariaDB | FTP | Zigbee | NMAP | SNMP | SEO | E-Mail | LXC | HTTP | MangoDB | SFTP | RAG | SSH | HTML | ChatGPT API | OSPF | JavaScript | Docker | OpenVZ | ChatGPT | VPS | ZIMBRA | SPF | UDP | Joomla | IPV6 | BGP | Django | Reactjs | DKIM | VMWare | RSYNC | Python | TFTP | Webdav | FAAS | Apache | IPV4 | LDAP | POP3 | SMTP

| Whispers of love (API) | Déclaration d'Amour |






Mentions Légales / Conditions Générales d'Utilisation