CSS basic summary

CSS introduction

1. What is CSS

CSS is a markup language. CSS is mainly used to set the text content (font, size, alignment) of the page, the shape (width, border style, margin) of the picture, as well as the layout and appearance display style of the layout.

2. Role of CSS

CSS makes our web pages more colorful and layout more flexible.
CSS can beautify HTML, make HTML more beautiful and make page layout simpler.

I Fundamentals of CSS syntax (I)

1. Structure of main parts of CSS * *: selector and declaration style

2. Syntax specification of CSS:

Selectors are html tags used to specify styles, and the specific styles set for the object are in curly braces.
Attributes and attribute values appear as key value pairs.
Attribute is the style attribute set for the specified object, such as font size, text color, etc.
Attributes and attribute values are separated by English colons.

Multiple key value pairs are distinguished by semicolons.

p {
            color: blue;
            font-size:20px;
        }

1. CSS selector

1. Classification of selectors

Selectors are divided into two categories: basic selectors and compound selectors.
The base selector consists of a single selector.
Basic selectors include: label selector, class selector, id selector and wildcard selector.

2. Function of selector

Selector is to select different labels according to different needs.

1.1 label selector

html tag name as selector

The tag selector can select all the tags of a certain type.
It can quickly set the style for the same type of labels in the page.

You cannot design a differentiated style. You can intelligently select all the current labels.

<body>
    <p>paragraph</p>
    <div>Box</div>
</body>

p {
            color: aqua;
        }
div {
            color: blueviolet;
        }

Type 1.2 selector

Use class name as selector

Select different labels for differentiation, and select one or more labels separately.
Class selector use Is represented, followed by the class name
Long name class names can be named with -

Use English letters for naming

<body>
    <div class="blue">Black Sweater </div>
    <div class="star-sing">Qilixiang</div>
</body>

 .blue {
            color: blue;
        }
 .star-sing {
            color: chocolate;
        }

Use of multiple class names for class selectors

You can put some styles (common parts) with the same label into a class

These tags can call the public class, and then call their own unique class

<body>
    <div class="box red">gules</div>
    <div class="box gree">green</div>
</body>

.box {
    width: 100px;
    height: 100px;
}

.red {
    background-color: red;
    font-size: 20px;
}

.gree {
    background-color: green;
    font-size: 30px
}

1.3 id selector

Use id name as selector

The id selector can specify a specific style for HTML elements marked with a specific
HTML elements use the id attribute to set the id selector, and CSS uses # to define the id selector

The id attribute can only appear once in each HTML document

<body>
    <div id="pink">Michael·Jackson</div>
    <div>Lau Andy</div>
</body>

#pink {
    color: pink;
}

The difference between id selector and class selector

Class selectors are similar to names. A name can have many people with the same name.
id selector is like the id number of everyone.
The biggest difference between id selector and class selector is the number of times they are used.
Class selectors are most used in modifying styles. id selectors are generally used for the unique elements of the page and are often used with js.

1.4 wildcard selector

The wildcard selector is defined with * to indicate that all elements (all labels) in the page are selected
Wildcard selectors do not need to be called and automatically use styles for all elements
It is only used in special cases, such as clearing the inner and outer margins of all element labels
```
* {
  margin: 0;
  padding: 0;
}
```

2. CSS font properties

Define font series, size, thickness, text style, etc.
font: weight | size | style | family | ...

2.1 font weight setting font weight

Font weight: normal (default) | boder
font-weight: 400/700
400 is equivalent to nomal (default) and is not bold
700 is equivalent to bold boder

Recommended numbers for development

h2 {
            font-weight: 400;
            /* font-weight: normal; */
        }
.bold {
            font-weight: 700;
            /* font-weight: bold; */
        }

2.2 font size setting font size

In general, you can specify the size of the whole page text for the body
The title label is special, and the text size needs to be specified separately
```
body {
	font-size: 18px;
}
```

