In-depth understanding of CSS-V01

preface

This article mainly combs and reviews the common knowledge points of CSS. The main contents of this paper are as follows:

• Core ideas of CSS3
• responsive
• Stack context
• Common layouts: float layout, Flex layout
• Common animation: Fullpage, rotation, 3D changes
• Common components: Common tools for form beautification
• Required knowledge of CSS

Core ideas of CSS3

Historically

Q: Do you know who invented CSS? Answer:?? 👉🏻 Wikipedia

The above is a Google search. Before CSS, HTML came with its own attributes 👇Demand at that time is not complicated, you just write the article, they claim to the style of more and more complex, the existing HTML cannot meet, so you just want to have a thing can choose to this TAB, and then there are the concept of the selector, so invented the selector, attributes, values, but these far cannot satisfy the demand, So browsers add their own attributes, but most people don’t know CSS, so in order for academics to concentrate on writing, CSS is introduced directly and automatically changes the style

Media =”print” media=”print” media=”print” media=”print” media=”print” media=”print” media=”print” MEDIA =”print” MEDIA =”print” MEDIA =”print” MEDIA =”print” MEDIA =”print” MEDIA =”print” MEDIA =”print” MEDIA =”print” Many properties (effects) of CSS can be copied (without complicated logic)

Nonorthogonal representation

1. The attributes interact with each other

• margin V.S. border

Margin merge problem, why add border will not merge?? Couldn’t it have been a bad start? I changed border, why changed margin, didn’t merge at the beginning?Why is display:table /display:flex separated?

The parent element is not preceded by borderAfter add theHere’s an article about BFC 👉🏻 you might find the answerWhat exactly is a “BFC” block-level formatting context?

• Little dot V.S. display

Display Default display: list-item; I’ll change it to some other display and some other properties, and the dots will disappear

• position: absolute V.S. display: inline

After being placed in position, it only changes inline inline-blockWhy is it so anti-human?

2. The elements interact with each other

• position: fixed V.S. transform

Normally, it should be in the lower left corner, but why did you add absolute positioning after adding transform? Why can’t I be where I want to be?

• Float affects inline elements

Why is text affected by floating elements? The floating element was originally used for text blending, and the need was for text to surround the image, so Hone would automatically find the edge of the floating element to surround it.

Why doesn’t it affect the div next to it? Because it floats, why does floating affect the content of the div? Because the float element’s original intention was not to float, but to mix text (via the float property), the name makes us think it floats when it doesn’t.

CSS is easy to learn

Learn some basic routines

1. Horizontal center

In a block-level element

• Child width is uncertain,margin-left:20px; margin-right:20px;
• Child width is determined,margin-left:auto; margin-right:auto;

In line blocks? Text-align: center; 2. Vertical center avoid parent height determination 👉🏻 10 ways to vertical center

The use of tools

1. CSS 3 Generator

Width and height

If CSS has a large number of width, height, then CSS is a problem, because the height and width of CSS understanding is not deep.

Document Flow (Normal Flow)

Width and height of block-level elements/inline elements

• What is the height of the following elements?

• Is that what you thought it was? What could have caused that? Line up?

• Take a look at

Is nomal!!! , assuming it causes it, then 28.8/20 = 1.44 and the row height defaults to 1.44, is this correct? I don’t think the reasoning is rigorous. What if I had a different font?

Here is the default fontAfter changing TahomaYes, you read that right, it has changed 🙃, so is it because the line height of different fonts is different?

What is the line height for each font?? 😳 😳 😳 🚑 🚑 🚑 🚑

First of all, we need to know about fonts:

• Words are aligned with each other through baselines, not midlines
• Two lines of text are next to each other

• Therefore, designers will give a suggested line height when designing fonts

So you get the default line height that the font designer put in. That’s why the height of its div is an indeterminate value when you write font size: 20px. Why? Since 28.8 was recommended by the font designer, give a line height: 30px and it won’t change. \

conclusion

When we write a 1 inside a div, the height of the div is determined (by the font of the word) ❌ (its recommended line height), regardless of the size of the word.

The height of this div is determined by the row height.

If there is only one inline element in a div, then the height of the div is the height of the row of the inline element, the row (row box).

Why did I type a lot of Spaces? It only shows one space, because HTML will indent the extra space and add to it   (no break space) it can be empty two lines, or full space. The width of Spaces varies from font to font and is determined by the designer.

text-align: justify;

Multi-line text, not given this property is not sidelinedAfter add the“How do you align the two ends of your name?”

