Seven Important CSS Interview Questions

Table of contents

• 1. The box model in CSS3
• 2. The difference between display:none and visibility:hidden
• 3. Let’s talk about CSS sprites
• 4. What are the attribute values ​​of position?
• 5. What are the differences between PNG, GIF, JPG and WEBP and how to choose?
• 6. What are the CSS selectors? priority?
• 7. Floating related
• (1) When do I need to clear floats?

• (2) How to clear floats?

##Special recommendation:2020 CSS interview questions summary (latest)

1. Box model in CSS3

There are two types of box models in CSS3: standard box model and IE box model

• The difference between the standard box model and the IE box model is: the width and height of the standard box model refer to the width and height of the content, while the width and height of the IE box model refer to the content , the sum of padding and borders.

• In CSS3, you can use

  box-sizing:border-box to convert the ordinary box model into an IE box model. Sometimes we have set the width and height of a box, but if we want to change border, so that the size of the box will change, we can convert it into an IE box model without having to change it every time. Calculate the size of the box contents.

• In the box model
  • box-sizing:content-boxRepresents the standard box model (default value)
  • box-sizing:border-boxRepresents the IE box model (that is, the weird box model)

In addition, there are:

Flex Flexible Box Model

##2. The difference between display:none and visibility:hidden

These two attributes are to let the element Hide invisible

Difference:

(1)In the rendering tree

display:none
• will make The element completely disappears from the rendering tree and will not occupy any space when rendering;
visibility:hidden
• will not cause the element to disappear from the rendering tree, and the rendered element will still occupy the corresponding space. Space, but the content is not visible
(2) Inheritance

display:none
• is a non-inherited attribute, and its descendant nodes will follow the parent node It disappears from the rendering tree and cannot be displayed by modifying the properties of descendant nodes.
visibility:hidden
• is an inherited attribute. The descendant nodes disappear because they inherit hidden. By setting visibility:visible, the descendant nodes can be displayed. .
(3) Modifying the

display

of an element in the regular document flow will usually cause the document to be rearranged, but modifying the visibility attribute will only cause the element to be Redraw (4) If a screen reader is used, the content set to

display:none

will not be read, and the content set to visibility:hidden will be read. visibility:hidden3. Let’s talk about the CSS sprite

Concept:

The sprite is Splice multiple small pictures into one picture. When using, adjust the background pattern to be displayed through the

background-position

element size.

Advantages:

Reduce the number of HTTP requests and improve the loading speed of the page to a certain extent

• Reduce the size of the image because Each picture has a header information. If you put multiple pictures together, they will share the same header information, which reduces the number of bytes of the picture.
• It is convenient to change the style. You only need to add one or less pictures. By modifying the color or style of the image, the style of the entire web page can be changed.
• Reduces the trouble of naming pictures, just name one or several pictures

Disadvantages:

• Maintenance is troublesome. If the page background changes a little, you need to modify the entire merged picture.
• Merge is troublesome. You need to merge multiple pictures into one picture in an orderly and reasonable manner. A certain amount of space must also be reserved to prevent unnecessary backgrounds
• In adaptive pages under widescreen or high-resolution screens, if the picture is not wide enough, the background may be broken

4. What are the attribute values ​​of position?

##absoluteGenerate Absolutely positioned elements are positioned relative to a parent element other than static positioningrelativeGenerate relatively positioned elements, positioned relative to their original positionfixedGenerate absolutely positioned elements, positioned relative to the browser windowstatic Default value, no positioning, the element appears in the normal document flowinheritSpecifies that the value of the position attribute is inherited from the parent element

Attribute value	Overview

5. What are the differences between PNG, GIF, JPG and WEBP and how to choose?

(1)GIF

GIF pictures only store 8-bit indexes and support up to 256 colors.
• uses lossless compression and has a smaller size
• Support transparent and simple animations

Suitable for: simple color logos, icons, wireframes, simple animations

(2)JPG

Use lossy compression, you can control the quality of compression
• Use direct color, rich colors
• Does not support transparency

Applicable In : Colorful pictures, gradient images

(3) PNG

png-8 is a bitmap format that uses lossless compression and is based on 8-bit indexed colors. GIF has better support for transparency and smaller size with the same quality, but it does not support animation. Suitable for icons, backgrounds, buttons.
• png-24 uses lossless compression and is a bitmap format based on direct color. The size is larger than the above ones, but the image quality is high. It is suitable for saving source files or image formats that require secondary editing.

(4)WEBP

Developed by Google, smaller in size
• Supports lossy compression and lossless compression
• Supports transparency And animation

##Applicable to

: APP or webpage that supports webp

Formatgifjpgpng##webp Small file, supports lossy and lossless compression, supports animation and transparencyBrowser compatibility is not goodSupports apps and webviews in webp format6. What are the CSS selectors? priority?

Advantages	Disadvantages	Applicable scenarios
Small file size, supports animation, transparency, no compatibility Problem	Only supports 256 colors	Simple colors for logos, icons, and animations
Rich colors, files Small	Lossy compression, repeated saving of pictures reduces the quality obviously	Colorful pictures/gradient images
Lossless Compression, support transparency, simple pictures are small in size	Does not support animation, colorful pictures are in large size	logo/icon/transparent picture

SelectorFormat##Tag Selectorp##Class selector#myclassname

##id selector

#myid

Adjacent sibling selector

h1 p

Child selector

ul>li

Descendant selector

li a

Wildcard selector

*

Attribute selector

a[ref="eee"]

Pseudo-class selector

li:last-child

If you need to select an element immediately after another element, and both have the same parent element, you can use the adjacent sibling selector. For example, if you want to increase the top margin of the paragraph that appears immediately after the h1 element , you can write like this:

h1 + p {margin-top:50px;}

For the priority of the selector:

• Element selector: 1
• class selector: 10
• id selector: 100
• Element tag: 1000

It should be noted that:

• !important declared style The highest priority
• If the priorities are the same, the style that appears last takes effect
• The inherited style has the lowest priority

Attribute inheritance:

• Inheritable attributes: font-size, font-family, color
• Non-inheritable styles: border, padding, margin, width, height

7. After floating-related

elements are set to float, the display will automatically become block.

(1) When do I need to clear floats?

The problems caused by floating are as follows:

• The height of the parent element cannot be expanded, which affects elements at the same level as the parent
• Non-level elements at the same level as the floating element Floating elements follow it
• If an element floats, the elements before it also need to float, otherwise it will affect the structure of the page

(2) How to clear floats?

The way to clear floats is as follows:

• Define the height attribute for the parent p
• Add an empty p after the last floating element tag, and add clear:both style
• The parent tag containing the floating element adds overflow:hidden or overflow:auto

##Table of Contents

1 . The box model in CSS3
• 2. The difference between display:none and visibility:hidden
• 3. Let’s talk about CSS sprites
• 4. position What are the attribute values ​​of ?
• 5. What are the differences between PNG, GIF, JPG and WEBP and how to choose?
• 6. What are the CSS selectors? priority?
• 7. Floating related
• (1) When do I need to clear floats?
  • (2) How to clear floats?

1. Box model in CSS3

There are two types of box models in CSS3: standard box model and IE box model

• The difference between the standard box model and the IE box model is: the width and height of the standard box model refer to the width and height of the content. The width and height of the IE box model refers to the sum of content, padding, and borders.

• In CSS3, you can use

  box-sizing:border-box to convert the ordinary box model into an IE box model. Sometimes we have set the width and height of a box, but if we want to change border, so that the size of the box will change, we can convert it into an IE box model without having to change it every time. Calculate the size of the box contents.

• In the box model
  • box-sizing:content-boxRepresents the standard box model (default value)
  • box-sizing:border-boxRepresents the IE box model (that is, the weird box model)

In addition, there are:

Flex Flexible Box Model

##2. The difference between display:none and visibility:hidden

These two attributes are to let the element Hide invisible

Difference:

(1)In the rendering tree

display:none
• will make The element completely disappears from the rendering tree and will not occupy any space when rendering;
visibility:hidden
• will not cause the element to disappear from the rendering tree, and the rendered element will still occupy the corresponding space. Space, but the content is not visible
(2) Inheritance

display:none
• is a non-inherited attribute, and its descendant nodes will follow the parent node It disappears from the rendering tree and cannot be displayed by modifying the properties of descendant nodes.
visibility:hidden
• is an inherited attribute. The descendant nodes disappear because they inherit hidden. By setting visibility:visible, the descendant nodes can be displayed. .
(3) Modifying the

display

of an element in the regular document flow will usually cause the document to be rearranged, but modifying the visibility attribute will only cause the element to be Redraw (4) If a screen reader is used, the content set to

display:none

will not be read, and the content set to visibility:hidden will be read. visibility:hidden3. Let’s talk about CSS sprites

Concept:

精灵图就是将多个小图片拼接在一个图片中，使用的时候通过background-position元素尺寸调节需要显示的背景图案。

优点：

• 减少HTTP请求数，在一定程度上提高了页面的加载速度
• 减少图片的体积，因为每个图片都有一个头信息，把多个图片放在一起，会共用一个头信息，较少了图片的字节数
• 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
• 减少了图片命名的困扰，只要给一张或几张图片命名即可

缺点：

• Maintenance is troublesome. If the page background changes a little, you need to modify the entire merged picture.
• Merge is troublesome. You need to merge multiple pictures into one picture in an orderly and reasonable manner. A certain amount of space must also be reserved to prevent unnecessary backgrounds
• In adaptive pages under widescreen or high-resolution screens, if the picture is not wide enough, the background may be broken

4. What are the attribute values ​​of position?

##absoluteGenerate Absolutely positioned elements are positioned relative to a parent element other than static positioningrelativeGenerate relatively positioned elements, positioned relative to their original positionfixedGenerate absolutely positioned elements, positioned relative to the browser windowstatic Default value, no positioning, the element appears in the normal document flowinheritSpecifies that the value of the position attribute is inherited from the parent element

Attribute value	Overview

5. What are the differences between PNG, GIF, JPG and WEBP and how to choose?

(1)GIF

GIF pictures only store 8-bit indexes and support up to 256 colors.
• uses lossless compression and has a smaller size
• Support transparent and simple animations

Suitable for: simple color logos, icons, wireframes, simple animations

(2)JPG

Use lossy compression, you can control the quality of compression
• Use direct color, rich colors
• Does not support transparency

Applicable In : Colorful pictures, gradient images

(3) PNG

png-8 is a bitmap format that uses lossless compression and is based on 8-bit indexed colors. GIF has better support for transparency and smaller size with the same quality, but it does not support animation. Suitable for icons, backgrounds, buttons.
• png-24 uses lossless compression and is a bitmap format based on direct color. The size is larger than the above ones, but the image quality is high. It is suitable for saving source files or image formats that require secondary editing.

(4)WEBP

Developed by Google, smaller in size
• Supports lossy compression and lossless compression
• Supports transparency And animation

##Applicable to

: APP or webpage that supports webp

Formatgifjpgpng##webp Small file, supports lossy and lossless compression, supports animation and transparencyBrowser compatibility is not goodSupports apps and webviews in webp format6. What are the CSS selectors? priority?

Advantages	Disadvantages	Applicable scenarios
Small file size, supports animation, transparency, no compatibility Problem	Only supports 256 colors	Simple colors for logos, icons, and animations
Rich colors, files Small	Lossy compression, repeated saving of pictures reduces the quality obviously	Colorful pictures/gradient images
Lossless Compression, support transparency, simple pictures are small in size	Does not support animation, colorful pictures are in large size	logo/icon/transparent picture

SelectorFormat##Tag Selectorp##Class selector#myclassname

##id selector	#myid
Adjacent sibling selector	h1 p
Child selector	ul>li
Descendant selector	li a
Wildcard selector	*
Attribute selector	a[ref="eee"]
Pseudo-class selector	li:last-child
If you need to select an element immediately after another element, and both have the same parent element, you can use the adjacent sibling selector. For example, if you want to increase the top margin of the paragraph that appears immediately after the h1 element , you can write like this: h1 + p {margin-top:50px;} For the priority of the selector: Element selector: 1 class selector: 10 id selector: 100 Element tag: 1000 It should be noted that: !important declared style The highest priority If the priorities are the same, the style that appears last takes effect The inherited style has the lowest priority Attribute inheritance: Inheritable attributes: font-size, font-family, color Non-inheritable styles: border, padding, margin, width, height 7. After floating-related elements are set to float, the display will automatically become block. (1) When do I need to clear floats? The problems caused by floating are as follows: The height of the parent element cannot be expanded, which affects elements at the same level as the parent Non-level elements at the same level as the floating element Floating elements follow it If an element floats, the elements before it also need to float, otherwise it will affect the structure of the page (2) How to clear floats? The way to clear floats is as follows: Define the height attribute for the parent p Add an empty p after the last floating element tag, and add clear:both style The parent tag containing the floating element adds overflow:hidden or overflow:auto Related tutorial recommendations: CSS video tutorial

The above is the detailed content of Seven Important CSS Interview Questions. For more information, please follow other related articles on the PHP Chinese website!