The front-end notes

CSS properties

CSS properties:`box-decoration-break`

Box model decoration, element style break, referenceword-break, understood as the performance of line breaking so. This attribute can first be understood as a representation of the element's style when a line break occurs. There are only two possible values: {box-decoration-break: slice; / / the default valuebox-decoration-break: clone;		
}
Copy the code

Properties:`box-sizing`

box-sizingAs the name implies, "box size." The so-calledbox-sizingThe: border-box method applies the width directly to the border box, changing the default content box to the border box. At this point, the Content box is released from the width value to create a local flow, which automatically allocates the width value along with the padding. {box-sizing: border-box; }Copy the code

Properties:`Max-width, max-height, min-width, min-height`

/ * beyond! important */Beyond! Is the important meansmax-width,max-heightAnd this kind of coverage is not ordinary coverage, is beyond coverage. In the CSS world! The weight of important is quite high. But that's it! Important, directly bymax-width,max-heightOne wave was beaten to the bottom./* Exceeds the maximum */Beyond maximum meansmin-width,min-height.min-widthcovermax-width, this rule occurs whenmin-widthwithmax-widthWhen the conflict. For example: {min-width: 100px;
    max-width: 100px;
}
Copy the code

Properties:`background`

/* Use background to create beautiful backgrounds */Background basic knowledge1. Solid background:background: # 000;
2. Linear gradient:background: linear-gradient(#fff.# 000);
3. Radial gradient:background: radial-gradient(#fff.# 000);
4. Angular gradient:background: conic-gradient(#fff.# 000);
Copy the code

Properties:`cursor:`

The CSS property sets the type (if any) of the cursor to display when the mouse pointer hovers over the element./* Keyword value */
cursor: pointer;
cursor: auto;

/* Use the URL and provide a keyword value as an alternate */
cursor: url(hand.cur), pointer;

/* The coordinate offsets of the URL and xy, and finally a keyword value as a backup */
cursor:  url(cursor1.png) 4 12, auto;
cursor:  url(cursor2.png) 2 2, pointer;

/* Global attributes */
cursor: inherit;
cursor: initial;
cursor: unset;
Copy the code

Properties:`position`

Such as the implementationTOPIn the upper left corner of the image:/* HTML */
<div>
    <span>top</span>
    <img src= ". /img/1.jpg" alt="" />
</div>
/* CSS */
span{ positon: absolute; } This one line of code is done!Copy the code

Properties:`direction`

Changing the horizontal flow of waterdirection: {direction: ltr; // Default value - Indicates the valueleft-to-rightFrom left to rightdirection: rtl; / / saidright-to-leftFrom right to left./* HTML */
<p>
	<img src="1.jpg"Alt =" beauty" /> <img src="2.jpg"Alt =" landscape" /> </p>
/* CSS */
p {
  direction: rtl; } The result is that the beautiful picture appears in front of the beautiful picture.Copy the code

Properties:`unicode-bidi`

directionThe golden partnerunicode-bidi
unicode-bidiSeveral properties with good compatibility values are as follows: {unicode-bidi: normal; / / the default valueunicode-bidi: embed;	
    unicode-bidi: bidi-override;
}
1. normal: normal arrangement;2.Embed: If the Embed attribute is to work, it only works on inline elements. Normally, the embed property values behave the same as normal. The difference between normal and Embed is that the character ordering of the embed attribute value is independently embedded and not subject to external influence.3.bidi-override: overrides bidirectional collation.Copy the code

Control container aspect ratio properties:`aspect-ratio`

You only need to set the width of the element, or the height of the element, and then control the overall width and height of the element through the aspect-ratio attribute:/* HTML */
<div class="width"> < /div>
<div class="height"> < /div>

/* CSS */
div {
    background: #ccc;
    aspect-ratio: 1/1;
}
.width {
    width: 100px;
}
.height {
    height: 100px; } As the container size changes, the width of each child element increases, and the height of the element changes with the specified aspect-ratio ratioCopy the code

Text gradient:

{
    background-image: -webkit-linear-gradient(left, #26acff 50%.#0088dc 100%); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
}
Copy the code

Properties: contain

Contain grammar/* ignore */ for now
contain: none;		
/* Contain: size will not contain any of its elements. * /
contain: size;
Contain: paint < contain: paint > < contain: paint > < contain: paint > < contain: paint > < contain: paint
contain: paint;
/* ignore */ for now
contain: strict;
/* ignore */ for now
contain: content;	
/* ignore */ for now
contain: layout;
/* ignore */ for now
contain: style;
Copy the code

Motion Path implements linear Path animation

The CSS Motion Path specification contains the following attributes:1Offset-path: Receives an SVG path specifying the geometric path of the motion2Offset-distance: Controls how far the current element moves based on offset-path3. offset-position: Specifies the initial position of offset-path4Offset-anchor: Defines the anchor point of the element positioned along the offset-path. And that makes sense, the element that's moving might not be a point, so you need to specify which point of the element is attached to the path5Offset-rotate: defines the orientation of elements along the offset-path. In human terms, the Angle of elements in motion/ * sample * /
<div></div>

div {
    width: 60px;
    height: 60px;
    background: linear-gradient(#fc0.#f0c);
    //M 0 0 L 100 100That contains the2Command sequence //M0 0To move the brush to the coordinates0.0/ / L100 100Represents from the current position of the brush, to100.100Draw a line offset-path:path("M 0 0 L 100 100");	
    offset-rotate: 0deg;
    animation: move 2000ms infinite alternate ease-in-out;
}
@keyframesMove {//offset-distance moves the element along the given path0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
//offset-path: path("");
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic BEzier curve T = smooth quadraticBEzier curvetoA = elliptical Arc
Z = closepath

Copy the code

HTML tags

The difference between an input button and a button:

The difference is that the two buttons are defaultwhite-spaceThe values are different, the former is pre, the latter isnormal, the phenomenon difference is that when the button text is enough, <input> button does not wrap, <buttonThe > button does.Copy the code

Remove the default style of the Button button

{
    margin: 0;				
    padding: 0;
    border: 1px solid transparent;			/* Set the border to transparent */
    outline: none;							/* Remove the default click blue border effect */
    background-color: transparent;			/* Background color set transparent */
}
Copy the code

Remove the default style of the input field

{
    background: none;
    outline: none;
    border: 0; } // Change the font style in the input box ::-webkit-input-placeholder {}Copy the code

Label sub and label sup

inHTMLIn the code, there are two label semantics, namely subscript and trademark, which are trademark <.sup> and subscripts <sub>. Mnemonic method: just lookpandbThe circle position of two letters is "superscript" if the circle is on the top and "subscript" if the circle is on the bottom. Superscript and subscript are often used in mathematical formulas and chemical expressions.Copy the code

Pseudo classes and pseudo elements

":" represents a pseudo class, while "::" represents a pseudo element. The difference between :before/:after and ::before/: after ::before/: after is extracted in CSS2 and written in CSS3 as ::before/::after to distinguish pseudo-classes from pseudo-elements.Copy the code

`<button>`Label button and`<button>`The label button

The wider the text width of the button is to be read, and if there is enough text, it will wrap at the width of the containerbuttonThe label button is automatically wrapped, andinputThe default for the label button iswhite-space:pre; All do not wrap automaticallyCopy the code

The way to clear the float

/* HTML */
<div class="container">
	<div class="item"></div>
</div> Method 1: UseoverflowProperty to clear the float.container {
    overflow: hidden; } Method 2: Use the contain property to clear the float.container{ contain: paint; } Method 3: Use extra labels.container::after {
   	content: ' ';
    display: block;
    clear: both;
}
Copy the code

A filter

grammar

filter: blur(5px); / / fuzzyfilter: brightness(.5); / / brightnessfilter: contrast(200%); / / contrastfilter: drop-shadow(10px 10px 10pxblue); / / the shadowfilter: grayscale(100%); / / grayfilter: hue-rotate(30deg); // Color rotationfilter: invert(30%); // Color inversionfilter: opacity(50%); / / transparencyfilter: saturate(150%); / / saturationfilter: sepia(50%); / / brownCopy the code

SVG

The basic shape

<! - rectangular - >
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>X: the x position at the upper left corner of the rectangle y: the Y position at the upper left corner of the rectangle Width: the width of the rectangle height: the height of the rectangle Rx: the x radius of the rounded corner RY: the y radius of the rounded corner<! -- the round -- -- >
<circle cx="25" cy="75" r="20"/>R: radius of the circle. Cx: x position of the center of the circle. Cy: y position of the center of the circle<! - oval - >
<ellipse cx="75" cy="75" rx="20" ry="5"/>Rx: x radius of the ellipse ry: y radius of the ellipse cx: x position of the center of the ellipse cy: y position of the center of the ellipse<! - line - >
<line x1="10" x2="50" y1="110" y2="150"/>X1: x position of the starting point y1: y position of the starting point X2: x position of the end point y2: Y position of the end point<! - line - >
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>Points: indicates the number of points. Each number is separated by a white space, comma, terminator, or newline character. Each point must contain two numbers, one for the x coordinate and one for the y coordinate. So the list of points (0,0), (1,1), and (2,2) can be written like this: "0,0,1,1,2,2".<! -- Polygon -->
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>Points: indicates the number of points. Each number is separated by a whitespace, comma, terminating command, or newline character. Each point must contain two numbers, one for the x coordinate and one for the y coordinate. So the list of points (0,0), (1,1), and (2,2) can be written like this: "0,0,1,1,2,2". After the path is drawn, the graph closes, so the final line will be connected from position (2,2) to position (0,0).Copy the code

The path

<! -- -- -- > path
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>D: a point set number of columns and other information about how to draw paths M x Y: "Move to" command, where to start L x y: "Line to" command, draw lines H: draw horizontal lines. V: Draw a vertical line. Z: close the path command.<! -- Belsey curve -->
<! -- Quadratic Belsey curve -->
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>Q: Quadratic Bezier curve Q, which is simpler than cubic Bezier curve, requires only one control point to determine the slope of the curve at the beginning and end. So it requires two sets of parameters, the control point and the terminal coordinate T: just as the cubic Bezier curve has an S command, the quadratic Bezier curve has an equivalent T command, which can be extended by shorter parameters<! -- Cubic Belsay curve -->
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>C: The cubic Bezier curve needs to define one point and two control points, so using the C command to create the cubic Bezier curve, three sets of coordinate parameters S need to be set: Commands can be used to create the same Bezier curve as before, but if the S command follows a C or S command, its first control point is assumed to be the central symmetry point of the second control point of the previous command curve. If the S command is used alone, with no C or S command preceding it, the current point is used as the first control point. The following is an example of the syntax of the S command. In the figure, the control points marked red on the left are marked blue.Copy the code

arc

A: Arc command (A rx ry x-axis-rotation large-arc-flag sweep-flag x y) rx: x radius RY: Y radius x-axis-rotation: large-arc-flag To determine whether the arc is greater than or less than 180 degrees, 0 represents a small angular arc and 1 represents a large angular arc: The last two parameters specify the end of the arc. Arcs can be easily created as circular or oval ICONS. For example, you can create several arcs to form a pie chartCopy the code

The gradient

<! - the gradient -- -- >In order for gradients to be reused, the gradient content needs to be defined in<defs>Tag inside, not defined above the shape.<! -- Linear gradient -->Linear gradients change color along a straight line. To insert a linear gradient, you need to create one inside the DEFS element of your SVG file<linearGradient>Node. Example:<svg width="600px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="Gradient1">
            <stop offset="0%" stop-color="red" />
            <stop offset="50%" stop-color="black" stop-opacity="0" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
	</defs>
	<rect width="100" height="100" fill="url(#Gradient1)" />
</svg>  
    
<! Radial gradient -->A radial gradient is similar to a linear gradient except that it diverges from a point and draws the gradient. Creating a radial gradient requires adding one to the document's DEFS<radialGradient>Elements. Example:<svg width="600px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<radialGradient id="RadialGradient1">
			<stop offset="0%" stop-color="red" />
			<stop offset="100%" stop-color="blue" />
		</radialGradient>
	</defs>
	<rect width="100" height="100" fill="url(#RadialGradient1)" />
</svg>
Copy the code

The text

In an SVG document,<text>You can put any text inside the element.<text x="10" y="10">Hello World!</text>
<! -- tspan -->This element marks a child of a large block of text. It must be a child of a Text element or other TSPAN element. A typical use is to make a word in a sentence bold red. The tSPAN element has the following custom attributes: x: Sets a new absolute X coordinate for the container. It overrides the default current text position. This attribute can contain a sequence that applies, one by one, to each character within a TSPAN element. Dx: Draws text from the current position with a horizontal offset. Here, you can provide a sequence of values that can be applied to successive fonts, thus accumulating one offset at a time. There are also vertical conversions between y and dy. Rotate: Rotates all characters by an Angle. If it is a sequence, rotate each character individually to that value, and rotate the remaining characters to the last value. TextLength: This is a vague property that gives the calculated length of the string. This means that it allows the rendering engine to fine-tune font placement if its own metric text and length do not meet the values provided.<! -- tref -->The TREf element allows you to reference already defined text, efficiently copying it to the current location. You can use the xlink:href attribute to point to an element and retrieve its text content. You can style it and change its appearance independently of the source.<! -- textPath -->This element uses its xlink:href attribute to get an arbitrary path, align the characters to the path, and the font will loop around and follow the pathCopy the code

Based on deformation

<! - translation - >
<rect x="0" y="0" width="10" height="10" transform="Translate (30, 40)" />
<! - rotation -- -- >
<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
<! - diagonally - >Use a rectangle to make an oblique diamond. SkewX () and skewY() transformations are available. Each requires an Angle to determine how far the element cuts diagonally.<! - zoom - >The scale() deformation changes the size of the element. It takes two numbers as ratios to calculate how to scale. 0.5 means a contraction of 50%. If the second number is ignored, it defaults to the first value.Copy the code

Shear and mask

<! - shear - >The clip-path attribute refers to a single rect element<clipPath>Elements. Note that the clipPath element is often placed inside a DEFS element.<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>
  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>
    
<! - mask - >The most impressive effect of the mask is that it appears as a gradient. If you want an element to fade out, you can do this with a mask effect.<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
    </mask>
  </defs>

  <rect x="0" y="0" width="200" height="200" fill="green" />
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>
Copy the code

Multimedia elements

The audio element

Commonly used formats: OGG,MP3,WAV

<audio controls>
    <source src="./sound/bgm.mp3">
    <source src="./sound/bgm.ogg">Sorry browser is not supported, please upgrade browser</audio>
Copy the code

Video elements

Commonly used formats: OGG,MPEG4,MP4,WEBM,WAV

<video autoplay loop muted controls>
    <source src="./video/intro.mp4">Video playback is not supported. Please upgrade your browser</video>##### Common properties - Controls: sets the control interface of video and audio elements - Autoplay: sets automatic video and audio playback - default autoplay disables automatic play - loop: sets circular play - muted: sets the video to be muted, enabling automatic playbackCopy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

CSS properties

CSS properties:`box-decoration-break`

Properties:`box-sizing`

Properties:`Max-width, max-height, min-width, min-height`

Properties:`background`

Properties:`cursor:`

Properties:`position`

Properties:`direction`

Properties:`unicode-bidi`

Control container aspect ratio properties:`aspect-ratio`

Text gradient:

Properties: contain

Motion Path implements linear Path animation

HTML tags

The difference between an input button and a button:

Remove the default style of the Button button

Remove the default style of the input field

Label sub and label sup

Pseudo classes and pseudo elements

`<button>`Label button and`<button>`The label button

The way to clear the float

A filter

grammar

SVG

The basic shape

The path

arc

The gradient

The text

Based on deformation

Shear and mask

Other SVG content

Multimedia elements

The audio element

Video elements

The front-end notes

CSS properties

CSS properties:box-decoration-break

Properties:box-sizing

Properties:Max-width, max-height, min-width, min-height

Properties:background

Properties:cursor:

Properties:position

Properties:direction

Properties:unicode-bidi

Control container aspect ratio properties:aspect-ratio

Text gradient:

Properties: contain

Motion Path implements linear Path animation

HTML tags

The difference between an input button and a button:

Remove the default style of the Button button

Remove the default style of the input field

Label sub and label sup

Pseudo classes and pseudo elements

<button>Label button and<button>The label button

The way to clear the float

A filter

grammar

SVG

The basic shape

The path

arc

The gradient

The text

Based on deformation

Shear and mask

Other SVG content

Multimedia elements

The audio element

Video elements

Related Posts

Vue advanced use of keep-live

Write a conversion tool based on typescript Compiler

Vue Advanced (70) : Take VUe-CLI as an example to learn webpack hash, chunkhash, and Contenthash

CSS properties:`box-decoration-break`

Properties:`box-sizing`

Properties:`Max-width, max-height, min-width, min-height`

Properties:`background`

Properties:`cursor:`

Properties:`position`

Properties:`direction`

Properties:`unicode-bidi`

Control container aspect ratio properties:`aspect-ratio`

`<button>`Label button and`<button>`The label button