Dachang interview summary CSS articles

01 How to realize the horizontal and vertical centering of an element

<blockquote>
More description: The requirements are applicable to inline elements, block elements and block elements with variable width and height:

You can open codepen for debugging: https://codepen.io/shanyue/pen/XWMdabg , the following is the layout code

<div class="container">
  <div class="item" style="width: 100px; height: 100px; background: #999;">
    块状元素
  </div>
</div>

<div class="container">
  <div class="item">不定高宽的块状元素</div>
</div>

<div class="container">
  <span class="item">行内元素</span>
</div>

.container {
   // 把代码写在这里
}

.container {
  height: 20rem;
  background: #ccc;
  margin: 1rem;
}

</blockquote>

Communicate and discuss in Issue or my website 01 How to realize the horizontal and vertical centering of an element

Provide some flex/grid in modern browsers, which not only support block elements, but also support inline elements, which can be used for both fixed height and width.

Using flex , the following is the classic vertical centering.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Use grid , which is a two-dimensional layout, but when there is only one child element, the one-dimensional layout is the same as the two-dimensional layout.

There are four options by combining justify-content / justify-items and align-content/align-items

The effect can be seen codepen

.container {
  display: grid;
  justify-content: center;
  align-content: center;
}

.container {
  display: grid;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  justify-items: center;
  align-content: center;
}

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

The three attributes are a bit verbose, but in fact, only two attributes are needed:

.container {
  display: grid;
  place-items: center;
}

.container {
  display: grid;
  place-content: center;
}

02 How does css achieve a fixed 300px on the left and an adaptive layout on the right

Communicate and discuss in Issue or my website 02 css How to achieve a fixed 300px on the left and an adaptive layout on the right
Code see fixed on the left, adaptive on the right-Codepen

Use flex layout, the left 300px , right flex-grow: 1 . pug code examples of 060b9822bc6e3e and css

.container
  .left
  .main

.container {
  display: flex;
}

.left {
  flex-basis: 300px;
  flex-shrink: 0;
}

.main {
  flex-grow: 1;
}

If you only use the Grid layout, the code will be simpler, you only need to control the CSS properties of the container

.container {
  display: grid;
  grid-template-columns: 300px 1fr;
}

03 Have you ever used css variable and what problems it solved

Communicate and discuss in Issue or my website 03 Have you ever used css variable and what problems it solved

CSS can be modified dynamically at runtime. Compared with less/sass, it is more flexible because it is easy to control through JS. It's handy to switch themes based on it.

04 Talk about your views on styled-component

Exchange and discuss in Issue or My website 04 Talk about your views on styled-component

The most popular CSS-in-JS solution

05 display: Will the margin and padding settings of inline elements take effect?

Communicate and discuss in Issue or my website 05 display: inline element setting margin and padding will take effect

You can refer to the article http://maxdesign.com.au/articles/inline/

The margin and padding of the inline element take effect left and right, and take effect up and down. accurately says that other elements will not be squeezed in the up and down direction, as if does not take effect. If you set the border as shown in the figure below, you will find that it actually takes effect.

Code, found in inline elements and padding margin - codepen

<div class="container">
  我是<span class="item">行内元素</span>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
</div>

Set the style for the elements in the .item

.item {
  padding: 1rem;
  border: 1px solid red;
}

.container {
  margin: 3rem;
  background-color: #ccc;
  height: 10rem;
}

06 What is the default display attribute of html

Communicate and discuss in Issue or my website 06 What is the default display attribute of html

html default root element display is block

07 How to center a block element with variable length and width vertically and horizontally

Communicate and discuss in Issue or my website 07 How to do vertical and horizontal centering for a block element

css position

        .container {
            position: relative;
        }
        .container .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

The width is not fixed, you can’t do it

08 How to achieve fixed left and right, adaptive layout in the middle

Communicate and discuss in Issue or my website 08 How to achieve fixed left and right, adaptive layout in the middle

refer to 160b9822bc71f9 [Q017] How to achieve a fixed 300px on the left and adaptive layout

.container
  .left
  .main
  .right

.container {
  display: flex;
}

.left {
  flex-basis: 300px;
  flex-shrink: 0;
}

.right {
  flex-basis: 300px;
  flex-shrink: 0;
}

.main {
  flex-grow: 1;
}

09 How to realize the single and double row stripe style of the table

Communicate and discuss in Issue or my website 09 How to realize the single and double row stripe style of the

It is css3 by pseudo-class :nth-child . Among them :nth-child(an+b) matches the subscript { an + b; n = 0, 1, 2, ...} and the result is an integer sub-element

