Compilation of CSS 2&3 knowledge points

CSS

Cascading Style Sheets

inline styles

Written in the style attribute of the tag, also known as inline style

<h1 style="color:red"></h1>

internal style

Written inside the html page, extract all CSS codes and place them separately in the style tag

<style>

h1{
      
      
   font-size:28px;
   color:red
}
</style>

external style

Written in a separate .css file and later introduced in HTML

1. Create a new style file with a .css extension

2. Introduce .css files into HTML

   <link rel="stylesheet" href="./xxx.css">
   

Style sheet priority

Priority rule: inline style > internal style = external style

CSS syntax specifications

CSS syntax consists of two parts:

• Selector: Find the element you want to style
• Declaration block: set specific styles

Comments: /* … */

CSS code style

• Expansion style: Recommended during development
• Compact style: recommended when the project goes online

CSS selectors

basic selector

• wildcard selector
• element selector
• class selector
• id selector

wildcard selector

All HTML elements can be selected

* {
    
    
  margin:0;
  padding:0
}

element selector

Set styles uniformly for certain elements on the page

h1{
    
    
   font-size:28px;
   color:blue;
}

class selector

Select certain elements based on their class value

<div class="container">
    <h1>xxx</h1>
</div>

.contaner{
    
    
    width:400px;
    height:300px;
    color:blue;
}

id selector

Accurately select an element based on its id attribute value

<div id="root">
    <h1>xxx</h1>
</div>

compound selector

• Intersection selector
• Union selector

Intersection selector

Select elements that meet multiple conditions at the same time

Syntax: selector 1 selector 2...selector n{ }

<div>
    <p>段落一</p>
    <p>段落二</p>
    <p class="beauty">段落三</p>
</div>

p.beauty{
    
    
    color:green
}

Note: There is a tag name, and the tag name must be written in front

Union selector

Select elements corresponding to multiple selectors, also known as group selectors

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

<div>
      <p class="a">段落一</p>
      <p class="b">段落二</p>
      <p class="c">段落三</p>
</div>

.a,
.b,
.c {
    
    
    font-size: 28px;
    color: blue;
}

descendant selector

Select the descendant elements that meet the requirements among the specified elements

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

ul li{
    
    
    color:blue
}

descendant selector

Select the child elements in the specified element that meet the requirements

Syntax: selector1>selector2>…selectorn{}

div>h1{
    
    
    color:blue;
}

sibling selector

Adjacent sibling selector: After selecting the specified element, the adjacent sibling elements that meet the conditions

Syntax: selector1+selector2{ }

Universal sibling selector: After selecting the specified element, all sibling elements that meet the conditions

Syntax: Selector 1 ~ Selector 2 { }

div+p{
    
    
    color:blue;
}

div~p{
    
    
    color:green;
}

attribute selector

Select elements whose attribute values ​​meet certain requirements

grammar:

1. [Attribute name] Select an element with an attribute
2. [Attribute name="value"] Select an element that contains an attribute and specifies the attribute value
3. [Attribute name^="value"] specifies the beginning of the attribute value
4. [Attribute name $ = "value"] Specifies the end of the attribute value
5. [Attribute name*="value"] The specified attribute value contains the specified value

[title]{
    
    
    color:blue;
}

[title="title1"]{
    
    
    color:green;
}

[title^="a"]{
    
    
    color:red
}

[title$="a"]{
    
    
    color:yellow
}

[title*="a"]{
    
    
    color:#333
}

Pseudo class selector

Select elements with special status

Dynamic pseudo-class

a:link{
    
    
    color:orange
}

a:visited{
    
    
    color:gray
}

a:hover{
    
    
    ...
}

a:active{
    
    
    ...
}

input:focus{
    
    
    ...
}

Structural pseudo-class

p:first-child{
    
    
    ...
}

p:last-child{
    
    
    ...
}

p:nth-child(n){
    
    
    ...
}

div>p:first-of-type{
    
    
    ...
}

div>p:last-of-type{
    
    
    ...
}

div>p:nth-of-type(n){
    
    
    ...
}

negate pseudo-class

div>p:not(xxx){
    
    
    ...
}

UI pseudo-class

input:checked{
    
    
    ...
}

input:disabled{
    
    
    ...
}

Target pseudo-class

<a href="#one">目标伪类</a>

<div id="one"></div>

div:target{
    
    
    ...
}

Language pseudo-class

<div lang="en">xxx</div>

div:lang(en){
    
    
    ...
}

Pseudo element selector

Select some special positions in the element

p::first-letter{
    
    
    ...
}

div::first-line{
    
    
    ...
}

div::selection{
    
    
    ...
}

input::placeholder{
    
    
    ...
}

p::before{
    
    
    content:"xxx"
    ...
}

p::after{
    
    
    content:"xxx";
    ...
}

selector priority

!important > Inline > ID selectors > Class selectors > Element selectors > Wildcard selectors > Inherited styles

Three major features of CSS

• Stackability
• inheritance
• priority

CSS color

• color name
• rgb、rgba
• hex、hexa：#fff、#aaa
• hsl、hsla

CSS related properties

CSS common font properties

• Font size: font-size
• Font family: font-family
• Font style: font-style
  • normal: normal
  • italic: italic
  • oblique: italic
• Font-weight: font-weight
  • light
  • normal
  • bold
  • bolder
• Font composite properties: font: weight style size family

CSS common text properties

• Text color: color
• Text letter spacing: letter-spacing
• Text word spacing: word-spacing
• Text decoration: text-decoration
  • overline dotted green
  • underline wavy red
  • line-through
  • none
• Text indent: text-indent
• Text horizontal alignment: text-align
  • left
  • center
  • right
• Line height: line-hight
  • normal
  • Pixel
  • number
  • percentage
• Vertical alignment of text between elements in the same row or within table cells: vertical-align
  • baseline
  • top
  • middle
  • bottom

CSS list related properties

• List notation: list-style-type
  • none
  • square
  • disc
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • …
• Position of list symbols: list-style-position
  • inside
  • outside
• Custom list symbol: list-style-image
• List compound attribute: list-style

CSS border related properties

• Border width: border-width
• Border color: border-color
• Border style: border-style
• Border composite property: border

CSS table related properties

• Table column width: table-layout
  • auto
  • fixed
• Cell spacing: border-spacing
• Merge borders of adjacent cells: border-collapse
  • collapse: merge
  • separate: do not merge
• Hide cells with no content: empty-cells
  • show
  • hide
• Set the position of the table title: caption-size
  • top
  • bottom

CSS background related properties

• Background color: background-color
• Background image: background-image:ul(…/image)
• Background repeat method: background-repeat
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
• The position of the background image: background-position
• Background composite property: background

CSS mouse related properties

• Mouse cursor: cursor
  • pointer
  • move
  • text
  • crosshair
  • wait
  • help
  • Customization: url(…/image), pointer

CSS common length units

• Pixel: px
• Multiple of relative element font-size: em
• Relative html root font size: rem
• Calculated relative to parent element: %

Display mode of CSS elements

• Block element (block)
  • Exclusive row on the page, arranged from top to bottom
  • Default width: fills the parent element
  • Default height: stretched by content
  • Width and height can be set via CSS
  • Related tags:
    • Main structure: html, body
    • Typesetting tags: h1~h6, hr, p, pre, div
    • List tags: ul, ol, li, dl, dt, dd
    • Table tags: table, tbody, thead, tfoot, tr, caption
    • form、option
• Inline elements (inline)
  • Do not occupy a single line on the page, arranged from left to right
  • Default width: stretched by content
  • Default height: stretched by content
  • Can't set width and height via CSS
  • Related tags:
    • Text tags: br, em, strong, sup, sub, span
    • a、label
• Inline-block element (inline-block)
  • Do not occupy an exclusive line on the page, arranged from left to right
  • Default width: stretched by content
  • Default height: stretched by content
  • Width and height can be set via CSS
  • Related tags:
    • img、td、th、input、textarea、select、button、iframe

Modify the display mode of an element

• display
  • none
  • block
  • inline
  • inline-block

CSS box model

The composition of the box model

• Margin: margin
• Border: border
• Padding: padding
• Content: content

The size of the box = content + 2 * padding + 2 * border

Box content area (content)

• Width:width
• Maximum width: max-width
• Minimum width: min-width
• Height: height
• Maximum height: max-height
• Minimum height: min-height

About default width

Refers to the width of the element when the width attribute is not set.

Total width = parent content - own left and right margins

The width of the content area = parent content - own left and right margin - own left and right borders - own left and right padding

Box padding

• Top padding: padding-top
• Right padding: padding-right
• Bottom padding: padding-bottom
• Left padding: padding-left
• Composite attribute: padding

Notice:

1. padding cannot be negative
2. The left and right padding of inline elements can be set, but the top and bottom padding cannot be set.
3. Padding around block-level elements and inline block elements can be set

The border of the box

• Border line style: border-style
  • none
  • solid
  • dashed
  • dotted
  • double
  • …
• Border line width: border-width
• Border line color: border-color
• Composite attribute: border
• Borders in all directions: border-left/right/top/bottom

The margin of the box

• Left margin: margin-left
• Right margin: margin-right
• Top margin: margin-top
• Bottom margin: margin-bottom
• Composite attribute: margin

Notice:

1. Child element margin is calculated based on parent element content
2. The upper left margin affects its own position, and the lower right margin affects the position of sibling elements.
3. Block-level elements and inline block elements can be set with four-directional margins; the left and right margins of inline elements are valid, but the upper and lower margins are invalid.
4. margin can be negative

margin collapse problem

Margin collapse: The upper margin of the first child element and the lower margin of the last child element will act on the parent element (a historical issue)

Solution:

1. Parent element sets padding
2. Parent element sets border
3. The parent element sets overflow:hidden

Margin merging problem

Margin merge: The bottom margin of the upper sibling element and the top margin of the lower sibling element will be merged, and the maximum value will be taken.

Handle content overflow

• Handling overflow content: overflow
  • visible
  • hidden
  • scroll
  • auto
• Horizontal overflow: overflow-x
• Vertical overflow: overflow-y

How to hide elements

• visibility: hidden (placeholder)
• display: none (does not occupy space)

Style inheritance

css properties that will be inherited

Font properties, text properties, etc.

css properties that will not be inherited

Border, background, padding, margins, width and height, overflow method, etc.

Rule: Properties that do not affect layout can be inherited, but properties related to the box model cannot be inherited.

The default style of the element

Elements generally have some default styles, such as:

1. a element: underline, font color, mouse hand...
2. h1~h6: text bold, size, top and bottom margins
3. …

Priority: Element's default style > Inherited styles

White space problem between elements

Inline elements, inline block elements, and line breaks between each other will be parsed by the browser as a whitespace character.

Solution: Set font-size: 0 for the parent element, and then set the font size separately for the elements that need to display text.

Ghost whitespace issue with inline blocks

The inline block is aligned with the baseline of the text, and there is a certain distance between the baseline of the text and the bottom of the text.

solution:

1. Inline block settings vertical
2. The parent element sets font-size: 0, and the text in the inline block is set separately.
3. If there is only one picture in the parent element, set the picture to display: block

CSS float

Initially, floating was used to achieve the effect of text wrapping around images, and now it is one of the mainstream page layout methods.

Features after floating

1. Break out of document flow
2. By default, the width and height are stretched by the content after floating.
3. It will not occupy a row, and can share a row with other elements.
4. There will be no margin merging or margin collapse.
5. Will not be treated as text like inline blocks

The impact of floating

• Effect on sibling elements: The following sibling elements will occupy the position before the floating element and below the floating element; it has no effect on the preceding sibling elements.
• Impact on the parent element: The height of the parent element cannot be supported, causing the height of the parent element to collapse; however, the width of the parent element still constrains the floating element.

Resolve the impact of floats (clear floats):

1. Specify the height of the parent element
2. Also set float to the parent element, bringing other effects
3. Set overflow:hidden to the parent element
4. At the end of all floated elements, add a block-level element and set clear: both to the block-level element.
5. For the parent element of the floating element, set a pseudo element and clear the float through the pseudo element

   .parent::after{
         
         
       content:'';
       display:block;
       clear:both;
   }
   

CSS positioning

relative positioning

Set targeting:

• position：relative
• Adjust position: top, bottom, left, right

Reference points:

• relative to one's original position

Features:

1. It will not break away from the document flow and will not affect other elements.
2. The display level is higher than that of ordinary elements
   • Positioned elements will be placed on top of normal elements
   • For two elements that are both positioned, the one written later will be overlaid on the element written first.
3. left and right cannot be set together, and top and bottom cannot be set together.
4. The position can be adjusted through margin, but it is not recommended.

Note: In most cases, relative positioning is used in conjunction with absolute positioning

absolute positioning

Set targeting:

• position：absolute
• Adjust position: left, right, top, bottom

Reference points:

• relative to its containing block
  • Not out of document flow - parent element
  • Out of the document flow - the first ancestor element with a positioned attribute

Features:

1. Being separated from the document flow will have an impact on subsequent sibling elements and parent elements.
2. left and right cannot be set together, and top and bottom cannot be set together.
3. Absolute positioning and floating cannot be set at the same time. If set at the same time, floating will be invalid and positioning will be the main one.
4. After any element is absolutely positioned, it becomes a positioned element (the default width and height are expanded by the content, and the width and height can be set freely)
5. The position can be adjusted through margin, but it is not recommended.

Fixed positioning

Set targeting:

• position：fixed
• Adjust position: left, right, top, bottom

Reference points:

• relative to its viewport

Features:

1. Being separated from the document flow will have an impact on subsequent sibling elements and parent elements.
2. left and right cannot be set together, and top and bottom cannot be set together.
3. Fixed positioning and floating cannot be set at the same time. If set at the same time, floating will be invalid and positioning will be the main one.
4. After any element is fixedly positioned, it becomes a positioned element (the default width and height are stretched by the content, and the width and height can be set freely)
5. The position can be adjusted through margin, but it is not recommended.

sticky positioning

Set targeting:

• position：sticky
• Adjust position: left, right, top, bottom

Reference points:

• The nearest component element with a scrolling mechanism

Features:

1. It will not break away from the document flow and is a new positioning method specially used when the window is scrolling.
2. The most commonly used value is the top value
3. Can be set with float, but not recommended
4. The position can be adjusted through margin, but it is not recommended.

Sticky positioning has basically the same characteristics as relative positioning, except that sticky positioning can fix an element when it reaches a certain position.

Positioning level

1. The display level of positioned elements is higher than that of ordinary elements
2. If the positions overlap, the default is that the later elements will be displayed on top of the previous elements.
3. You can adjust the display level of elements through z-index
4. The attribute value of z-index is a number with no unit. The larger the value, the higher the display level.
5. Only the positioned element is set to z-index.

Special applications for positioning

Let the width and height of the positioned element fill the containing block

Set left, right, top and bottom to 0

Center positioned elements within containing blocks

Option One

left：0

right：0

top：0

bottom：0

margin: auto

Option II

left：50%

top：50%

margin-left：-50%

margin-top：-50%

Note: The positioned element must have a width and height set

CSS layout

version heart

