You Should Know CSS. My questions to level up your CSS skill

Hi everyone!

CSS covers many themes, and no developer can fully grasp everything. It is true that we do n’t need to be proficient in all knowledge, but some CSS basic knowledge is essential. My problem is to develop around these core knowledge points.

These problems are not suitable for beginners. You need at least one year of CSS experience, and it is better for two years. Only with certain experience can you better understand the intention of these issues.

You can also follow the development progress of the project on Github.

Start!

Note: I use the term "calculation value", which refers to the attribute values ​​you see in the developer tool "Calculation" tab.

What is the characteristics of the following selector?

The pseudo -function helps the browser to select the highest featured selectioner from the given selector list. In this example, the most featured selector is

. The characteristics of the selector are (0, 1, 0, 0). This will be applied to the entire .

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

The calculation value of the attribute is :is(). Correct or wrong? #container @规则

Correct.

Pseudo -pseudo -function will make the characteristics zero. Therefore, the color selector's characteristics are higher. This is why the calculation value of the attribute is red.

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

What shape will be displayed in the following example?

:where() .container If the attribute of the element is color, then red and

attributes are invalid. We will not see the square or anything.

What is the algorithm of the

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

attribute calculation value of the element?

display inline width Case 1: Elements are block -level elements. Their height attributes are equal to the

attributes of the parent element.

.child Case 2: Elements are elastic items. Their width attributes are calculated according to the content.

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

What is the calculation value of the

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

attribute of the pseudo element?

.child width and width.

or value will convert the

value of the .child attribute of the child element to the width replacement value.

In the case of the parent element display and

, what is the difference between the default location of the child element?

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

Inside the parent element of , the sub -element will be displayed in order in order. Instead, in the case of , the elements will be displayed one by one. block

What are the calculation values ​​of .child and width attributes of elements? height

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

The

attribute of the element is equal to the .child attribute of the parent element. Therefore, the calculation value of the width attribute is 1600px. (Assuming the default font size of the browser is 16px, 100rem = 100 * 16px = 1600px) width width Inside the parent element of ,

attributes will fill all space. If the parent element has multiple items, the space will be allocated to them average. Therefore, the calculation value of the

attribute of the display: grid element is 20rem / 2 = 10REM, that is, 10 * 16 = 160px. height .child The border distance of the element will exceed the parent element in all cases. Correct or wrong? height

.child Error.

, ,

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

, and

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

sub -marginal distances will not exceed the parent element.

display: flex Is the border folding in the elements of display: inline-flex and display: grid effective? display: inline-grid

No, invalid. Inside the elements of

, , display: inline-flex and display: inline-grid, the border distance will be accumulated.

The position of pseudo elements is horizontal and vertical. Correct or wrong? display: flex display: inline-flex display: grid Correct. The browser will allocate all the space between the sub -element and the parent element. display: inline-grid

What is the calculation value of the attribute?

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

The initial value of

is

. Therefore,

The min-width calculation value of the element is

.

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div></code>

However, if

, min-width, auto, .child or min-width values ​​are defined for elements, then the auto calculation value of its sub -element is 0.

How do we use attributes to replace block attributes? inline inline-block table We should define table-* attributes for element. min-width

The calculation value of the attribute is

. Correct or wrong? gap margin

Correct. If or

<code class="language-css">.parent { 
  display: grid; 
  width: 100rem; 
  height: 20rem; 
}</code>

value is defined, the browser will convert all

value of the .parent attribute to gap alternative value.

Why is the calculation value of display attributes of element? block

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div></code>

Elements with or absolute will be removed from the normal document stream. Therefore, the parent element cannot see it. This is why the calculation value of the attribute is 0. fixed

In the following example, what is the role of isolation attributes?

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

We should remember that when the z-index attribute is used, what stack the browser uses.

By default, the roots stacking context is html element. This is why the pseudo element is behind the isolation: isolate element without . .parent

We used Attributes to create a new stack context for

elements. Therefore, the pseudo element is displayed behind the text, but in front of the isolation element. .child .parent What is the location of the pseudo element?

First of all, because

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

, the pseudo elements are displayed in the center.

place-items: center After the application and

, it moves along the Y -axis to the bottom border of the parent element, because the priority of

, position: absolute, bottom: 0 and top attributes is higher than right property. bottom left What is the calculation value of the attribute? place-items

Priority of attributes is higher than width attributes, but its values ​​must also be within the range of

and

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

attributes. So the answer is 225px.

flex-basis What is the calculation value of the attribute? width min-width max-width When using CSS custom attributes, we should define all the abbreviated parts. If we don't do this, the browser cannot be used.

This happened in our example. padding The abbreviation requires 4 values, but only 3 developers are defined. The browser cannot be set up. Therefore, the calculation value is 0.

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

Why is the calculation value of the

attribute of the element?

padding CSS custom attributes will from the same custom attribute inheritance values ​​defined by parent elements. If the custom attribute is omitted, the browser will use the return value.

In our example, the p attribute is omitted from the parent elements. Therefore, the browser uses the refund value, that is, the background-color keyword, the keyword from the

attribute of the

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

element inherited the green value.

This Revied Output Maintains The Original Image Formatting and Avoids Significant Alterations to the Meaning While Rephrasing The Text For Improved LITY and Flow. The Questions are presented in a more concise and organized manner.

The above is the detailed content of You Should Know CSS. My questions to level up your CSS skill. For more information, please follow other related articles on the PHP Chinese website!