Front-End Questions-css questions (1)

1. Is the CSS property naming case-sensitive?

Not differentiated, but generally lowercase, easy to understand

2. Do margin-top and Margin-bottom have the same effect on inline (restrained inline) elements?

Do 3.padding-top and padding-bottom increase the size of the elements themselves for inline elements?

To answer 2,3, you need to know the replacement and non-replacement elements in the HTML.

The replacement element refers to an element that is a point character as a different content. such as IMG. A non-replacement element is an element that contains content in a document, such as span.

Discusses whether Margin-top and Margin-bottom have an effect on inline elements, which are discussed separately for inline substitution elements and inline non-replacement elements.

It is possible to apply margin to inline elements, but when applying margin to non-replacement elements, the row height is not affected, and margin is actually transparent, so margin-top and margin-bottom do not have any visual effects. Applying Margin-left and Margin-right to non-replacement elements is an influence.

Setting margin-top and Margin-bottom for inline substitution elements may increase or decrease the row height, depending on the values of Margin-top and Margin-bottom. Margin-left and margin-right have the same effect on inline substitution and non-replacement elements.

For inline elements, setting padding-left and Padding-right is visible, and after setting Padding-top and Padding-bottom, for inline non-replacement elements, Padding-top and Padding-bottom are useless, do not affect their row height, and do not open the parent element. For inline substitution elements, padding-top and padding-bottom open the parent element.

Inline elements (exactly non-replaceable inline elements) cannot set margin and padding in the vertical direction, as specified by the CSS standard.

In short, the inline element, the width of the height is invalid, margin,padding only the left and right margin valid, upper and lower invalid.

4. If a P tag has font-size:10rem, will the P tag automatically respond to the window layout?

No, REM is a relative unit of measure that is based on the size of the HTML root element font-size, and the size of the text does not change as the size of the window changes. The general default root element font-size is 16px, but it can change its value.

5. Pseudo-Class selector: Does checked have an effect on the option tag?

Yes.

Pseudo-Class selector: checked will act on radio (<input type= "Radio" >), checkbox (<input type= "checkbox" >) or OPTION Element (<option > in a <select>).

6. Pseudo-Class: Root usually refers to the label

No.

Single finger creates the root. This root may not be HTML, if it is fragment HTML, the wood has a root created, then the root of the fragment. As Lui Che Woo Kanghao greatly said. https://www.zhihu.com/question/20312140

7. Can the translate () method transform elements on the z-axis?

No.

The translate () method is included in the 2D transform function of the CSS3. It can move positions on the x-axis and y-axis.

Front-End Questions-css questions (1)