1 Introduction

1 css is the standard introduced by w3c

2 versions css1, css2, css3

3. What is CSS

The web page is divided into three parts:
        structure(HTML)
        performance(CSS)
        behavior(JavaScript)
    CSS
        - Cascading style sheets
        - The web page is actually a multi-layer structure CSS You can style each layer of the web page separately
            In the end, we can only see the top layer of the web page
        - In a word, CSS Used to style elements in web pages    

2. CSS introduction method

1 inline style sheet

Use the style declaration directly in the properties of

<h1>This is a<span style="color: red;">Inline style sheet</span>of css</h1>

     The first way(Inline style): 
        - Pass inside the label style Property to style the element
        - Question:
            Using inline style, the style can only be effective for one label,
                If you want to affect more than one element, you must copy it in each element
                And when the style changes, we have to modify it one by one, which is very inconvenient

        - Note: never use inline styles during development

2 internal style sheet

Defined in head or body., use style

/*Internally defined style*/
<style type="text/css">
	h1 {
        background-color: deeppink;
        color: blue;
	}
</style>

    Second method (internal style sheet)
        - Authoring styles to head Medium style In the label
            Then pass CSS Select the element and set various styles for it
            You can set styles for multiple labels at the same time, and you only need to modify one place to apply them all
        - Internal style sheets make it easier to reuse styles
        - Question:
            Our internal style sheet can only work on one web page,
                The styles in it cannot be reused across pages

3 external style sheet

1 create css file

h1{
	background-color: rosybrown;
	color: #0000FF;	
}

2. Import css file

html file, use link to import css file

/*Associate external css style files*/
<link type="text/css" rel="stylesheet" href="../css/test.css" />
type:Define the type of linked document, which needs to be specified as"text/css",Indicates that the linked external file is css Style sheets.
rel: Defines the relationship between the current document and the linked document, which needs to be specified as"stylesheet"，Indicates that the linked document is a style sheet file.
href: Defines the of the linked external style sheet file url，It can be a relative path or an absolute path.

    Third approach (external style sheets) best practices
        - Can CSS Style authoring to an external CSS In the file,
            Then pass link Label to introduce external CSS file
        - External style sheets need to pass link Label for introduction,
            This means that any web page that wants to use these styles can reference them
            Enables styles to be reused between different pages
        - Authoring styles to external CSS In the file, you can use the cache mechanism to the browser,
            So as to speed up the loading speed of web pages and improve the user experience.

3 CSS syntax

    CSS The content in the comment will be automatically ignored by the browser

    CSS Basic grammar of:
        Selector declaration block

        Selector, through which you can select the specified element in the page
            such as p The function of is to select all the on the page p element

        Declaration block, which specifies the style to be set for the element
            A declaration block consists of declarations one by one
            A declaration is a name value pair structure
                A style name corresponds to a style value, with:Connect to;ending 

4 basic selector (emphasis) and pseudo class selector

1. Selector (element selector)

        element selector 
            Function: select the specified element according to the tag name
            Syntax: tag name{}
            example: p{}  h1{}  div{}

2 id selector

An element can only have one id

        id selector
            Function: according to the element id Attribute value selects an element
            Syntax:#id attribute value {}
            example:#box{} #red{}  

Type 3 selector

The same element can have multiple classes, which are separated by spaces

Duplicate class name

Class selector
Function: select a group of elements according to the class attribute value of the element
Syntax:. class attribute value

class Is a label attribute, which is associated with id Similar, the difference is class Can be reused
    Can pass class Attribute to group elements
    You can specify multiple values for an element at the same time class attribute

<!--stay class Property, which means that multiple styles are satisfied at the same time -->
<div class="font20 red fontWeight">Journey to the West</div> 
<div class="font20">The Dream of Red Mansion</div>
<div class="font14 fontWeight">Romance of the Three Kingdoms</div>
<div class="font14">Water Margin</div>

4 wildcard selector

universal selector
Function: select all elements in the page
Syntax: * {}

* {
    margin: 0;	/*Define outer margin*/
    padding: 0;	/*Define inner margin*/
}

5 CSS composite selector

Compound selector is composed of two or more basic selectors combined in different ways in order to select more accurate and fine target elements.

1 intersection selector

Intersection selector
Function: select elements that meet multiple conditions at the same time
Syntax: selector 1 selector 2 selector 3 selector n{}
Note:
If there is an element selector in the intersection selector, you must start with an element selector

<p class="red">Paragraph 1</p>
<p id="pink">Paragraph 2</p>
<p class="red" id="pink">Paragraph 3</p>

<style type="text/css">
	p.red {
		color: red;
	}
	p#pink {
		color: pink;
	}
	.red#pink {
		color: blue;
	}
</style>

2 Union selector

Selector grouping (Union selector)
Function: select elements corresponding to multiple selectors at the same time

Syntax: selector 1, selector 2, selector 3, selector n{}

​ #b1,.p1,h1,span,div.red{}

3 descendant selector

Parent element selector descendant element selector

        Descendant element selector:
            Function: select the specified descendant element within the specified element
            Grammar: ancestors and descendants
             div span{
             color: skyblue
         }

4 offspring selector

Parent element selector > child element selector

        Child Selector 
            Role: select the specified child element of the specified parent element
            Syntax: parent element > Child element
            div.box > span{
            color: orange;
        }

5 brother selector

        Choose next brother
            Syntax: Previous + next
        Select all the brothers below
            Grammar: brother ~ Brother

Use + to indicate brother: looking down just refers to the next brother.

.mydiv+div{
	width: 200px;
	height: 100px;
	border:1px solid #f00;
}

Use ~ to indicate all brothers: looking down means all brothers.

.mydiv~div{
	color: #f00;
}

Parent element

Elements that directly contain child elements are called parent elements

Child element

Elements contained directly by the parent element are child elements

Ancestral element

Elements that directly or indirectly contain descendant elements are called ancestor elements, and the parent element of an element is also its ancestor element

Descendant element

Elements directly or indirectly contained by ancestor elements are called descendant elements, and child elements are also descendant elements

Sibling element

An element with the same parent element is a sibling element

6 attribute selector

selector	meaning
E[attr]	The attr attribute exists
E[attr=val]	The attribute value is exactly equal to val
E[attr=val]*	The attribute value contains the val character and is in "any" position
E[attr^=val]	The attribute value contains the val character and is in the "start" position
E[attr$=val]	The attribute value contains the val character and is in the "end" position

[attribute name] select the element containing the specified attribute
[attribute name = attribute value] select the element containing the specified attribute and attribute value
[attribute name ^ = attribute value] select the element whose attribute value starts with the specified value
[attribute name $= attribute value] select the element whose attribute value ends with the specified value
[attribute name * = attribute value] select the element containing a value in the attribute value

6 pseudo class / pseudo element selector

Pseudo class selector and pseudo element selector. The pseudo class selects the element, and the pseudo element selects not the element. There is no need to distinguish these concepts in development

There are many pseudo classes and pseudo elements. You can refer to the tables later in this section. Here are some selectors for practice

Class (nonexistent class, special class)

• Pseudo classes are used to describe the special state of an element

• Pseudo classes generally start with:
  : first child first child element
  : last child last child element
  : nth child() selects the nth child element
  Special value:
  N the nth n ranges from 0 to positive infinity
  2n or even indicates that elements with even bits are selected
  2n+1 or odd indicates the element with odd digits selected

  - These pseudo classes are sorted according to all child elements
  
  :first-of-type
  :last-of-type
  :nth-of-type()
  - The functions of these pseudo classes are similar to those described above, except that they are sorted in elements of the same type
  

1 link,visited,hover,active

a:link		/*Unreached links*/
a:visited	/*For privacy reasons, the visited pseudo class can only modify the color of the link */
a:hover		/*Move the mouse over the link*/
a:active	/*Selected links*/

Pseudo class pseudo element selectors generally have no requirements for elements. Basically, any element can be used, and the order of use is irrelevant. However, link,:visited,:hover,:active are exceptions, with the following special exceptions

• : link and: visited can only be used in
• : hover must be after: link and: visited
• : active must be after: hover

Use the word love have to remember their order

2 :checked

Example 1: get the value of the selected item in the radio box

determine

Example 2: get the value of the selected item in the multiple selection box

determine

3: not (selector), negative pseudo class

Removes eligible elements from the selector

