In diesem Kapitel erfahren Sie mehr über die folgenden CSS-Benutzeroberflächeneigenschaften:
resize
outline-offset
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Die Eigenschaft resize
gibt an, ob (und wie) die Größe eines Elements vom Benutzer geändert werden soll.
This div element is resizable by the user!
To resize: Click and drag the bottom right corner of this div element.
Im folgenden Beispiel kann der Benutzer nur die Breite eines <div>-Elements ändern:
div
{
resize: horizontal;
overflow: auto;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
Im folgenden Beispiel kann der Benutzer nur die Höhe eines <div>-Elements ändern:
div
{
resize: vertical;
overflow: auto;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the height of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
Im folgenden Beispiel kann der Benutzer die Größe sowohl der Höhe als auch der Breite eines <div>-Elements ändern:
div
{
resize: both;
overflow: auto;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
In vielen Browsern kann die Größe von <textarea> standardmäßig geändert werden. Hier haben wir die Eigenschaft resize verwendet, um die Größenänderung zu deaktivieren:
textarea {
resize: none;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
textarea#test {
resize: none;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>
<textarea id="test">Textarea - Not resizable</textarea>
<br><br>
<textarea>Textarea - Resizable (default)</textarea>
</body>
</html>
Die Eigenschaft outline-offset
fügt Abstand zwischen einem Umriss und der Kante oder dem Rand eines Elements hinzu.
Hinweis: Umrisse weichen von den Rändern ab! Im Gegensatz zum Rand ist der Umriss außerhalb des Elementrandes gezeichnet und kann andere Inhalte überlappen. Auch die Gliederung ist KEIN Teil der Abmessungen des Elements; die Gesamtbreite und -höhe des Elements wird durch die Breite des Umrisses nicht beeinflusst.
Im folgenden Beispiel wird die Eigenschaft outline-offset
verwendet, um Platz hinzuzufügen zwischen Rand und Umriss:
div.ex1 {
margin: 20px;
border:
1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
</style>
</head>
<body>
<h1>The outline-offset Property</h1>
<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>
<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>
</body>
</html>
In der folgenden Tabelle sind alle Eigenschaften der Benutzeroberfläche aufgeführt:
Fügt Abstand zwischen einem Umriss und der Kante oder dem Rand eines Elements hinzu
Gibt an, ob die Größe eines Elements vom Benutzer geändert werden kann