Parameter lebar dan ketinggian css untuk menetapkan dimensi elemen html halaman. Tinggi, lebar dan limpahan - Peraturan CSS untuk menerangkan kawasan kandungan dalam susun atur blok Maklumat teori ringkas

Hello pembaca yang dikasihi! Hari ini kita akan melihat bagaimana untuk menetapkan saiz elemen blok halaman web menggunakan sifat css dan menyediakan paparan kandungan jika ia tidak sesuai dengan elemen.

lebar dan tinggi - lebar dan tinggi elemen dalam css

Menggunakan lebar dan ketinggian atribut gaya, anda boleh menetapkan lebar dan ketinggian elemen blok, masing-masing:

lebar: auto |<ширина>| mewarisi
ketinggian: auto |<ширина>| mewarisi

Sebagai nilai, anda boleh menggunakan sebarang unit ukuran yang tersedia dalam css - contohnya, piksel (px), inci (dalam), titik (pt), dsb.

p (lebar: 200px; tinggi: 150px)

Selain unit mutlak, anda boleh menentukan nilai relatif saiz elemen dalam peratus. Dalam kes ini, lebar dan ketinggian elemen akan bergantung pada lebar dan ketinggian elemen induk. Jika induk tidak dinyatakan secara eksplisit, maka dimensi akan bergantung pada tetingkap penyemak imbas.

div (lebar: 40%;)

Auto memberikan kawalan saiz elemen kepada penyemak imbas web dan merupakan lalai. Dalam kes ini, saiz elemen adalah sedemikian rupa sehingga semua kandungannya akan muat di dalamnya.

Mari lihat beberapa contoh.

Keputusan:

Dalam contoh ini, kami telah mencipta blok div dan perenggan p bersarang dengan teks di dalamnya. Untuk div, kami telah menetapkan dengan ketat dimensi kepada 300 kali 300 piksel. Elemen p mempunyai kedua-dua nilai lebar dan ketinggian auto, jadi seperti yang anda boleh lihat dalam tangkapan skrin, lebarnya ditetapkan kepada lebar elemen induk, dan ketinggiannya ditetapkan agar muat semua teks dalam perenggan.

Sekarang mari kita tukar tetapan css untuk perenggan p dan tetapkan dimensi tetap:

Lapisan2 (
latar belakang: #eee;
lebar: 250px;
}

Keputusan:

Seperti yang anda boleh lihat, lebar perenggan telah menjadi lebih sempit dan sama dengan 250 piksel, dan ketinggiannya telah meningkat supaya teks akan muat, kerana parameter ketinggian kekal sama dengan auto.

Sekarang mari kita tetapkan ketinggian dan lebar perenggan sebagai peratusan:

Lapisan2 (
latar belakang: #eee;
lebar: 50%;
ketinggian: 50%;
}

Keputusan:

Seperti yang anda boleh lihat dalam gambar, lebar elemen p kini separuh lebar elemen div. Dan ketinggian telah meningkat kepada 75 peratus daripada ketinggian div.

Apabila menentukan lebar dan ketinggian mana-mana elemen dalam unit relatif, anda mungkin perlu menentukan saiz minimum dan maksimum yang mungkin. Sesungguhnya, sebagai contoh, apabila tetingkap penyemak imbas diubah saiznya, saiz elemen boleh berkurangan dan meningkat kepada saiz sedemikian sehingga kebolehbacaan tapak menjadi sangat rendah.

Anda boleh menentukan lebar dan ketinggian minimum menggunakan atribut min-width dan min-height:

lebar min:<ширина>
ketinggian min:<высота>

Atribut gaya yang serupa max-width dan max-height membolehkan anda menetapkan saiz maksimum:

lebar maksimum:<ширина>
ketinggian maksimum:<высота>

Adalah jelas bahawa apabila menentukan nilai maksimum dan minimum ketinggian dan lebar, dimensi elemen tidak boleh menjadi lebih besar daripada nilai maksimum dan kurang daripada nilai minimum.

Ia adalah bernilai menjelaskan bahawa tugas parameter ketinggian dan lebar hanya masuk akal untuk tag blok, kerana untuk elemen sebaris parameter ini tidak diproses oleh penyemak imbas.

Ia boleh berlaku apabila anda menetapkan parameter tegar untuk ketinggian dan lebar elemen, kandungan yang terkandung di dalamnya mungkin tidak sesuai dengan kawasan sempadan.