Use: after

Name alignment details code:

👉 🏻 link

When looking at 👇, a carriage return with two Spaces eventually becomes a spaceThis is the nature of HTML, which removes all but the inline elements from the page and displays all invisible characters between inline elements (inline, inline-block) as a space. Example: Problem with ul list 👇So what’s the solution? Don’t use inline-block 👇If there are enough inline elements, a line will wrap itself, which is called a document stream.

Let’s look at an exampleWhy is this happening?



The Chinese word for “hello” is written with the letter nihao, which means two characters in Chinese and one character in English, with the letters ahhhh… It is recognized as a single word, but there is no such word in real English. If necessary, you can add a hyphen (-), and the browser will know that it is two characters.

Can I never hyphen it and break it?

useword-braek: break-all;It means you can cut it when you want, regardless of whether it’s a unit or not.

conclusion

What determines the height of a div when it has only inline elements? Work-break: break-all if there is a long string of words in the middle, use work-break: break-all.

Text overflow ellipsis (multiple lines)

The width of div is not text-dependent

Single-line text overflow ellipsis

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

Multiline text overflow elision

Just Google itcss multiple line ellipsis 3 rows

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
Copy the code

2 rows

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

For IE (whatever)

The text is centered vertically

The above method can center the text vertically, but there is a problem with it. If there are too many words (omit single lines), the following situation can occur: 👇.Ugly very ole, the code is too dead, use the following writing method, the text is in the centerThe advantage of writing this way is that you don’t have the same kind of bug as beforeThat is to say: height = line height + inside margin, don’t write height dead!!

Margin merging

Add margin beforeAfter add marginIt’s not getting higher!! Merged margin If the parent element has nothing to block margin, then the margin of the child element is merged with the upper and lower margins of the parent element. Okay

If there’s a div inside of a div, then the height of that div is determined byThe height of the div inside it + padding + margin.

So how do you cancel the merger? Add apaddingOthers such as Overflow: Hidden are not recommended and will use side effects

Width values such as Max /min-content and fit-content

Zhang Xinxu fit – the content

Width: fit-Content Allows elements to shrink while keeping the original block level

Stack context

The stacked sequence

1. background
2. border
3. block-level
4. floating
5. inline
6. z-index: 0
7. z-index: +

If the sibling elements overlap, then the back covers the front body 👉🏻Code link

Stack context

MDN Stack context

A stack scope, like a BFC, cannot be defined, but certain properties are known to trigger a stack context.

• Document root element (< HTML >);

• Elements whose position is absolute or relative and whose Z-index is not auto;

• Elements whose position is fixed or sticky (sticky is suitable for all mobile browsers, but not for older desktop browsers);

• Flex (flexbox (en-us)) with z-index not auto;

• Grid (grid) container, and z-index is not auto;

• Any element with a value less than 1 (see the specification for opacity);

• Elements whose mix-blending-mode attribute is not normal;

• Any of the following elements whose attribute value is not None:

  • transform
  • filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border

• Isolation element with attribute value of ISOLATE;

• -webkit-overflow-scrolling for elements in touch;

• The will-change value sets any property that, at non-initial, creates elements of the cascading context (see this article);

• Contain elements that contain layout, paint, or any of them (e.g. contain: strict, contain: Content).

The stack context mainly affects z-index

Mobile page

Configuration environment:

npm i -g http-server
http-server -c-1
Copy the code

Media queries

• @media (max-width: 800px){}If the media width is between 0 and 800px, query it
• @media (min-width: 801px){}If the media width is greater than 800px, query it
• @media (min-width: 320px) and (max-width: 375px){}If the media width is between 320 and 375px, query it
• <link rel="stylesheet" href="style.css" media="(max-width: 320px)">This will only work if the device has a maximum width of 320px.

meta viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
Copy the code

Viewport width = device width Whether the user can zoom: do not initial zoom/Max zoom/min zoom 1.0 \

Viewport-fit =cover (for iPhoneX)

IOS11 new features, apple in order to adapt iPhoneX to an extension of the existing viewport meta tag, used to set the layout of the web page in the visual window, can set three values:

• Contain: a visual window that contains everything on the web
• Cover: The content of the web page completely covers the visible window (right)
• Auto: indicates the default value, which is the same as the contain

Flex layout

For the Flex layout of Google a ha, everyone has a systematic summary of what I often see here is written daily 👉🏻 link 🔗

Then I recommend some practice websites:

• css-tricks
• Flexbox Playground
• The frog crossing the river

When it comes to CSS, it must look at Zhang Xinxu’s blog

• Flex layout
• In-depth understanding of Flex properties

The following is a summary of the articles. For details, please see Zhang Xinxu’s blog 👉🏻 here

Small effects of using Flex layout:

• The last element is margin-xxx: auto

• Use Flex to implement some layouts

Flex before

The main layout used

• normal flow
• float + clear
• position relative + absolute
• display inline-block
• Negative margin

Flex arrival

1. Block-level layouts are vertical, inline layouts are horizontal, and Flex layouts are directional independent
2. Flex layouts allow automatic space allocation and alignment.
3. Flex layouts work for simple linear layouts, leaving grid layouts for more complex ones

The basic concept

Six properties of Flex Container

• Flex-direction (default row, left to right)

Parent added flex-direction: row-reverse; Properties, row from right to left

Parent added flex-direction: column; Properties, from top to bottom

Parent added flex-direction: column-reverse; Properties, from bottom to top

• Flex-wrap (flex does not wrap by default)

Parent added flex-wrap: wrap; Property, a newline display

• Flex-flow short for the above two
• Context-content Specifies the alignment of the main axis

justify-content: center

justify-content: space-between

justify-content: space-around

justify-content: flex-start

justify-content: flex-end

• Align-items Alignment of the side axis

align-items: stretch; Default, spread all elements out (as high as the highest element) if the height is not overwritten All elements move towards the starting point of the lateral axis, do not extend

align-items: center;Vertical center, to the center, do not extend

• Align-content Specifies the alignment of multiple rows or columns

align-content: space-between;

align-content: flex-start

align-content: flex-end;

Six properties of the Flex item

• Flex-grow percentage (when there is too much space)

flex-grow: 1; It eats all by itself. It takes up the rest of the space

Allocate the remaining space proportionally

• Flex-shrink ratio (when space is insufficient)

flex-shrink: 0; Often used when text and text mix, so that the picture is not flex.

• Flex -basis Default size

If you don’t write it, it’s the original size. If you write it, it’s the size assigned to it

• Flex is short for the three above

Flex: flex-grow flex-shrink flex-basis flex: 1 2 100px this element, when it grows, it eats 1 and when it shrinks, it spits 2, original 100px

• Order (order, instead of flying wings)

This is the compatibility of the major browsers

• Align-self Aligns itself

You can let each child choose their own alignment

example

1. Mobile page Layout (Topbar + Main + Tabs) link Product list (UL > Li *9) Using Flex layout -content: space between 3. PC page layout links 4. Perfect center

dis[lay: flex;
justify-content: center; 
align-items: center;
Copy the code

The Grid layout

An overview of the

CSS Grid Layout (CSS Grid Layout), a two-dimensional system, first set the Grid in the placement of elements, can handle rows and columns at the same time

reference

Rachel Andrew, Chris Coyier

The children of the Grid container are similar to ul> Li {} rather than ul Li {} Grid lines virtual Grid lines adjacent Grid tracks Grid cells Grid areas Set up grid lines for the parent, divide the area logically, and then make proper alignments for which boxes/grids the child elements should be placed on

Grid property list

All properties of the Grid Container (setting grid-related information)

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

All properties of Grid Items (setting their location/arrangement)

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self

How to use Grid layout

1. Display (define Grid attributes)

• Grid – Generates a block-level grid
• Inline-grid – Generates an inline-level grid
• Subgrid – If your Grid Container is itself a Grid Item (i.e., nested grid), you can use this property to indicate the size of its rows/columns that you want to get from its parent, rather than specifying its own size.

.container {
  display: grid | inline-grid | subgrid;
}
Copy the code

Note: Column, float, clear, and vertical-align have no effect on a grid container

2. Grid-template-columns/grid-template-rows (set grid columns/rows)

.container { grid-template-columns: <track-size> ... | <line-name> <track-size> ... ; grid-template-rows: <track-size> .. . | <line-name> <track-size> ... ; }Copy the code

Example:

Grid lines are automatically assigned numeric names if there are only Spaces between track values:

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}
Copy the code

fr

The FR can set the track size as part of the grid container’s free space. For example, the following code makes each Grid Item one-third the width of the Grid Container:

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

Free space is calculated after excluding all non-scalable Grid items. In the following example, the total amount of free space available in fr units does not include 50px:

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

3. Grid-template-areas