2.3 font style setting font style

Font style: normal (default) | Italic (italic)
Usually we seldom add italics to the text. Instead, we should change the italics label em to a non inclined font
```
p {
            font-style: italic;
        }
em {
            font-style: normal;
        }
```

2.4 font family setting font family

Chinese can be used, English is recommended, and multiple can be defined. The first one is used by default, and the next one is used if there is no one
Multiple word fonts can use quotation marks

It is often defined in the body tag in development

h2 {
            font-family: 'Microsoft YaHei '
        }
body {
            font-family: 'Song style','Microsoft Yahei',tahoma,arial, 'Hiragino Sans GB';
        }

2.5 compound writing of font attributes

font: font-style font-weight font-size font-family
Be sure to write in this format order, separated by spaces
If they are all default values, font size and font family must also be retained

font: italic 700 16px 'Microsoft yahei'

3. CSS text properties

CSS text properties define the appearance of the text.
Such as text color, text alignment, text decoration, text indentation, line spacing, etc

3.1 color setting text color

color: word name | hexadecimal | rgb form

The most commonly used form in development is hexadecimal form

  div {
            /* color: red; */
            color: #ff008c;    
            /* color: rgb(76, 0, 255); */
            
        }

3.2 text align setting text alignment

text-align: left | center | right
There are three ways to align text: left alignment, right alignment, and center alignment
```
h3 {
            text-align: center;
        }
```

3.3 text decoration setting

text-decoration: none | underline | overline | line-through
Decorative text: the most commonly used are underline and default wireless. Dashes and strikeouts are not commonly used
```
h1 {
            text-decoration: underline;
        }
a {
            text-decoration: none
        }
```

3.4 text indent setting text indent

Text indent: pixel distance
You can specify the indent pixel or 2em. The distance between the indented two text sizes EM is the relative unit, which is indented relative to the current font size
```
p {
            /* text-indent: 20px; */
            text-indent: 2em;
        }
```

3.5 line height setting text line spacing

Line height: pixels
Text line spacing: composed of text height, top spacing and bottom spacing
The height of the text line is equal to the height of the box, which can center the elements in the box vertically
```
   p {
            line-height: 25px;
        }
```

4. Introduction of CSS

According to the writing position of CSS style, CSS style sheets can be divided into three categories:
1. Internal style sheet (embedded)
2. Inline style sheet (inline)
3. External style sheet (linked)

4.1 internal style sheet

Write to the inside of the html page. Is to take out all the CSS code and put it separately in the < style > tag.
< style > can theoretically be placed anywhere in an HTML document, but it is generally placed in < head >.
In this way, you can easily control the element style setting of the whole current page.
The code structure is clear, but it does not completely separate the structure from the style.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        div {
            color: blue;
        }
    </style>
</head>
<body>
    <div>Internal style sheet</div>
</body>
</html>

4.2 inline style sheet

The inline style sheet is suitable for the case where the style modification is relatively simple and few

Use style = "attribute: attribute value" directly in the label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>

    <div style="color: deeppink;font-size: 16px;">Fortunately, it was planted to sing</div>

</body>
</html>

4.3 external style sheet

The actual development is an external style sheet, which is suitable for the situation with many styles
The style is written into the CSS file separately, and then the CSS file is introduced into the HTML file for use

newly build. css suffix file, write css code to the file

In HTML pages, it is introduced through the link tag css file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External style sheet</title>
    
    <link rel="stylesheet" href="07_Of external style sheets css file.css">
</head>
<body>
    <div>HTML Responsible for writing HTML Code of,CSS Responsible for writing only CSS Code of</div>
</body>
</html>

5. Commissioning tools

1. Chrome debugging tool

Open the debugging tool - chrome F12
Elements element
html on the left and css on the right

2. Use the chrom e debugging tool

ctrl + scroll wheel to enlarge the code size
The css style on the right can change the value (keyboard up and down keys or direct input) and view the color
ctrl +0 restores the browser size
If you click the element and find that there is no style import on the right, it is most likely that the class name or style import is wrong
If there is a style, but there is a yellow exclamation mark in front of the style, the style attribute is written incorrectly

II Fundamentals of CSS syntax (II)

1. Emmet syntax

Use abbreviations to improve the writing speed of HTML and CSS. vscode has inherited this syntax

1.1 quickly generate html structure syntax

Tab. Div name
2. Tag name + number div*5
3. Parent-child relationship UL > Li
4. Brotherhood div+span
5. If there is a class name or id name, directly pcc or #phh tab key
6. If the generated div class names are in order, the self incrementing symbol can be used$
7. If you want to write content inside the generated tag, {}

1.2 fast generation of css structure syntax

1. You can write the tab after the attribute prompt
2. Rapid metamorphosis, such as w100 h100 lh26

1.3 use of quick format code

1. Format document - shift+alt+f
2. Setting - Search Emmet include
3.settings.json [user] configuration:
"editor.formatOnType":true,
"editor.formatOnSave":true
Once set, crl+s will be automatically formatted after saving

2. Composite selector

Compound selectors are built on the basis of basic selectors
More efficient and accurate target elements (labels)
It consists of two or more basic selectors combined in different ways
Common compound selectors include: descendant selector, sub element selector, union selector, pseudo class selector, etc

2.1 offspring selector

Inclusive relationship, layer by layer selection

Any form of selector can be used as a descendant selector

ul li {
            color: red;
        }

ul li a {
            color: green;
        }

.ol2 li a {
            color: blueviolet;
        }

2.2 sub element selector

Only the nearest child element can be selected
```
div>a {
            color: red;
        }
```

2.3 union selector

You can select multiple groups of labels and define the same style for them at the same time.
Usually used for collective statements.

Any form of selector can be used as a union selector.

div,
p {
            color: red;
        }

div,
p,
.home li {
            color: red;
        }

2.4 pseudo class selector

Use to add effects to some selectors, such as links
Use: to express

1. Link pseudo class selector

a: Linkselect a connection that has not been accessed
a:visited select all the links you have visited
a:hover the link over which the mouse rests

a:active select the active link (click the link that does not pop up)

a:link {
            color: #333;
            text-decoration: none;
        }

a:visited {
            color: orange
        }

a:hover {
            color: aqua;
        }

a:active {
            color: red;
        }

The most commonly used format in development

a {
	text-decoration: none;
        }
a:hover {
	color: aqua;
	text-decoration: none;
        }

Precautions for linking pseudo classes:
1.lvha sequence
2. Because the link has a default style in the browser, we need to specify a separate style for the link in our actual work

2. focus pseudo class selector

The form element used to get the cursor

input:focus {
            color: aqua;
        }

3. CSS display mode

3.1 block elements

Common block elements: h1~h6,div,p,ul,ol,li, etc

Characteristics of block elements:

Exclusive row
It can control the height, width and inner and outer margins
The default width is 100% of the container (parent width)
Is a container and box that can release internal or block level elements
```
div {
            width: 300px;
            height: 300px;
            background-color: darkorange;
        }
```
Note: text elements cannot be block level elements. For example, p elements cannot be div elements.

3.2 inline elements

Common inline elements include: a, strong, b, em, i, del, s, ins, u, span, etc

Characteristics of inline elements:

Elements in adjacent lines can be displayed on one line
The direct setting of width and height is invalid
The default width is the width of its own content
Inline elements can only hold text or other inline elements
```
strong {
            background-color: blueviolet;
        }

span {
            background-color: orangered;
        }
```
be careful:
1. No more links can be placed in the link
2. In special cases, block level elements can be placed in the < a > link, but it is safest to convert the < a > block level mode

3.3 inline block elements

Common inline block elements: input, img, td, textarea

It has the characteristics of both block elements and inline elements

Characteristics of inline block elements:

On the same line as the elements in the adjacent line, but there will be a gap between them. Multiple can be displayed on one line
The default width is the width of its own container

Width, row height and inner and outer margins can be set

  input {
            width: 249px;
            height: 35px;
        }

3.4 display mode conversion

In special cases, when the display mode of one element requires the characteristics of another mode, for example, you want < a > to trigger the range element mode conversion

Convert to block element: display: block
Convert to inline element: display: inline

Convert to inline block element: display: inline block

a {
            width: 300px;
            height: 200px;
            display: block;
        }

4.CSS background properties

Background attribute can set background color, background picture, background tile, background picture position, background image fixation, etc

background: background-color | background-image | background-repeat | background-attachment | background-position

4.1 setting the background color

Background color: transparent by default | color

div {
            background-color: pink;
        }

4.2 setting background picture

Background image: none (default) | url(url)

div {
            background-image: url(images/logo.png);
        }

4.3 setting background tile

background-repeat: repeat | no-repeat | repeat-x | repeat-y

repeat tile (default)
norepeat (non tiled)
repeat-x (tile along X axis)
repeat-y (tile along Y axis)
You can have both background colors and background tiles
```
div {
            background-repeat: no-repeat;  
        }
```

4.4 setting the position of background picture

background-position: x y

You can use location nouns or precise units
Length percentage | length value composed of floating-point number and unit identifier

1. The parameter is a noun of orientation

background-position: top | center | bottom | left |right

If both specified values are location nouns, the order of the two values is irrelevant, such as left, top and top left
If only one location noun is specified and the other value is omitted, the second value is centered by default
```
div {
            background-position: left center;
        }
```

2. parameters are in exact units

background-position: px px

The first must be the x coordinate and the second must be the y coordinate

If only one value is specified, the value must be the x coordinate, and the other is centered vertically by default

div {
            background-position: 100px 10px;
            /* background-position: 100px;  Specify only one value. The value must be the x coordinate, and the y coordinate is center by default*/
        }

3. The parameter is mixed unit

Background position: PX position NOUN

If the two values specified are a mixture of precise units and azimuth nouns, the first value is the x coordinate and the second value is the y coordinate
```
 div {
            background-position: 100px center;
        }
```

4.5 setting background image fixation

The background attachment property sets whether the background image is fixed or scrolls with the rest of the page
Background attachment parallax scrolling effect can be produced later

Background attachment: scroll (default) |fixed

scroll background image scrolls with object content
fixed background image fixing

body {
            background-attachment: fixed;
            /* background-attachment: scroll;  Scroll (default)*/
        }

4.6 compound writing of background attributes

Background: background color background image background tile background image scroll background image position

Generally in the order of this agreement

body {
            /* Background attribute compound writing method */
            background: pink url(images/bg.jpg) no-repeat fixed top;

        }

4.7 background translucency

CSS3 provides us with the effect of translucent background color

div {
           background: rgba(0, 0, 0, 0.2);      
        }

The last parameter is alpah transparency, with a value between 0 and 1
Note: background translucency refers to the translucent background of the box, and the contents of the box are not affected

III Three features of CSS

CSS has three major features: cascading, inheritance and priority

1. Lamination

Set the same style to the same selector, and the style will cascade (overwrite) another conflicting style

Principle of lamination:

Style conflict, proximity principle

If the styles do not conflict, they will not be stacked

<body>
    <div>The back waves of the Yangtze River push the front waves, and the front waves die on the beach</div>
</body>

div {
            color: red;
            font-size: 30px;
        }

        div {
            color: pink;
        }

2. Inheritance

Child labels inherit certain styles of the parent label, such as text color and font size.

Using inheritance can simplify code and reduce the complexity of css style.

<div>
        <p>The back waves of the Yangtze River push the front waves</p>
    </div>

div {
            color: red;
            font-size: 30px;
        }

3. Priority

When the same element specifies multiple selectors, priority will be generated
If the selectors are the same, cascading is performed
If the selector is different, it is executed according to the selector weight

Inheritance and * < element selector < class, pseudo class selector < ID selector < inline style selector <! important

Inherit or * 0000
Element selector 0001
Class, pseudo class selector 0010
id selector 0100
Inline style = "" 1000 ""
! important infinity

<body>
    <div class="nav" id="emo" style="color: turquoise;">You look good with a smile</div>
</body>

div {
            color: red;
        }

        .nav {
            color: orange;
        }

        * {
            color: blue !important;
        }

        #emo {
            color: green;
        }

Notes on inheritance weight:

The inherited weight is 0. No matter how high the weight of the parent element is, the weight of the child element is 0

<body>
    <div id="nav">
        <p>You look good with a smile</p>
    </div>
    <a href="#">www.baidu.com</a>
</body>

#nav {
            color: red;
        }
        
 p {
            color: pink;
        }

body {
            color: purple;
        }

Superposition of weights

If it is a composite selector, there will be weight superposition, and the weight needs to be calculated

<ul class="nav">
        <li>blue sky</li>
</ul>

ul li {		/* 0001 + 0001 = 0002 */
            color: blue;
        }

        
.nav li {	/* 0010 + 0001 = 0011 */
            color: deeppink;
        }

        
li {		/* 0001 */
            color: red;
        }

IV Three layout modes of CSS

Three cores of web page layout: box model, floating and positioning

1. Box model

Box composition: box frame, box content, inner margin and outer margin

The process of web page layout:

First prepare the relevant web page elements, which are basically boxes.
Use CSS to set the box style, and then place it in the corresponding position.
Put the contents in the box.

The essence of web layout:

Using CSS to put the box

1.1 box frame

The box border can be set with border width, border style and border color.

boder: boder-weight | boder-style | boder-color

boder-width: px;
boder-style: solid | dashed | dotted

Boder color: color;

  div {
            /* Border width */
            border-width: 5px;
            /* Border style */
            border-style: solid;
            /* Border color */
            border-color: pink;
        }

The box border has four sides:

boder-top,boder-bottom,boder-left,boder-right

Compound writing:

boder: boder-width boder-style boder-color;

div {
            border: 5px dashed blue;
        }

Table thin line border: merge two adjacent borders together.

boder-callapse: collapse;

The border affects the actual size of the box

div {
            /* Actual 200 * 200 box (including frame) */
            width: 180px;
            height: 180px;
            border: 10px solid blue;

        }

Solution:
1. When measuring the size of the box, do not measure the frame
2. If the frame is also included in the measurement, you need to subtract the width of the frame from the width/height

1.2 inner margin of box

The content of the box cotent is close to the border by default, and the inner margin can be set at this time

padding: padding-top | padding-bottom | padding-left | padding-right

 div {
            width: 200px;
            height: 200px; 
            padding-top: 1px;
            padding-bottom: 1px;
            padding-left: 1px;
            padding-right: 1px;
        }

padding compound writing method:

div {
            width: 200px;
            height: 200px;
            /*Top, bottom, left and right distance frame 5px*/
            padding: 5px;
            /* The top and bottom are 5px away from the frame, and the left and right are 10px away from the frame*/
            padding: 5px 10px;
            /* The upper distance from the frame is 5px, the left and right distance from the frame is 10px, and the lower distance from the frame is 20px*/
            padding: 5px 10px 20px;
            /*The distance from the top to the frame is 5px, 10px to the right, 20px to the bottom and 30px to the left*/
            padding: 5px 10px 20px 30px;
        }

Assign a padding value to the box:

1. There is a distance between the content and the border, and an inner margin is added
2.padding affects the actual size of the box

If the box already has a width and height, specifying the inner margin will enlarge the box
If the box itself does not specify the width/height attribute, padding will not open the box size

div {
            /* Requirement: add 20px inner margin. The actual size of the box is 200px in width/height*/
            width: 160px;
            height: 160px;
            padding: 20px;
        }

