Rumah >hujung hadapan web >tutorial css >Dalam CSS, adakah limpahan: tersembunyi mencipta konteks pemformatan peringkat blok baharu?
Dalam CSS, adakah limpahan: tersembunyi mencipta konteks pemformatan peringkat blok baharu?
- WBOYke hadapan
- 2023-09-10 18:57:02937semak imbas
Konteks pemformatan blok (BFC) ialah sebahagian daripada reka letak halaman web dalam CSS di mana elemen diletakkan dan berinteraksi antara satu sama lain. Ringkasnya, ia seperti bekas yang mentakrifkan satu set peraturan tentang cara elemen harus berkelakuan dalam bekas.
Dalam artikel ini, kita akan melihat "Adakah overflow:hidden mencipta konteks pemformatan blok baharu (BFC) dalam CSS
?"Jawapannya ya, kerana dalam CSS, atribut overflow:hidden boleh mencipta konteks pemformatan peringkat blok (BFC) baharu. Apabila nilai limpahan elemen HTML tidak kelihatan (nilai lalai), ia mencetuskan penciptaan BFC baharu. BFC menghalang margin daripada runtuh, membantu mengekalkan kedudukan yang betul, mengelakkan pertindihan yang tidak disengajakan dan membantu pembaca melihat kontras antara dua elemen berbeza.
Sekarang, mari lihat contoh berikut untuk memahami kesan limpahan: tersembunyi pada penciptaan BFC−
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
Dalam contoh di bawah, kami menggayakan "bekas" tanpa menggunakan limpahan CSS: sifat tersembunyi.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70px;
width: 300px;
border: 2px solid;
background-color: lightsalmon;
}
</style>
</head>
<body>
<h1 style="color: seagreen;">Tutorialspoint</h1>
<div class="container">
<p>
Tutorialspoint.com is a dedicated website to
provide quality online education in the domains
of Computer Science, Information Technology,
Programming Languages, and Other Engineering
as well as Management subjects.
</p>
</div>
</body>
</html>
Kita boleh lihat daripada output bahawa teks dalam bekas melebihi sempadan. Oleh itu, ia mungkin meluas di luar bekas dan bertindih dengan elemen lain pada halaman web, memecahkan reka letak.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
Dalam contoh di bawah, kami menggunakan CSS Overflow:hidden property untuk menggayakan "bekas" -
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70px;
width: 300px;
border: 2px solid;
overflow: hidden;
background-color: lightsalmon;
}
</style>
</head>
<body>
<h1 style="color: seagreen;">Tutorialspoint</h1>
<div class="container">
<p>
Tutorialspoint.com is a dedicated website to
provide quality online education in the domains
of Computer Science, Information Technology,
Programming Languages, and Other Engineering
as well as Management subjects.
</p>
</div>
</body>
</html>
Dengan menambahkan atribut limpahan:hidden pada bekas, BFC baharu dicipta. Oleh itu, jika teks melebihi ketinggian bekas, ia akan dipotong dan disembunyikan daripada pandangan. Tetapi teks yang melimpah akan kekal dalam bekas.
Atas ialah kandungan terperinci Dalam CSS, adakah limpahan: tersembunyi mencipta konteks pemformatan peringkat blok baharu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!