Define a grid template by referring to the name of the grid area specified by the grid-area attribute. Repeating the name of a grid area causes content to expand to those cells. A dot indicates an empty cell. The syntax itself provides a visualization of the grid structure.

Value:

• <grid-area-name>– Name of the grid area set with the grid-area property
• .– The dot represents an empty grid cell
• None – No grid region is defined

<div class="container">
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</div>
Copy the code

.container {
  height: 100vh;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 10% auto 10%;
  grid-template-rows: 50px auto 50px; 
  grid-template-areas: 
    "header header header"
    ". main aside"
    "footer footer footer"
}

.header {
  grid-area: header;
  background: red;
}

.main {
  grid-area: main;
  background: blue;
}

.aside {
  grid-area: aside;
  background: yellow;
}

.footer {
  grid-area: footer;
  background: grey;
}
Copy the code

Declare that each row has the same number of cells..To declare a single empty cell. There are no Spaces between the dots, representing a single cell.

This is in the named area. The grid lines at both ends of the region are actually named automatically.

grid-template

Short for grid-template-rows, grid-template-columns, and grid-template-areas

  grid-template-columns: 10% auto 10%;
  grid-template-rows: 50px auto 50px; 
  grid-template-areas: 
    "header header header"
    ".  main aside"
    "footer footer footer"
Copy the code

The above abbreviation is 👇

  grid-template: 
    "header header header" 50px
    ". main aside" auto
    "footer footer footer" 50px
    / 10% auto 10%
Copy the code

“Header header header” 50px means that each column is a header and each row is 50px high

“.main aside” auto The first column is empty the second column is main and the third column is aside, the height of this row auto

“Footer footer footer” 50px means that each column is a footer, and each row is 50px over 10% auto 10% means that the ratio of rows is 10% auto 10%

Grid-column-gap/grid-row-gap Gaps between columns and columns

  grid-column-gap: 10px;
  grid-row-gap: 15px;
Copy the code

Grid-column-gap Grid-row-gap Grid-row gap Each row

Grid-gap short for grid-row-gap and grid-column-gap

Context-items horizontal direction

Align-items vertical direction

Value:

• Start: Align content with the left end of the grid area
• End: Align the content with the right end of the grid area
• Center: Content is located in the middle of the grid area
• Stretch: Content width takes up the entire grid area (this is the default)

Context-content (alignment of the grid within the grid container)

Context-content values for a Flex-like layout:

• Start – The grid is aligned to the left of the grid container
• End – The grid is aligned to the right of the grid container
• Center – The middle alignment of the grid to the grid container
• Stretch – Resize the G RID item so that the width fills the entire grid container
• Space-around – Sets a space of equal width between grid items, with the outer edge space half the width of the middle space
• Space-between – Sets equal width white space between grid items, with no outer edges
• Space – instituted – a evenly spaced gap between each grid item, including the outer edge

Align-content Align-content is similar to flex layout

grid-auto-columns / grid-auto-rows

Specifies the size of automatically generated grid tracks (aka implicit grid tracks)

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
Copy the code

.container {
  grid-auto-columns: 60px;
}
Copy the code

Specifies the width of the implicit track

grid-auto-flow

Value:

• Row – tells the automatic layout algorithm to fill each row in turn, adding new rows as needed
• Column – tells the automatic layout algorithm to fill each column in turn, adding new columns as needed
• Dense – Tells the automatic layout algorithm to try to fill holes in the grid if smaller Grid items appear later

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}
Copy the code

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}
Copy the code

Grid Items

.item-a { grid-column-start: 2; grid-column-end: five; The grid - row - start: row1 - start; The grid - row - end: 3; }Copy the code

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}
Copy the code

grid-column / grid-row

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}
Copy the code

grid-area

Give a grid item a name

.item-d {
  grid-area: header
}
Copy the code

Grid-row-start + grid-column-start + grid-row-end + grid-column-end:

.item-d {
  grid-area: 1 / col4-start / last-line / 6
}
Copy the code

justify-self

.item-a {
  justify-self: start;
}
Copy the code

.item-a {
  justify-self: end;
}
Copy the code

.item-a {
  justify-self: center;
}
Copy the code

.item-a {
  justify-self: stretch;
}
Copy the code

align-self

.item-a {
  align-self: start;
}
Copy the code

.item-a {
  align-self: end;
}
Copy the code

.item-a {
  align-self: center;
}
Copy the code

.item-a {
  align-self: stretch;
}
Copy the code