Organize the review notes of Html+css3 that you have learned before

1. New features of html5

Commonly used semantic tags: nav footer header section mark

Function tag video audio iframe canvas (canvas and drawing function)

input new type: url/number/range/Date(date, month, week, time, etc.)/search/color

2, css3

1 border

border-radius: different assignment methods;

box-shadow:10px 10px 5px red;

border-image: assignment content;

border-image-source The path of the image used in the border.

border-image-slice The image border is offset inward.

border-image-width The width of the image border.

border-image-outset The amount by which the border image area exceeds the border.

border-image-repeat

Whether the image border should be repeated, rounded or stretched.

Note: ​​IE9+ supports border-radius and box-shadow.

IE11, Firefox, Opera 15, Chrome and Safari 6 support the border-image attribute.

2 text

text-shadow:5px 5px 5px yellow; (the meaning of each position)

3 fonts Introduce other fonts

How to use @font-face

@font-face{

font-family:"巴泽黑";

src: url(Chen Daiming Chalk Style Demo Version 2.otf);

}

4 animations

transform:translate(px)/rotate(deg)/scale(2)/skew()/matrix()

Note: IE10, Firefox and Opera support transform attributes

Chrome and Safari require the prefix -webkit- Internet Explorer 9 requires the prefix -ms-

5 animated 3D

transform-origin allows you to change the position of the element being transformed. Assignment requires mastering keywords!

transform-origin: x-axis y-axis z-axis;                                                                                                                                                                                          Possible values: transform-style specifies how nested elements are displayed in 3D space!!!

perspective !!!

backface-visibility defines whether the element is visible when not facing the screen

backface-visibility: hidden;

6 excessive transition

Remarks:

IE10, Firefox, Chrome and Opera support the transition attribute.

Safari requires the prefix -webkit-.

Note:

IE9 and earlier versions do not support the transition attribute.

transition abbreviation attribute, used to set four transition attributes in one attribute.

transition-property specifies the name of the CSS property that applies the transition.

transition-duration defines how long the transition effect takes. The default is 0.

transition-timing-function specifies the time curve of the transition effect. The default is "ease".

Different attribute values ​​need to be known.

transition-delay specifies when the transition effect starts. The default is 0.

7 frame animation

eg:

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

8 Flow Layout Media Query Responsive

Fluid layout: percentage layout, all sizes refer to the parent, and margin and padding are special

Refer to the width

Media query @media screen () and ()

Responsive: viewport unified writing method

Instance Note:

text-shadow

Horizontal shadow, vertical shadow, blur distance, and shadow color

text-shadow: 5px 5px 5px #FF0000;

box-shadow

property applies to box shadows

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

Position of horizontal shadow

Position of vertical shadow Blur distance Size of shadow Color of shadow Change the inner shadow of the shadow from the outer shadow (at the beginning)

div{box-shadow: 10px 10px 5px #888888;}

transform-origin: x-axis y-axis z-axis; x-axis Defines where the view is placed on the X-axis.

Multiple columns

column-count:n;

column-gap:10px; spacing

column-rule: 2px solid red; //Equivalent to border dividing line

resize: none|both|horizontal|vertical;

horizontal User can adjust the width of the element.

vertical User can adjust the height of the element.

div{resize:both;

overflow:auto;

}