01 How to center an element horizontally and vertically

Requirements for inline elements, block elements and block elements of variable width and height are applicable:

IO /shanyue/pen… Below is the layout code

<div class="container">
  <div class="item" style="width: 100px; height: 100px; background: #999;">Block elements</div>
</div>

<div class="container">
  <div class="item">Block elements of variable height and width</div>
</div>

<div class="container">
  <span class="item">Inline elements</span>
</div>
Copy the code
.container {
   // Write the code here
}

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

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

Flex/Grid provides some ways to use Flex/Grid in modern browsers. It supports block elements as well as inline elements, both fixed and unfixed.

Using Flex, here is a classic vertical center.

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

With grid, it does a two-dimensional layout, but with only one child, a one-dimensional layout is the same as a two-dimensional layout.

Combining context-content/context-items with align-content/align-items gives you four scenarios

The effect can be seen in codepen

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

Three attributes are a bit verbose, but only two are needed:

.container {
  display: grid;
  place-items: center;
}
Copy the code
.container {
  display: grid;
  place-content: center;
}
Copy the code

02 How to Achieve a fixed 300px layout on the left and an adaptive layout on the right

Exchange and discuss in Issue or my website: 02 How can CSS achieve a fixed 300px layout on the left and an adaptive layout on the right

Code see left fixed, right adaptive – Codepen

Use flex layout, 300px to the left, flex-grow: 1 to the right. The following is an example of puG code and CSS code

.container
  .left
  .main
Copy the code
.container {
  display: flex;
}

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

.main {
  flex-grow: 1;
}
Copy the code

If you just use the Grid layout, the code is much simpler and you only need to control the CSS properties of the container

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

Have you ever used CSS variable and what problems it solves

Exchange and discuss in Issue or my website: have you ever used CSS variable in 03 and what problems it solves

The CSS can be dynamically modified at run time. More flexible than less/ sASS, as it is easily controlled via JS. It’s a handy way to switch themes.

Styled Component, for the style network

Communicate and discuss in Issue or on my website: 04 Describe your opinion of styled- Component

The most popular CSS-in-JS scheme

05 Display: Inline element Settings margin and padding will take effect

05 display: Inline elements set margin and padding will take effect

Refer to the article maxdesign.com.au/articles/in…

The margin and padding of an inline element will be left to right and top to bottom, but will not squeeze any other elements in the same direction

The code is the padding and margin-codepen visible on the inline elements

<div class="container">I am a<span class="item">Inline elements</span>Day according to the mountains, the Yellow River into the sea. To see a thousand miles, to the next level. Day according to the mountains, the Yellow River into the sea. To see a thousand miles, to the next level. Day according to the mountains, the Yellow River into the sea. To see a thousand miles, to the next level. Day according to the mountains, the Yellow River into the sea. To see a thousand miles, to the next level.</div>
Copy the code

Style the elements in the.item line and observe the effect:

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

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

06 What is the default display attribute for HTML

Communicate and discuss in Issue or my website: what is the default display attribute for 06 HTML

The default display for the HTML root element is block

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

Exchange and discuss in Issue or my website: 07 How to center a block element with an arbitrary length and width vertically and horizontally

css position

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

It’s too wide. You can’t do that

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

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

[Q017] How to achieve a fixed 300px layout on the left and an adaptive layout on the right

.container
  .left
  .main
  .right
Copy the code
.container {
  display: flex;
}

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

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

.main {
  flex-grow: 1;
}
Copy the code

09 How to implement single and double row fringe style of table

Exchange and discuss in Issue or my website: 09 How to implement single and double row stripe style of table

Through cSS3 pseudo-class :nth-child to achieve. Nth-child (an+b) matches subscript {an+b; n = 0, 1, 2, … } and the result is a child of an integer

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

Where tr represents rows in the table, it is easy to implement a single or double row style in the table:

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


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

In the same way:

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

10 Brief CSS Specificity

Communicate and discuss in Issue or my website: 10 brief CSS Specificity

CSS Specificity refers to the weight of a CSS selector. The following three types of selectors decrease in sequence

  1. idSelectors, such as#app
  2. class,attribute 与 pseudo-classesSelectors, such as.header,[type="radio"] 与 :hover
  3. typeTag selectors and pseudo-element selectors, such ash1,p 和 ::before

Where wildcard selector *, combinatorial selector + ~ >, negative pseudo-class selector :not() has no effect on priority

Codepen :not has no effect on the priority of the selector

CSS field-codepen could show that none of the ten class selectors had a high weight for an ID selector

What is the difference between 11 ‘+’ and ‘~’ selectors

Communicate and discuss in Issue or my website: what is the difference between 11 ‘+’ and ‘~’ selectors

  • +The selector matches the immediate sibling element
  • ~The selector matches all subsequent sibling elements

12 How does position: sticky work and in which scenarios

Communicate and discuss in Issue or my website: 12 Position: sticky How to work and what scenarios is it applicable to

Position: sticky

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

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

  1. Pseudo-classes use single colons, while pseudo-elements use double colons. Such as:hoverIs a pseudo class,::beforeIs a pseudo element
  2. The pseudo-element generates a new element in the document flow and is available for usecontentProperty setting Content