Example 1: select the p element in div whose class is not ps

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* Select the p element in div whose class is not ps */
			div>p:not(.ps) {
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>p1</p>
			<p>p2</p>
			<p class="ps">p3</p>
			<p class="ps">p4</p>
			<p>p5</p>
		</div>
	</body>
</html>

Example 2: inverse selection of multiple selection boxes

Example 3: select all TRS except the first one

4 :before,:after

Commonly used to clear floats

5 all CSS pseudo class / element tables

selector	Example	Example description
:checked	input:checked	Select all selected form elements
:disabled	input:disabled	Select all disabled form elements
:empty	p:empty	Select all p elements without child elements
:enabled	input:enabled	Select all enabled form elements
:first-of-type	p:first-of-type	Each p element selected is the first p element of its parent element
:in-range	input:in-range	Select a value within the specified range of the element
:invalid	input:invalid	Select all invalid elements
:last-child	p:last-child	Select the last child of all p elements
:last-of-type	p:last-of-type	Select that each p element is the last p element of its parent element
:not(selector)	:not§	Select all elements except p
:nth-child(n)	p:nth-child(2)	Select the second child element of the parent element of all p elements
:nth-last-child(n)	p:nth-last-child(2)	Select the penultimate child of all p elements
:nth-last-of-type(n)	p:nth-last-of-type(2)	Select the penultimate child element of all P elements that is p
:nth-of-type(n)	p:nth-of-type(2)	Select all P elements and the second child element that is p
:only-of-type	p:only-of-type	Select all elements that have only one child element p
:only-child	p:only-child	Select all p elements that have only one child element
:optional	input:optional	Select an element attribute that does not have 'required'
:out-of-range	input:out-of-range	Select an element attribute with a value outside the specified range
:read-only	input:read-only	Select the element attribute for the read-only attribute
:read-write	input:read-write	Select an element attribute that does not have a read-only attribute
:required	input:required	Select the element attribute specified by the "required" attribute
:root	root	Select the root element of the document
:target	#news:target	Select the currently active #news element (click the URL to include the name of the anchor)
:valid	input:valid	Select properties with all valid values
:link	a:link	Select all unreached links
:visited	a:visited	Select all visited links
:active	a:active	Select active link
:hover	a:hover	The state of placing the mouse over a link
:focus	input:focus	The selected element has focus after input
:first-letter	p:first-letter	Select each The first letter of the element
:first-line	p:first-line	Select each First line of element
:first-child	p:first-child	The selector matches the of the first child element belonging to any element element
:before	p:before	In each Insert content before element
:after	p:after	In each Insert content after element
:lang(language)	p:lang(it)	by Select a start value for the lang attribute of the element

         Pseudo elements represent some special and unreal elements (special positions) in the page
            Pseudo element usage :: start

            ::first-letter Represents the first letter
            ::first-line Represents the first line
            ::selection Indicates the selected content

Selector performance

Selector performance
When the browser parses a set of selectors, it parses them one by one from the back to the front
If the selector is written too long, the browser will have poor parsing performance, so the shorter the selector, the better.
*The performance of universal selector is also poor, so the use of universal selector should be avoided

7 style inheritance

1. Style inheritance, the style we set for an element will also be applied to its descendant elements

2. Inheritance occurs between ancestors and future generations

3. The inherited design is to facilitate our development,
   Using inheritance, we can uniformly set some common styles to common ancestor elements,
   In this way, all elements can have this style by setting it only once

4. Note: not all styles will be inherited:
   For example, background related and layout related styles will not be inherited.

8 priority

1. The more accurate, the higher the weight
2. The higher the weight, the higher the priority
3. The higher the priority is with the same weight

Weight of selector

Style conflict
-When we select the same element through different selectors and set different values for the same style, a style conflict occurs.

1. When a style conflict occurs, which style is applied is determined by the weight (priority) of the selector

2. Weight of selector
   Inline style 1,0,0,0
   id selector 0,1,0,0
   Class and pseudo class selectors 0,0,1,0
   Element selector 0,0,0,1
   Universal selector 0,0,0,0
   Inherited styles have no priority

3. When comparing priorities, the priorities of all selectors need to be added and calculated. The higher the final priority, the more priority will be displayed (Group selectors are calculated separately),
   The accumulation of selectors will not exceed its maximum order of magnitude, and the class selector will not exceed the id selector at high
   If the priority is the same after calculation, the lower style will be used first

4. You can add after a style! important, then this style will get the highest priority, or even exceed the inline style,
   Note: this gadget must be used with caution in development!

9 dimension units

Absolute length units are basically not used

Relative length unit	explain
em	The font size relative to the text in the current object
px	pixel
rem	Relative to font size in html
Absolute length unit	explain
in	inch
cm	centimeter
mm	millimeter
pt	spot

1in = 2.54cm = 25.4 mm = 72pt

Common length unit:
pixel
The screen (display) is actually made up of dots one by one
The pixel size of different screens is different. The smaller the pixel, the clearer the display effect
Therefore, the same 200px has different display effects under different devices

Percentage
You can also set the attribute value as a percentage of its parent element attribute
Setting the percentage allows the child element to change with the parent element

​ em
em is calculated relative to the font size of the element
​ 1em = 1font-size
em will change according to the font size

​ rem
rem is calculated relative to the font size of the root element

10 color value

Color unit:
In CSS, you can directly use color names to set various colors
For example: red, orange, yellow, blue, green

Red, green, transparent

However, it is very inconvenient to use color names directly in css

RGB value:
RGB adjusts different colors through different concentrations of three colors
​ R red，G green ，B blue
The range of each color is 0 - 255 (0% - 100%)
Syntax: rgb (red, green, blue)

​ RGBA:
An a is added to rgb to indicate opacity
Four values are required. The first three are the same as rgb, and the fourth represents opacity
1 is completely opaque, 0 is completely transparent, and 5 is translucent

Note RGB and RGBA:

• Integer and percentage cannot be mixed

• You cannot change an integer to a decimal

RGB value in hex:
Syntax: # red green blue
Color concentration through 00 FF
If the color is repeated by two digits, it can be abbreviated
​ #aabbcc --> #abc

HSL value HSLA value
H hue (0 - 360)
S saturation, color concentration 0% - 100%
L brightness, color brightness 0% - 100%

11 CSS fonts

Font you can set all font related attributes
Syntax:
Font: font size / line height font family
The row height can be omitted. If it is not written, the default value is used

1 font style: font style

The effect is the same as i and em, but css has no semantics

• normal: default
• Italic: italic
• oblique: tilt

Usually we seldom add italics to the text. Instead, we change the italics. (i, em) to the normal mode.

2 font weight: font weight

Bold font weight
Optional values:
normal default is not bold
Bold bold
Nine levels of 100-900 (useless)

The effect is the same as b and strong, but css has no semantics

• bolder
• bold
• normal
• lighter
• From 100 to 900 (an integer multiple of 100), the number 400 is equivalent to normal and 700 is equivalent to bold.

3 font size: font size

Color is used to set the font color
Font size font size
Company related to font size
em is equivalent to a font size of the current element
rem is a font size relative to the root element

4 font family: font

Font family font family (format of font)
Optional values:
Serif serif font
Sans serif sans serif font
monospace equal width font
Specify the font category, and the browser will automatically use the fonts under this category

Font family can specify multiple fonts at the same time, which can be used between multiple fonts. When the separated font takes effect, the first one will be used first, if the first one cannot be used, the second one will be used, and so on

​ Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif

Font name	English name	Unicode encoding
Song typeface	Simsun	\5B8B\4F53
NSimSun	NSimsun	\65B0\5B8B\4F53
Blackbody	SimHei	\9ED1\4F53
Microsoft YaHei	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
Regular script_ GB2312	KaiTi_GB2312	\6977\4F53_GB2312
official script	LiSu	\96B6\4E66
Immature	YouYuan	\5E7C\5706
Chinese fine black	STXihei	\534E\6587\7EC6\9ED1
Fine bright body	MingLiU	\7EC6\660E\4F53
New fine bright body	PMingLiU	\65B0\7EC6\660E\4F53

• The same font has three forms: Chinese, English and Unicode
• Chinese and unicode forms have quotation marks
• English is not quoted, but quotation marks should also be used when the English string contains #, $, and spaces
• Chinese may be garbled and unrecognized, so try to use English or unicode
• When the browser does not support the set font, it will default to the default font recognized by the browser

2.1 setting a font

p {
    font-family:"Microsoft YaHei ";
}

2.2 specifying multiple fonts at the same time

Indicates that if the browser does not support the first font, it will find the next font until the browser supports it and finally does not support it, the default font will be used

p {
    font-family: YouYuan,  "Microsoft YaHei", "official script";
}

5 font co writing font

Font attribute is used to comprehensively set font style. Its basic syntax is as follows:

selector {
    font:  font-style  font-weight  font-size/line-height  font-family;
}

Note: use font Attributes must be written in the order in the above syntax format, and the order cannot be changed. Each attribute is separated by a space.
	Unnecessary attributes can be omitted (take the default value), but they must be retained font-size,font-family Property, otherwise font Property will not work.

<style type="text/css">
	p{
		font: italic bold 12px/30px Georgia, serif;
	}
</style>

<p>This is a text with a font style set</p>

6 server font (Network)

Font face can directly provide fonts in the server to users for use
Question:
1. Loading speed
2. Copyright
3. Font format

    @font-face {
            /* The name of the specified font is arbitrary*/
        font-family:'myfont' ;
        /* The path to the font in the server */
        src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
    }

7 Icon Font

Icon Font
You often need to use some icons in web pages. You can introduce icons through pictures
However, the size of the picture itself is relatively large and very inflexible
Therefore, when using icons, we can also directly set the icons as fonts,
Then the font is introduced in the form of font face
In this way, we can use the icon in the form of font

font awesome usage steps
1. Download https://fontawesome.com/
2. Decompression
3. Move css and webcontents into the project
4. Introduce all.css into the web page
5. Use Icon Font

• Use the icon font directly through the class name
  class="fas fa-bell"
  class="fab fa-accessible-icon"

• Set icon font through pseudo element

  1. Find the element to set the icon and select it by before or after
  2. Set the font code in content
  3. Set font style
  ​ fab
  ​ font-family: 'Font Awesome 5 Brands'; / * fab */

  ​ fas
  ​ font-family: 'Font Awesome 5 Free'; / * fas */
  ​ font-weight: 900;

  li::before{
      content: '\f1b0';
      /* font-family: 'Font Awesome 5 Brands'; */
      font-family: 'Font Awesome 5 Free';
      font-weight: 900; 
      color: blue;
      margin-right: 10px;
  }
  

• Use icon fonts through entities:
  &#Code of X icon;

8 Ali font

    p::before{
        content: '\e625';
        font-family: 'iconfont';
        font-size: 100px;
    }

12 CSS text properties

1 color text color

Values can be represented by English words, hexadecimal numbers, rgb, rgba

2 alignment

Text align horizontal alignment

Optional values:
left align
Right align right
center alignment
justify both ends

Values: left, center, right

Use: the use of blocks in blocks or rows

Function: the internal inline block element is centered, the inline element is centered, and the text is centered

Inheritance: text align is inherited

###Vertical align vertical align

Optional values:
Baseline default baseline alignment
Top align top
bottom align
middle align Center

3 text decoration

• none: by default, it defines standard text without any modification.

  Often used to underline hyperlinks. a

• underline: a line defined below the text

• overline: defines a line above the text

• Line through: defines a line through the text

• blink: defines blinking text, which is not supported by the browser at present

4 text transform

Text transform is used to convert the case of English text

• none: default
• capitalize: each word in the text begins with a capital letter
• uppercase: all words are capitalized
• Lowercase: all word letters are lowercase

5 text indent

The text indent property specifies the indentation of the first line of text in a text block

• number + unit

  em is often used in units to indent multiple small characters

• Percent: indent based on a percentage of the width of the parent element.

6 text shadow text shadow

• The syntax format is

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

• h-shadow: required. The location of the horizontal shadow. Negative values are allowed. horizontal
• v-shadow: required. The position of the vertical shadow. Negative values are allowed. vertical
• blur: optional. Fuzzy distance.
• Color: optional. The color of the shadow.

<style type="text/css">
	h1 {
		text-shadow: 2px 2px #FF0000;
	}	
	h2 {
		text-shadow: 2px 2px 8px #FF0000;
	}		
	h3 {
		color: white;
		text-shadow: 2px 2px 4px #000000;
	}		
	h4 {
		text-shadow: 0 0 3px #FF0000;
	}
</style>

7 direction text direction

• value
  • ltr: left to right
  • rtl: right to left
• Usage: used in blocks or inline blocks
• Function: internal blocks, inline blocks and text will be arranged according to the direction value

8 letter spacing character spacing

The letter spacing attribute increases or decreases the space (character spacing) between letters / Chinese characters. It is expressed in numerical values, which can be negative numbers.

<style>
	h1 {
        letter-spacing:2px;
  	}
	h2 {
      	letter-spacing:-3px;
  	}
</style>

9 word spacing

Set space spacing in text

When the value is 0, the space spacing in the text remains unchanged. When the value is "- 0.3em", the space is just removed

		<div class="box">
				abc d  word     in
		</div>
		<style type="text/css">
			.box {
				font-size:3em;
				border: 1px solid red;
				width: 600px;
				height: 100px;
				word-spacing: -0.3em;
			}
		</style>

10 Line Height

line height
Line height refers to the actual height of the text
You can set the row height through line height
The row height can be directly specified as a size (px em)
You can also directly set an integer for the row height
If it is an integer, the line height will be the specified multiple of the font
Line height is often used to set the line spacing of text
Line spacing = line height - font size

Font box
Font box is the grid where the font exists. Setting font size is actually setting the height of the font box

The row height is evenly distributed between the top and bottom of the font box

A line of text occupies the total height of the line,

• number: sets the line spacing by multiplying the current font size.

  When the line height value is 1, it is smaller than the default line height

• number + unit.

• %: percentage line spacing based on the current font size. Better not use it

<style>
    span {
    	line-height:2;
    }
    p {
        line-height:20px;
    }
    div {
        line-height:100%;
    }
</style>

In a box with one line, we can center the text vertically by setting the line height equal to the height of the box.

Supplement:

Generally, the line spacing is 7.8 pixels larger than the font size.

In chrome, font size and height are not equal. For example, when font size is set to 10px, the actual height is 12.8px (which can be verified by box model), and when font size is 11, the actual height is 15.2px... This leads to that when font size is set to 10px, the actual height is 12.8px, which will naturally exceed some

Note: you can set the row height to the same value as the height to center the single line text vertically in an element

11 white-space

White space sets how web pages handle white space
Optional values:
Normal normal
nowrap does not wrap
pre leave blank

Make the overflow text appear as ellipsis

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

12 CSS comments

css The rule is to use  /*Content to be annotated*/ To annotate. For example:
p {
    font-size: 14px;	/*Set the font size to 14 pixels*/
}

13 comprehensive cases

11 CSS three features

1 CSS cascading

The same element is styled in multiple places

2 CSS inheritance

• Not all attributes can be inherited. Only attributes starting with color/font-/text-/line - can be inherited.
• In CSS inheritance, not only sons can inherit, but also descendants can inherit.
• a. The color and underline settings of A. cannot be inherited. A. itself must be set.

3 CSS priority

1. What are priorities?

   Derivation of priority concept: when the same style attribute of the same element is set in multiple places, it can only take effect in one place, that is, the one with higher priority takes effect.

2. Priority judgment?

   (1) Different types of selectors

    !important >Inline style>ID selector > Class selector  > . > wildcard > inherit > Browser default
   

    <!--!important Example-->
    color : red !important; 
   

   (2) Same type selector

   The principle of proximity, that is, the priority of post writing is high

   (3) Multiple selectors are mixed together

   Perceptual judgment: the more accurate, the higher the priority

   Professional judgment: the priority weight calculation rules are used. If the weight is significant, the priority is high. If the weight is the same, the priority written later is high according to the proximity principle

3. Priority weight calculation rules

   (1) Inline style, such as style = "", with weights of 1, 0, 0, 0.

   (2) ID selector, such as: #content, with weights of 0, 1, 0, 0.

   (3) Class, pseudo class and attribute selector, such as. content E:link E[attr], with weights of 0, 0, 1, 0.

   (4) Element selectors and pseudo element selectors, such as div P:: before, with weights of 0, 0, 0, 1.

   (5) Wildcards, child selectors, adjacent selectors, and so on. For example, *, >, +, the weight is 0, 0, 0, 0.

   (6) Inherited style has no weight.! important has the highest weight

Example of priority weight calculation rule:

<!--Rule line 1 applies-->
<a href="">The first one should be yellow</a> 
<div class="demo">
	<!--The rules of lines 4 and 5 apply, and line 4 has high priority-->
	<input type="text" value="The second should be blue" />
	<!--The rules of lines 2 and 3 apply, and line 3 has high priority-->
	<a href="">The third should be black</a>
</div>
<div id="demo">
	<!--The rules of lines 5 and 6 apply, and line 6 has high priority-->
	<a href="">The fourth should be red</a>
</div>

a {		/*Special value: 0,0,0,1*/
	color: yellow;	
} 
div a {	/*Special value: 0,0,0,2*/
	color: green;
} 
.demo a {	/*Special value: 0,0,1,1*/
	color: black;
} 
.demo input[type="text"] {	/*Special value: 0,0,2,1*/
	color: blue;	
} 
.demo *[type="text"] {	/*Special value: 0,0,2,0*/
	color: grey;
} 
#demo a { 	/* Special value: 0,1,0,1*/
	color: orange;
} 
div#demo a { 	/* Special value: 0,1,0,2*/
	color: red;
} 

12 CSS writing specification

1 space specification

• There must be a space between the selector and {.

  .nav  { }
  

• Spaces are not allowed between the property name and: and between: and the property value.

  font-size:  14px;
  

2 selector specification

• When a rule contains multiple selectors, each Selector declaration must be exclusive.

/*good*/
.post,
.page,
.comment {
  	color: red;
}
/*bad*/
.post, .page, .comment {
  	color: red;
}

3 attribute specification

• Property defines a row.

.selector {
  color: red;
  font-size: 14px;
}

• Property definition ends with a semicolon.

.selector {
  color: red;
  font-size: 14px;
  font-family: "Microsoft Yahei";
}

13 element display mode

Elements are divided into block elements, inline elements, inline block elements and others. They can also be converted through display.

1 block level element (block)

Common block elements are<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li> 

Characteristics of block level elements:

• Exclusive row

• Width, height, outer margin and inner margin can be controlled

• The default width is 100% of the container

• It can accommodate text or all elements except in special cases

  Special situations to remember:

  ul only contains ol or ul

  No block elements in p

  h1~h6 no block elements

2 inline

Common inline elements are:<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span> 

Characteristics of inline elements:

• Not only occupy the line
• The width is expanded by the content. Setting the width and height style is invalid
• The setting styles padding and margin are valid in the horizontal direction and invalid in the vertical direction
• Inline elements can only hold text or inline elements
  • A special, no a in a

3 inline block elements

Common inline elements are: <img />,<input />,<canvas />

Characteristics of inline block elements:
(1) Not only occupy the line
(2) The default width is expanded by the content, and the width height style is effective
(3) The setting styles padding and margin are valid

4 element display mode conversion display

Convert to inline: display:inline;

Convert to block: display:block;

Convert to inline block: display: inline block;

14 background

• What is the background
  • content + padding of element
    • border and margin are not included
    • The width and height set in the style refers to the width and height of the conten t
• What is the width and height of the background
  • The width and height of content+padding
• The area occupied by background color and background picture is the area of content+padding
• Setting the background color and background picture will not affect the width and height of the element itself

14.1 CSS color background

background-color

14.2 CSS picture background

Preschool emphasis

• Background image: sets the background image
• Background size: sets the size of the background image. It takes effect only with background image
• Background repeat: whether the background image is tiled. It will take effect only with background image
• Background position: the position of the background image. It takes effect only when there is a background image
• Background attachment: whether the background image is fixed or scrolled. It takes effect only with background image
• Background origin: locate the background image relative to the content box
• Background clip: Specifies the background of the drawing area
• Background: background color background picture address background tile background scroll background position 1)

1 background image background picture

• Syntax:

background-image: url("Local or network picture path"); 

• Default display effect:

The upper left corner of the picture coincides with the upper left corner of the element. The picture will not shrink. When the picture is too large, it will be cropped and tiled when it is too small

 You can set the background picture and background color at the same time, so that the background color will become the background color of the picture;
 If the picture of the background is smaller than the element, the background picture will automatically tile the elements and cover the elements;
 If the picture of the background is larger than the element, a part of the background cannot be fully displayed;
 If the background image is as large as the element, it will be displayed directly and normally.

2 background size background picture size

Pictures are usually cropped or tiled

            background-size Sets the size of the background picture
                The first value represents the width 
                The second value represents the height
                If only one is written, the second value defaults to auto
                cover The scale of the picture remains unchanged and the elements are covered
                contain The picture scale remains unchanged, and the picture is fully displayed in the element

(1) number number or percentage

The picture will shrink and the aspect ratio cannot be guaranteed

Percentage is a percentage relative to the size of the container

Set the width and height of the background picture to be the same as the background width and height, or set the width and height of the background picture to 100%, the picture will stretch and fill the background, and the picture will not be cropped

(2)number or percentage

There is only one value: in fact, only the image width is set, and the height is generated when the width height ratio is unchanged

(3) cover

The size of the picture is unchanged. The width and height of the background are divided by the original width and height of the picture to obtain two proportional values, and then the pictures are scaled according to the large proportional value. If the two scale values are not equal. The width or height will always overflow the background and be cropped.

Example 1: the width and height of the background are 150200 respectively, while the width and height of the container are 300600 respectively. Obviously, the width 300 / 150 = 2 (Times) and the height 600 / 200 = 3 (Times), so the final result is that the width and height of the picture are enlarged by 3 times. In this way, the height is normal and the width will overflow the background and be cropped.

Example 2: the width and height of the picture are 150200 respectively, while the width and height of the background are 100 and 100 respectively. Obviously, the width 100 / 150 = 0.67 (Times) and the height 100 / 200 = 0.5 (Times), so the final result is that both the width and height of the picture are enlarged by 0.67 times, so that the width can be normal and the height will overflow the background and be cropped.

(4)contain

The size of the picture is unchanged. The width and height of the background are divided by the original width and height of the picture to obtain two proportional values, and then the pictures are scaled according to the small proportional value. If the two scale values are not equal. There is always one width or height that cannot fill the background. contain and cover are just the opposite.

3 background repeat background tiling

value	explain
repeat	The default is to tile vertically and horizontally (repeat in both directions along the x-axis and y-axis)
repeat-x	Tile only in the horizontal direction, x-axis
repeat-y	Tile only in the longitudinal direction, y-axis
no-repeat	no-repeat
round	Average tile

4 background position

Background position is used to set the position of the background picture
Setting method:
Set the position of the background picture through several words indicating the position of top left right bottom center
When using location words, you must specify two values at the same time. If you write only one, the second default is center

Specify the position of the background picture by offset:
Horizontal offset vertical variable

(1) number number

The distance between the upper left corner of the picture and the upper left corner of the background

background-position: 50px 50px;

Different effects can be displayed when the background repeat: values are different

(2) number

nubmer from the left, centered vertically

(3) left,right,top,bottom,center and their combinations

• Examples of combined values: right bottom, right top, right center.
• When the values are left, right, top and bottom, they are equivalent to left center, right center, top center and bottom center respectively.
• When the value is center, it is equivalent to center.

(4) Percentage percentage

It's hard to understand, so the example shows

background-position: 30% 40%;
30 relative to the upper left corner of the picture as the origin% 40%Get points at p1,
30% of the origin relative to the upper left corner of the background% 40%Get points at p2,
Finally let p1 Point and p2 Point coincidence

(5) Percentage

The set percentage will be used for horizontal, and the vertical default is 50%

background-position: 30%;
Equivalent to setting background-position: 30% 50%;

5 background attachment

• Scroll: scroll with the web page, and scroll with the container without moving. The default value is
• local: scroll with the web page, and scroll with the container
• fixed: scrolls with the web page and does not move, and scrolls with the container.

After this attribute is set, background size and other attributes are not obedient. Problems should be solved according to the situation during development.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3 style="text-align: left;">The width and height of the picture itself is 150 px,200px</h3>
		<div class="div1">
			<script>
				for(let i=0; i<20; i++) {
					document.write("<p style='background:lightpink'>"+i+"</p>")
				}
			</script> 
		</div>
		<hr />
		<style type="text/css">
			body {
				text-align: center;
			}
			div {
				overflow:scroll;
				border: 2px solid red;
				width: 300px;
				height: 400px;
				background-image: url(girl.jpg);
			}
			div.div1 {
				background-size: 300px 400px;
				background-attachment: local;
			}
		</style>
		<script>
			for(let i=0; i<20; i++) {
				document.write("<p style='background:lightpink'>"+i+"</p>")
			}
		</script> 
	</body>
</html>

6 background clip to set the range of the background

background-clip
Optional values:
Border box is the default value, and the background will appear at the bottom of the border
The padding box background does not appear in the border, only in the content area and the inner margin
The content box background will only appear in the content area

7 background origin the origin of the offset calculation of the background picture

Background origin the origin of the offset calculation of the background picture
The default value of padding box is background position, which is calculated from the inner margin
The offset of the content box background picture is calculated from the content area
The variable of the border box background picture is calculated from the border

8 background abbreviations

Background is the abbreviation attribute related to the background. All background related styles can be set through this style
And the style has no order requirements, and no attribute must be written

The value of the background attribute is written in an official order that is not mandatory. For readability, the following are recommended:

Background: background color background picture address background tile background scroll background position

background: red url(./img/logo.png) repeat-y scroll 50% 0;

be careful:
Background size must be written after background position and separated by /
background-position/background-size

Background origin background clip has two styles. Origin should be in front of the clip

9 multi background (CSS3)

Multiple background images are set, which will overlap with each other. The later the image is set, the lower the image is

10 gradient

Some complex background colors can be set through gradient, which can realize the effect of transition from one color to other colors
!! Gradient is a picture, which needs to be set through background image

Linear gradient, the color changes along a straight line
linear-gradient()

Linear gradient (red, yellow) red is at the beginning, yellow is at the end, and the middle is the transition area
At the beginning of the linear gradient, we can specify a gradient direction
​ to left
​ to right
​ to bottom
​ to top
deg deg is the degree
turn denotes a circle

Gradient can specify multiple colors at the same time. Multiple colors are evenly distributed by default,
You can also manually specify the distribution of gradients

    repeating-linear-gradient() A linear gradient that can be tiled
    background-image: linear-gradient(red,yellow,#bfa,orange); 
    background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px); 

Radial gradient (radioactive effect)

Radial gradient (radioactive effect)
By default, the shape of the radial gradient is calculated based on the shape of the element
Square -- > circle
Rectangle -- > ellipse

                - We can also manually specify the size of the radial gradient
                                    circle
                ​                    circle  circular
                
                ​                    ellipse ellipse

                - You can also specify the position of the gradient
                - Syntax:
                    radial-gradient(size at position, Color position ,Color position ,Color position)
                        size:
                            circle circular
                            ellipse ellipse
                            closest-side Near side	
                            closest-corner near post
                            farthest-side Far side
                            farthest-corner far post

                        Location:
                            top right left center bottom

background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)

15 document flow

normal flow
-A web page is a multi-layer structure, with layers stacked on top of each other
-CSS allows you to style each layer separately
-As a user, you can only see the top layer
-Among these layers, the lowest layer is called document flow, which is the basis of web pages
The elements we create are arranged in the document flow by default
-For us, the element has two main states
In document flow
Not in document stream (out of document stream)

What are the characteristics of elements in document flow:
Block element
Block elements are arranged vertically from top to bottom on a single line of the page
The default width is the full width of the parent element (which will fill the parent element)
The default height is spread by content (child elements)

Inline element
In line elements do not monopolize a row of the page, but only occupy their own size
In line elements are arranged horizontally from left to right in the page. If all in line elements cannot be accommodated in one line
Then the elements will change to the second line and continue to be arranged from left to right (consistent writing habits)
The default width and height of inline elements are spread by content

16 box model

Box model, box model, box model
CSS sets all elements in the page as a rectangular box
After setting the element as a rectangular box, the layout of the page becomes to place different boxes in different positions
Each box consists of the following parts:
content area
Inner margin (padding)
border
Outer margin

1. content area

In the content area, all child elements and text contents in the element are arranged in the content area
The size of the content area is set by the width and height attributes
Width sets the width of the content area
Height sets the height of the content area

2 border

Border: the border belongs to the edge of the box, the inside of the border belongs to the inside of the box, and the outside of the border is the outside of the box
The size of the border affects the size of the entire box
To set the border, you need to set at least three styles:
Border width
Border color
Border style

When style is not set, width and color are invalid. As long as style is set, width or color will have default values

(1) border

border: Quad width Quad style Quad color

(2)border-top,border-right, border-bottom, border-left

border-top: Top width top style top color

(3)border-width,border-style,border-color

The value can be 1 ~ 4

border-width: 10px; 
The default value is usually 3 pixels
border-width Can be used to specify the width of the border in four directions
    Value
        A value: border-width: Upper right lower left width
        Three values: border-width: Upper width     Right left width bottom width
        Two values: border-width: Upper and lower width right and left width
        Four values: border-width: Upper width     Right width    Bottom width left width


except border-width There's another group border-xxx-width
    xxx Can be top right bottom left
    Lets you specify the width of an edge individually


border-style Specifies the style of the border
solid Represents a solid line
dotted Dotted line
dashed Dotted line
double Double line
border-style The default value for is none Indicates that there is no border
border-style: Top right bottom left style
border-style: Top down style right left style
border-style: Upper style     Right left style bottom style
border-style: Upper style     Right style    Lower style    Left style


border-color It is used to specify the color of the border. You can also specify the borders of four sides, rules and border-width equally
border-color It can also be omitted without writing. If omitted, it will be used automatically color Color value for
border-color: Top right bottom left color
border-color: Top and bottom color right and left color
border-color: Upper color     Right left lower color
border-color: Upper color     Right color    Lower color    Left color

(4)

border shorthand attribute, through which all relevant styles can be set at the same time without sequence requirements

border-xxx-xxx

border-top-width, border-top-style, border-top-color

border-right-width, border-right-style, border-right-color

border-bottom-width, border-bottom-style, border-bottom-color

border-left-width, border-left-style , border-left-color

border: 10px solid red;
border-bottom: 10px solid red; 

(5) style value

The key values of border style include none, dotted, dashed, solid, double, groove, ridge, inset, outlet and hidden

4 inner margin (padding)

Inner margin (padding)
The distance between the content area and the border is the inner margin
There are four internal margins:
padding-top
padding-right
padding-bottom
padding-left

The setting of the inner margin affects the size of the box
The background color extends to the inside margin

The size of the visible box of the box is determined by the margin and border in the content area,
Therefore, when calculating the box size, you need to add these three areas together

The padding property is used to set the inside margin. Refers to the distance between the border and the content.

Padding top: top inner margin

Padding right: right inner margin

Padding bottom: bottom inner margin

Padding left: left inner margin

padding: top right bottom left inner margin

Note: the value behind the attribute is variable, indicating different meanings.

Number of values	Express meaning
1 value	padding: surrounding inner margin
2 values	padding: up, down, left and right inner margins
3 values	padding: top, left, right and bottom inner margins
4 values	padding: top, bottom, left and right inner margins

padding is a shorthand property of the inside margin. You can specify the inside margin in four directions at the same time
The rules are the same as border width

5 outer margin

Outer margin
The outer margin does not affect the size of the visible box of the box
However, the outer margin will affect the position of the box
There are four outer margins:
margin-top
Upper and outer margin, set a positive value, and the element will move down
margin-right
Setting margin right has no effect by default
margin-bottom
Lower outer margin, set a positive value, and the element below it will move down
margin-left
Left outer margin, set a positive value, and the element moves to the right

margin can also be set to a negative value. If it is negative, the element will move in the opposite direction

The elements are arranged from left to right in the page,
Therefore, by default, if we set the left and upper outer margins, the element itself will be moved
Setting the bottom and right outer margins moves other elements

Abbreviated attribute of margin
Margin can set the outer margin in four directions at the same time. The usage is the same as padding

margin will affect the actual space occupied by the box

The margin property is used to set the margin. Setting the outer margin creates "white space" between elements, which usually cannot place other content.

Margin top: top outer margin

Margin right: right outer margin

Margin bottom: bottom margin

Margin left: left outer margin

margin: top right bottom left

Note: the inner and outer margins in the horizontal direction can be set for the inner and outer elements in the row, but the inner and outer margins in the vertical direction cannot be set.

The outer margin enables the box to be centered

A box can be horizontally centered, and two conditions need to be met:

1. Must be a block level element.

2. The box must have a width specified.

Just set the left and right outer margins to auto to center the block level elements horizontally.

This method is commonly used for web page layout in practical work. Examples are as follows:

.header {
	width: 960px;
  	margin: 0 auto;	/*Indicates that the upper and lower outer margins are 0, and the left and right are horizontally centered*/
}

Clears the default inside and outside margins of elements

In order to more easily control the elements in the web page, you can use the following code to clear the default inner and outer margins of elements when making a web page:

* {
	padding: 0;	/*Clear inner margin*/
  	margin: 0;	/*Clear outer margin*/
}

Text horizontal center and box horizontal center

1. Use margin in the center of the box, and set the left and right margins as auto.
2. Text align: Center is used for text centering;

Example:

<div id="box1">
	This is a div Box
</div>

div {
	width: 300px;
	height: 200px;
	border: 1px solid deeppink;
	margin: 0 auto;	/*Box centered using margin */
	text-align: center;	/*Text centered use text align*/
}

Box centered vertically

1. Use padding to center the child elements vertically

<div id="outer">
    <div id="inner">Box centered vertically</div>
</div>

#outer {
    width: 300px;/*The parent element cannot be set to a height. Make it automatically filled*/
    background: #ddd;
    padding: 100px 0;/*Set equal top and bottom margins for the parent element*/
}
#inner {
    width: 200px;
    height: 100px;
    background: #F7A750;
    line-height: 50px;
}

1. Use third party calibration

<div id="box">
    <div id="base"></div>
    <div id="child">Box centered vertically</div>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
}
#base {
    height: 50%;
    background: #AF9BD3;
}
#child {
    height: 100px;
    background: rgba(131, 224, 245, 0.6);
    line-height: 50px;
    margin-top: -50px;
}
/*The bottom edge line of the reference element is naturally the vertical center line of the parent element. After doing this, set a margin top for the element to be vertically centered. The value is half of its own height, and take a negative value to achieve vertical centering*/

Difference between insert picture and background picture

1. Insert a picture, use the attributes width and height when changing the picture size, and use the margin or padding box model when changing the picture position.
2. The background size attribute is used when changing the size of the background picture, and the background position attribute is used when changing the position of the picture.
3. In general, background pictures are suitable for small icons. Insert pictures for product display

Example:

<section>	<!-- Insert picture -->
	<img src="img/blue.jpg"/>
	12345	<!-- The inserted picture will squeeze the text in the box after the picture-->
</section>

<aside>	<!-- Background picture -->
	12345	<!-- The background image is used as the background, and the text is still displayed on the background image in the box -->
</aside>

section {
	width: 400px;
	height: 400px;
	border: 1px solid #000;
}
section img {
	width: 300px;	/*Insert a picture, change the size, and use the width and height properties*/
	height: 200px;
	margin-top: 20px;	/*Insert a picture and change the position. You can use margin or padding box model*/
	margin-left: 50px;
}
			
aside {
	width: 400px;
	height: 400px;
	border: 1px solid goldenrod;
	background: #FFC0CB url(img/blue.jpg) no-repeat;
	background-size: 300px 200px;	/*Background size is used to change the size of the background picture*/
	background-position: 50px 100px; /*Background position is used to change the position of the background picture*/
}

6 horizontal layout of boxes

Horizontal layout of elements:
The horizontal position of an element in its parent element is determined by the following attributes“
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

The horizontal layout of an element in its parent element must satisfy the following equation:

If the parent element width: 800px;
height: 200px;
border: 10px red solid;

Child element width: 200px;
height: 200px;
background-color: #bfa;
margin-right: auto;
margin-left: auto;

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = The width of its parent element content area (must meet) 7            
            0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
            0 + 0 + 0 + 200 + 0 + 0 + 600 = 800


To change the attribute of a child element:           
           100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
            100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
                - The above equation must be satisfied. If the addition result makes the equation untenable, it is called over constraint, and the equation will be adjusted automatically
                    - Adjustment:
                        - If none of these seven values is auto The browser will adjust automatically margin-right Value to satisfy the equation
                - Three of the seven values and are set to auto，Then change width
                    width
                    margin-left
                    maring-right
                    - If a value is auto，Will automatically adjust to auto To make the equation hold
                        0 + 0 + 0 + auto + 0 + 0 + 0 = 800  auto = 800
                        0 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 600
                        200 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 400

                        auto + 0 + 0 + 200 + 0 + 0 + 200 = 800  auto = 400


                        auto + 0 + 0 + 200 + 0 + 0 + auto = 800  auto = 300

                    - If you set a width and an outer margin to auto，The width is adjusted to the maximum, set to auto The outer margin of is automatically set to 0
                    - If you set all three values to auto，The outer margin is 0 and the width is the largest
                    - If the two outer margins are set to auto，If the width is fixed, the outer margin is set to the same value
                        So we often use this feature to center an element horizontally in its parent element
                        Example:
                            width:xxxpx;
                            margin:0 auto;

7 vertical layout of boxes

By default, the height of the parent element is spread by the content

The child elements are arranged in the content area of the parent element,
If the size of the child element exceeds the parent element, the child element overflows from the parent element
Use the overflow attribute to set how the parent element handles overflow child elements

                Optional values:
                    visible，The default value child element overflows from the parent element and is displayed outside the parent element
                    hidden Overflow content will be cropped and will not be displayed
                    scroll Generate two scroll bars to view the complete content
                    auto Generate scroll bars as needed

8 fold of outer margin

When using margin to define the vertical outer margins of block elements, merging of outer margins may occur.

Merging of vertical outer margins of adjacent block elements

When the upper and lower adjacent block elements meet, if the upper element has a lower outer margin margin margin bottom and the lower element has an upper outer margin margin margin top, the vertical distance between them is not the sum of margin bottom and margin top, but the larger of the two. This phenomenon is called the merging of the vertical outer margins of adjacent block elements (also known as outer margin collapse).

Solution: just avoid it.

Overlap (collapse) of vertical outer margins
The outer margins of adjacent vertical directions will overlap
Sibling element
The adjacent vertical outer margin between sibling elements will take the larger value between them (both are positive)
exceptional case:
If the adjacent outer distance is positive and negative, the sum of the two is taken
If the adjacent outer margins are negative, the greater of the two absolute values is taken

The overlap of outer margins between sibling elements is beneficial for development, so we don't need to deal with it

Parent child element
The adjacent outer margin between parent and child elements, and the of child elements will be passed to the parent element (upper outer margin)
The folding of parent-child outer margin will affect the layout of the page and must be handled

Merging of vertical outer margins of nested block elements

For two nested block elements, if the parent element has no upper and inner margins and borders, the upper and outer margins of the parent element will be merged with the upper and outer margins of the child element, and the merged outer margin will be the larger of the two. Merging will occur even if the upper and outer margins of the parent element are 0.

Solution:

1. You can define a 1-pixel upper border or upper and inner margin padding for the parent element

2. You can add overflow: hidden for the parent element;

Box model of elements in line 9

Box model of inline elements
Inline elements do not support setting width and height
Padding can be set for inline elements, but vertical padding will not affect the layout of the page
Border can be set for in-line elements, and the vertical border will not affect the layout of the page
In line elements can set margin, and the vertical margin will not affect the layout

Display is used to set the type of element display
Optional values:
Inline sets the element as an inline element
Block sets the element as a block element
Inline block sets the element as an inline block element
In line block, you can set the width and height without monopolizing one line
Table sets the element to a table
The none element is not displayed in the page

visibility is used to set the display state of elements
Optional values:
visible is the default value, and the element is displayed normally in the page
The hidden element is hidden from the page, but it still occupies the position of the page

10 stability of box model layout

When learning the box model, the biggest problem is that you can't distinguish the use of inner and outer margins. Under what circumstances do you use inner margins and under what circumstances do you use outer margins?

The recommendations are as follows:

Preferred width( width)，Second, use inner margins( padding)，Last, use the outer margin( margin)
width > padding > margin

reason:

1.margin will have outer margin merging, and margin is prone to bug s under ie6.

2.padding will affect the size of the box and needs to be added or subtracted.

3.width is OK.

Supplement: inner and outer margins in the horizontal direction can be set for in-line elements, but not in the vertical direction.

11 box shadow

Syntax format:

box-shadow: Horizontal position vertical position blur distance shadow size (shadow size) within shadow color/Vulva shadow;

value	describe
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed
v-shadow	Required. The position of the vertical shadow. Negative values are allowed
blur	Optional. Fuzzy distance
spread	Optional. Shadow size
color	Optional. The color of the shadow
inset	Optional. You can change the external shadow to the internal shadow

The default is to write external shadows. If you want internal shadows, use inset.

Example:

div {
	width: 200px;
	height: 200px;
	border: 2px solid deeppink;
	box-shadow: 5px 5px 3px 4px grey; 
}

12 rounded border (CSS3)

The value can be number or percentage

When there is a border, it refers to the rounded corner of the border; when there is no border, it refers to the rounded corner of the background (content+padding)

border-radius:  Upper left corner upper right corner lower right corner lower left corner;	  /*4 Values*/
border-radius:  Upper left corner upper right corner/Lower left and lower right corner;	   		/*3 Values*/
border-radius:  Upper left/Lower right upper right/Lower left;			 /*2 Values*/
border-radius:  The four fillets have the same value;					  /*1 Values*/

        /* border-top-left-radius:  */
        /* border-top-right-radius */
        /* border-bottom-left-radius:  */
        /* border-bottom-right-radius:  */
        /* Set the element to a circle */
            border-radius: 50%;

13 cell border merging in table

border-collapse: separate Not merge
border-collapse: collapse;Not merge

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table class="t1" cellpadding="0" cellspacing="0">
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
		</table>
		<hr />
		<table class="t2" cellpadding="0" cellspacing="0">
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
			<tr>
				<td>123</td>
				<td>123</td>
				<td>123</td>
			</tr>
		</table>
		<style>
			table {
				width: 300px;
				height: 200px;
			}
			td {
				border: 10px solid deeppink;
			}
			.t1 {
				/* cell Border merge between */
				border-collapse: collapse;
			}
		</style>
	</body>
</html>

14 box size

By default, the size of the box visible box is determined by the content area, the inner margin, and the border

Box sizing is used to set the calculation method of box size (the function of setting width and height)
Optional values:
Content box is the default value. The width and height are used to set the size of the content area
Border box width and height are used to set the size of the visible box of the whole box
width and height refer to the total size of the content area and inner margins and borders

17. Float

Float was first used to control the picture so that other elements (especially text) can surround the picture, but it is also very useful in layout.

Floating allows an element to move to the left or right of its parent element
Use the float attribute to set the float on the element
Optional values:
none is the default, and the element does not float
The left element floats to the left
The right element floats to the right

Note that after the element is set to float, the equation of horizontal layout does not need to be enforced
After the element is set to float, it will be completely separated from the document flow and no longer occupy the position of the document flow,
Therefore, the element below the element that is still in the document stream will automatically move upward

Floating features:
1. The floating element will be completely separated from the document flow and no longer occupy the position in the document flow
2. After floating is set, the element will move to the left or right of the parent element,
3. Floating elements are not removed from the parent element by default
4. When a floating element moves left or right, it will not exceed other floating elements in front of it
5. If the upper edge of a floating element is a block element without floating, the floating element cannot be moved up
6. The floating element will not exceed the floating sibling element above it. At most, it is as high as it

Brief summary:
At present, the main function of floating is to make the elements in the page arranged horizontally,
Some horizontal layouts can be made by floating

1 what is floating?

Floating of an element means that an element with a floating attribute set will move out of the control of the standard normal flow to the specified position in its parent element.

In CSS, float is defined by float attribute. Its basic syntax is as follows:

selector {
    float: Attribute value;
}