Solution:
If the size of the box rendering is consistent, let the width/height subtract the extra inner margin

Benefits of padding affecting boxes:

If the number of words in each module in the box is different
It is unreasonable to set the same width for the box
The best solution is to set the padding value to open the box
In this way, the distance between these modules is equal

1.3 outer margin of box

The margin property is used to set the outer margin. Controls the distance between boxes

margin: margin-top | margin-bottom | margin-left | margin-right

div {
            margin: 20px;
        }

margin compound:

div {
            margin: 10px;
            margin: 20px 30px;
            margin: 10px 20px 30px;
            margin: 10px 20px 30px 40px;
        }

1.4 typical application of outer margin

Horizontal centering of block elements:

1. The width of the box must be set

2. Ensure that the left and right margins of the box are set to auto

div {
	width: 200px;
	height: 100px;
	margin: 0 auto;
}

Horizontal centering of inline elements and inline blocks:

Add text align to the parent element if the inline element and inline block element are horizontally centered

span {
	text-algign: center;
}

img {
	text-algign: center;
}

Collapse of the vertical outer margin of nested block elements
For block elements with two nested relationships (parent-child relationship), the parent element has upper and outer margins, and the child element also has upper and outer margins. At this time, the parent element will collapse the larger margin value

Solve the collapse problem of the vertical outer margin of nested block elements

Set border for parent element
Set inner margin for parent element
Add overflow: hidden to parent element
The box with floating, positioning and absolute positioning will not collapse

Clear inner and outer margins:

* {
   padding: 0;
   margin:0
}

Note: in line elements in order to take care of compatibility, try to set only the left and right inner and outer margins, do not set up the upper and lower inner and outer margins However, it is OK to replace it with block level and inline block elements.

1.5 rounded border

CSS3 adds a rounded border style, and the border radius attribute is used to set the rounded corner of the element's outer border

border-radius: length;

boder-radius: 10px;
/* You can also use percentages
border-radius: 20%; */

Four corners of rounded border:

.radius {
            width: 200px;
            height: 200px;
           	border-top-left-radius: 10px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 30px;
            border-bottom-left-radius: 40px;
        }

Compound writing method of rounded border:

.radius {
            width: 200px;
            height: 200px; 
            /* Clockwise represents each corner */
            border-radius: 10px 20px 30px 40px;
        }

1.6 box shadow

h-shadow position of horizontal shadow
Position of v-shadow vertical shadow
blur ambiguity
spread fuzzy range
Color color

inset changes the outer shadow (default) to the inner shadow

div:hover {		/* There was no shadow in the original box. When you move the mouse to the box, there is a shadow */
            box-shadow: 10px 10px 10px -2px rgba(0, 0, 0, .3);
        }

be careful:
1. The default is the outer shadow, but this word cannot be written, otherwise it will be invalid.
2. The box shadow does not occupy space and will not affect the arrangement of other boxes.
3. If the shadow is set, the first two values must be written. Other optional.

1.7 text shadow

text-shadow: h-shadow | v-shadow | blur color;

div {
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }

2. Floating

float: none | left | right

Floating characteristics:

Off standard flow (off standard)
Displays in a row and aligns the top of the element
Has the properties of inline block elements
No position

1. Any element can float. No matter what the original pattern of elements, adding floating will have similar characteristics to inline block elements.
2. If the width of the block level box is not set, the default width is the same as that of the parent, but after adding floating, its width is determined according to the content.
3. There is no gap in the middle of the floating box, which is close to each other.
Floating elements are often used with standard flow parents
In order to restrict the position of floating elements, the general strategy of our web page layout is:
First, the parent elements of the standard flow are used to arrange the upper and lower positions, and then the internal child elements are floating to arrange the left and right positions.

2.1 define float

float: left;

2.2 clear float

Why clear float?