Refer to www.w3.org/TR/CSS2/sel…

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

Communicate and discuss in Issue or my website: 14 How does CSS match the first N child elements and the last N child elements

See [Q307] how to implement single and double row fringe style of table

  • 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 achieve Dark Mode of website

More description: Refer to the following article:

  1. Dark mode in 5 minutes, with inverted lightness variables

15. How to use CSS to achieve the Dark Mode of the website

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

16 This section describes how to hide an element on a page

Communicate and discuss in Issue or my website: 16 Describes several ways to hide an element on a page

01 display: none

Use CSS to manipulate display to move out of the document stream

display: none;
Copy the code

02 opacity: 0

Transparency is 0, is still in the document flow, and is still valid as an event (such as a click) used on it

opacity: 0;
Copy the code

03 visibility: hidden

Opacity is 0 and remains in the document flow, but events on it (such as clicks) are invalid, which is the difference between opacity: hidden and opacity: 0

visibility: hidden;
Copy the code

04 content-visibility

Move out of the document stream, but display it again at low performance cost

content-visibility: hidden;
Copy the code

05 Definitely not visible on the current page

position: absolute;
top: -9000px;
left: -9000px;
Copy the code

06 Set the font size to 0

font-size: 0;
Copy the code

17 How does the CSS achieve responsive layout with large screen, medium screen, and small screen

Exchange and discuss in Issue or my website: 17 How does CSS achieve responsive layouts with large screen thirds, medium screen thirds, and small screen halves

The layout elements are as follows, and 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>
Copy the code

This problem can be easily solved with Grid layout, but with other solutions, controlling the spacing as well as the equalization can be a headache:

  1. grid-template-columns: Control equalization
  2. gap: Control clearance

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;
}
Copy the code

TailwindCSS is a very convenient CSS atomic class framework that only needs one line

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

But is that enough?

It’s not enough, it’s complicated enough!

  1. Media inquiries required
  2. Breakpoint needs to be set manually, setting the boundaries of the large and small screens

The ultimate solution

The Grid layout automatically determines the size of the container, and the screen fills up and splits evenly regardless of size. See the following properties

.container {
  grid-template-columns: repeat(auto-fill, minmax(300px.1fr))
}
Copy the code
  1. repeat: Used with N integral points
  2. auto-fill: indicates automatic filling
  3. minmx: namely written meaning, the minimum width is300px

Online page using the ultimate solution

18 How do I customize the scroll bar style

Exchange and discuss in Issue or my website: 18 How to customize the scrollbar style

Scrollbar related styles are all pseudo-elements, starting with a Scrollbar, with the following pseudo-elements, as you can see from -WebKit compatibility is mediocre, but it doesn’t matter, Chrome is now dominant

  • ::-webkit-scrollbar– The entire scroll bar.
  • ::-webkit-scrollbar-button– Buttons (up and down arrows) on the scroll bar.
  • ::-webkit-scrollbar-thumb– Scroll slider on the scroll bar.
  • ::-webkit-scrollbar-track– Scroll bar track.
  • ::-webkit-scrollbar-track-piece– Scroll bar track part without slider.
  • ::-webkit-scrollbar-corner– The part where the vertical scroll bar and horizontal scroll bar meet.
  • ::-webkit-resizer— Partial styles for the corner section of certain elements (e.g., draggable buttons for textarea).

But in fact, the most commonly used are the following pseudo-elements: scroll bar, slider, track, and 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)}Copy the code

19 When setting the font on the website, how do I set the default font first

Exchange and discuss in Issue or my website: 19 When setting fonts on the website, how to set the system default fonts first

font-family: system-ui;
Copy the code

System-ui will automatically select the system default font as the font, such as the 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;Copy the code

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. The BEM equation:.home-page .home-page-btn

.home-page {
  .home-page-btn{}}Copy the code

One disadvantage of BEM is that it is too long and can be simplified to wrap only the root class name of the page component, but can increase the risk of style conflicts

.home-page {
  .btn{}}Copy the code

2. CSS Scoped

Scoped CSS generates unique attribute or class names for all elements under the current component (scope), and all CSS rules carry unique attribute implementation-scoped name protection

/ / write manually.btn{} // After compiling.btn .jsx-1287234 {}

Copy the code

3. CSS Module

  • css-modules repo
  • css-modules demo

The Module CSS hashes class names

21 What are the inline elements of the HTML tag

Communicate and discuss in Issue or my website: 21 what line elements an HTML tag has

Common labels include the following, for example, inline Element

  • a
  • img
  • picture
  • span
  • input
  • textarea
  • select
  • label

22 How do I configure the CSS to display more than ellipses in one line

Exchange and discuss in Issue or my website: 22 How does CSS set a line beyond the ellipsis display

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Copy the code

23 How do I configure the CSS to display ellipses in multiple lines

Exchange and discuss in Issue or my website: 23 How does CSS set more than one line to 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;
Copy the code

24 What is the role of Order in flex layout

Communicate and discuss the role of Order in the 24 Flex layout in Issue or my website

