Basic concepts of CSS

Time:2021-8-7

CSS knowledge points

Box model:

  • W3C standard box model: width only includes content
  • Ie box model: width only includes content + padding + border

Clear floating method

The purpose of clear floating is to solve the problem that the floating of child elements causes the high collapse of parent elements

  • Pseudo class clear: both
  • Common overflow: hidden

Common centering methods

1、text-align: cneter

2、margin: 0 auto

3、dispaly: flex;
justfly-content: center;

4. Set relative positioning for parent elements and absolute positioning for child elements, and then: left: 50%;
top: 50%;
transform:translatē(-50%, —50%)

Pseudo class and pseudo element

Status class:

: hover triggered on mouse over
: visited select the link you have visited
: linkselect a link that has not been visited
: focusselect the input field to get focus

Structure class:

: first child matches the first child element
: last child last child element
: nth child (2n) select bipartite elements

Form class:

: chencked checked
Default: deault
: Disabled

CSS animation and gradient

There are three main types of animation:

1. Transition to achieve gradient animation
2. Transform to realize rotation animation
3. Animation implements custom animation

CSS gradients are mainly divided into two types:

1. Linear gradients linear gradient
Linear gradients – down / up / left / right / diagonal

2. Radial gradients
Radial gradients – defined by their centers

New elements in HTML5 and CSS3

HTML5:

  • label

    • Video tag video
    • Audio tag audio
    • Semantic tags NAV / aside, etc
  • attribute
    Enhance the type attribute of form input
    Charest of meta sets the character set
    Async is added to script to realize asynchronous loading
  • Store
    loacalStorge
    sessionStroge
    indexDB
  • api
    Canvas drawing
    Svg drawing
    API drag and drop
    Geographic location, etc

CSS3:

  • fillet
  • Text shadow box video
  • Picture background
  • Color gradient
  • Animation, etc

Difference between REM and EM PX

  • PX relative length unit, which is relative to the screen resolution
  • EM relative length unit, relative to the font size of the text in the current object
  • REM by defaultfont-size = 16px, then1rem = 16px, is a new relative unit in CSS3. What is the difference between this unit and em? The difference is that when rem is used to set the font size for the element, it is still the relative size, but the relative is only the HTML root element

Recommended Today

Paper case CMS 3.3.6 release upgrade. Net 5

.Net 5 Microsoft’s. Net 5 has been released and we adapted it for the first time. The biggest change in the new version is to upgrade to Microsoft’s latest. Net 5, and the performance has been significantly improved. So please update your running environment before upgrading to 3.3.6. Upgrade Guide:http://www.zkea.net/zkeacms/document/upgrade Convenient update Paper shell CMS […]