ralat lukisan css

Ralat "lukisan CSS"

Dalam reka bentuk web, CSS ialah alat penting boleh digunakan untuk menetapkan gaya halaman, seperti saiz fon, warna, latar belakang, sempadan, dll. Walau bagaimanapun, dengan perkembangan teknologi web yang berterusan, fungsi CSS menjadi semakin berkuasa Orang ramai boleh menggunakan CSS untuk mencapai banyak kesan yang hanya boleh dicapai menggunakan teknologi seperti JavaScript atau Flash. Walau bagaimanapun, kadangkala kita juga menghadapi beberapa perangkap CSS Hari ini mari kita bincangkan "kesilapan" dalam CSS.

1. Jing dan pelapik dalam model kotak

Dalam CSS, model kotak ialah konsep yang sangat biasa dan penting. Model kotak terdiri daripada empat bahagian: kawasan kandungan, padding, sempadan dan jidar elemen. Antaranya, margin dan padding adalah dua sifat yang mengawal jarak luar dan dalam kotak. Walau bagaimanapun, penggunaannya juga terdedah kepada kesilapan.

Sebagai contoh, dalam halaman yang mengandungi div, jika kita ingin mempunyai jarak tertentu antara teg div dan halaman, biasanya kita boleh menggunakan margin:

div {
  margin: 20px;
}

Walau bagaimanapun, jika kita berada di kali ini Jika teg p ditambahkan pada teg div, margin teg p akan ditindih pada margin div, menyebabkan jarak menjadi lebih besar daripada yang dijangkakan.

Pada masa ini, pendekatan yang betul adalah untuk menetapkan padding dan bukannya margin untuk div:

div {
  padding: 20px;
}

Dengan cara ini, margin tag p akan ditindih di dalam padding div bukannya pada margin div untuk mencapai kesan yang kita inginkan.

2. Pengiraan lebar

Dalam CSS, lebar dikira melalui kotak kandungan unsur. Iaitu, jika elemen div adalah 500px lebar, maka kotak kandungannya juga akan menjadi 500px lebar. Walau bagaimanapun, jika elemen div mempunyai sempadan 5px, maka elemen div akan menjadi 10px lebih lebar daripada yang dijangkakan.

Masalah ini boleh diselesaikan dengan menambahkan atribut saiz kotak pada elemen. Jika saiz kotak ditetapkan kepada kotak sempadan, lebarnya termasuk jidar dan padding, bukan hanya kotak kandungan. Ia kelihatan seperti ini:

div {
  width: 500px;
  border: 5px solid black;
  box-sizing: border-box;
}

3. sifat z-index

Dalam CSS, sifat z-index membenarkan elemen untuk bertindih dengan elemen lain pada paksi z (kedalaman ). Namun, kadangkala kita dapati kesan indeks-z tidak seperti yang diharapkan.

Sebagai contoh, dalam kod berikut, kami menjangkakan kandungan #box2 akan menimpa kandungan #box1:

<div id="box1"></div>
<div id="box2"></div>

#box1 {
  position: relative;
  z-index: 1;
  background-color: red;
}
#box2 {
  position: relative;
  z-index: 2;
  background-color: blue;
}

Walau bagaimanapun, apabila kami benar-benar menjalankan kod ini, kami mendapati bahawa #box2 tidak sepenuhnya Sarung #kotak1. Ini kerana kedua-dua #box1 dan #box2 adalah elemen yang agak berkedudukan dan ia berada dalam aliran dokumen yang sama. Oleh itu, hubungan hierarki mereka sebenarnya ditentukan oleh susunan di mana ia muncul dalam kod HTML. Maksudnya, walaupun #box2 mempunyai z-index yang lebih besar daripada #box1, ia tidak sepenuhnya meliputi #box1.

Jika kita mahu #box2 menutup sepenuhnya #box1, maka kita boleh menukar #box1 menjadi elemen yang diposisikan secara mutlak:

#box1 {
  position: absolute;
  z-index: 1;
  background-color: red;
}
#box2 {
  position: relative;
  z-index: 2;
  background-color: blue;
}

Dengan cara ini, #box1 bukan lagi elemen dalam dokumen aliran, Sebaliknya, ia adalah elemen yang diposisikan relatif kepada elemen induk (iaitu, elemen badan), supaya indeks-z #box2 boleh menutup sepenuhnya #box1.

Ringkasan

CSS ialah alat yang sangat berkuasa, tetapi tidak dapat dielakkan untuk menghadapi beberapa masalah semasa proses menggunakannya. Artikel ini merangkumi beberapa kesilapan biasa dalam CSS, termasuk jidar dan pelapik dalam model kotak, pengiraan lebar dan penggunaan sifat z-index. Memahami kesilapan biasa ini boleh membolehkan kita mengelakkan kesilapan yang tidak perlu dalam pembangunan harian dan meningkatkan kecekapan kerja.

Atas ialah kandungan terperinci ralat lukisan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!