Attribute value	describe
left	The element floats to the left
right	The element floats to the right
none	Element does not float (default)

How do elements float

• The horizontal floating of the element means that the element can only move left and right, not up and down. And the elements around it are rearranged.

• A floating element moves as far left or right as possible until its outer edge touches the border containing a box or another floating box. (find the nearest parent element, excluding the inner margin)

• The element after the floating element will surround it.

• Elements before floating elements will not be affected.

• If the image is floating right, the following text stream will surround it to the left:

<p>
	<img src="./img/a0.PNG" width="120px" height="80px">
	This is some text, this is some text, this is some text, this is some text, this is some text, this is some text, this is some text, this is some text, this is some text, this is	  Some text this is some text this is some text this is some text this is some text this is some text this is some text
</p>

img {
	float: right;
}

3 floating elements adjacent to each other

If you put several floating elements together, they will be adjacent to each other if there is space.

<img src="./img/a0.PNG" alt="" width="120px" height="80px">
<img src="./img/a1.PNG" alt="" width="120px" height="80px">
<img src="./img/a2.PNG" alt="" width="120px" height="80px">
<img src="./img/a3.PNG" alt="" width="120px" height="80px">
<img src="./img/a4.PNG" alt="" width="120px" height="80px">

img {
	margin: 10px;
	float: left;
}

Try resizing your browser to see what happens when the picture is not large enough to display?

4 other features of floating

The floating element will not cover the text, and the text will automatically surround the floating element,
So we can use floating to set the effect of text around the picture

After the element is set to float, it will be separated from the document flow. After it is separated from the document flow, some characteristics of the element will also change

Characteristics of breaking away from document flow:
Block element:
1. The block element is not on a row of the exclusive page
2. After leaving the document stream, the width and height of the block element are expanded by the content by default

Inline elements:
When an inline element breaks away from the document flow, it will become a block element with the same characteristics as a block element

After leaving the document stream, there is no need to distinguish between blocks and lines

5 problem of height collapse

BFC(Block Formatting Context) block level formatting environment
-BFC is an implicit attribute in CSS, which can enable BFC for an element
When BFC is turned on, the element will become a separate layout area
-Features of element after BFC is turned on:
1. Elements with BFC enabled will not be overwritten by floating elements
2. When BFC is enabled, the outer margins of child elements and parent elements will not overlap
3. Elements with BFC enabled can contain floating child elements

The BFC of an element can be turned on in some special ways:
1. Set element float (not recommended)
2. Set element to inline block element (not recommended)
3. Set the overflow of the element to a non visible value
The common way is to set overflow:hidden for elements and turn on their BFC so that they can contain floating elements

6 clear float

After the element floats, the surrounding elements will be rearranged. To avoid this, use the clear attribute.

The clear attribute specifies that floating elements cannot appear on both sides of an element.

If we don't want an element to change its position due to the floating of other elements,
You can clear the impact of floating elements on the current element through the clear attribute

clear
    - Function: clear the influence of floating elements on the current element
    - Optional values:
        left Clears the influence of the left floating element on the current element
        right Clears the influence of the floating element on the right on the current element
        both Clear the side with the greatest impact on both sides

    Principle:
        After setting and clearing floating, the browser will automatically add an upper and outer margin to the element,
            So that its position is not affected by other elements

Syntax:

clear: both; /*Clear the floating attributes of the elements on both sides of the element*/

Example:

<img src="./img/a0.PNG" alt="" />
<img src="./img/a1.PNG" alt="" />
<img src="./img/a2.PNG" alt="" />
<p class="text-line">Second line</p>
<img src="./img/a3.PNG" alt="" />
<img src="./img/a4.PNG" alt="" />
<img src="./img/boy.png" alt="" />

img {
	width: 150px;
	height: 85px;
	margin: 10px;
	float: left;	/*Set the picture to float left, and the picture will be displayed adjacent*/
}			
.text-line {
	clear: both;	/*Clear floating attributes of elements on both sides*/
}

Relationship between floating and common elements:

1. Elements with floating attributes will not occupy the position of elements without floating attributes;
2. Elements without floating attributes ignore the existence of elements with floating attributes.

Generally speaking, after a float is completed, we'd better clear the float once.

7 final solution for high collapse

