Get best of the week

Pertanyaan CSS favorit saya dengan jawaban terinci

Saya telah melalui banyak wawancara, dan ketika sampai pada pertanyaan CSS, mereka datang ke: "Sebutkan semua cara yang diketahui untuk memusatkan suatu elemen." Setelah 5 balasan, terus terang, saya bosan. Jadi saya ingin membagikan pertanyaan CSS favorit saya yang saya tanyakan dalam sebuah wawancara.


DALAM 1. Bagaimana saya bisa mengatur opacity untuk elemen tombol yang memiliki atribut yang dinonaktifkan?


Menjawab

, disabled, .


button[disabled] {
  opacity: 0.24;
}

DALAM 2. Bagaimana saya bisa mengatur opacity untuk elemen span yang segera mengikuti elemen input?


Menjawab

(+).


input + span {
  opacity: 0.24;
}

DALAM 3. Bagaimana saya bisa mengatur opacity untuk elemen input yang atribut atributnya disetel ke "radio"?


Menjawab

type="radio" .


input[type="radio"] {
  opacity: 0.24;
}

JAM 4. Ada cuplikan kode. Katakan berapa banyak elemen dengan latar belakang magenta dalam kasus pertama dan kedua.


<div class="some-element">some text</div>
<div class="some-element">some text</div>
<article class="some-element">some text</article>

kasus 1


.some-element:first-child {
  background-color: purple;
}

kasus 2


.some-element:first-of-type {
  background-color: purple;
}

Menjawab

, — 2.


AT 5. Apa itu pseudo-class: root?


Menjawab

:root — , . HTML html. SVG svg.


AT 6. Bagaimana cara: pseudo-class placeholder yang ditunjukkan bekerja?


Menjawab

:placeholder-shown , input textarea placeholder. , placeholder , :placeholder-shown .


input:placeholder-shown {
  background-color: lightgray;
}

PUKUL 7. Bagaimana saya bisa mengatur CSS untuk elemen yang memiliki elemen dalam fokus?


Menjawab

:focus-within.


<div class="some-parent">
  <button type="button">Some button</button>
</div>

.some-parent:focus-within {
  outline: 2px solid purple;
  outline-offset: 5px;
}

AT 8. Bayangkan ada tabel dengan data. Apa cara untuk menambahkan opacity untuk semua baris kecuali yang telah ditunjukkan oleh pengguna?


Menjawab

. tbody:hover , opacity . opacity , :not(:hover).


tbody:hover tr:not(:hover) {
  opacity: 0.24;
}

AT 9. Bagaimana saya bisa menulis ulang kode berikut sehingga nilai properti warna latar belakang berubah secara otomatis ketika nilai properti warna berubah?


.link {
  color: #222;
}

.link::before {
  background-color: #222;
}

Menjawab

currentColor, color . .link.


.link {
  color: #222;
}

.link::before {
  background-color: currentColor;
}

PADA 10. Unit pengukur rem dihitung tergantung pada nilai properti ukuran font elemen html. Kebenaran atau kebohongan?


Menjawab

.


11. button 16px font-size. 8px padding em?


8px 16px.


button {
  font-size: 16px;
  padding: .5em;
}

12. 10vw padding-left. px, — 480x320px?


vw — . 10vw 10% , . 480px. 10vw 48px.


13. div ?


<body>
  <div>element 1</div>
  <div>element 2</div>
</body>

div , .


14. width .child 1000px. ? ?


<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.parent {
  width: 1000px;
}

. width . width .child width .


15. height ?


height .


16. . ?


.


17. .child — 196x196px. ?


<body>
  <span class="child">element</span>
</body>

.child {
  width: 196px;
  height: 196px;
}

, width height , .


18. .child ?


<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.child {
  margin-top: 10px;
}

, .child .parent, margin .


19. display ?


span {
  display: inline-block;
  position: absolute;
}

block. position: absolute . inline-block block.


20. width .child 1000px. ? ?


<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.parent {
  width: 1000px;
}

.child {
  position: absolute;
}

. position: absolute width .


21. .parent ?


<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.child {
  position: absolute;
}

- , . , .parent .


22. span ?


span {
  width: 300px;
  height: 300px;
  position: absolute;
}

300x300px, span .


23. .child 20px .parent. ?


<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.parent {
  box-sizing: border-box;
  width: 1000px;
  padding: 20px;
}

.child {
  position: absolute;
}

. position: absolute , , top, right, bottom, left. .child 20px , position: absolute .


24. display ?


span {
  display: inline-block;
  position: relative;
}

inline-block, .. position: relative, display.


25. span ?


span {
  width: 300px;
  height: 300px;
  display: flex;
}

display: flex, . width height span. — 300x300px.


26. .child display inline-block. ?


<div class="parent">
  <span class="child">element2</span>
</div>

.parent {
  display: flex;
}

.child {
  display: inline-block;
}

. - . — block.


27. width .child . ?


<div class="parent">
  <div class="child">element2</div>
</div>

.parent {
  display: flex;
}

.


28. ?


<body>
  <div class="parent">
    <div class="first-child">element 1</div>
    <div class="second-child">element 2</div>
  </div>
</body>

.parent {
  display: flex;
  flex-direction: column;
}

.first-child {
  margin-bottom: 20px;
}

.second-child {
  margin-top: 10px;
}

30px, - .


29. .child ?


<div class="parent">
  <span class="child">element2</span>
</div>

.parent {
  display: flex;
  width: 250px;
  height: 250px;
}

.child {
  width: 100px;
  height: 100px;
  margin-top: auto;
  margin-left: auto;
}

150px.


B30 Berapa ukuran elemen span dalam contoh berikut?


<div class="parent">
  <span class="child">element2</span>
</div>

.parent {
  display: flex;
}

.child {
  flex-basis: 250px;
  width: 100px;
  height: 200px;
  min-width: 150px;
  max-width: 225px;
}

Menjawab

225px. flex-basis width, min-width max-width. 250px (flex-basis) , 225px.

More articles:


All Articles