Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan lebar elemen dalam css
Kaedah tetapan: 1. Gunakan atribut width untuk menetapkan lebar, sintaks "width: width value;"; 2. Gunakan atribut min-width untuk menetapkan lebar minimum, sintaks "min-width : width value;"; 3. Gunakan atribut max-width untuk menetapkan lebar maksimum, sintaks "max-width: width value;".
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
lebar elemen set css
1. Gunakan atribut lebar
atribut lebar untuk ditetapkan lebar elemen. Atribut ini mentakrifkan lebar kawasan kandungan elemen dan pelapik, sempadan dan jidar boleh ditambah di luar kawasan kandungan.
<html> <head> <style type="text/css"> img { width: 300px } </style> </head> <body> <img src="eg_smile.gif" / alt="Bagaimana untuk menetapkan lebar elemen dalam css" > </body> </html>
Perenderan:
2 Gunakan atribut lebar min
min Atribut -width menetapkan lebar minimum elemen. Nilai atribut ini menetapkan had minimum pada lebar elemen. Oleh itu, elemen boleh lebih luas daripada nilai yang ditentukan, tetapi tidak lebih sempit. Nilai negatif tidak dibenarkan.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .min{ min-width: 300px; } </style> </head> <body> <textarea>文本框默认宽度</textarea><br> <textarea class="min">文本框最小宽度300px</textarea> </body> </html>
Perenderan:
3 Gunakan atribut lebar maksimum
atribut ketinggian maksimum. Tetapkan ketinggian maksimum elemen. Nilai atribut ini menetapkan had maksimum pada ketinggian elemen. Oleh itu, elemen boleh menjadi lebih pendek daripada nilai yang ditentukan, tetapi tidak lebih tinggi. Nilai negatif tidak dibenarkan.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <textarea>文本框默认宽度</textarea><br> <textarea style="max-width: 400px;">文本框最大宽度400px</textarea> </body> </html>
Rendering:
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar elemen dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!