clearfix can solve the problems of height collapse and outer margin overlap at the same time. When you encounter these problems, you can directly use clearfix

    .clearfix::before,
    .clearfix::after{
        content: '';
        display: table;
        clear: both;

18. position

1 Introduction to positioning

position
-Positioning is a more advanced means of layout
-By positioning, you can place elements anywhere on the page
-Use the position property to set the position
Optional values:
Static is the default value. The element is static and positioning is not enabled
Relative turns on the relative positioning of elements
Absolute turns on the absolute positioning of the element
Fixed opens the fixed positioning of the element
Sticky turns on sticky positioning of elements

- Offset( offset)
    - When element positioning is turned on, the position of the element can be set by offset
        top
            - The distance between the positioning element and the upper edge of the positioning position
        bottom
            - The distance between the positioning element and the lower edge of the positioning position

            - The vertical position of the positioning element is determined by top and bottom Two properties to control
                Usually we only use one of them
            - top The higher the value, the lower the positioning element moves
            - bottom The higher the value, the more the positioning element moves upward
        left
            - The left distance between the positioning element and the positioning position
        right
            - The right distance between the positioning element and the positioning position

            - The horizontal position of the positioning element is determined by left and right Two attribute control
                Usually only one is used
            - left The larger the element, the more to the right
            - right The larger the element, the left

2 positioning attribute of element

The positioning attributes of elements mainly include positioning mode and edge offset

• Edge offset

Edge offset attribute	describe
top	The top offset, which defines the distance of the element from the upper edge of its parent element
bottom	Bottom offset, which defines the distance of the element from the lower edge of its parent element
left	The left offset defines the distance of the element from the left line of its parent element
right	Right offset, which defines the distance of the element from the right line of its parent element

Positioning should be used together with edge offset, such as top: 100px; left:30px;

• Positioning mode

In CSS, the position attribute is used to define the positioning mode of elements. Its basic syntax is as follows:

selector {
    position:  Attribute value;
}

Common values for the position property

Attribute value	describe
static	Default, auto positioning.
relative	Relative position, relative to the position of its original file flow
absolute	Absolute positioning, relative to its previous positioned parent element
fixed	Fixed positioning, which is a fixed position relative to the browser window

3 static positioning

Static positioning is the default positioning method for all elements. When the value of the position attribute is static, the element can be positioned in a static position. The so-called static position is the default position of each element in the HTML document stream.

In the static positioning state, the position of an element cannot be changed by offset attributes (top, bottom, left, right).

It is generally used to clear the positioning. For example, if a box with positioning is not written, you can add static

4 relative positioning

The element box set to relative positioning will be offset by a certain distance. The element still retains its shape before positioning, and the space it originally occupied remains.

If an element is relatively positioned, it will appear in its position. Then, you can move the element "relative" to its starting point by setting the vertical or horizontal position.

Example: if top is set to 20px, the box will be 20 pixels below the top of the original position. If left is set to 30 pixels, a space of 30 pixels will be created on the left of the element, that is, the element will be moved to the right.

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

be careful:

1. When relative positioning is used, the position is moved by edge offset. No matter whether it is moved or not, the element still occupies the original space. Therefore, moving the element will cause it to cover other boxes.

2. Secondly, the position of each movement is based on the upper left corner of the element itself

The box with relative positioning is still in the standard flow, and the box behind it is still treated as the standard flow. (relative positioning does not fall off the standard)

If the main purpose of floating is to display multiple block level elements in a row, positioning is to move the position and make the box to the position we want.

• Relative positioning:

  • When the position attribute value of the element is set to relative, the relative positioning of the element is turned on

  • Characteristics of relative positioning:
    1. After the element is enabled for relative positioning, if the offset is not set, the element will not change
    2. Relative positioning refers to the position of the element in the document stream
    3. Relative positioning will raise the level of elements
    4. Relative positioning will not separate elements from the document flow
    5. Relative positioning will not change the nature of the element, block or block, inline or inline

5 absolute positioning

The element box set to absolute positioning is completely deleted from the document flow and positioned relative to its containing block. The containing block may be another element in the document or the initial containing block. The space originally occupied by the element in the normal document flow will be closed as if the element did not exist. After the element is positioned, a block level box will be generated, regardless of whether it was originally generated in the normal flow What type of box.

Absolute positioning makes the position of the element independent of the document flow, so it does not occupy space.

The layout of other elements in the normal flow is the same as the absolutely positioned element does not exist:

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

The position of the absolutely positioned element is relative to * * * the nearest positioned ancestor element * * *. If the element has no positioned ancestor element, its position is relative to * * * the original containing block * * *.

• Parent not positioned

  The father is not positioned, and the child elements are aligned with the body as the reference point

• Parent has positioning

  If the father has positioning, align with the father as the reference point

• Son Jue father phase

  If the child is absolutely positioned, the parent should use relative positioning.

  The origin of the son Jue Fu phase:

  The relative positioning position does not fall off the mark

  Absolute positioning does not occupy the position and is completely off standard

  Example:

Summary: the main problem for positioning is to remember the meaning of each positioning. Therefore, let's review what we have learned: relative positioning is the initial position of the "relative" element in the document, while absolute positioning is "relative" to the nearest located ancestor element. If there is no located ancestor element, then "relative" to the initial containing block.

Absolute positioning

• When the position attribute value of the element is set to absolute, the absolute positioning of the element is turned on
• Characteristics of absolute positioning:
  1. After absolute positioning is turned on, if the offset is not set, the position of the element will not change
  2. When absolute positioning is enabled, the element will be separated from the document stream
  3. Absolute positioning will change the nature of the element, turn the line into a block, and the width and height of the block are expanded by the content
  4. Absolute positioning will raise the element to one level
  5. The absolute positioning element is positioned relative to its containing block

containing block
-Under normal conditions:
The containing block is the closest ancestor block element to the current element

    <div> <div></div> </div>
<div><span><em>hello</em></span></div>

        - Absolutely positioned containing block:
        The containing block is the nearest ancestor element with positioning turned on,
        If all ancestor elements do not have location enabled, the root element is its containing block

       - html(Root element, initial inclusion block)

​

6 absolutely positioned box horizontally / vertically centered

If an ordinary box wants to be horizontally centered, it only needs to change the left and right margin to auto, but auto will fail when it is absolutely positioned.

The positioned box can also be centered horizontally or vertically. The algorithm is as follows:

1. First, left 50% of the size of the parent box.
2. Then take the negative half of your outer margin.

<div class="father">
	<div class="son-hr"></div>
	<div class="son-ve"></div>
	<div class="hr-ve"></div>
</div>

<style type="text/css">
	.father {
		width: 800px;
		height: 400px;
		background-color: pink;
		margin: 50px auto;
		position: relative;
	}
	/*Child element horizontal center*/
	.son-hr {
		width: 100px;
		height: 50px;
		background-color: green;
		position: absolute;
		/*margin: 0 auto; Using the box with absolute positioning, the auto of margin will fail*/
		left: 50%;
		margin-left: -50px;
	}
	/*Child elements centered vertically*/	
	.son-ve {
		width: 100px;
		height: 50px;
		background-color: blueviolet;
		position: absolute;
		top: 50%;
		margin-top: -25px;
	}
	/*Child elements are vertically and horizontally centered*/	
	.hr-ve {
		width: 100px;
		height: 50px;
		background-color: darkgoldenrod;
		position: absolute;
		left: 50%;
		margin-left: -50px;
		top: 50%;
		margin-top: -25px;
	}	
</style>

Horizontal layout
Left + margin left + border left + padding left + width + padding right + border right + margin right + right = the width of the content area containing the block

When we turn on absolute positioning:
The horizontal layout equation needs to be added left and right Two values
    At this time, the rule is the same as before, except that two more values are added:
        When over constraint occurs:
            If none of the 9 values auto Automatically adjust right Value to satisfy the equation
            If so auto，Automatically adjust auto To satisfy the equation

   - Settable auto Value of
     margin width left right
        - because left and right The default value is auto，So if you don't specify left and right
          The two values will be automatically adjusted when the equation is not satisfied

The equation of vertical layout must also be satisfied
    top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = Contains the height of the block

​

Sets the center of the element

        width: 100px;
        height: 100px;
        background-color: orange;
        position: absolute;
        margin: auto;
        left: 0;
         right: 0;
         top: 0;
         bottom: 0;

7 fixed positioning

Fixed positioning is a special form of absolute positioning. It uses the browser window as a reference to define web page elements. When the value of the position attribute is fixed, the positioning mode of the element can be set to fixed positioning.

When fixed positioning is set for an element, it will be out of control of the standard document flow and always define its display position according to the browser window. This element is always displayed in a fixed position in the browser window no matter how the browser scroll bar scrolls or how the browser window size changes.

Detached document flow: fixed, absolute.

Fixed positioning:
-Setting the position attribute of the element to fixed turns on the fixed positioning of the element
-Fixed positioning is also an absolute positioning, so most of the characteristics of fixed positioning are the same as absolute positioning
The only difference is that fixed positioning is always referenced to the viewport of the browser
Fixed positioned elements do not scroll with the scroll bar of the web page

8 viscous positioning

Viscous positioning
-When the position attribute of the element is set to sticky, the sticky positioning of the element is turned on
-The characteristics of viscous positioning and relative positioning are basically the same,
The difference is that sticky positioning can fix an element when it reaches a certain position

9 stacking order (z-index) / level of elements

When multiple elements set positioning at the same time, there may be overlap between positioning elements.

Elements with a higher stacking order always precede elements with a lower stacking order.

<h1>This is a heading</h1>
<img src="./img/a0.png" width="100" height="140" />
<p>Because the image element is set z-index The attribute value is -1, So it will appear after the text.</p>

img {
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}

In CSS, if you want to adjust the stacking order of overlapping positioning elements, you can use the z-index stacking level attribute for positioning elements, which can be positive integer, negative integer and 0

be careful:

1. ① The default value of z-index is 0. The larger the value of the same level element, the higher the positioning element is in the stacked element;

   ② Compared with parent-child elements, the parent element z-index will not work, and the child element will have a stacking effect with the parent element on the positive and negative values of z-index;

   ③ When different parent elements and the parent element is set with z-index, the child elements are stacked according to the z-index of their parent element (i.e. "spell father");

   ④ On the basis of the previous case, modifying the z-index of a child element will only affect the stacking effect of the child element, and will not affect the parent element;

   ⑤ Similarly, in the case of ③, if the z-index of the child element is negative, they will be overwritten by the parent element.

2. If the values are the same, the latter takes the upper place according to the writing order.

3. No unit can be added after the number.

4. Only relative positioning, absolute positioning and fixed positioning have this attribute, while other standard flow, floating and static positioning do not have this attribute.

For an element with positioning enabled, you can specify the level of the element through the z-index attribute
z-index requires an integer as a parameter. The higher the value, the higher the level of the element
The higher the level of the element, the more priority is displayed

If the level of elements is the same, the lower elements are preferred

No matter how high the level of an ancestor's element is, it will not cover the descendant's element

problem

1. What are css selectors? (please give another example)
2. css selector priority?
3. Four elements of css box model?
4. Positioning: understanding of z-index? (to clear hierarchy)

19 animation

animation
Animation is similar to transition, which can achieve some dynamic effects,
The difference is that the transition needs to be triggered when an attribute changes
Animation can automatically trigger dynamic effects

To set the animation effect, you must first set a key frame. The key frame sets the animation and performs each step

Syntax:

    @keyframes test {
        /* from 0% can also be used to represent the starting position of the animation */
        from{
            margin-left: 0;
            background-color: orange;
        } 

        /* to You can also use 100% at the end of the animation*/
        to{
            background-color: red;
            margin-left: 700px;
        }
    }

1 transition

transition
-Transition allows you to specify how to switch when an attribute changes
-Through the transition, you can create some very good effects and improve the user experience

1 transition property: Specifies the property to perform the transition
Multiple attributes are used and separated
If all attributes require a transition, use the all keyword
Most attributes support the transition effect. Note that the transition must be from one valid value to another

        /* transition-property: height , width; */
        /* transition-property: all; */

2 transition duration: Specifies the duration of the transition effect
Time unit: s and ms 1s = 1000ms

         /* transition-duration: 100ms, 2s; */
         /* transition-duration: 2s; */

3 transition timing function: transition timing function
Specifies how the transition is performed

Optional values:

The default value of ease is to start slowly, accelerate first, and then decelerate
linear uniform motion
Ease in acceleration
Ease out deceleration movement
Ease in out
Cubic bezier() to specify the timing function
​ https://cubic-bezier.com
steps() executes the transition effect step by step
You can set a second value:
End to perform the transition at the end of time (default)
start to perform the transition at the beginning of time

      /* transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); */
     /* transition-timing-function: steps(2, start); */

4 transition delay: the delay of the transition effect. Wait for a period of time before executing the transition

​ /* transition-delay: 2s; */

Summary: transition can set all transition related attributes at the same time. There is only one requirement. If you want to write delay, the first is duration and the second is delay

2 animation

1 animation name: the name of the key frame to be effective for the current element

​ /* animation-name: test; */

2 animation duration: the execution time of the animation

​ /* animation-duration: 4s; */

3 animation delay

​ /* animation-delay: 2s; */

4 animation iteration count the number of times the animation is executed

Optional values:
frequency
infinite execution

​ /* animation-iteration-count: 1; */

5 animation direction specifies the direction in which the animation runs
Optional values:
The default value of normal runs from from to, every time
reverse runs from to to from, every time
alternate runs the repeat animation from from to, and reverses the execution
Alternate reverse runs the repeated animation from to to from in reverse

​ /* animation-direction: alternate-reverse; */

6 animation play state: sets the execution state of the animation
Optional values:
running default animation execution
paused animation pause

​ /* animation-play-state: paused; */

7 animation fill mode: fill mode of animation
Optional values:
none default: the element returns to its original position after the animation is executed
After the forward animation is executed, the element will stop at the end of the animation
When the backwards animation delays waiting, the element is in the start position
both combines forwards and backwards

​ /* animation-fill-mode: both; */

3 deformation

Deformation refers to changing the shape or position of elements through CSS

• Deformation does not affect the layout of the page
• transform is used to set the deformation effect of the element

  • Pan:
    translateX() translates along the x axis
    translateY() translates along the y axis
    translateZ() translates along the z axis
    -Translate the element, and the percentage is calculated relative to itself

      /* transform: translateY(-100px); */
      transform: translateX(100%);
    

You can use translation to center elements

        background-color: orange;
        position: absolute;
        /* 
        This centering method is only applicable to determining the size of elements
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto; */

        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);

Z-axis translation

Z-axis translation, adjust the position of the element on the z-axis. Normally, adjust the distance between the element and the human eye,
The greater the distance, the closer the element is to the person
z-axis translation belongs to stereo effect (near large and far small). By default, web pages do not support perspective. If you need to see the effect
You must set the viewing distance of the web page

    html{
        /* Set the viewing distance of the current web page to 800px and the distance between human eyes and the web page */
        perspective: 800px;
    }

4 rotation

Rotation lets you rotate an element by a specified angle along X, y, or z
rotateX()
rotateY()
rotateZ()

        /* transform: rotateZ(.25turn); */
        /* transform: rotateY(180deg) translateZ(400px); */
        /* transform: translateZ(400px) rotateY(180deg) ; */
        transform: rotateZ(-45deg);
        /* Whether to display the back of the element */
        backface-visibility: hidden;

5 zoom

/* The default value of the origin of the deformation is center*/
/* transform-origin:20px 20px;  */

Functions to scale elements:
scaleX() scale horizontally
scaleY() scale vertically
scale() bi directional scaling

20 flex (elastic box, telescopic box)

1 Introduction to flex

        - yes CSS It is mainly used to replace floating to complete the layout of the page
                    - flex You can make elements elastic, so that elements can change with the size of the page
                    - Elastic container
            - To use an elastic box, you must first set an element as an elastic container
            - We pass display To set the elastic container
                display:flex  Set to block level elastic container
                display:inline-flex Set as an elastic container within a row

        - Elastic element
            - The child element of an elastic container is an elastic element (elastic item)
            - Elastic elements can also be elastic containers

Attributes of elastic elements:
Flex growth specifies the coefficient of extension of the elastic element

                - When the parent element has extra space, how does the child element stretch
                                    - The remaining space of the parent element will be allocated in proportion to the remaining space of the parent element
                            flex-shrink Specifies the shrinkage factor of the elastic element
                                    - When the space in the parent element is not enough to accommodate all the child elements, if the child elements are shrunk

Flex direction specifies the arrangement of elastic elements in the container
Optional values:
row default, elastic elements are arranged horizontally (left to right) in the container
Spindle from left to right
Row reverse elastic elements are arranged horizontally in reverse (right to left) in the container
Spindle from right to left
column elastic elements are arranged vertically (from top to bottom)
Column reverse elastic elements are arranged vertically (from bottom to top)

Spindle:
The arrangement direction of elastic elements is called the principal axis
Side / auxiliary shaft:
The direction perpendicular to the main axis is called side / secondary axis

2 style of elastic container

