Seven Important CSS Interview Questions

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 thepriority 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 theheightattribute for the parent p
• Add an empty p after the last floating element tag, and addclear:bothstyle
• The parent tag containing the floating element addsoverflow:hiddenoroverflow:auto

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?

• 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-boxto 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 changeborder, 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)

Flex Flexible Box Model

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

These two attributes are to let the element Hide invisible

(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 inherithidden. By settingvisibility:visible, the descendant nodes can be displayed. .
(3) Modifying the

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

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

精灵图就是将多个小图片拼接在一个图片中，使用的时候通过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?

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

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!