Sebagai contoh, mari kita kurangkan saiz perenggan p daripada contoh di atas kepada 100 piksel:

Lapisan2 (
latar belakang: #eee;
lebar: 100px;
ketinggian: 100px;
}

Keputusan:

Seperti yang anda boleh lihat, teks telah melampaui sempadan perenggan dan ia tidak kelihatan sangat bagus. Untuk mengelakkan situasi sedemikian, terdapat peraturan css - limpahan.

Pilihan limpahan untuk menyembunyikan (tersembunyi, kelihatan) atau tatal (tatal, auto) kandungan

Limpahan kandungan boleh berlaku apabila kedua-dua lebar dan ketinggian sesuatu elemen dikekang. Pertimbangkan dua perenggan:

Teks perenggan pertama

Teks perenggan kedua

Keputusan:

Oleh kerana lebar atau tinggi tidak dinyatakan untuk perenggan, penyemak imbas mengiranya sendiri berdasarkan pemahamannya sendiri tentang nilai auto. Akibatnya, perenggan mengambil semua ruang yang tersedia dalam lebar, dan tinggi mengikut kandungan yang terkandung di dalamnya.

Sekarang mari kita hadkan lebar perenggan pertama:

Teks perenggan pertama

Teks perenggan kedua

Keputusan:

Seperti yang dijangkakan, lebar perenggan telah berkurangan dan ketinggian telah ditetapkan untuk menampung semua teks.

Nah, sekarang mari kita hadkan ketinggian perenggan pertama:

Teks perenggan pertama

Teks perenggan kedua

Akibatnya, ternyata teks itu tidak sesuai dengan perenggan yang terhad, dan oleh itu ia berlari ke kawasan jiran yang lebih rendah. Oleh itu, adalah mustahil untuk membaca teks sama ada dalam perenggan pertama atau kedua. Ia adalah untuk mengawal tingkah laku kandungan dalam situasi sedemikian yang ada peraturan limpahan:

limpahan: kelihatan | tersembunyi | tatal | auto | warisan

Secara lalai, limpahan kelihatan, yang memberitahu penyemak imbas untuk memaparkan kandungan yang tidak muat dalam bekas. Hasilnya boleh dilihat dalam contoh di atas.

Peraturan menyembunyikan semua yang tidak muat dalam bekas:

Nilai tatal akan memaparkan bar skrol secara menegak dan mendatar pada elemen, walaupun keseluruhan kandungan sesuai:

Teks perenggan pertama

Teks perenggan kedua

Penyelesaian yang paling popular dan logik, jika anda perlu membuat bar skrol untuk bekas, ialah nilainya auto... Dalam kes ini, penyemak imbas sendiri akan menentukan bila dan sepanjang paksi bar skrol harus dipaparkan:

Teks perenggan pertama

Teks perenggan kedua

Keputusan:

Anda juga boleh menggunakan atribut gaya limpahan-x dan limpahan-y untuk menyesuaikan bar skrol, yang membolehkan anda menyesuaikan paparan tatal di sepanjang paksi individu. Oleh itu, ia bertanggungjawab untuk paksi mendatar dan untuk paksi menegak.

Oleh itu, jika, sebagai contoh, anda memerlukan penatalan mendatar untuk tidak muncul dalam perenggan, dan penatalan menegak untuk muncul hanya apabila perlu, maka sudah cukup untuk menulis peraturan css berikut:

p (limpahan-x: tersembunyi; limpahan-y: auto;)

Dan tugas itu akan diselesaikan.

Itu sahaja. Sehingga lain kali. Jangan lupa untuk melanggan kemas kini blog dan saya akan berterima kasih jika anda menggunakan butang rangkaian sosial.

Artikel tutorial yang panjang ini akan memberi tumpuan kepada topik-topik penting, yang tugasnya adalah untuk mengatur kaedah bekerja dengan elemen blok, menerangkan kepada pembaca apa yang mengubah model untuk mengira lebar dan ketinggian elemen digunakan, bagaimana untuk menguruskan limpahan elemen blok, dan cara bekerja dengan dimensi minimum dan maksimum elemen.

Semasa meneroka model kotak CSS, kami mendapati bahawa sifat lebar dan ketinggian menetapkan lebar dan ketinggian kawasan dalaman elemen ( kawasan kandungan), yang boleh mengandungi teks, imej dan elemen lain.

