🎿 🍫 🎴 विस्तृत उत्तरों के साथ मेरा पसंदीदा सीएसएस प्रश्न 💤 🦏 💨

मैं बहुत सारे साक्षात्कारों से गुजरा, और जब सीएसएस के सवालों की बात आई, तो वे नीचे आए: "किसी तत्व को केंद्र में रखने के लिए सभी ज्ञात तरीके सूचीबद्ध करें।" 5 उत्तरों के बाद, स्पष्ट रूप से, मैं इससे थक गया हूं। इसलिए मैं अपने पसंदीदा सीएसएस प्रश्नों को साझा करना चाहता हूं जो मैं एक साक्षात्कार में पूछता हूं।

1 में। मैं एक अक्षम तत्व वाले बटन तत्व के लिए अस्पष्टता कैसे निर्धारित कर सकता हूं?

उत्तर

, disabled, .

button[disabled] {
  opacity: 0.24;
}

दो में। मैं तुरंत इनपुट तत्व का अनुसरण करने वाले स्पैन तत्व के लिए अस्पष्टता कैसे निर्धारित कर सकता हूं?

उत्तर

(+).

input + span {
  opacity: 0.24;
}

3 में। मैं एक इनपुट तत्व के लिए अपारदर्शिता कैसे सेट कर सकता हूं जिसमें "रेडियो" के लिए निर्धारित विशेषता प्रकार है?

उत्तर

type="radio" .

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

4 पर। एक कोड स्निपेट है। मुझे बताएं कि पहले और दूसरे मामले में मजेंटा पृष्ठभूमि वाले कितने तत्व होंगे।

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

मामला एक

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

मामला 2

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

उत्तर

, — 2.

5 बजे। छद्म वर्ग क्या है: जड़?

उत्तर

:root — , . HTML html. SVG svg.

6 पर। कैसे करता है: प्लेसहोल्डर-दिखाया गया छद्म-वर्ग काम करता है?

उत्तर

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

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

7 बजे। मैं एक तत्व के लिए सीएसएस कैसे सेट कर सकता हूं जिसमें फोकस में एक तत्व है?

उत्तर

:focus-within.

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

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

8 पर। कल्पना करें कि डेटा के साथ एक तालिका है। उपयोगकर्ता ने जिस बिंदु को इंगित किया है, उसे छोड़कर सभी लाइनों के लिए अपारदर्शिता जोड़ने का तरीका क्या है?

उत्तर

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

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

9 पर। मैं निम्नलिखित कोड को फिर से कैसे लिख सकता हूं ताकि रंग संपत्ति के मूल्य में परिवर्तन होने पर पृष्ठभूमि-रंग संपत्ति का मूल्य स्वचालित रूप से बदल जाए?

.link {
  color: #222;
}

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

उत्तर

currentColor, color . .link.

.link {
  color: #222;
}

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

दस पर। उपाय रिम की इकाई की गणना html तत्व के फ़ॉन्ट-आकार की संपत्ति के मूल्य के आधार पर की जाती है। सच या झूठ?

उत्तर

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 निम्नलिखित उदाहरण में स्पैन तत्व के आकार क्या हैं?

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

उत्तर

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

विस्तृत उत्तरों के साथ मेरा पसंदीदा सीएसएस प्रश्न

More articles: