css3 implémente une mise en page adaptative qui peut être calculée

css3 implémente une mise en page adaptative qui peut être calculée – calc()

青灯夜游

Libérer： 2018-10-15 17:53:52

avant

2752 Les gens l'ont consulté

Cet article vous présentera la mise en page adaptative de CSS3 qui peut être calculée : calc(). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Pour commencer, nous devons comprendre ce qu'est calc(). calc() est une fonction CSS Vous pouvez utiliser calc() pour définir la marge, le remplissage, la largeur et d'autres attributs de l'élément

Et vous Vous pouvez également utiliser une syntaxe calc()内部嵌套另一个calc()

clac() pour l'exprimer à l'aide d'une expression mathématique :

l'expression est une expression mathématique utilisée pour calculer la longueur . Expression dont le résultat sera utilisé comme valeur finale.

clac() utilise les quatre opérations arithmétiques "+", "-", "*" et "/", et peut utiliser des unités telles que le pourcentage, px, em, rem, etc., et peut mélanger une variété d'unités de calcul

Il convient de noter que

Si "0" est utilisé comme diviseur, l'analyseur HTML lèvera une exception

Quand "+. " et "-" sont utilisés, il doit y avoir des espaces avant et après comme calc (100%-15px) C'est faux

Il n'est pas nécessaire de laisser des espaces avant et après "*" et "/" , mais il est recommandé d'ajouter des espaces

Donnez deux exemples

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6 <style>
 7 .box{
 8     width: 500px;
 9     height: 300px;
10 }
11 .left{
12     width: 250px;
13     background:#ccc;
14     float: left;
15 }
16 .right{
17     width: calc(100% - 250px);
18     float: right;
19     background: #333;
20 }
21 .left,.right{
22     height: 100%;
23 }
24 </style>
25 </head>
26 <body>
27 
28 <p class="box">
29     <p class="left"></p>
30     <p class="right"></p>
31 </p>
32 
33 </body>
34 </html>

Copier après la connexion

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6 <style>
 7 .demo{
 8     width: 500px;
 9 }
10 .box{
11     width: 100%;
12     height: 30px;
13     background: #ccc;
14 }
15 input{
16   width: 100%;
17   border:1px solid #333;
18   width: calc(100% - (0px + 1px) * 2);
19 }
20 </style>
21 </head>
22 <body>
23 <p class="demo">
24     <p class="box">
25         <input type="text">
26     </p>
27 </p>
28 </body>
29 </html>

Copier après la connexion

Si vous n'utilisez pas calc()

Le problème de compatibilité n'est pas grave non plus

Ce qui précède représente l'intégralité du contenu de cet article. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo de base CSS , Tutoriel vidéo CSS3 , bootstrap. tuto vidéo !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!