nth-child(2n) / nth-child(even) : Two-line style
nth-child(2n+1) / nth-child(odd) : Single line style

Among them, tr represents the row in the table, and it is very simple to realize the single and double row style in the table:

tr:nth-child(2n) {
  background-color: red;
}


tr:nth-child(2n+1) {
  background-color: blue;
}

The same goes for:

How to match the first three child elements: :nth-child(-n+3)
How to match the last three child elements: :nth-last-child(-n+3)

10 Briefly describe css specificity

Communicate and discuss in Issue or my website 10 brief css specificity

css specificity is the weight of the selector in css, the following three types of selectors decrease in order

id selector, such as #app
class , attribute and pseudo-classes selectors, such as .header , [type="radio"] and :hover
type tag selector and pseudo element selector, such as h1 , p and ::before

Among them, the wildcard selector * , the combination selector + ~ > , and the negative pseudo-class selector :not() have no effect on the priority.

There are also inline styles <div class="foo" style="color: red;"></div> and !important (the highest) with higher weight

:not priority impact - codepen can be seen :not priority has no effect on the selector
CSS Specificity-codepen can be seen that there are more than a dozen class selectors and no id selector has a high weight.

11 What is the difference between'+' and'~' selectors

Communicate and discuss in Issue or my website 11 What is the difference between'+' and'~' selector

+ selector matches the next sibling element
~ selector matches all subsequent sibling elements

12 position: How does sticky work and what scenarios it is suitable for

Communicate and discuss in Issue or my website 12 position: how sticky works and what scenarios it applies to

position: sticky can be understood as a combination relative and fixed

13 What is the difference between pseudo-classes and pseudo-elements

Communicate and discuss in Issue or my website 13 What is the difference between pseudo-classes and pseudo-elements

Pseudo-classes use single colons, and pseudo-elements use double colons. For example, :hover is a pseudo-class, ::before is a pseudo-element
The pseudo-element will generate a new element in the document flow, and the content content

Reference https://www.w3.org/TR/CSS2/selector.html#pseudo-elements

14 How does css match the first N child elements and the last N child elements

Communicate and discuss in Issue or my website 14 css How to match the first N sub-elements and the last N sub-elements

See [Q307] How to realize the single and double row stripe style of the

How to match the first three child elements: :nth-child(-n+3)
How to match the last three child elements: :nth-last-child(-n+3)

15 How to use CSS to realize the dark mode of the website (Dark Mode)

<blockquote>
More description: You can refer to the following articles:

Dark mode in 5 minutes, with inverted lightness variables
</blockquote>

Communicate and discuss in Issue or my website 15 How to use CSS to realize the dark mode of the website (Dark Mode)

@media (prefers-color-scheme: dark) {
    :root{
    }
}

16 Introduce several ways to hide an element on the page

Communicate and discuss in Issue or my website 16 Introduce several ways to hide an element on the page

01 display: none

Manipulate the display through CSS to move out of the document flow

display: none;

02 opacity: 0

The transparency is 0, it is still in the document flow, and the events used on it (such as clicks) are still valid

opacity: 0;

03 visibility: hidden

The transparency is 0, still in the document stream, but the events (such as clicks) acting on it are invalid , which is also the difference between visibility:hidden and opacity: 0

visibility: hidden;

04 content-visibility

Moved out of the document stream, but low performance consumption when displayed again

content-visibility: hidden;

05 Absolutely locate in the invisible position of the current page

position: absolute;
top: -9000px;
left: -9000px;

06 Font size is set to 0

font-size: 0;

17 How does css realize the responsive layout of large screens in thirds, medium screens in two, and small screens in first

Communicate and discuss in Issue or my website 17 css How to realize the responsive layout of large screen thirds, medium screens, and small screens

The page layout elements are as follows, the number of items is not fixed

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Using Grid layout can easily solve this problem. If you use other solutions, it is a very headache to control the spacing while controlling the division:

grid-template-columns : Control equal division
gap : Control gap

The effect is visible codepen

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.container {
  display: grid;
}

.conainer {
  gap: 1rem;
}

TailwindCSS is a very convenient CSS atomic framework, it only needs one line to get it

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>

But is this enough?

This is far from enough, it is also complicated enough!

Need media query
Need to manually set the breakpoint, set the size of the screen boundary

Ultimate solution

Grid layout of 060b9822bc7b1a can automatically determine the size of the container, regardless of the size of the screen, it will automatically fill up and divide equally, please see the following attributes

.container {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}

repeat : Use N to divide
auto-fill : indicates automatic filling
minmx : It means written meaning, the minimum width is 300px

