Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membuat Sempadan DIV Muncul Di Dalam Dimensinya?

Bagaimanakah Saya Boleh Membuat Sempadan DIV Muncul Di Dalam Dimensinya?

DDD
Lepaskan: 2024-12-10 14:58:17
asal
916 orang telah melayarinya

How Can I Make a DIV's Border Appear Inside Its Dimensions?

Membuat Sempadan Muncul Di Dalam Elemen DIV

Dalam reka bentuk web, memahami cara elemen berinteraksi dan berkelakuan adalah penting. Satu isu biasa yang dihadapi oleh pembangun ialah meletakkan sempadan di dalam elemen DIV sambil mengekalkan dimensi yang diingini.

Gelagat lalai CSS ialah meletakkan sempadan di pinggir luar elemen, meningkatkan lebar dan ketinggiannya dengan berkesan. Untuk mengatasinya, sifat bersaiz kotak akan dimainkan. Dengan menetapkan saiz kotak: kotak sempadan, jidar disertakan dalam spesifikasi lebar dan ketinggian elemen, menghasilkan perwakilan tepat bagi dimensi yang dimaksudkan.

Berikut ialah contoh untuk menggambarkan konsep ini:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}
Salin selepas log masuk

Dalam contoh ini, DIV pertama mempunyai sifat bersaiz kotak yang ditetapkan kepada kotak sempadan, memberikannya lebar dan ketinggian 100px, termasuk sempadan 20px. Sebaliknya, DIV kedua tidak mempunyai sifat bersaiz kotak yang ditentukan, menghasilkan sempadan yang melangkaui dimensi yang ditentukan oleh elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Sempadan DIV Muncul Di Dalam Dimensinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan