Bagaimanakah Saya Boleh Membuat Sempadan Div Konsisten Menggunakan CSS?

Mencapai Sempadan Div yang Konsisten

Apabila menggayakan elemen div dengan jidar, pendekatan CSS standard (cth., "sempadan: 1px hitam pejal" ) menambah ketebalan sempadan pada saiz div. Sebagai contoh, sempadan 1px akan menghasilkan div yang berukuran 102px x 102px dan bukannya 100px x 100px yang dimaksudkan.

Memanfaatkan Sifat "bersaiz kotak"

Untuk membetulkan isu ini, CSS memperkenalkan sifat "bersaiz kotak". Dengan menetapkan sifat ini kepada "kotak sempadan", penyemak imbas akan menganggap lebar sempadan sebagai sebahagian daripada dimensi div.

Pelaksanaan dalam Kod

Pertimbangkan kod berikut :

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

Dengan menyatakan "saiz kotak: kotak sempadan," div kini mengukur 100px x 100px, dengan jidar 20px disertakan dalam dimensi tersebut.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Sempadan Div Konsisten Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!