• In PC-side web pages, there is usually a fixed-width and horizontally centered box to display the main content of the web page. This is the center of the web page.
• The width of the center plate is generally between 960~1200 pixels
• The version center can be one or multiple

Common layout class names

• Top navigation bar: topbar
• Page header: header, page-header
• Navigation: nav, navigator, navbar
• Search box: search, search-box
• Banner, advertising: banner
• Main content: content, main
• Sidebar: aside, sidebar
• Footer: footer, page-footer

Reset default style

Option 1: Use global selector

Option 2: reset.css

Option 3: normalize.css

CSS3

Introduction

• CSS3 is an upgraded version of CSS2, adding many powerful new features
• CSS3 will develop in a modular manner in the future
• New features of CSS3:
  • Added more useful selectors
  • Added better visual effects
  • Added rich background effects
  • Added a new layout method – Flexible Box
  • Added web fonts
  • Enhanced color
  • Added 2D and 3D transformations
  • Added animation and transition effects
  • …

CSS3 private prefix

• -webkit-
• -moz-

New in CSS3

CSS3 adds new length unit

1. rem: multiple of root element font size
2. vw: percentage of the viewport width
3. vh: percentage of the viewport height
4. vmax: What is the percentage of the viewport width?
5. vmin: What is the percentage of the viewport width?

CSS3 adds new color setting method

• rgba
• hsl
• hsla

CSS3 new selector

• Dynamic pseudo-class
• Target pseudo-class
• Language pseudo-class
• UI pseudo-class
• Structural pseudo-class
• negate pseudo-class
• Pseudo element

CSS3 adds new box attribute

• box-sizing: weird box model, you can set two types of box models
  • content-box: width and height set the size of the content area of ​​the box
  • border-box: width and height set the total size of the box
• resize: adjust the size of the box, you can control whether the user is allowed to adjust the size of the element
  • none: No adjustment allowed
  • both: adjustable width and height
  • horizontal: adjustable width
  • vertical: adjustable height
• box-shadow: box shadow

  • grammar:

    box-shadow:h-shadow v-shadow blur spread color inset;
    

  • h-shadow: horizontal shadow position, required

  • v-shadow: vertical shadow position, required

  • blur: blur distance, optional

  • spread: shadow extension value, optional

  • color: shadow color, optional

  • inset: Change outer shadow to inner shadow, optional

• opacity: opacity, adds transparency to the entire element

CSS3 new background attribute

• background-origin
  • Set the origin of the background image
  • grammar:
    1. padding-box: Display starting from the padding area
    2. border-box: Display starting from the border area
    3. content-box: Display starting from the content area
• background-clip
  • Set the outward cropping area of ​​the background image
  • grammar:
    1. border-box: Crop outward from the border area
    2. padding-box: Crop outward from the padding area
    3. content-box: Crop outward from the content area
    4. text: The background image is only displayed on the text
• background-size
  • Set the size of the background image
  • grammar:
    1. Use a length value to specify the size of the background image. Negative values ​​are not allowed.
    2. Specify the background image size as a percentage, negative values ​​are not allowed
    3. auto: background image real size
    4. contain: Scale proportionally so that the width or height of the background image is equal to the width or height of the container
    5. cover: Scale proportionally until the container is completely covered
• background composite property

  • grammar:

    background: color url repeat position / size origin clip
    

  • The size value must be written after position and separated by /

• Multiple background images: CSS3 allows setting multiple background images

  background:url(../image/xxx) no-repeat,
             url(../image/xxx) no-repeat right top,
             url(../image/xxx) no-repeat left bottom,
             url(../image/xxx) no-repeat right bottom;
  

CSS3 new border attribute

• Border rounded corners: border-radius

  border-radius:10px;
  

• Border outline (understand)
  • outline-width: width of the outer outline
  • outline-color: the color of the outer outline
  • outline-style: The style of the outer outline
    • none: no outline
    • dotted: dotted outline
    • dashed: dashed outline
    • solid: solid outline
    • double: double line outline
  • outline-offset: Set the distance between the outer outline and the border
  • outline composite property

    outline:50px solid blue
    

CSS3 new text attribute

• Text-shadow: text-shadow

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

  • h-shadow: horizontal shadow position, required
  • v-shadow: vertical shadow position, required
  • blur: blur distance, optional
  • color: shadow color, optional

• Text wrapping: white-space

  • normal: automatically wrap beyond the boundary
  • pre: output as is
  • pre-wrap: Based on pre, automatically wrap beyond the element boundary
  • pre-line: Based on pre, it automatically wraps lines beyond the element boundary and recognizes line breaks in the text. Spaces will be ignored.
  • nowrap: Force no line breaks

• Text overflow: text-overflow

  • clip: When the inline content overflows, the overflowing part will be cropped.
  • ellipsis: When inline content overflows, replace the overflow part with...
  • Note that to enable text-overflow:
    • The fast container must explicitly define overflow as non-visible
    • white-space 为 nowrap

• Text decoration: text-decoration, composite attribute in CSS3

  text-decoration: text-decoration-line || text-decoration-style || text-decoration-color
  

• Text stroke: -webkit-text-stroke, only supported by webkit kernel browsers (understand)

CSS3 new gradient

linear gradient

• Gradient between multiple colors, the default gradient is from top to bottom

  background-image:liner-gradient(red,yellow,blue);
  

• Use keywords to set gradient direction

  background-image:liner-gradient(to top,red,yellow,blue);
  

• Use angle to set gradient direction

  background-image:liner-gradient(45deg,red,yellow,blue);
  

• Adjust the starting position of the gradient

  background-image:liner-gradient(red 50px,yellow 100px,blue 150px);
  

radial gradient

• Gradient between multiple colors, scattered from the center of the circle by default

  background-image:radial-gradient(red,yellow,green);
  

• Use keywords to adjust the center position of the gradient circle

  background-image:radial-gradient(to right top,red,yellow,green);
  

• Adjust the center position of the circle using pixel values

  background-image:radial-gradient(at 100px 50px,red,yellow,green);
  

• Adjust the gradient shape to a perfect circle

  background-image:radial-gradient(circle,red,yellow,green);
  

• Adjust the radius of a shape

  background-image:radial-gradient(100px,red,yellow,green);
  

• Adjust the starting position of the gradient

  background-image:radial-gradient(red 50px,yellow 100px,green 150px);
  

repeat gradient

repeating-linear-gradient

CSS3 web fonts and font icons

web fonts

Specify the specific position of the font through @font-face

• grammar

  @font-face{
        
        
      font-family:'xxx';
      src:url('./xxx')
  }
  

Font icon

• Clearer than the picture
• High flexibility, easier to change size, color, style, etc.
• Good compatibility, IE can also support it

CSS3 changes

Transformation attribute: transform

2D transformation

Displacement

• translateX: horizontal displacement
• translateY: vertical displacement
• translate: horizontal and vertical displacement
• If the value is a percentage, refer to the percentage of its own width and height.

Zoom

• scaleX: horizontal scaling
• scaleY: vertical scaling
• scale: vertical and horizontal scaling
• A value of 1 means no scaling

rotate

• rotate: set the rotation angle

twist (understand)

• skewX: horizontal distortion
• skewY: vertical distortion
• skew: twisted in both directions

multiple transformations

Can be written using a transform at the same time

transform: translate(100px,100px) scale(0.7) rotate(45deg);

When performing multiple transformations, it is recommended to rotate last

Transform origin

• When an element is transformed, the default origin is the center of the element.
• Use transform-origin to set the origin of the transformation

3D transformation

Open 3D space

The primary operation for 3D transformation of elements: the parent element must enable 3D space

• transform-style
  • flat: 2D space
  • preserve-3d: 3D space

Set depth of field

Depth of field - distance between the observer and the z=0 plane

• prespective
  • none: do not specify transparency
  • Length value: Specifies the distance between the observer and the z=0 plane, negative values ​​are not allowed

perspective point position

That is the observer position, the default perspective point is at the center of the element

• prospective-origin: Set the position of the observer (perspective point)

Transformation attribute: transform

Displacement

3D displacement is based on 2D displacement, displacing the element along the z-axis.

• translateZ: Z-axis displacement, percentage cannot be written, positive values ​​​​are outside the screen, and negative values ​​​​are inside the screen.
• translate3d: The three parameters are x-axis, y-axis, and z-axis, and they cannot be omitted.

rotate

3D rotation is based on 2D rotation, allowing the element to rotate along the x-axis and y-axis

• rotateX: x-axis rotation
• rotateY: y-axis rotation
• rotate3d: Four parameters - x, y, z, rotation angle, none of which can be omitted

Zoom

3D scaling is based on 2D scaling, allowing elements to scale along the z-axis.

• scaleZ: Set the scaling ratio in the z-axis direction, 1 means no scaling
• scale3d: three parameters - x, y, z, not allowed to be omitted

multiple transformations

Can be written using a transform at the same time

The back is not visible

backface-visibility:hidden

CSS3 transition

You can smoothly transition elements from one style to another without using flash animation or JavaScript.

transiton-property

• Function: Define which attribute needs to be transitioned
• Common values:
  • none
  • all
  • Specifically touch the attribute name, such as width, height, etc.

transition-duration

• Function: Set the duration of the transition
• Common values:
  • 0: no transition time
  • s or ms: seconds or milliseconds

transit delay

• Function: Specify the delay time to start the transition, unit: s or ms

transition-timing-function

• Function: Set the type of transition
• Common values:
  1. ease: smooth transition
  2. linear: linear transition
  3. ease-in: slow → fast
  4. ease-out: fast → slow
  5. ease-in-out: slow → fast → slow
  6. step-start: equivalent to steps(1, start)
  7. step-end: equivalent to steps(1, end)
  8. steps(integer)
  9. cubic-bizie(): Bezier curve

transition composite property

transition:1s 1s linear all;

CSS3 animation

Basic use of animation

• Define keyframes

  /* 简单方式 */
  @keyframes 动画名{
        
        
      from{
        
        }
      to{
        
        }
  }
  
  /* 完整方式 */
  @keyframes 动画名{
        
        
      0%{
        
        }
      20%{
        
        }
      40%{
        
        }
      60%{
        
        }
      80%{
        
        }
      100%{
        
        }
  }
  

• Apply animation to elements

  1. animation-name: Specify a specific animation for the element
  2. animation-duration: Set the time required for animation
  3. animation-delay: Set animation delay

Animation other properties

• animation-timing-function: Set the type of animation

• animation-iteration-count: Specifies the number of times the animation is played

  • number
  • infinite

• animation-direction: Specify animation direction

  • normal
  • reverse
  • alternate

• animation-fill-mode: Set states other than animation

  • forward
  • backwards

• animation-play-state: Set the playback state of animation

  • running
  • paused

• animation: animation composite property

  animation:animationName 3s 0.5s linear 2 alternate forwads
  

  animation-play-state is generally used alone

CSS3 multi-column layout

Function: Specifically used to achieve a newspaper-like layout

• column-count: Specify the number of columns
• column-width: Specify column width
• column: specify column width and number of columns at the same time, composite attribute
• column-gap: Set column margins
• column-rule-style: Set the style of the border between columns
• column-rule-width: Set the width of the border between columns
• column-rule-color: Set the color of the border between columns
• column-rule: Set column border, composite attribute
• column-span: Specifies whether to span columns

CSS3 flex box model (flexible box)

Introduction

• In 2009, w3c proposed a new box model - flexible box (flexible box, also known as flexible box)
• Can be easily controlled: element distribution, element alignment, element visual order

scalable container, scalable project

• Flex container: element with flex turned on
• All child elements of the flex container automatically become flex items
  • Only child elements become flex items
  • Any element that becomes a flex item will become "blocky"

Main shaft and side shaft

• Main axis: Flexible items are arranged along the main axis. The default is horizontal and the default direction is from left to right.
• Side axis: The side axis is perpendicular to the main axis. The default is vertical and the default direction is from top to bottom.

Spindle direction

• Property name: flex-direction
• Common values:
  • row
  • row-reverse
  • column
  • column-reverse

Spindle line feed method

• Property name: flex-wrap
• Common values:
  • nowrap: default value, no line wrapping
  • wrap: automatic line wrapping
  • wrap-reverse: reverse line wrap

flex-flow

It is a composite property that combines the two properties of flex-direction and flex-wrap.

Spindle Alignment

• Attribute name: justify-content
• Common values:
  • flex-start: Alignment of spindle starting point
  • flex-end: Alignment of main axis end point
  • center: center alignment
  • space-between: evenly distributed, aligned at both ends (most commonly used)
  • space-around: Evenly distributed, the distance between the two ends is half the middle
  • span-evenly: Evenly distributed, the distance between the two ends is the same as the distance in the middle

cross axis alignment

• Property name: align-content
• Common values:
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
  • stretch: occupies the entire side axis - default value

flex-basis

• Setting the base length in the main axis direction will invalidate the width or height.

flex-grow

• Define the magnification ratio of the telescopic project, the default is 0

flex-shrink

• Defines the compression ratio of the project, default is 1

flex composite property

Compounded: flex-grow, flex-shrink, flex-basis three attributes, default value: 0 1 auto.

• flex: 1 1 auto - auto can be stretched or compressed, no reference length is set
• flex: 1 1 0 - 1 stretchable, compressible, base length is 0
• flex: 0 0 auto - none cannot be stretched, cannot be compressed, and does not set the base length
• flex: 0 1 auto - 0 auto - the initial value of flex

Project sorting

• The order attribute defines the order in which items are sorted. The smaller the value, the higher the ranking. The default is 0.

individually aligned

• The align-self attribute can adjust the alignment of a flex item individually.
• The default value is auto, which inherits the align-items attribute of the parent element.

CSS3 responsive layout

Media inquiries

@media xxx { }

media type

• all: detect all devices
• screen: detect electronic screen
• print: detect printer

media properties

• width: detect viewport width
• max-width: detects the maximum width of the viewport
• min-width: Detect the minimum width of the viewport
• height: detect viewport height
• max-height: detects the maximum height of the viewport
• min-height: Detect the minimum height of the viewport
• device-width: detect device screen width
• max-device-width: Detect the maximum width of the device screen
• min-device-width: Detect the minimum width of the device screen
• Orientation: Detect the rotation direction of the viewport (whether it is horizontal screen)
  • portrait: the viewport is vertical, the height is greater than or equal to the width
  • landscape: viewport is horizontal, width is greater than height

media operator

• and: and
• , or or: or
• not: negation
• only: affirmative

Commonly used thresholds

• Ultra small screen (<768px)
• Medium screens (>768px & < 992px)
• Large screens (>992px & < 1200px)
• Extra large screens (>1200px)

@media screen and (max-width:768px){
    
    
    ...
}

BFC

• Block Formatting Context (block-level formatting context) can be understood as a special function of the element
• BFC is off by default and will be activated when the element meets certain conditions.
• That is, the element turns on BFC

What problems can be solved by turning on BFC?

1. Child elements will no longer have margin collapse problems
2. It will not be covered by other floating elements
3. Even if the child elements float, the height of the element itself will not collapse

How to enable BFC

• Root element - html
• floating element
• Absolute positioning, fixed positioning
• inline block element
• table cell
• Overflow block element whose value is not visible
• Flexible project (flexible box)
• multi-column container
• column-span is an element of all
• display value is flow-root