Je suis un lycéen et j'expérimente le CSS et le HTML, et j'ai remarqué que width: calc (inherit) fait quelque chose de différent de width: inherit.
L'extrait suivant est ce que width: inherit;
<div class='container'> <div class='header'> <div> test </div> <div> test.......................................................... </div> </div> </div>
.header { background-color: #77a4ed; min-width: 200px; width: fit-content; border-top-left-radius: 50px; border-top-right-radius: 50px; height: 30px; text-align: center; height: 20px; } .header > div { background-color: whitesmoke; border-right: solid 2px black; border-left: solid 2px black; border-top: solid 2px black; min-width: 200px; width: calc(inherit); text-align: center; margin: auto; padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px; } .header > div:last-of-type { background-color: whitesmoke; border-right: solid 2px black; border-left: solid 2px black; min-width: 200px; width: fit-content; margin: auto; padding-left: 10px; border-bottom: solid 2px black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
Cet extrait est ce que width: calc (inherit);
<div class='container'> <div class='header'> <div> test </div> <div> test.......................................................... </div> </div> </div>
.header { background-color: #77a4ed; min-width: 200px; width: fit-content; border-top-left-radius: 50px; border-top-right-radius: 50px; height: 30px; text-align: center; height: 20px; } .header > div { background-color: whitesmoke; border-right: solid 2px black; border-left: solid 2px black; border-top: solid 2px black; min-width: 200px; width: inherit; text-align: center; margin: auto; padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px; } .header > div:last-of-type { background-color: whitesmoke; border-right: solid 2px black; border-left: solid 2px black; min-width: 200px; width: fit-content; margin: auto; padding-left: 10px; border-bottom: solid 2px black; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
Je ne comprends pas pourquoi ils donneraient des résultats différents. Quelqu'un pourrait-il expliquer?
3 Réponses :
si vous vérifiez le console.log, vous verrez que calc ne fonctionne pas avec inherit.
<div id='a1'>xxx</div> <div id='a2'>xxx</div>
#a1{ width:inherit; } #a2{ width: calc (inherit); }
calc () est supposé calculer en utilisant une expression mathématique comme -, +, * ou / exemple
.header{ width: cal(100% - 100px); } .header{ width: inherit; }
vous n'avez aucune expression donc ce n'est probablement pas valide, mais peut-être que si vous faites en sorte que la largeur .header ait une expression, utilisez l'héritage qui peut fonctionner
width: calc(100% - 100px);
cela pourrait fonctionner mais je ne suis pas sûr non plus je ne sais pas si 100% - 100px est la largeur exacte que vous recherchez
Utilisez simplement width: 100%
et cela occupera toute la largeur de l'élément parent.
calc (inherit)
est tout simplement invalidecalc () est une valeur, pas une règle qui pourrait hériter d'une valeur ... mais var () peut être utilisée à l'intérieur.