Guys, keep up the work and hope I can go further and further on the road to systematic learning

Reread MDN to check and fill gaps

First of all, the content of this article and MDN overlap rate is very high, because the main reference to MDN to write (review ~!!) . Rather than spreading knowledge, I wanted to make my own knowledge more systematic (go!!).

The word “TODO” in the article is meant to remind myself that I still have knowledge that I can use as a topic for future blog posts (or continuation or expansion).

What is CSS

We always say that HTML is responsible for the structure of the document, CSS is responsible for the style of the document, and JS is responsible for some of the behavior of the document.

Specifically, CSS can control the color, background, border, length and width of some parts of the document. I think he also has a role in recreating the structure of the document. This kind of recreating should be called “layout”, such as floating some places, positioning… You can control where the block can be placed.

Chinese name

Cascading style sheets

grammar

The following code represents a rule, and a CSS stylesheet can contain many rules.

Selector {property: value; }Copy the code

More and more

We don’t need to memorize all the CSS styles, just know how to search for them when we need them. But in a practical sense, we should also keep in mind some common CSS styles and their values.

How to add CSS/CSS build style

In the past we said there were three ways; now we say there are four ways:

  • Inline style (not recommended, difficult to maintain code)
<div style="background: red"></div>
Copy the code
  • Internal style
<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>
Copy the code
  • External style sheets
<head>
    <link rel="stylesheet" type="text/css" href="CSS file address">
</head>
Copy the code
  • Import Import style

Import mode refers to the use of CSS rules to import external CSS files.

<style>
    @import url(style.css);
</style>
Copy the code

The last one is the fourth one.

As you can see, both link and import import a style from the outside into this file. What’s the difference?

<link>and@importThe difference between

  • One is the grammar of writing, see above.
  • One is againattributionDifferent,<link>Is an HTML tag,In addition to loading CSS, you can do many other things, such as defining RSS, defining REL connection properties, etc. but@importIs CSS syntax, can only load CSS,
  • <link>Asynchronous, does not block page loading,@importSynchronize, the page will load after loading.
  • There is also a compatibility issue, the lower version of @import is not compatible.

This is an old question, but I think it needs to be verified, because I have read some statements on the Internet, that both will block the page load, but also is different sound. But I haven’t tested it myself. TODO

The selector

To be honest, I use element selectors, class selectors, ID selectors, and parent and child selectors the most. But certainly not only know so much, that more selectors we will talk about later in this article ~

CSS content

As we mentioned above, a CSS style sheet can contain many properties and values. \

Attributes and values

Something like this:

Selector {property: value; attribute1(property) : value1(value); . }Copy the code

Shorthand properties

Simply put, you can replace multiple attributes with one attribute. The most common attributes are: font, background, padding, border, and margin

@ rules

In addition to properties and values, we can also write @rules in CSS. The @import mentioned above is one such rule.

For example, if the browser width is greater than 30em, the background color will be blue.

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue; }}Copy the code

How CSS works (how to load render)

MDN gives you a picture like this,

