1. CSS basics

1. What is CSS

Cascading Style Sheets (CSS)

2. The invention of CSS

The CSS concept was proposed in 1994, and the original proposal for CSS was made by Hakun Ley in 1994. Bert Bos was designing a browser called Argo, and they decided to design CSS together.

3. Advantages of CSS

Cascading style

You can style the same selector more than once

The selectors stack

You can style the same element with different selectors

File cascade

Multiple files can be stacked

These features make CSS extremely flexible

4. How do I determine which features the browser supports

  • Dozens of browsers were tested
  • Using caniuse

5. Syntax of the CSS

5.1. A grammar

Selector {property name: property value; /* comments */}Copy the code

Note:

  • All the symbols are in English
  • Case sensitive
  • No // comments
  • The last semicolon may be omitted, but it is not recommended
  • Any errors will not be reported and will be ignored by the browser

5.2. Grammar

@charset "UTF-8";

@import url(2.css);

@media (min-width: 100px) and (max-width: 200px) {Copy the code

Note:

  • @charset must be on the first line
  • The first two @ grammars must end with a semicolon
  • Charset is the encoding of characters. Utf-8 is the encoding of characters

5.3. Border debugging method

border 1px solid red;

Judge by the presence or absence of the red box

If it appears, it is correct, if it does not appear, it is wrong

Second, document flow

1. Normal layout flow

MDN: Detailed layout of the CSS

MDN: Normal layout flow details

1.1. Inline elements, block-level elements

【HTML】

<body>
<p>Firewood dog ears</p>
<ul>
    <li>Feed your ears</li>
    <li>Go out with your ears</li>
    <li>Wash your ears</li>
</ul>
<p>The day is over</p>
</body>
Copy the code

【 results 】

Notice that the HTML elements appear exactly in the order they appear in the source code — first paragraph, unordered list, second paragraph.

An element that appears below another element is described as a block element, as opposed to an inline element that appears next to another element, which is like a single word in a paragraph.

In new H5, display: inline is an inline element, and display: block is a block-level element

1.2. Flow direction of inline elements and block-level elements

  • display: inlineFlow from left to right
  • display: blockIt flows from top to bottom
  • display: inline-blockFlows from left to right, but the elements do not exist across rows

Width of 1.3.

  • The width of the inline element is the total width of the internal inline elements. Width does not define the inline width (do not put block elements in inline).
  • The width of a block is self-defined and can be specified by width (never write width 100%).
  • Inline-block combines both features. The default width is similar to inline, but can be specified with width

Height of 1.4.

  • Inline height is determined indirectly by inline-height, not by height.
  • The height of the block is determined by the height of the internal document flow element (some elements can be separated from the document flow). You can set height
  • Inlet-block is similar to block by default, and can set height

2. overflow

MDN: Overflow overflow

The CSS property overflow defines what to do when the content of an element is too large to fit into a block-level formatting context. It is a shorthand attribute for overflow-x and overflow-y.

Overflow value:

div { 
    border: 2px solid gray;
    height: 30px;
    
    / * * / value of overflow
   
    overflow: visible;
    /* Out of sight. The default value. Content is not pruned and can be rendered outside the element box. * /
   
    overflow: hidden;
    /* Beyond part hidden. If needed, the content will be tailored to fit the fill box. Scroll bars are not provided. * /
    
    overflow: scroll;
    /* The part beyond is seen in scroll mode. If needed, the content will be tailored to fit the fill box. The browser displays a scroll bar, regardless of whether anything is actually clipped. (This prevents the scroll bar from appearing or disappearing when the content changes.) The printer may still print the overflow. * /
    
    overflow: auto;
    /* Displays the scroll bar beyond the limit. Depends on the user agent. If the content fits inside the fill box, it looks the same as the visible content, but a new block formatting context is still established. If the content overflows, the desktop browser provides a scroll bar. * /
}
Copy the code

3. Get out of the document stream

MDN: In Flow and Out of Flow

[HTML]

<body>
  <div class="div1">
      <div class="div2"><span>hello</span></div>
  </div>
</body>
Copy the code

“CSS”

.div1{
    border: 1px solid green;
}
.div2{
    border: 1px solid red;
}
span{
    position: absolute;/* or fixed, out of the document flow */
    float: left;/ * * / or right

}
Copy the code

position: absolute

Elements are removed from the normal document flow. No space is reserved for the element, and its position is determined by specifying the offset of the element relative to the nearest non-static positioned ancestor element. Absolutely positioned elements can be set to margins and won’t merge with other margins.

position: fixed

Elements are removed from the normal document flow, and no space is reserved for them. Instead, they are positioned by specifying their position relative to the screen viewport. The position of the element does not change as the screen scrolls. When printing, the element will appear in a fixed position on each page. The fixed property creates a new cascading context. When the element ancestor’s transform, Perspective, or filter attribute is not None, the container changes its viewport to that ancestor.

position: float

The CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it. This element is removed from the normal flow of a web page (document flow), although it remains partially fluid (as opposed to absolute positioning).

3. Box model

MDN: Detailed explanation of box model

When a document is laid out, the browser’s rendering engine represents all elements as rectangular boxes, according to one of the standards, the CSS Basic Box Model. CSS determines the size, location, and properties of these boxes (such as color, background, border size…). .

3.1. Composition of box model

Each box consists of four parts (or regions) whose respective utility is defined by their respective edges (possibly meaning to accommodate, contain, restrict, etc.). As shown, corresponding to the four constituent areas of the box, each box has four boundaries:

Content Edge: This area is used to display Content, which can be sized by setting width and height

Padding Edge: The empty area surrounding the content area; The size is set using the padding property.

Border Edge: The Border box wraps the content and the inner margin. The size is set by the border attribute.

Margin Edge: This is the outermost area, the empty space between the box and other elements. The size is set by the margin attribute.

3.2. Properties of content flows in the Controller enclosure

See Overflow in the previous section

These include: overflow; Overflow – x; overflow-y

3.3. Properties of the size of the controller enclosure

3.3.1. Box – sizing

MDN: Box-sizing

The box-sizing property in the CSS defines how users should calculate the total width and height of an element.

box-sizing: content-box;
width: 100%;
Copy the code

Content-box is the default. If you set the width of an element to 100px, the content area of the element will be 100px wide, and the width of any borders and margins will be added to the width of the final drawn element.

box-sizing: border-box;
width: 100%;
Copy the code

Border-box tells the browser that the border and margin values you want to set are contained within width. That is, if you set the width of an element to 100px, then the 100px will contain the border and padding. The actual width of the content area is width minus (border + padding). In most cases, this makes it easier to set the width and height of an element.

3.3.2 rainfall distribution on 10-12. Height

MDN: height

The height CSS property specifies the height of an element. By default, this property determines the height of the Content Area, but if box-sizing is set to border-box, it determines the height of the border area.

3.3.3. width

MDN: width

The width property is used to set the width of the element. Width Sets the width of the content area by default, but if box-sizing is set to border-box, it sets the width of the border area instead.

3.4. Control the Margin property

MDN: margin details

The margin attribute sets all four (up, down, left, and right) margin attributes for a given element. Margin-top, margin-right, margin-bottom, and margin-left margin attributes.

3.5. Margin of consolidation

3.5.1. What is margin merge

You can also call it margin overlap

MDN: details of margin overlap

The margin-top and margin-bottom margins of a block are sometimes merged (folded) into a single margin of the maximum size of a single margin (or only one of them if they are equal). This behavior is called margin folding.

3.5.2. Merge of adjacent sibling elements

Ex. :

Goal: 150px distance between siblings

Set two sibling block-level elements

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
<div class='brother'></div>
<div class='sister'> </div>
</body>

</html>
Copy the code

【CSS】 Elder brother set the bottom distance to 50px, younger sister set the top distance to 100px

body{
    margin:0;
    padding:0;
}
.brother{
    width:100px;
    height:100px;
    background: #709ce8;
    margin-bottom:50px;
}
.sister{
    width:200px;
    height:200px;
    background: #6edc63;
    margin-top: 100px;
}
Copy the code

【 results 】

As you can see, although the upper and lower distances are set at 50px and 100px respectively, the distance between brother and sister is still 100px, not 150px.

The margins between adjacent sibling elements are merged with the previous maximum

3.5.3. Block-level parent element and its first/last child element

Ex. :

Goal setting: The son in the parent element needs to be 50px away from his father

【 HTML 】 Set the parent block to father, where there are sons and daughters block

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
<div class='father'>
    <div class='son'></div>
    <div class='daughter'></div>
</div>
</body>

</html>
Copy the code

【CSS】 Set the top distance to 50px for the son

.father{
    width:400px;
    height:300px;
    background: red;
}
.son{
    width:300px;
    height:100px;
    background: yellow;
    margin-top: 50px;
}
.daughter{
    width:200px;
    height:100px;
    background: blue;
}
Copy the code

【 results 】

It can be seen that the son is not 50px away from the father, but 50px from the top, and the father and son blocks merge

3.5.4. Empty block level

Example: [HTML] Add space blocks between siblings

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
<div class='brother'></div>
<div class="space"></div>
<div class='sister'></div>
</body>

</html>
Copy the code

【CSS】 Space set the top space to 50px and the bottom space to 100px

body{
    margin:0;
    padding:0;
}
.brother{
    width:100px;
    height:100px;
    background: #709ce8;
}
.sister{
    width:200px;
    height:200px;
    background: #6edc63;
}
.space{
    margin-top: 50px;
    margin-bottom: 100px;
}
Copy the code

【 results 】

As you can see, the top and bottom margins of the space block are merged, and the siblings are 100px apart

3.5.5. How can a merger be prevented

Sibling merging is as expected, and sibling merging can be eliminated with inline-block;

Special case: [CSS] Brother set float, sister cleared float

body{
  padding-top:1px; // If not set,bodyAnd graydivThere will be parent and child elementsmarginMerge}.brother{
    width:100px;
    height:100px;
    background: #709ce8;
    margin-bottom:50px;
    float: left;
}
.sister{
    width:200px;
    height:200px;
    background: #6edc63;
    margin-top: 100px;
    clear: both;
}
Copy the code

【 results 】

The distance from the top of the sister is 100px. Since the elder brother has to be below him, the lower distance of the elder brother is 50px, but what if the upper distance of the younger sister is 200px? See below: [Effect]

The sister will be 200px away from the top and 100px away from the brother

Parent/child merge covered by padding/border; Parent-child merge with overflow: hidden; Parent-child merging is blocked with display: flex

[HTML]

 <div class="parent">
     <div class="child">First child</div>
     <div class="child">Second child</div>
     <div class="child">Third child</div>
 </div>
Copy the code

“CSS”

.parent{
    margin: 30px 0;
    background: red;
    overflow: hidden;/* Prevent parent and child merge */
}
.child{
    border: 1px black;
    margin: 30px 0;
    display: inline-block;/* Prevent brothers from merging */
}
Copy the code

3.5.6. Summary

  1. Elements where margin merging occurs: between block elements (parent, brother, empty block); Margin merges: top and bottom margins (left and right margins do not merge);

  2. Margin merging must occur between adjacent siblings (unless the latter siblings need to clear past floats);

  3. A top margin merge occurs between the parent element and the first child element if there is no padding, BORDER, inline content, or clear float.

  4. A margin merge occurs between the parent element and the last child element if there is no padding, border, inline content, height, min-height, or max-height.

  5. An empty block-level element whose border, padding, inline content, height, and min-height are not present will have its upper and lower margins merged.

3.6 Control the properties of the inner margin Padding

This property is shorthand for the following properties:

padding-bottom

padding-left

padding-right

padding-top