The order attribute defines the order in which the neutrons of the Flex layout are arranged, with the smaller the value, the higher the order. The default is 0.

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

Discuss the difference between align-content and align-items in 25 Flex layout in Issue or my website

See align-content and align-items for example codes

  • align-contentApplies to multiple rows on the vertical axis, one row does not apply
  • align-itemsActing on a single row element on the vertical axis

In the figure below, the top is classified as align-content and the bottom as align-items

A square that is vertically centered and half the length of the parent container

Communicate and discuss in Issue or my website: square with 26 child elements vertically centered and half the length of the parent container

Vertically centered child element – Codepen that is half the length of the parent container

<div class="container">
  <div class="item"></div>
</div>
Copy the code

Percentage padding was used before, which is outdated because it squeeges the Content and cannot be filled in (absolute positioning is required).

You can use the latest attribute aspect-ratio, or aspect ratio

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

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

27 Briefly describe the value of position in the CSS

Communicate and discuss in Issue or my website: 27 Brief the value of position in CSS

  • static: Default value, no location,top,right,bottom,leftIt doesn’t work
  • relative: Relative positioning
  • absolute: Absolute location, out of the document flow, up, down, left, and right with the nearest location parent as the reference frame
  • fixed: Out of the document flow, up, down, left and right to the browser viewport as a reference frame
  • sticky: relative 与 fixedThe combination of

28 What is the BFC

More description: + how is it generated + what are its functions and applications

Communicate and discuss in Issue or my website: 28 What is BFC

Block Formatting Context, Block Formatting Context

29 How does the CSS implement elements with fixed aspect ratios

Exchange and discuss in Issue or my website: 29 How does CSS implement elements with fixed aspect ratios

The old solution was to use padding. The padding of an element, if set to a percentage, is based on the width of the parent element. But it doesn’t really mean much, because you’re taking the padding, and the content doesn’t have any area.

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

30 What are the values of REM, EM, vw and WH

Communicate and discuss in Issue or my website: what do the values of 30 REM, EM, vw and WH mean

Both belong to [length] of CSS Data Type, as shown in the documentation length-mDN

  • rem: Based on the root element (i.ehtml)font-size
  • em: according to theIts elementsthefont-size
  • vw: viewport width
  • vh: viewport height

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

31 What’s the difference between normalize.css and reset.css

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

  • Normalize.css: Retains useful styles, such as the font size of h1
  • Reset. CSS: Resets all styles, such as h1, H2, h3 font sizes, leaving no styles

32 what is the difference between [2, 2em, 200%] and [200%]?

Communicate and discuss in Issue or my website: what is the difference between 32 line-height values [2, 2em, 200%]?

See the code: lineheight-codepen

Line-height is set relative to the font size of the element itself, but is inherited. In practice, the value 2em or 200% May encounter unexpected content.

Such as:

  • Parent:fontSize: 18px; LineHeight: 1.5em(27px, 150%);, its lineHeight is calculated to be 27px and will be inherited by the quilt element
  • Child elements:fontSize: 30pxThe lineHeight of the child element is inherited as 27px

The following is the demo code, see lineheight-codepen

<div class="box green">
  <h1>LineHeight: 1.5; This is a problem-free frame</h1>LineHeight: 1.5; LineHeight: 1.5; This is a problem-free frame</div>

<div class="box red">
 <h1>LineHeight: 1.5 em. This is a problematic frame</h1>LineHeight: 1.5 em. LineHeight: 1.5em; This is a problematic frame</div>

<div class="box orange">
 <h1>lineHeight: 150%; This is a problematic frame</h1>lineHeight: 150%; LineHeight: 150%; This is a problematic frame</div>
Copy the code
.green {
  line-height: 1.5;
  border: solid limegreen;
}

.red {
  line-height: 1.5 em;
  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;
}
Copy the code

What are the advantages of the 33 Grid layout

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

Responsive!

34 How can I Evenly Divide three Columns

More description: layout code as shown below, is divided the layout – codepen] [three columns (https://codepen.io/shanyue/pen/yLMzxqX)

Note: Set text in the first element. Child elements cannot be squeezed because the text is too long.

<div class="container">
  <div class="item">Day according to the mountains, the Yellow River into the sea. To see a thousand miles, to the next level.</div>
  <div class="item"></div>
  <div class="item"></div>
</div>
Copy the code
// The following is the style code, not the core function code * {box-sizing: border-box;
}

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

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

Communicate and discuss in Issue or my website: 34 How to achieve three-column evenly distributed layout

See code three evenly distributed layout – Codepen

Using Flex

Note that flex-basis is set up using calc(100% / 3) and that it has the disadvantage of not doing a good job of setting the left and right gaps for child elements

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


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

Note: If you also use flex-grow: 1 to control evenly split for child elements, they will be squeezed when they have text and other content, and the evenly split layout will not be possible.

Using the Grid

The container can be operated directly with Grid, and the clearance between child 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;
}
Copy the code

35 Is the z-index: 999 element always placed above the z-index: 0 element

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

See zindex-codepen for the code

No, see cascading context – MDN for a more complex example