لقد خضت الكثير من المقابلات ، وعندما وصل الأمر إلى أسئلة CSS ، توصلوا إلى: "سرد جميع الطرق المعروفة لتوسيط عنصر ما." بعد 5 ردود بصراحة تعبت منه. لذا أريد مشاركة أسئلة CSS المفضلة التي أطرحها في مقابلة.
في 1. كيف يمكنني ضبط العتامة لعنصر زر له سمة معطلة؟
إجابة, disabled, .
button[disabled] {
opacity: 0.24;
}
في 2. كيف يمكنني ضبط العتامة لعنصر الامتداد الذي يتبع عنصر الإدخال على الفور؟
إجابة(+).
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>
حالة 1
.some-element:first-child {
background-color: purple;
}
الحالة 2
.some-element:first-of-type {
background-color: purple;
}
AT 5. ما هي الفئة الزائفة: الجذر؟
إجابة:root — , . HTML html. SVG svg.
AT 6. كيف يعمل: الفئة الزائفة المعروضة بالعنصر النائب؟
إجابة:placeholder-shown , input textarea placeholder. , placeholder , :placeholder-shown .
input:placeholder-shown {
background-color: lightgray;
}
AT 7. كيف يمكنني تعيين CSS لعنصر يحتوي على عنصر في التركيز؟
إجابة: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. تخيل أن هناك جدول بالبيانات. ما هي طريقة إضافة العتامة لجميع الخطوط باستثناء الخط الذي أشار إليه المستخدم؟
إجابة. 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;
}
في 10. يتم حساب وحدة قياس rem بناءً على قيمة خاصية حجم الخط لعنصر 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>
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 ?
16. . ?
17. .child — 196x196px. ?
<body>
<span class="child">element</span>
</body>
.child {
width: 196px;
height: 196px;
}
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;
}
22. span ?
span {
width: 300px;
height: 300px;
position: absolute;
}
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;
}
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;
}
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;
}
ب 30 ما هي أحجام عنصر الامتداد في المثال التالي؟
<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.