Shulou(Shulou.com)06/01 Report--

This article mainly introduces HTML5 and CSS3 common attributes and methods, the article is very detailed, has a certain reference value, interested friends must read!

Dom extension

Get element document.querySelector ('selector ') Get the first element that matches

document.querySelectorAll ('selector ') Gets all elements that match

Class name operation Node.classList.add ('class ') Add class name

Node.classList.remove ('class ') Remove class name

Node.classList.toggle ('class ') Toggle class names

Node.classList.contains ('class ') detects class names

gradient

linear-gradient to top/left/right/bottom

Color + percentage

radial-gradient radial gradient pixel value

- at is located

- Center (x,y) percentage or pixel value

- Color + percentage

transform

transform(2D) matrix(a,b,c,d,e,f) matrix, nonsense, no (but parameters are numbers)

-translate(x,y) represents the distance moved (length units or percentages)

-rotate(x,y) indicates the angle of rotation (angular units)

-scale(x,y) numerical value, greater than 1 means zoom in, less than 1 means zoom out

-skew(x,y) indicates the bevel angle (angular units)

transform(3D) martrix()

translate(x,y,z) represents the 3d displacement of the object

rotate3d(x,y,z) represents the 3d rotation of the object

scale3d(x,y,z) means 3d scaling

perspective represents perspective distance pixel value generally 600-1200px

transform-origin Set conversion angle percentage, percentage First parameter controls horizontal orientation, second controls vertical orientation

transform-style sets what space the element is in flat default,2d space

preserve-3d Place child elements in 3D space

perspective-origin Sets the coordinate value of the perspective point as a percentage, percentage The first parameter controls horizontal orientation, the second controls vertical orientation

Words center,left,right,top,center,bottom, etc.

backface-visibility Set whether the back is visible visible default visible

hidden Back element invisible

transition

transition matches attributes [ none| ] ||||||

transition-property property css property

all Set all properties

transition-timing-function Specifies the speed of the transition linear transition (constant speed)

ease default

ease-in acceleration

ease-out deceleration

ease-in-out slow to fast to slow

transstion-delay delay time Set delay time

animation

animation matches attributes "||||||||||||||

"

animation-name Animation name Custom name must be used with rule @keyframes because animation names are defined by @keyframes

animation-duration execution time animation execution time

animation-timing-function Specifies the speed of the transition linear transition (constant speed)

ease default

ease-in acceleration

ease-out deceleration

ease-in-out slow to fast to slow

How many steps does it take to set steps?

animation-delay time set delay time

animation-iteration-count number of cycles infinite infinite loop

animation-direction direction of the loop normal default, normal direction

reverse running in reverse direction

alternate normal, then reverse, and continue to run

alternate-reverse first reverse, in the forward direction, and alternately run

animation-play-state whether to pause running default

paused, suspended, suspended

animation-fill-mode Sets the state of the object other than event none default, does not set

forwards Sets the object state to the state where the animation ends

backwardsSets the object state to the state where the animation started

both Set the object state to the end or start of animation state

telescopic box

flex-basis defines element width length value defines length

Percentage by element width

auto No specific width

flex-direction Adjust main axis direction row Default: Horizontal

row-reverse Horizontal reverse sort

column principal axis is vertical

column-reverse Vertical reverse sorting

flex-wrap nowrap Default: no line wrap, if the width is not enough, the child box will be compressed

wrap wrap

flex-flow is a composite property of flex-direction and flex-wrap, with the same value.

align-content sets the parent element's child element to its way flex-start from the primary axis start position

flex-end from the end of the spindle

Center Each row stacks up to the middle of the container

space-between equal distribution example

space-around evenly distributed, the distance between the two ends is half the distance between child elements

stretch Default: Stretches the box

This property can be used to adjust the alignment of the telescopic rows in the telescopic container when there is extra space on the side axis of the telescopic container, similar to adjusting the alignment of telescopic items on the main axis.

justify-content Adjust spindle orientation to its direction flex-start Default: spindle start orientation to its

flex-end principal axis end direction to its

Center Each row stacks up to the middle of the container

space-between equal distribution example

space-around evenly distributed, the distance between the two ends is half the distance between child elements

align-items Adjust the way the side axis is aligned flex-start Default: Main axis start orientation is aligned

flex-end principal axis end direction to its

Center Each row stacks up to the middle of the container

baseline This value is equivalent to 'flex-start' if the inline axis and lateral axis of the elastic box element are the same. Otherwise, this value will participate in baseline alignment.

flex is used for subelement number (number) to set the scaling of the subbox in the principal axis direction

flex-grow is used for child element values to define expansion scale values (number) to allocate the remaining space according to the expansion factor set by the elastic box element as a ratio.

flex-shrink is used for child element values to define a shrink scale number (number) to shrink the space according to the shrink factor set by the elastic box element as a ratio.

align-self defines how the child element's vertical axis is aligned, can override the parent element's align-items attribute auto default, follows the parent element

flex-start Default: Spindle start direction to its

flex-end principal axis end direction to its

Center Each row stacks up to the middle of the container

baseline This value is equivalent to 'flex-start' if the inline axis and lateral axis of the elastic box element are the same. Otherwise, this value will participate in baseline alignment.

stretch Default: Stretches the box

order Controls the order of child elements Integer Sets or retrieves the order in which child elements of an Elastic Box model object appear (who is smaller and who comes first)

The above is "HTML5 and CSS3 common attributes and methods are what" all the content of this article, thank you for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.