Dalam model kotak CSS, terdapat perbezaan antara nilai lebar dan ketinggian yang anda tentukan untuk elemen dan jumlah ruang yang disimpan oleh penyemak imbas untuk memaparkannya. Jumlah lebar dan ketinggian elemen ialah kawasan tetingkap penyemak imbas, yang terdiri daripada lebar dan ketinggian padding, sempadan, dan nilai tersuai yang ditentukan untuknya.

Jumlah lebar elemen dikira menggunakan formula:

div(lebar: 150px; / * tetapkan lebar elemen * / ketinggian: 150px; / * tetapkan ketinggian elemen * / padding: 10px; / * set pelapik elemen * / sempadan: 5px; / * tetapkan sempadan elemen * / }

Dalam kes kami, ini menyelamatkan keadaan, dan kami tidak perlu melakukan apa-apa pengiraan, dan pada masa hadapan mereka takut akan sebarang perubahan yang mungkin diperlukan untuk elemen kami. Mari tinggalkan pengiraan yang tidak perlu ini di sebelah penyemak imbas dan lihat hasil contoh kami:

Untuk pemahaman akhir model ini untuk mengira lebar dan ketinggian elemen, kami akan menyatukan pengetahuan yang diperoleh dengan contoh berikut:

Nilai sifat kotak kandungan ialah lalai dan mengira jumlah lebar dan ketinggian elemen mengikut skema klasik. Sebagai contoh, lebar:

150 piksel (lebar tersuai) + 10 piksel (lapik kiri) + 10 piksel (lapik kanan) + 10 piksel (sempadan kiri) + 10 piksel (sempadan kanan) = 190 piksel.

Untuk elemen kedua, yang kami gunakan sifat dengan nilai kotak sempadan, lebar dan ketinggian tersuai elemen sudah termasuk kandungan elemen, jidar dan pelapik. Dalam kebanyakan kes, menggunakan sifat dengan nilai kotak sempadan adalah lebih baik pada halaman, kerana ia menjadikan dimensi akhir elemen jelas dan mengelakkan beberapa situasi tidak dijangka yang dibincangkan di atas.

Hasil daripada contoh kami:

Kawalan limpahan elemen blok

Dalam proses susun atur, anda akan menghadapi situasi apabila kandungan elemen akan dipaparkan di luar sempadan elemen. Secara lalai, penyemak imbas memaparkan kandungan sedemikian (limpahan elemen diberikan), yang dalam beberapa kes membawa kepada ralat visual. Sifat limpahan CSS bertanggungjawab untuk tingkah laku penyemak imbas ini. Mari kita pertimbangkan nilai yang mungkin:

Mari kita lihat contoh berikut:

Dalam contoh ini, kami telah meletakkan empat blok lebar dan ketinggian tetap, yang mana nilai-nilai limpahan CSS yang berbeza ditentukan:

• Blok pertama(nilai kelihatan) - kandungan berada di luar sempadan elemen (nilai lalai).
• Blok kedua(nilai tersembunyi) - Kandungan yang melimpah unsur dipotong.
• Blok ketiga(nilai tatal) - Limpahan dipotong, tetapi bar skrol ditambah.
• Blok keempat(nilai auto) - seperti nilai skrol, hanya bar skrol akan ditambah secara automatik jika blok melimpah sepanjang paksi tertentu ( x- mendatar, atau y- menegak), dan tidak dipaparkan secara kekal pada halaman.

Hasil daripada contoh kita.

Penerangan

Untuk mengubah saiz imej menggunakan HTML, atribut ketinggian dan lebar disediakan. Nilai dalam piksel atau peratusan dibenarkan. Jika peratusan ditetapkan, maka dimensi imej dikira secara relatif kepada elemen induk - bekas tempat teg terletak ... Sekiranya tiada bekas induk, ia adalah tetingkap penyemak imbas. Dalam erti kata lain, lebar = "100%" bermakna gambar akan diregangkan ke lebar penuh halaman web. Menambah hanya satu atribut lebar atau ketinggian mengekalkan nisbah bidang dan nisbah bidang imej. Pelayar kemudian menunggu imej dimuatkan sepenuhnya untuk menentukan ketinggian dan lebar awalnya.