Online page using the ultimate solution

18 How to customize the style of the scroll bar

Communicate and discuss in Issue or my website 18 How to customize the style of the scroll bar

The scroll bar-related styles are all pseudo-elements, starting with scrollbar . There are the following pseudo-elements. From -webkit , it can be seen that the compatibility is general, but it doesn’t matter. Chrome browser now accounts for the majority

::-webkit-scrollbar — The entire scroll bar.
::-webkit-scrollbar-button — buttons on the scroll bar (up and down arrows).
::-webkit-scrollbar-thumb — The scroll slider on the scroll bar.
::-webkit-scrollbar-track — Scroll bar track.
::-webkit-scrollbar-track-piece — The track part of the scroll bar without a slider.
::-webkit-scrollbar-corner — The part where there is a vertical scroll bar and a horizontal scroll bar at the same time.
::-webkit-resizer — Part of the style of the corner part of some elements (for example: draggable buttons of textarea).

But in fact, the most commonly used are the following pseudo-elements: scroll bar, slider, track , the following scroll bar is set successfully

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(0,0,0);
    box-shadow: inset 0 0 5px rgba(0,0,0,.08)
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,0,1);
    box-shadow: inset 0 0 10px rgba(0,0,0,.2)
}

19 When setting the font on the website, how to set the priority to use the system default font

Communicate and discuss in Issue or My website 19 When setting the font on the website, how to set the priority to use the system default font

font-family: system-ui;

system-ui will automatically select the system default font as the font, such as bootstrap style rule

$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

20 How to avoid naming style conflicts when writing CSS

Communicate and discuss in Issue or My website 20 How to avoid naming style conflicts when writing CSS

1. BEM formula: `.home-page .home-page-btn`

.home-page {
  .home-page-btn {}
}

BEM has a shortcoming, that is, some are too long and can be simplified appropriately. It only wraps the root class name of the page component, but it may increase the risk of style conflicts.

.home-page {
  .btn {}
}

2. CSS Scoped

scoped css will generate unique attributes or class names for all elements under the current component (scope), and will carry unique attributes for all CSS rules to achieve scope naming protection

// 手动写
.btn {}

// 编译后
.btn .jsx-1287234 {}

css scoped demo

3. CSS Module

module css will hash the class name

css modules demo

21 What are the inline elements of HTML tags

Communicate and discuss in Issue or my website 21 What are the inline elements of HTML tags

Common tags are as follows, please refer to inline element

a
img
picture
span
input
textarea
select
label

22 How to set a line beyond the display ellipsis in CSS

Communicate and discuss in Issue or my website 22 CSS how to set a line beyond the display ellipsis

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

23 How to set CSS to display ellipsis when multiple lines exceed

Communicate and discuss in Issue or my website 23 CSS how to set multiple lines beyond display ellipsis

Use -webkit-line-clamp to set multiple lines beyond display ellipsis

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

24 What is the role of order in flex layout

Communicate and discuss in Issue or my website 24 What is the role of order in flex layout

order attribute defines the arrangement order of the child elements in the Flex layout. The smaller the value, the higher the arrangement, and the default is 0.

25 What is the difference between align-content and align-items in flex layout

Communicate and discuss in Issue or my website 25 What is the difference between align-content and align-items in flex layout
For sample code see: align-content and align-items

align-content acts on multiple rows of elements on the vertical axis, one row of elements does not work
align-items acts on a single row element on the vertical axis

The picture below, the upper part is align-content , the lower part is align-items

26 A square with the child element vertically centered and half the length of the parent container

Communicate and discuss in Issue or my website 26 The child element is vertically centered and the length is half the square of the parent container
Vertically center the child element that is half the length of the parent container-Codepen

<div class="container">
  <div class="item"></div>
</div>

In the past, a percentage was used to increase padding . This solution is outdated and will squeeze the Content content and cannot fill the content in it (absolute positioning is required).

The latest attribute aspect-ratio can be used, which is the aspect ratio

.container {
  display: grid;
  place-items: center;
}

.item {
  width: 50%;
  aspect-ratio: 1/1;
}

27 Briefly describe the value of position in css

Communicate and discuss in Issue or my website 27 Briefly describe the value of position in css

static : Default value, no positioning, top , right , bottom , left no effect
relative : Relative positioning
absolute : Absolute positioning, out of the document flow, using the nearest positioning parent element as the reference system up, down, left and right
fixed : Break away from the document flow, use the browser viewport as the frame of reference
sticky : relative and fixed

28 What is BFC

