![Upokary](https://upokary.com/wp-content/uploads/2019/09/upokary-logo-english.png"){kind=logo}
Advanced CSS interview questions
The front-end developers interview always covers CSS questions. The CSS-related questions go from basic to advanced level. The basic knowledge of CSS is vital for a front-end developer position.
If we want to claim as full-stack web developer then you will have to have some CSS basic knowledge. Many software developers think CSS is so easy and feel a bit reluctant doing it.
Having some CSS knowledge is useful case of web development. How DOM elements are styled with CSS is good to know as a developer. Following are some really useful advanced CSS interview questions:
Advanced CSS interview questions
What is the relation between line-height and font-size of an element?
To calculate the line-height space on top and bottom of an element, subtract the font size and then distribute the remaining pixels equally on top and bottom.
When font-size: 16px and line-height: 1 then?
.element{font-size:16px; line-height:1}
When an element has a font-size 16px and line-height 1 which means font-size and line-height is equal (line-height=font-size * 1). So no space on the top and bottom of that element.
When font-size:16px and line-height:1.5 then?
.element{font-size:16px; line-height:1.5}
In this case the line-height will be 24px becuase line-height=font-size * 1.5. So the element will have 4px on space on the top and 4px space on the bottom.
When font-size:16px and line-height:20px then?
.element{font-size:16px; line-height:20px}
In this case the line-height is 20px. So the element will have 2px on space on the top and 2px space on the bottom.
What are the differences between display:block, display:inline-block and display:inline in CSS?
| display:inline | display:inline-block | display:block |
|---|---|---|
| Respect left & right margins and paddings, but not top & bottom | Respect all margins and paddings | Respect all margins and paddings |
| Ignore the width and height | Respect width and height | Respect width & height, takes full width if not defined |
| Allow other elements to sit to the element’s left and right | Allow other elements to sit to the element’s left and right | Force a line break after the block element |
What are the differences between content-box and border-box of CSS box model?
The differences between content-box and border-box:
In case of content-box the width and height properties do NOT include border, padding but for border-box the border, padding is included with the content.
Example of content-box and border-box:
Which one is better between translate() and absolute positioning?
Transform causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence translate() is more efficient and smoother than absolute positioning.
What are different types of media properties?
| Media Type | Description |
|---|---|
| all | Suitable/intended for all devises (default). |
| aural | Intended for speech synthesizers. |
| braille | Intended for braille tactile feedback devices. |
| embossed | Intended for paged braille printers. |
| handheld | Intended for handheld devices (typically small |
Intended for printed documents (applies to docs | |
| projection | Intended for projected presentations (ie: projectors or print to transparencies). |
| screen | Intended for computer screens. |
| tty | Intended for media using a fixed-pitch character grid (ie: teletypes or terminals). |
| tv | Intended for television-type devices. |