Pastikan saiz semua imej pada halaman web. Ini menjadikan halaman dimuatkan lebih cepat sedikit, kerana penyemak imbas tidak perlu mengira saiz setiap imej selepas menerimanya. Pernyataan ini penting terutamanya untuk imej yang diletakkan di dalam jadual.

Lebar dan ketinggian imej boleh diubah sama ada atas atau bawah. Walau bagaimanapun, ini tidak menjejaskan kelajuan memuatkan imej dalam apa jua cara, kerana saiz fail kekal tidak berubah. Oleh itu, berhati-hati apabila mengurangkan imej, kerana ia mungkin menimbulkan kekeliruan di kalangan pembaca mengapa lukisan sekecil itu mengambil masa yang lama untuk dimuatkan. Tetapi meningkatkan saiz membawa kepada kesan yang bertentangan - saiz imej adalah besar, tetapi fail dimuatkan lebih cepat berbanding imej dengan saiz yang sama. Tetapi kualiti lukisan semakin merosot.

Sintaks

Html
XHTML

Nilai-nilai

Sebarang nombor integer positif dalam piksel atau peratus.

Nilai asal

Lebar asal imej.

HTML5 IE Cr Op Sa Fx

Penerangan

Menetapkan ketinggian blok atau elemen yang boleh diganti (contohnya, teg ). Ketinggian tidak termasuk ketebalan jidar di sekeliling elemen, pelapik dan jidar.

Jika kandungan blok melebihi ketinggian yang ditentukan, maka ketinggian elemen akan kekal tidak berubah dan kandungan akan dipaparkan di atasnya. Ciri ini boleh menyebabkan kandungan elemen bertindih apabila elemen dalam kod HTML adalah berjujukan. Untuk mengelakkan perkara ini daripada berlaku, tambah limpahan: auto pada gaya elemen.

Sintaks

ketinggian: nilai | minat | auto | mewarisi

Nilai-nilai

Sebarang unit panjang yang diterima dalam CSS diterima sebagai nilai - contohnya, piksel (px), inci (in), titik (pt), dll. Apabila menggunakan tatatanda peratusan, ketinggian elemen dikira bergantung pada ketinggian unsur induk. Jika induk tidak dinyatakan secara eksplisit, maka tetingkap penyemak imbas digunakan sebagai induknya. auto menetapkan ketinggian berdasarkan kandungan elemen

HTML5 CSS2.1 IE Cr Op Sa Fx

Hasil daripada contoh ini ditunjukkan dalam Rajah. 1.

nasi. 1. Mengaplikasikan sifat ketinggian

Model Objek

document.getElementById ("elementID") .style.height

pelayar

Internet Explorer 6 salah mentakrifkan ketinggian sebagai ketinggian min.

Dalam mod aneh, Internet Explorer sehingga dan termasuk versi 8.0 salah mengira ketinggian elemen tanpa menambah nilai padding, jidar dan sempadan padanya.

Internet Explorer sehingga dan termasuk versi 7.0 tidak menyokong nilai warisan.

Hello, pembaca budiman.

Ini adalah pelajaran kesebelas dalam mempelajari CSS. Dalam tutorial ini, kita akan melihat hanya dua sifat mudah tetapi penting. Ciri-ciri ini bertanggungjawab untuk ketinggian dan lebar blok.

Sebelum mempelajari pelajaran ini, selesaikan pelajaran sebelumnya:

Teori dan amalan

Dalam pelajaran lepas, kami melihat model kotak, dan padding dan padding. Dalam hal ini kita akan mempertimbangkan hanya dua sifat: ketinggian dan lebar blok. Ketinggian dalam CSS ditetapkan oleh harta ketinggian , dan lebar mengikut harta lebar ... Mari kita lihat kod dengan contoh sebenar (mari kita ambil contoh dari pelajaran lepas):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html> <kepala> <tajuk> rumah</ tajuk> <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8"> <pautan rel = "stylesheet" type = "text / css" href = "style.css"> </ kepala> <badan> <id div = "kandungan"> <kelas div = "firstPar"> <p> Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</ p> <p> Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</ p> </ div> <kelas div = "secondPar"> <p> Cras</ p> <ul> <li> amet condimentum</ li> <li> aliquam volutpat</ li> <li> elementum interdum</ li> </ ul> </ div> </ div> </ badan> </ html>

Dan dalam CSS untuk setiap blok