<blockquote>
More description: + how it was generated

What is its function and application
</blockquote>

Exchange and discuss in Issue or my website 28 What is BFC

Block-level formatting context, Block Formatting Context

29 How CSS implements elements with a fixed aspect ratio

Communicate and discuss in Issue or my website 29 CSS How to achieve fixed aspect ratio elements

The past solution was to use padding . padding an element is set as a percentage, it means that the width of the parent element is used as the benchmark. According to this principle, the aspect ratio can be set. But in fact, the meaning is limited. After all, you have taken up padding, and content has no area.

The modern solution is to use the CSS property of the aspect ratio: aspect-ratio

30 What do the values of rem, em, vw, and wh mean?

Exchange and discuss in Issue or my website 30 What do the values of rem, em, vw, wh mean

They belong to [length] CSS Data Type, see document length-MDN

rem : The root element (i.e. html ) of font-size
em : According own element of font-size
vw: viewport width
vh: viewport height

31 What is the difference between normalize.css and reset.css

Exchange and discuss in Issue or my website 31 What is the difference between normalize.css and reset.css

What is the difference between Normalize.css and Reset CSS?

normalize.css : will retain useful styles, such as the font size of h1
reset.css : Reset all styles, for example, the font size of h1, h2, and h3 are reset, leaving no style

What is the difference between the value of 32 line-height taking [2, 2em, 200%] respectively?

Communicate and discuss in Issue or my website : [The value of 32 line-height is [2, 2em, 200%] What is the difference?]( https://q.shanyue.tech/fe /css/550)
Code see: -codepen

line-height is relative to the font size of the element itself, but it will be inherited at the same time. In actual work, the value 2em or 200% may encounter unpredicted content.

such as:

Parent element: fontSize: 18px; lineHeight: 1.5em (27px, 150% the same);, its lineHeight is calculated to be 27px, which will be inherited by child elements
Child element: fontSize: 30px , the lineHeight of the child element is inherited to 27px, there is a problem

The following is the demo code, see: -codepen

<div class="box green">
  <h1>lineHeight: 1.5; 这是没有问题的框框</h1>
  lineHeight: 1.5; 这是没有问题的框框
  lineHeight: 1.5; 这是没有问题的框框
</div>

<div class="box red">
 <h1>lineHeight: 1.5em; 这是有问题的框框</h1>
  lineHeight: 1.5em; 这是有问题的框框
  lineHeight: 1.5em; 这是有问题的框框
</div>

<div class="box orange">
 <h1>lineHeight: 150%; 这是有问题的框框</h1>
  lineHeight: 150%; 这是有问题的框框
  lineHeight: 150%; 这是有问题的框框
</div>

.green {
  line-height: 1.5;
  border: solid limegreen;
}

.red {
  line-height: 1.5em;
  border: solid red;
}

.orange {
  line-height: 150%;
  border: solid orange;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}

`33 What are the advantages of Grid layout`

Communicate and discuss in Issue or my website 33 Where are the advantages of Grid layout

Responsive!

`34 How to achieve a three-column equally divided layout`

<blockquote> More description: The layout code is shown below, see three-column equally divided layout-codepen

Note: Set the text in the first element, and the sub-elements cannot be squeezed because the text is too long.

<div class="container">
  <div class="item">白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
  <div class="item"></div>
  <div class="item"></div>
</div>


// 以下为样式代码，非核心功能代码
* {
  box-sizing: border-box;
}

.container {
  background-color: #eee;
  height: 10rem;
  width: 40rem;
  margin: 1rem;
}

.item {
  border: 1px solid #888;
}

</blockquote>

Communicate and discuss in Issue or my website 34 How to achieve a three-column equally divided layout

See code three-partition layout-Codepen

`Use Flex`

Note that using calc(100% / 3) set flex-basis , at the same time its defect is that not able to set the left and right gaps for the child elements

.flex-container {
  display: flex;
  flex-wrap: wrap;
  // gap: 1rem;


  .item {
   flex: 0 0 calc(100% / 3);
  }
}

flex-grow: 1 for the sub-elements at the same time to control the split, when the sub-elements have text and other content, they will be squeezed and the split layout will not be achieved.

`Use Grid`

You can use Grid to directly manipulate the container, and the gap between sub-elements can also be well controlled. It can be seen that Grid is simpler, more efficient, and more accurate

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

`35 z-index: 999 element must be placed on top of z-index: 0 element`

Communicate and discuss in Issue or my website 35 z-index: 999 element must be placed on z-index: 0 element

Code see zindex-codepen

No, see Cascading Context-MDN