CSS- gebruikerskoppelvlak

CSS-gebruikerskoppelvlak

In hierdie hoofstuk sal jy leer oor die volgende CSS-gebruikerskoppelvlak-eienskappe:

resize
outline-offset

Blaaierondersteuning

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.

Property
resize	4.0	79.0	5.0	4.0	15.0
outline-offset	4.0	15.0	5.0	4.0	9.5

CSS Verander grootte

Die resizeeienskap spesifiseer of (en hoe) 'n element deur die gebruiker verander kan word.

Hierdie div-element kan deur die gebruiker verander word!

Om grootte te verander: Klik en sleep die onderste regterhoek van hierdie div-element.

Die volgende voorbeeld laat die gebruiker die grootte van slegs die breedte van 'n <div>-element verander:

Voorbeeld

div {
resize: horizontal;
overflow: auto;
}

Die volgende voorbeeld laat die gebruiker die grootte van slegs die hoogte van 'n <div>-element verander:

Voorbeeld

div {
resize: vertical;
overflow: auto;
}

Die volgende voorbeeld laat die gebruiker die grootte van beide die hoogte en breedte van 'n <div>-element verander:

Voorbeeld

div {
resize: both;
overflow: auto;
}

In baie blaaiers is <textarea> by verstek veranderbaar. Hier het ons die resize-eienskap gebruik om die resizability te deaktiveer:

Voorbeeld

textarea {
resize: none;
}

CSS uiteensetting offset

Die outline-offseteiendom voeg spasie tussen 'n buitelyn en die rand of rand van 'n element by.

Hierdie div het 'n buitelyn 15px buite die grensrand.

Let wel: Omlyn verskil van grense! Anders as grens, is die buitelyn buite die element se grens geteken, en kan ander inhoud oorvleuel. Die buitelyn is ook NIE deel van die element se afmetings nie; die element se totale breedte en hoogte word nie deur die breedte van die buitelyn beïnvloed nie.

Die volgende voorbeeld gebruik die outline-offseteiendom om spasie tussen die rand en die buitelyn by te voeg:

Voorbeeld

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;
}