maksimum lebar (harta CSS)

3

Keterangan

Harta ini menetapkan lebar kandungan maksimum blok atau elemen yang diganti. Lebar maksimum ini tidak termasuk padding, sempadan, atau margin.

Satu elemen yang mana lebar maksimum digunakan tidak akan lebih luas daripada nilai yang ditentukan walaupun harta lebar ditetapkan menjadi lebih luas. Terdapat pengecualian untuk peraturan ini, bagaimanapun: jika lebar min ditentukan dengan nilai yang lebih besar daripada lebar maksimum, lebar kontena akan menjadi nilai terbesar, yang dalam hal ini bermakna nilai min lebar akan menjadi yang digunakan.

lebar max sering digunakan bersamaan dengan min lebar untuk menghasilkan julat lebar untuk elemen yang berkenaan.

menggabungkan lebar dan lebar maksimum

Perhatikan bahawa lebar dan lebar maksimum tidak boleh digunakan untuk elemen yang sama menggunakan unit yang sama, kerana seseorang akan menimpa yang lain. Jika, sebagai contoh, lebar ditetapkan kepada 150px dan lebar maksimum ditetapkan kepada 60px, lebar sebenar elemen akan menjadi 60px, dan pengisytiharan lebar akan menjadi berlebihan.

Peraturan gaya berikut menunjukkan bagaimana konflik diselesaikan di mana elemen telah diberikan kedua-dua lebar dan lebar maksimum menggunakan unit yang sama (piksel dalam kes ini):

Dalam contoh di atas, lebar elemen akan ditetapkan pada 60px.

Walau bagaimanapun, ia boleh diterima untuk menetapkan lebar dan lebar maksimum apabila nilai-nilai adalah unit yang berbeza (walaupun ia mungkin tidak sepenuhnya berguna, terdapat beberapa kes di mana ia boleh digunakan untuk kesan yang baik).

Peraturan gaya ini memberikan lebar maksimum 160px kepada imej dengan kelas "contoh", dan juga memberikan lebar 50%:

.example {
  max-width: 60px;
  width: 150px;
}

lebar akhir imej dalam contoh di atas akan menjadi nilai terkecil.

Jika anda mahu imej skala apabila lebar halaman kecil, supaya imej tidak keluar dari lajurnya, anda boleh menggunakan contoh di atas untuk memastikan saiz imej berkurangan sebaik sahaja ruang yang ada kurang daripada 160 piksel.

Jika ruang yang ada lebih besar daripada 160 piksel, imej akan berkembang sehingga ia adalah 160 piksel lebar -tetapi tidak lagi. Ini memastikan bahawa imej tetap pada saiz yang masuk akal -atau nisbah aspek yang betul -apabila ruang membenarkan.

img.example {
  width: 50%;
  max-width: 160px;
  height: auto;
}

Hartanah Min-lebar boleh digunakan untuk sebaliknya senario ini.

Jika kandungan blok memerlukan ruang yang lebih mendatar daripada dibenarkan oleh had yang telah ditetapkan, tingkah laku ditakrifkan oleh harta limpahan.

Contoh

Peraturan gaya ini memberikan lebar maksimum 400 piksel dan lebar minimum 100 piksel ke perenggan dalam elemen dengan contoh id ":

nilai

harta mengambil panjang CSS (px, pt, em, dan sebagainya), peratusan, atau kata kunci tiada. Nilai panjang negatif adalah haram.

Nilai peratusan merujuk kepada lebar blok yang mengandungi. Sekiranya lebar blok mengandungi negatif, nilai yang digunakan tidak ada.

Soalan Lazim (Soalan Lazim) Mengenai CSS Max-Width Property

Apakah perbezaan antara lebar dan lebar maksimum dalam CSS?

Harta lebar dalam CSS menetapkan lebar tertentu untuk elemen, manakala harta maksimum menetapkan lebar maksimum yang boleh diregangkan oleh elemen. Jika kandungan di dalam elemen lebih besar daripada set maksimum maksimum, ia secara automatik akan menyesuaikan diri dengan nilai maksimum lebar. Walau bagaimanapun, jika kandungannya lebih kecil, elemen akan mengecut agar sesuai dengan kandungan, tidak seperti harta lebar yang mengekalkan lebar yang ditetapkan tanpa mengira saiz kandungan. Ia membolehkan laman web menyesuaikan susun aturnya berdasarkan saiz skrin peranti. Dengan menetapkan lebar maksimum, anda memastikan bahawa pada skrin yang lebih besar, kandungan tidak akan melangkaui titik tertentu, mengekalkan kebolehbacaan dan integriti reka bentuk. Pada skrin yang lebih kecil, kandungan akan menyesuaikan agar sesuai dengan saiz skrin.

Bolehkah saya menggunakan nilai peratusan dengan maksimum lebar? Peratusannya adalah relatif terhadap lebar elemen induk. Sebagai contoh, jika anda menetapkan unsur maksimum maksimum hingga 50%, ia akan mengambil masa sehingga separuh daripada lebar elemen induk. Sebagai contoh, jika lebar ditetapkan kepada 500px dan lebar maksimum ditetapkan kepada 400px, penyemak imbas akan menggunakan nilai 400px. Walau bagaimanapun, jika lebar maksimum lebih kecil daripada lebar min, nilai min lebar akan digunakan. Ini memastikan bahawa elemen tidak menjadi lebih kecil daripada lebar minimum yang ditentukan. Ia tidak terpakai kepada elemen sebaris atau baris jadual dan kumpulan baris.

Bagaimana Max-Width berfungsi dengan imej? Ini amat berguna dalam reka bentuk responsif di mana saiz imej perlu disesuaikan berdasarkan saiz skrin.

Bolehkah max-lebar mengatasi set lebar yang ditetapkan dalam html? Ini kerana CSS mempunyai kekhususan yang lebih tinggi daripada HTML.

unit apa yang boleh digunakan dengan maksimum lebar? Setiap unit mempunyai kes penggunaan sendiri dan boleh digunakan berdasarkan keperluan khusus reka bentuk anda.

Atas ialah kandungan terperinci maksimum lebar (harta CSS). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!