Bagaimanakah Saya Boleh Membuat Sempadan DIV Muncul Di Dalam Dimensinya?

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;
}

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!