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>