Anda harus tahu CSS. Soalan saya untuk meningkatkan kemahiran CSS anda

Hai semua!

CSS merangkumi banyak tema, dan tiada pemaju dapat memahami sepenuhnya segala -galanya. Memang benar bahawa kita tidak perlu mahir dalam semua pengetahuan, tetapi beberapa pengetahuan asas CSS adalah penting. Masalah saya adalah untuk berkembang di sekitar mata pengetahuan teras ini.

Masalah ini tidak sesuai untuk pemula. Hanya dengan pengalaman tertentu, anda dapat lebih memahami niat isu -isu ini.

Anda juga boleh mengikuti kemajuan pembangunan projek di GitHub.

Mula!

<:> Nota: Saya menggunakan istilah "nilai pengiraan", yang merujuk kepada nilai atribut yang anda lihat dalam tab "pengiraan" alat pemaju.

Apakah ciri -ciri pemilih berikut?

Pseudo -function membantu penyemak imbas untuk memilih pemilih yang paling tinggi dari senarai pemilih yang diberikan. Dalam contoh ini, pemilih yang paling dipaparkan ialah

. Ciri -ciri pemilih adalah (0, 1, 0, 0). Ini akan digunakan untuk keseluruhan .

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

Nilai pengiraan atribut ialah :is(). Betul atau salah? #container @规则

betul.

pseudo -pseudo -fungsi akan menjadikan ciri -ciri sifar. Oleh itu, ciri -ciri pemilih color lebih tinggi. Inilah sebabnya nilai pengiraan atribut adalah red.

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

Bentuk apa yang akan dipaparkan dalam contoh berikut?

:where() .container Jika atribut elemen adalah color, maka atribut red dan

tidak sah. Kami tidak akan melihat persegi atau apa -apa.

Apakah algoritma nilai pengiraan atribut

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

unsur ?

display inline width Kes 1: unsur -unsur adalah unsur -unsur -unsur. Atribut height mereka adalah sama dengan atribut

dari elemen induk.

.child Kes 2: unsur -unsur adalah item elastik. Atribut mereka dikira mengikut kandungan. width

Apakah nilai pengiraan atribut

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

dari elemen pseudo?

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

.child dan . width atau nilai akan menukar nilai width atribut

atribut elemen kanak -kanak ke nilai penggantian

. .child width Dalam kes elemen induk

dan

, apakah perbezaan antara lokasi lalai elemen kanak -kanak? display

Di dalam elemen induk , sub -element akan dipaparkan mengikut urutan. Sebaliknya, dalam hal , unsur -unsur akan dipaparkan satu persatu.

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

Apakah nilai pengiraan .child dan width atribut elemen? height

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

Atribut

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

atribut unsur sama dengan atribut

atribut elemen induk. Oleh itu, nilai pengiraan atribut .child ialah 1600px. (Dengan mengandaikan saiz fon lalai penyemak imbas ialah 16px, 100Rem = 100 * 16px = 1600px) width width Di dalam elemen induk , width atribut akan mengisi semua ruang. Jika elemen induk mempunyai pelbagai item, ruang akan diperuntukkan kepada mereka purata. Oleh itu, nilai pengiraan atribut

elemen

adalah 20REM / 2 = 10REM, iaitu, 10 * 16 = 160px. display: grid Jarak sempadan elemen akan melebihi elemen induk dalam semua kes. Betul atau salah? height .child height

ralat.

, , .child, dan

jarak sub -marginal tidak akan melebihi elemen induk.

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

Adakah lipatan sempadan dalam unsur -unsur

dan display: flex berkesan? display: inline-flex display: grid tidak, tidak sah. Di dalam unsur -unsur display: inline-grid, ,

dan

, jarak sempadan akan terkumpul. display: inline-flex display: inline-grid Kedudukan unsur -unsur pseudo adalah mendatar dan menegak. Betul atau salah?

display: flex betul. Penyemak imbas akan memperuntukkan semua ruang antara sub -elemen dan elemen induk. display: inline-flex display: grid Apakah nilai pengiraan atribut? display: inline-grid

Nilai awal

adalah

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

. Oleh itu,

nilai pengiraan

elemen ialah

. min-width Walau bagaimanapun, jika

,

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

,

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div></code>

,

atau min-width nilai ditakrifkan untuk unsur -unsur, maka auto nilai pengiraan sub -elemennya ialah 0. .child min-width bagaimana kita menggunakan atribut untuk menggantikan atribut ? auto

kita harus menentukan atribut block untuk elemen . inline inline-block Nilai pengiraan atribut ialah table. Betul atau salah? table-* min-width

betul. Jika atau

nilai ditakrifkan, penyemak imbas akan menukarkan semua gap nilai atribut margin kepada

nilai alternatif.

<code class="language-css">.parent { 
  display: grid; 
  width: 100rem; 
  height: 20rem; 
}</code>

Kenapa nilai pengiraan .parent atribut elemen? gap

display unsur dengan atau block akan dikeluarkan dari aliran dokumen biasa. Oleh itu, elemen induk tidak dapat melihatnya. Inilah sebabnya nilai pengiraan atribut adalah 0.

Dalam contoh berikut, apakah peranan atribut isolation?

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

kita harus ingat bahawa apabila atribut z-index digunakan, apa yang digunakan oleh penyemak imbas.

Secara lalai, konteks penyusunan akar adalah html elemen. Inilah sebabnya unsur pseudo berada di belakang elemen isolation: isolate tanpa . .parent

kami menggunakan atribut untuk membuat konteks timbunan baru untuk

elemen. Oleh itu, elemen pseudo dipaparkan di belakang teks, tetapi di hadapan elemen isolation. .child .parent Apakah lokasi elemen pseudo?

Pertama sekali, kerana

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

, unsur -unsur pseudo dipaparkan di tengah.

place-items: center selepas aplikasi dan

, ia bergerak di sepanjang y -axis ke sempadan bawah elemen induk, kerana keutamaan

, position: absolute, bottom: 0 dan top atribut adalah lebih tinggi daripada right harta. bottom left Apakah nilai pengiraan atribut? place-items

Keutamaan atribut adalah lebih tinggi daripada atribut width, tetapi nilai -nilainya juga mesti berada dalam julat atribut

dan

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

. Jadi jawapannya ialah 225px.

flex-basis Apakah nilai pengiraan atribut? width min-width max-width Apabila menggunakan atribut adat CSS, kita harus menentukan semua bahagian disingkat. Jika kita tidak melakukan ini, penyemak imbas tidak boleh digunakan.

Ini berlaku dalam contoh kami. padding Singkatan memerlukan 4 nilai, tetapi hanya 3 pemaju yang ditakrifkan. Penyemak imbas tidak boleh disediakan. Oleh itu, nilai pengiraan ialah 0.

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

Kenapa nilai pengiraan atribut

dari elemen ?

padding atribut adat CSS akan dari nilai warisan atribut adat yang sama yang ditakrifkan oleh elemen induk. Jika atribut tersuai ditinggalkan, penyemak imbas akan menggunakan nilai pulangan.

Dalam contoh kami, atribut p ditinggalkan dari elemen induk. Oleh itu, penyemak imbas menggunakan nilai bayaran balik, iaitu, kata kunci background-color, kata kunci dari atribut

elemen

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

yang mewarisi nilai hijau.

Output Revied ini mengekalkan pemformatan imej asal dan mengelakkan perubahan yang signifikan kepada makna semasa menyusun semula teks untuk peningkatan dan aliran

Atas ialah kandungan terperinci Anda harus tahu CSS. Soalan saya untuk meningkatkan kemahiran CSS anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!