Just my own study notes, study a little bit every day…

Use the :not() selector to determine whether the form displays a border

Start by adding a border to the element

1. Add borders

.nav li {
  border-right: 1px solid # 666;
}
Copy the code

2. Remove the border for the last element

/* Remove the border */. Nav li:last-child {border-right: none; }Copy the code

3. Don’t do this though, use :not() pseudo-classes to achieve the same effect:

.nav li:not(:last-child) {
  border-right: 1px solid # 666;
}
Copy the code

Use negative nth-Child to select elements

A negative nth-child can be used to select 1 to N elements.

li { display: none; } /* Select elements 1 to 3 and display them, select all items except the first 3 and display them */ li:nth-child(-n+3) {display: block; }Copy the code

Use the owl-like selector

The name may be unfamiliar, but the universal selector (*) works wonders with its neighboring sibling selector (+) :

* + * {margin-top: 1.5em; }Copy the code

In this example, all adjacent sibling elements in the document flow will be set to margin-top: 1.5em. This should be used less often.

Create tables of equal grid width

Table-layout: Fixed can make each grid keep the same width, I usually set the width, minimum width to set the table:

.calendar {
  table-layout: fixed;
}
Copy the code

Empty links are selected using property selectors

Display the href attribute of an element that has no text content but has an href attribute:

a[href^="http"]:empty::before {
  content: attr(href);
}
Copy the code

Uniform vertical rhythm

The universal selector (*) is used with elements to maintain a consistent vertical rhythm:

.intro > * {margin-bottom: 1.25rem; }Copy the code

Use selector :root to control font elasticity

In a responsive layout, font size should be adjusted for different viewports. You can calculate the font size and width based on the viewport height using :root:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}
Copy the code

You can now use root EM

Font: 1rem/1.6 sans-serif; }Copy the code

These tips apply to the latest versions of Chrome, Firefox, Safari, Opera, Edge, and Internet Explorer 11.

Use margin negative displacement representation

When the left is negative, it moves left, and when the right is negative, it pulls left. Up and down are similar to left and right

BFC application eliminates floating effects

.container{display: flow-root}Copy the code

One of flex’s features

Set the container margin:auto, div evenly spaced distribution, 🉑 set the single div margin:auto; Or margin-left: auto; Margin – right: auto;

Similarly, use Flex + Margin: Auto to center.

Flex features two

When the sum of flex-grow is less than 1, only part of the remaining space is allocated proportionally, not all of it

Setting both left and right for absolute and fixed positioning is equivalent to implicitly setting the width

Display: table Implements a multi-column ascending layout

1. Set the div style to display:table-cell. 2. Main display: table; width:100%; border-spacing:30px 0; 3. The container margin – left: – 30 px; marign-right:-30px;

The outline of the use of

Use outline to stroke, outline:10px dashed green; Outlone-offset :-40px; The contain block is inside.