flex-wrap:
Sets whether elastic elements wrap automatically in elastic containers
Optional values:
The default value of nowrap is that the element does not wrap automatically
Wrap elements wrap automatically along the minor axis
The wrap reverse element wraps the line in the opposite direction of the minor axis

flex-flow:

        /* flex-flow:  wrap And direction */
        /* flex-flow: row wrap; */

justify-content
-How to allocate the blank space on the spindle (how to arrange the elements on the spindle)
-Optional values:
Flex start elements are arranged along the starting edge of the spindle
Flex end elements are arranged along the end edge of the spindle
center elements are centered
Space around white space is distributed on both sides of the element
Space between blanks are evenly distributed between elements
Space evenly white space is distributed to one side of the element

align-items:
-How are elements aligned on the minor axis
-Relationship between elements
-Optional values:
stretch defaults to set the length of the element to the same value
The flex start element does not stretch and is aligned along the starting edge of the minor axis
Flex end aligns along the end edge of the secondary axis
center alignment
baseline alignment

Align self: used to override the align items on the current elastic element

align-content:

How to allocate the empty space on the secondary axis

Flex start elements are arranged along the starting edge of the minor axis
Flex end elements are arranged along the end edge of the minor axis
center elements are centered
Space around white space is distributed on both sides of the element
Space between blanks are evenly distributed between elements
Space evenly white space is distributed to one side of the element

3 style of elastic element

Elastic growth coefficient
flex-grow: 1;

Reduction factor of elastic element

The calculation method of reduction factor is complex
The reduction is calculated based on the reduction factor and element size

​ /* flex-shrink: 1; */

Element base length

            flex-basis Specifies the base length of the element on the spindle
                If the principal axis is horizontal, this value specifies the width of the element
                If the principal axis is vertical, this value specifies the height of the element
                - The default value is auto，Represents the height or width of the reference element itself
                - If a specific value is passed, the value shall prevail

​ /* flex-basis: auto; */

flex can set all three styles of elastic elements
flex growth reduction base;
initial "flex: 0 1 auto".
auto "flex: 1 1 auto"
none 'flex: 0 0 auto' elastic element has no elasticity

        flex: initial;

​

Order determines the order of elastic elements

21 layout related

1 pixel

    Pixels:
        - The screen is composed of luminous dots, which are pixels
        - Resolution: 1920 x 1080 That's the number of small dots on the screen
        - In front-end development, pixels are discussed in two cases: CSS Pixels and physical pixels
        - Physical pixel, the small dots mentioned above belong to physical pixels
        - CSS Pixels, when writing web pages, we use pixels CSS pixel
            - When the browser displays a web page, it needs to CSS Pixels are converted to physical pixels and then rendered
            - One css The pixels are finally displayed by several physical pixels, which are determined by the browser:
                By default, in pc End, one css pixel = One physical pixel

    Viewport( viewport)
        - A viewport is the area of the screen used to display web pages
        - You can view the view by looking at the size of the viewport CSS Ratio of pixels to physical pixels
        - By default:
            Viewport width 1920 px(CSS Pixels)
                    1920px(Physical pixels)
                    - At this point, css The ratio of pixels to physical pixels is 1:1

        - Double magnification:
            Viewport width 960 px(CSS Pixels)
                    1920px(Physical pixels)
                    - At this point, css The ratio of pixels to physical pixels is 1:2

        - We can change it by changing the size of the viewport CSS Ratio of pixels to physical pixels

2 mobile terminal

    In different screens, the size of unit pixel is different. The smaller the pixel, the clearer the screen will be
        24 Inch 1920 x1080
        i6 4.7 Inch 750 x 1334

        The pixels of smart phones are much smaller than those of computers

        Question: a width of 900 px Your page is in iphone6 How to display it in?

        By default, the viewport will be set to 980 pixels for web pages on the mobile end( css Pixels)
            To ensure pc The web page can be accessed normally on the mobile terminal, but if the width of the web page exceeds 980,
                The browser on the mobile terminal will automatically zoom the web page to fully display the web page

        https://material.io/resources/devices/
        
        So most of them pc End websites can browse normally in the mobile terminal, but they often don't have a good experience. In order to solve this problem, most websites will design web pages specifically for the mobile terminal

3 mobile terminal page

The default viewport size of the mobile terminal is 980px(css pixels),
By default, the pixel ratio of mobile terminal is 980 / mobile terminal width (980 / 750)
If we write mobile code directly in the web page, the pixel ratio is very bad in the 980 viewport,
The content in the web page is very, very small
When writing mobile pages, you must ensure a reasonable pixel ratio:
1 CSS pixel corresponds to 2 physical pixels
1 CSS pixel corresponds to 3 physical pixels

        - Can pass meta Label to set the viewport size

        - Every mobile device is designed with an optimal pixel ratio,
            Generally, we only need to set the pixel ratio to this value to get the best effect
            Set the pixel ratio to the viewport size with the best pixel ratio, which we call the perfect viewport

            Set the viewport of the web page to a perfect viewport
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            Conclusion: when writing the mobile terminal page later, write the above thing first

<!-- Set viewport size device-width Represents the width of the device (perfect viewport)-->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->

4 viewport

    The size of the perfect viewport is different for different devices
        iphone6 -- 375
        iphone6plus -- 414

    Because different devices have different viewports and pixel ratios, the same 375 pixels have different meanings under different devices,
        Like in iphone6 Middle 375 is full screen, and here it is plus One of the 375 will be missing

    Therefore, when developing the mobile terminal, it can no longer be used px Here's the layout

    vw Represents the width of the viewport( viewport width)
        - 100vw = Width of one viewport
        - 1vw = 1%Viewport width

        vw This unit is always equal to the viewport width for calculation

        Width of design drawing
            750px 1125px

        a design chart 
            750px  

        use vw As a unit
            100vw

        Create a 48 px x 35px Element of size

        100vw = 750px(Pixels of design drawing) 0.1333333333333333vw = 1px
        6.4vw = 48px(Design drawing pixels)
        4.667vw = 35px

5 vw adaptation

            The minimum font size in a web page is 12 px，You cannot set a font smaller than 12 pixels
                If we set a value less than 12 px Font, the font is automatically set to 12

            0.1333333vw = 1px

            5.3333vw = 40px
            
            rem
                    - 1 rem = 1 html Font size for
                    - 1 rem = 40 px(a design chart)

6 responsive layout

Responsive layout
Web pages can present different effects according to different devices or window sizes
Using responsive layout, you can make a web page suitable for all devices
The key to response layout is media query
Through media query, you can set styles for impassable devices or different states of devices

     Use media query 
        Syntax: @media Query rules{}
            Media type:
                all All equipment
                print Printing equipment
                screen Device with screen
                speech screen reader 
                - have access to,Connect multiple media types so that they have one or more relationships

            You can add a before the media type only，Means only.
                only It is mainly used to be compatible with some old browsers
     */

    /* @media print,screen{
        body{
            background-color: #bfa;
        }
    } */

    @media only screen {
        body{
            background-color: #bfa;
        }
    }

7 media query

         Media features:
            width The width of the viewport
            height The height of the viewport

            min-width The minimum width of the viewport (effective when the viewport is greater than the specified width)
            max-width The maximum width of the viewport (effective when the viewport is less than the specified width)
     */

     /* @media (max-width: 500px){
         body{
            background-color: #bfa;
         }
     } */
         The dividing point of style switching is called breakpoint, that is, the style of the web page will change at this point
         Commonly used breakpoints
               Ultra small screen less than 768 max-width=768px
               Larger than 768 small screen   min-width=768px
               Larger than 992 medium screen min-width=992px
               Larger than 1200 screens  min-width=1200px

     @media only screen and (min-width: 500px) and (max-width:700px){
         body{
            background-color: #bfa;
         }
     }

@total-width:750;
.w{
width: 693/40rem;
margin: 0 auto;
}

//Set root element
html{
//Set the ratio of rem
font-size: 100vw/@total-width * 40;
background-color: #eff0f4;
}

special

margin merging of one element

Theory: there are two special columns of the block element margin

1. Merge margin between horizontal div s

2. The margin of the child container div is invalid for the parent container

Example 3: when all div s float, margin does not merge

(margins between floating div s are not merged, which is used to solve the phenomenon of margin merging)

The margin s of inline block elements are not merged

4, margin invalidation of nested block elements

The solution to "margin failure in block element nesting" is

(the overall idea is to find something to seal up and down)

1. Float the internal block elements and then drop them

2. Set a border for the top and bottom of the container to seal the top and bottom

3. Use:: before and:: after to add a table element at the beginning and end of the container, which can also seal the upper and lower edges

4. Add an arbitrary text at the beginning and end of the container, so that the upper and lower edges can also be sealed

5. Change the display value of the parent block or child block to

display: inline-block;

or

display: table;

The second check box is deselected

III. special topic of float clear

1, Float

float:none,left,right

clear:both,left,right

2, Floating is to tie a balloon to float and get out of the document flow

3, Clearing floating is to shape the floating elements, and then poke the balloon

Pop, let the stereotyped appearance return to the document stream

1. Clear: both, left, right

2. You can use:: after of the container where the floating div is located. This method is equivalent to the last in the container

Add one

??::after {

content:"";

display:block;

clear:both

}

The block of display: above can be changed to table. The table in table is the seal of the container.

4, Special function: solve the problem of up and down failure of internal container margin and external container

5, The text in the document stream corresponding to the floating div can only surround the floating Div

Text that is not a document stream has no effect.

6, No matter how floating, there is no relative, absolute or fixed positioning element running high

Four concave convex text

Text shadow: text shadow, multiple shadows can be set;

Each shadow is separated by a comma.

	<body>
		<div class="to">I am a raised text</div>
		<div class="ao">I am a concave text</div>
		<style type="text/css">
			body {
				background-color: grey;
				font: bold 6em "micro";
			}
			div {
				margin: 30px;
				/*Adjust the background color to the same as the font color, and then set two shadows in opposite directions for the text*/
				color: grey;
			}
			.to {
				text-shadow: -1px -1px 1px white, 1px 1px 1px #000;
			}
			/*White lined with black*/
			.ao {
				text-shadow: -1px -1px 1px #000, 1px 1px 1px white;
			}
			/*Black against white*/
		</style>
	</body>

Recommended practice: bump button style, ps format font

Five hollow characters

<p>I'm a hollow text. Is it cool?</p>

p {
	font-size: 50px;
	/*Pseudo hollow element, related to the background color*/
	-webkit-text-fill-color: white;/*Text void interior fill color*/
	-webkit-text-stroke-color: blue;/*Text hollowed out border color*/
    /*Border thickness*/
    -webkit-text-stroke-width: 2px;/*It can be combined with the previous one as - WebKit text stroke: 2px blue;*/
}