Interface utilisateur CSS3

Le module d'interface utilisateur CSS3 fournit plus d'effets et d'options pour les performances de l'interface utilisateur de la page.

Ajout de nouvelles fonctionnalités de l'interface utilisateur pour ajuster la taille des éléments, la taille de la boîte et la bordure extérieure.

attribut resize

Définition de l'attribut et instructions d'utilisation

l'attribut resize en spécifie un Indique si l'élément est redimensionné par l'utilisateur.

Remarque : L'attribut resize convient pour calculer si la valeur de débordement des autres éléments est "visible".

Valeur par défaut : aucune

Hérité : non

Version : CSS3

Syntaxe JavaScript : object.style.resize="both"

Support du navigateur : Firefox 4 + , Chrome et Safari prennent en charge l'attribut resize.

Syntaxe

redimensionner : aucun|les deux|horizontal|vertical :

aucun : Ne permet pas à l'utilisateur de redimensionner l'élément. Ne permettez pas à l'utilisateur de redimensionner l'élément.

les deux : L'utilisateur peut ajuster la largeur et la hauteur de l'élément.

horizontal : L'utilisateur peut ajuster la largeur de l'élément.

vertical : L'utilisateur peut ajuster la hauteur de l'élément.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
<style>
  .box {   
        width: 600px;   
        height: 300px;   
        border: 1px solid #000;   
        resize: both;   
        overflow: auto;   
     }  
</style>
</head> 
<body>
    <p>请注意观察方框右下角</p>
    <div class="box"></div>
</body>  
</html>

attribut box-sizing
box-sizing a deux valeurs : content-box et border-box.

box-sizing: content-box;
Lorsque box-sizing:content-box; est défini, l'interprétation du modèle de boîte par le navigateur suit la norme W3C. Lorsqu'il définit la largeur et la hauteur, sa largeur. n'inclut pas la bordure et le remplissage.

box-sizing: border-box;
Lorsque box-sizing: border-box; est défini, le navigateur interprète le modèle de boîte de la même manière que les versions antérieures à IE6 lorsqu'il définit width et height , border et le rembourrage sont inclus dans la largeur et la hauteur. La largeur et la hauteur du contenu peuvent être obtenues en définissant la largeur et la hauteur moins la largeur du remplissage et de la bordure dans la direction correspondante. Il faut garantir que la largeur et la hauteur du contenu ne sont pas négatives. Si nécessaire, la taille de la bordure de l'élément sera automatiquement augmentée pour que la largeur ou la hauteur du contenu soit au moins égale à 0.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
      <style type="text/css">
    .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red;                
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }
   </style>
  </head> 
  <body>
    <div class="content-box"></div>
      <div class="padding-box"></div>
    <div class="border-box"></div>
  </body>  
</html>

attribut de décalage de contour

La propriété outline-offset décale le contour et le dessine au-delà du bord de la bordure.

Il existe deux différences entre les contours et les bordures :

1. Le contour ne prend pas de place

2. Le contour peut être non rectangulaire

<🎜. >

Syntaxe :

outline-offset：<length>

<length> : Définit la valeur du conteneur de distance de contour.

hériter : héritage par défaut.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style type="text/css">
    div {
        height: 100px;
        width: 100px;
        margin: 50px auto;
        outline: 10px solid rgba(255,255,0,9);
        background: black;
        outline-offset: 10px;
        border:5px solid blue;
    }
   </style>
  </head> 
  <body>
      <div></div>
  </body>  
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; } .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #186645; background: red; } .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #3DA3EF; background: yellow; } </style> </head> <body> <div class="content-box"></div> <div class="padding-box"></div> <div class="border-box"></div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Interface utilisateur CSS3

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]