Conditional can be combined with Li Bing teacher explained [from the input URL to the page display, what happened in the middle? Look at this picture, if you don’t understand it, skip it.

A simplified version of a web page that the browser loads

  1. The first step is to get the HTML file, usually by making a connection and making a request to get the document from the server.
  2. The HTML document is then parsed, parsing the contents into DOM nodes. (PS: DOM- Document object Model, tags are DOM tags, more on that later.
  3. When parsing the document, some CSS resources will also be requested (in addition to CSS resources, there are some images, videos, JS, etc., here we first say CSS
  4. Once you get the CSS, you parse the CSS file, find the node of your choice for each selector, and integrate the styles, so to speak, to build the render tree.
  5. After the rules are integrated, the rules are applied to the render tree, which is laid out according to the rules.
  6. Finally, the page is displayed on the page (this step is called coloring

What is the DOM

As mentioned above, HTML is parsed into DOM nodes. What is DOM

Open the console, type Document, and this is the root node of the document, the outermost DOM element.

Each element is a DOM node

(The above are personal understanding, you go to Baidu to Google, refueling

What if CSS encounters an unknown property

I’ll skip it.

This is why the new style works on older browsers without error.

I don’t know you and I don’t care.

Some concepts in CSS

cascading

Cascading Style Sheets CSS: Cascading Style Sheets

How do you understand this “cascade”?

Simply put: At the same level, later styles override previous styles. In this example, the blue will overwrite the red, resulting in blue.

h1 { 
    color: red; 
    color: blue; 
}
Copy the code

priority

So we said, well, at the same level there’s going to be a cascade, but how do we determine that level? Simply put: If he has a higher priority, he has a higher rank

The more specific the element the selector points to, the higher its priority. For example, in general, element selectors take precedence over ID selectors. TODO

  1. Thousands: inline
  2. Hundreds: ID selector
  3. Tens: class selector, attribute selector, pseudo class
  4. Bits: element selector, pseudoelement selector

inheritance

Some properties are inheritable and some are not.

Inheriting is usually a first instinct. So I feel like I don’t have to remember. Width, height, border, margin, padding

If borders could be inherited, every list and list item would get a border — probably not what we want!

Control the inheritance

CSS provides four special generic property values for control inheritance. Each CSS property receives these values.

Four property values: Inherit (enable inheritance), Initial (inherit from the browser style sheet), unset (inherit from the browser, inherit from the browser), and En-us (no browsers support this property)

For information on these four attributes, see this article: CSS keywords: Initial, inherit, unset, revert.

Reset all property values

There is a property all, and you can apply the four inheritance values above to almost any property. CSS keywords: Initial, inherit, unset, revert.

The selector

MDN: selector reference table

Pseudo class, pseudo element

A pseudo-class is something that I don’t have to create a class name in my document, so I can select an element, and I can replace a pseudo-class with a specific class name and a pseudo-class element is, say, the first line of text, which is like I’m extracting the first line and making it a new element (or wrapping the first line with a new element, The first line of the selected text is a pseudo-element.

Pseudo-class one colon pseudo-element two colons (remember small trick: class, is a word; Element, two words)

Pseudo class reference table Pseudo element reference table

Some of the selectors I can’t tell apart

Descendant selectors: ancestor > Sons grandchildren Child element selectors: Father > Sons Adjacent sibling selectors: elder brother + next to one of his younger brothers Universal sibling selectors: a male ~ his younger brothers (p ~ span: select all span after P)

Selector reference table

Property selector – “Presence and Value selector”

Presence and value selectors

You can see an interesting thing, this thing youdao translation “existence and value selector”, MDN Chinese translation “existence and value selector”, Google Translation “existence and value selector”.

All it really boils down to is matching whether an element has an attribute or not, and even specifying what value that attribute should have or contain

Now check it out

Property selector – “Substring Match selector”

Substring matching selectors

  • Li [class$=”a”] matches any class value ending in a

  • [class*=”a”] matches any class value that contains a

  • Li [class^=”a”] matches any class beginning with a

    class="a" (y) class="abc" (y) class="bc a" (x) class="bc" class="a" ==> class="bc a" (x) class="a" class="bc" ==> Class ="a BC "(y), so just to summarize, it can only occur at the first value of class, the first string. My personal feeling is limited. It is not conducive to extended maintenance.Copy the code

Property selector – Case sensitive

I don’t want to be case sensitive, so I’ll put an I at the end

  • li[class^="a" i]Can matchaThe beginning can also matchAAt the beginning
  • li[class^="a"]Can only matchaAt the beginning

The box model

Block boxes and inline Boxes

Block boxes and inline boxes, I don’t want to say a lot. Not only display:block, display:inline, display:table, etc. TODO

To recap, block-level boxes correspond to block-level elements: they occupy a single line and can have a width and height, which by default is the same width as the parent box. Margins, margins, and borders take up space and push other elements away.

The inline box corresponds to the inline element, does not wrap, every width height, pure by the inside of the content.

Vertical margins, margins, and borders are applied but do not push other boxes in the inline state away.

Horizontal inner margins, margins, and borders are applied and push other boxes in the inline state away.

Standard box model

IE Box Model (Weird box model)

Width = Content + padding + border

The graph gradually perfunctory…

Background and border

Direction of text

I don’t have to say more, what direct MDN OK

From overflow to BFC

The main property is overflow, which is visible by default.

Overflow: the difference between auto and scroll

Overflow: Scroll will hide all overflow content and make the scroll bar appear on the related element. If the content does not overflow, the scrollbar is still visible but disabled.

Overflow: Auto is very similar, but the scroll bar only appears when content overflows.

There is another difference between auto scroll and overflow scroll. The difference between auto scroll and overflow scroll is whether the scroll bar component is inside or outside the width. But I failed to verify whether the scrollbar was present or whether the component width was within the content width. It may be that each site has a certain initial style to unify the overall style of the site, or it may be that the browser now unified the style of the display. TODO

BFC block formatting context

Block Formatting Context

I like this explanation: good for layout. To be honest, his description is somewhat similar to block-level elements. I think the obvious difference is that BFC “what is inside the container does not affect what is outside, and vice versa”.

Now you don’t have to worry too much about it, but you should know that when you use things like Scroll or Auto, you’re setting up a block-level layout context.

As a result, if you change the overflow value, the corresponding box becomes smaller. Nothing outside the container can blend into the container, and nothing can protrude from the box into the surrounding layout.

When scrolling is enabled, all the contents of your box are contained and not obscured by other objects on the page, resulting in a coordinated scrolling experience.

A more detailed article on BFC is here: CSS Block-level Formatting Context (BFC)

And this (I really like it) : BFC, IFC, GFC, FFC concept understanding, layout rules, formation methods, use analysis

MDN tutorial is here: Block formatting context

Tapping on the knowledge I want to remember:

How to form a BFC

  • The root element (a BFC of its own
  • Float is not none
  • Overflow is not visible (not the default, but hidden, scroll, auto)
  • Display is not none (elastic layout grid layout what also form BFC
  • Absolute position element (Position: absolute position, fixed position fixed

BFC layout rules

  • The inner boxes will be placed vertically one by one
  • The distance in the vertical direction is determined by the “margin”, but the margin overlap occurs in the vertical direction
  • The margin-left edge of each element overlaps the left edge of the BFC
  • BFC does not overlap with the floating box (block)
  • When calculating the height, the BFC takes into account the height of the floating element
  • What’s inside the container doesn’t affect what’s outside, and vice versa

In fact, don’t look at this “wow a lot of rules ah”, the heart drum (👖👖 😭, is the old me..) . In fact, just think about it, the root element is also a BFC. Usually, block elements occupy a row by themselves, so it seems that “internal boxes are placed vertically one by one” margin collapse is a problem that will be met, how to solve it? Put the corresponding elements of the two margins into a BFC. Keep it simple. Does every inline element run from left to right? The block element takes up less than the entire browser width, and it’s right next to the left side of the screen, right? The left edge of the element overlaps the left edge of the BFC. Why doesn’t a BFC coincide with a float? Floating can also cause BFC. Two BFC’s can’t be together!! (miss

Landing the purpose

What’s the use?

  • To preventmarginoverlap
  • Prevent height collapse caused by floating
  • Adaptive layout, etc

CSS value and unit

What is a value?

div{
  color: red;
  font-size: 16px;
}
Copy the code

Color is the attribute and red is its value.

The unit? The px in 16px is the units.

OK, now that we know what a value is and what a unit is, let’s go through the details one by one:

What are the values?

Numerical length percentage

Integers, decimals, percentages, and numbers with units

digital

Pure values, such as transparency:

.box {
  opacity: 0.6;
}
Copy the code

Note: When you use a number as a value in CSS, it should not be enclosed in quotes.

The length of the

Absolute length: e.g. Px relative length: e.g. Vh, vw, EM, rem

In general, in typographical properties the EM unit means “font size of the parent element.” In general, the REM unit means “font size of the root element.”

The percentage

Percentages are based on what TODO

color

Hex RGB value

 background-color: #02798b;
Copy the code

RGB

 background-color: rgb(197.93.161)
Copy the code

RGBA

The following decimal controls transparency, with 0 being completely transparent and 1 being completely opaque

  background-color: rgba(2.121.139.3);
Copy the code

HLS

Hue, saturation, brightness

  background-color: hsl(174.77%.31%);
Copy the code

HLSA

Hue, saturation, brightness, transparency

  background-color: hsla(174.77%.31%.9);
Copy the code

The picture

Control the image address via url()

  background-image: url(star.png);
Copy the code

There are positions, strings and identifiers, functions, and so on

MDN link here, help yourself. TODO

CSS Resize

Set width, height… Control the size by those percentages %, VH, and so on.

And Max -, min- those attributes, will use the line.

Practice makes perfect. It’s not particularly interesting.

Images, media, and form elements

Let’s start with the concept of replacement elements, which means THAT CSS cannot affect the internal layout of these elements – only their placement among other elements on the page.

Images and video are called replacement elements.

Some replacement elements, such as images and video, are also described as having aspect ratios. This means that it has size in both horizontal (X) and vertical (y) dimensions, and will be displayed using the inherent dimensions of the file by default.

We can set specific values for the width and height of the image to control its size. But there’s another attribute we need to be aware of:

object-fit

This property allows you to stretch the image, to display it within a certain range.

For example, an image that looks like this (default object-fit: fill;) :

If you want to crop out a portion to fill the entire area, use object-fit: cover;

If you want to contain an image, use object-fit: contain;

Replacement elements in the layout

Now we’re dealing with images.

In some elastic and grid layouts, the replacement elements have their own default behavior, which can be interpreted as the default style, just remember to debug.

The form

Forms generally do not inherit font styles, so when we use them, we should reset the form font like this

button.input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
} 
Copy the code

Then suggest the following to prevent scrollbars from appearing when they shouldn’t.

textarea {
  overflow: auto;
}
Copy the code

Practice makes perfect. Come on!

Font layout and stuff like that

Pick up a few that I can’t quite remember

text-align

Controls how text aligns with the content box it is in.

Justify left, right, right, center, and justify justify both sides

Text-align: center You can set text horizontally centered

line-height

Line height = box height, you can center text vertically

Some other properties worth looking at

CSS layout

Open a new one to write the layout ~ ~ ~ later put the link back.

Come come come ~ ~! Here it is: front-end so much layout a little bit