Resize īpašums CSS3

Starp daudziem jauninājumiem tika ieviesta CSS3, jauns - un vēl galīgā redakcija - atbrīvošanu Cascading Style Sheets, īpašums ir īpaši interesanti ir tas, mainīt izmērus. Pateicoties šo īpašumu, tas ir viegli redzēt, varat izveidot, tik vienkārši, resizable elementu mūsu mājas lapas, izmantojot vienu rindiņu CSS kodu (līdz Advent CSS3 radīt elementus, kas nepieciešami, izmantojot mērogojamu komplekss JavaScript funkcijas).

Pašlaik šo īpašumu, kā arī daudzas citas CSS3 nav vispārēji atbalsta visas pārlūkprogrammas, bet tikai tās ģimenes WebKit (Safari un Chrome) un Firefox 4.

Jāpiebilst, ka daži no šiem pārlūkiem lappuses elementi, piemēram, tagu <textarea> ir resizable pēc noklusējuma augstums un platums.

Managing resize

Resize īpašumu var būt dažādas vērtības:

• none = elements nav resizable;
• Horizontālā = elements var tikt mainīti tikai horizontāli;
• = Vertikālais elements var tikt mainīti tikai vertikāli;
• gan = elements var tikt mainīti gan vertikāli, gan horizontāli;

Lūk, daži, piemēram:

 / *







 Novērš izmēru maiņa textarea







 * /







 textarea {mainīt izmērus: none;}









 / *







 Es varu izveidot resizable elements vertikāli







 * /







 div.vert {mainīt izmērus: vertikālās;}

Pārvaldiet izmēra ar saistoši

Īpašuma resize lietošana ļoti bieži ir pievienota - pastāv dizains - ar ierobežojumiem, kas nosaka minimālo un / vai maksimālo var uzskatīt, ka elements resizable. Lai to paveiktu, mēs izmantojām šādu CSS īpašības:

• max platums un max augstums
• min platuma un min augstums

Paskatīsimies piemēru maināma izmēra div horizontāli ar fiksētu maksimālo platumu:

 {Div.horiz



  



 augstums: 200px;



  



 platums: 300px;



  



 max platums: 600px;



  



 background: # EEEEEE;



  



 border: 3px solid # dddddd;



  



 pārplūdes: auto;



  



 mainīt izmērus: horizontāli;







 }

Uz šīs lapas var redzēt darba demo (protams, lai redzētu īpašumu mainīt darbu, jums ir jāizmanto pārlūkprogramma, kas atbalsta to).