In many cases (for example, when there are many products), it is inconvenient to give height to the parent box, but the child box floats and does not occupy a position.
Therefore, when the height of the parent box is 0, the following standard flow box will be affected.
Since the floating element no longer occupies the position of the source document stream, it will affect the layout of subsequent elements.

Clear the essence of Floating:

The essence of clearing floating is to clear the influence caused by floating elements.
If the parent box itself has a height, you do not need to clear the float.
After floating is cleared, the parent will automatically detect the height according to the floating sub box. If the parent has a height, it will not affect the following standard flow.

Clear floating policy:

Closed float. Let the float only affect the inside of the parent box, and do not affect other boxes outside the parent box

There are three ways to clear floating:

1. Additional labeling method

<div class="clear"></div>

.clear {
            clear: both;
        }

2.overflow

overflow: hidden;

3.after pseudo element method

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6,7 proper */
            *zoom: 1;
        }

4. Pseudo element method

.clearfix:before,
.clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

3. Positioning

Positioning allows the box to move freely within a box or fix a position in the screen, and can press other boxes.

Positioning methods: static positioning, relative positioning, absolute positioning, fixed positioning and viscous positioning.

3.1 static positioning

Static positioning is the default positioning method for elements
Static positioning is rarely used in layout
```
position: static;
```

3.2 relative positioning

Relative positioning is relative to the original position of an element when moving its position.
Do not deviate from standard flow
```
position: relative;
```

3.3 absolute positioning

If there is no ancestor element or the ancestor element is not located, the browser shall prevail
If the ancestor element has positioning (relative, absolute and fixed positioning), take the nearest ancestor element with positioning as the reference
Absolute positioning no longer occupies the original position (off label)
It's usually a son with no father
```
position: absolute;
```

3.4 fixed positioning

Fixed positioning is the position where the element is fixed in the viewable area of the browser.
Application scenario: the position of elements will not change when the browser page scrolls.
Fixed positioning out of standard flow
```
positon: fixed
```
Fixed positioning tips: fixed on the right side of the layout Center
1. Let the fixed positioning box left: 50% go to half of the viewing area of the browser
2. Make the fixed positioning box margin left: half the width of the layout center and half the width of the layout center

3.5 viscous positioning

Hybrid of relative positioning and fixed positioning
Move elements with the visual window of the browser as the reference point (fixed positioning feature)
Viscous positioning occupies the original position (relative positioning characteristics)
One of top, left, right and bottom must be added to be valid
Use with page scrolling. Poor compatibility. ie not supported

position: sticky;
top: 0;

3.6 stacking sequence of positioning

When using a positioning layout, boxes may overlap. At this point, you can use z-index to control the order of boxes

Only the positioned box will have the z-index attribute

z-index: 1;

The default is auto. The larger the value, the higher the box.

3.7 centering of absolute positioning

.box {
            position: absolute;
            width: 200px;
            height: 200px;
            /* horizontally */
            left: 50%;
            margin-left: -100px;
            /* Vertical center */
            top: 50%;
            margin-top: -100px;
            background-color: deeppink;
            /* margin: 0 auto; */
        }

Positioning special features:

Absolute positioning and fixed positioning are also similar to floating.
Absolute or fixed positioning is added to the elements in the line, and the width and height can be set directly
Block level elements add absolute or fixed positioning. If the width and height are not given, the default size is the size of the content.
A box off the label will not trigger the collapse of the outer margin
The combination of floating elements and absolute positioning (fixed positioning) elements will not trigger the problem of outer margin merging

Differences between positioning and floating elements:

Absolute positioning (fixed positioning) will completely press the box:
Unlike floating elements, they only press the standard flow box below them, not the text in the standard flow box below them
Absolute positioning (fixed positioning) will suppress all the contents of the following standard stream
The reason why floating won't suppress the text is that the purpose of floating is to make the text surround effect at first.
The biggest feature of positioning is the concept of stacking, that is, multiple boxes can be stacked back and forth to display. If the element moves freely in a box, use positioning

3.8 display and hiding of elements

1.display attribute

The display attribute is used to set how an element is displayed

display: none | block
```
display: none;
```
display no longer occupies the original position after hiding the element

display: block; In addition to converting to block level elements, there is also the meaning of display elements

2.visibility attribute

The visibility attribute specifies whether an element should be visible or hidden

Visibility: visible | hidden
```
visibility: hidden;
```
visibility hides the element and continues to occupy its original position

3.overflow attribute

The over attribute specifies what happens if the content overflows an element's box

overflow: visible | hidden | scroll | auto
```
overflow: hidden
```
Generally, we don't want the overflow content to be displayed, because the overflow part will affect the layout

V Advanced CSS skills

1. Use of Sprite diagram

Use sprite core:

Sprite technology is mainly used for background pictures. Is to integrate multiple small background pictures into a large picture
This big picture is also called sprites sprite
To move the position of the background picture, you can use background position
The moving distance is the x and y coordinates of the target image. The coordinates in the web page are different
Because the general situation is to move up and left, the value is negative
When using sprite images, you need to accurately measure the size and position of each small background image.

background: url(images/sprites.png) no-repeat -182px 0;

2. Use of font icons

Font Icon usage scenario: mainly used to display some common and commonly used small icons in web pages
Font icon download: https://iconmoon.io

Font Icon reference:

/* Font declaration */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?nqdbnz');
            src: url('fonts/icomoon.eot?nqdbnz#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?nqdbnz') format('truetype'),
                url('fonts/icomoon.woff?nqdbnz') format('woff'),
                url('fonts/icomoon.svg?nqdbnz#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
        }

3.CSS triangle

Set the CSS triangle so that the width and height of the box are 0

width: 0;
height: 0;
border: 10px solid pink;

4. User interface style

Mouse style

cursor: default | pointer | move | text | not-allowed
```
cursor: default;
```
Default: the default mouse style
pointer: mouse hand
move: mouse movement
Text: mouse text style
Not allowed: mouse forbidden style

Cancel form outline

outline: none;

Cancel text field drag

resize: none;

Picture, form, and text alignment

Solve the default blank gap at the bottom of the picture

There will be a blank gap at the bottom of the picture because the block elements in the line will be aligned with the baseline of the text

vertical-align: baseline | top | middle | bottom
```
vertical-align: middle;
```
Baseline: baseline alignment
top: top alignment
middle: center alignment
Bottom: align bottom

Single line overflow text display ellipsis

white-space: nowrap;		/* 1.Force one line display */
overflow: hidden; 			/* 2.Overflow hiding */
text-overflow: ellipsis;	/* 3.The overflow part is displayed with an ellipsis */

Multi line overflow text display ellipsis

overflow: hidden;			
text-overflow: ellipsis;
display: -webkit-box;			/* Elastic box model display */
-webkit-line-clamp: 3;			/* The third line of text overflows and displays an ellipsis */
-webkit-box-orient: vertical;	/* Center text vertically */

Clever use of negative margin

Achieve the effect of 1 + 1 = 1

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 120px;
            border: 1px solid red;
            /* Move the margin of each box to the left -1px just to press the border of the adjacent box */
            margin-left: -1px;
        }

The wonderful use of text floating around

When you add a float to a box, the text surrounds the floating element
Adding a float does not suppress the text

Clever use of inline block elements

The intra row block element itself has its own point distance, and then the width and height can be set. The parent element is only after text align: Center
The block elements in the inner row are aligned horizontally and centered.

Clever use of CSS triangle

width: 0;
height: 0;
 /* The upper, lower and left borders are transparent */
border-color: transparent #fff transparent transparent;

CSS initialization

The default values of some tags are different in different browsers. In order to eliminate the differences of HTML text rendering in different browsers. Take care of browser compatibility, so you need to initialize CSS.

height: 0
border: 10px solid pink