CSS Secret reading notes

The CurrentColor property gives the same color as the HR and paragraph:

div {
color:red;
}
HR {
Background:currentcolor;
/* Be sure to set the height */
Height:0.1rem;
}
<div>
The HR tag inside <p></div>

Background-origin:padding-box is the default origin of the background image, Background-position:right 10px bottom 10px, and can offset the picture, if this property is not supported, can be so Background:url () no-repeat right bottom;

Memory border-image Similar to background, the first attribute is the color can be a gradient, the second is the image address, the third is the cutting position fourth is the tiling method (the default stretch extrude. Repeat,round more commonly used)

To turn a rectangular box into an ellipse, you only need to set the border-radius:50%; if it is a square it will turn into a circle.

Detailed understanding of Border-radius fillet Half angle: border-radius:50%/100% 100% 0 0; equivalent to border-radius:50% 50% 50% 50%/100% 100% 0 0; The left is the radius R1 equivalent to the x-coordinate , the right radius R2 equivalent to the y-coordinate, two coordinates to determine a center point, the fillet can be drawn at this point is One-fourth circle (when R1,R2 is equal), maybe One-fourth of the ellipse (R2 is R1 twice times), summed up is two points to determine the fillet area, When you understand it, imagine putting a box on the x-coordinate.

Fast memory semicircular angle rule: 11 OK single angle, 51 OK two, 15 OK two right

To apply a translucent matte layer to a picture:

<div class= "Layer" >
<a href= "#" ></a>
</div>
<style type= "Text/css" >
. Layer {
Background-color: #000;
}
A
Transtion:opacity. 5s;
}
a:hover {
Opacity:. 5;
}
</style>

Specify a special font style for a character:

@font-face {
Font-family:ampersand;
Src:local (' Baskerville-italic '),
Local (' Goudyoldstylet-italic '),
Local (' Garamond-italic '),
Local (' palatino-italic ');
<!--Specifies the Unicode code bit that uses the font, which can be a range--
unicode-range:u+26;
}
H1 {
Font-family:ampersand, Helvetica, Sans-serif;
}
<!--the & symbol in the title applies the ampersand font, and the other text applies the Helvetica font-

Horizontal centering of floating elements:

. box {
Float:left;
position:relative;
left:50%;
}
. Box P {
Float:right;
position:relative;
right:50%;
}
<div class= "box" >
<p> I was floating </p>
<p> Floating Center </p>
</div>

The combination of advanced selectors uses:
This selector selects all the list items with Li as N
Li:first-child:nth-last-child (N),
Li:first-child:nth-last-child (n) ~li{}
This selector selects all list items with Li greater than 4
Li:first-child:nth-last-child (n+4),
Li:first-child:nth-last-child (n+4) ~li{}
This selector selects all the list items with an Li maximum of 4
Li:first-child:nth-last-child (-n+4),
Li:first-child:nth-last-child (-n+4) ~li{}
This selector selects all of the list items with an Li of 2 to 6
Li:first-child:nth-last-child (n+2): Nth-last-child (-n+6),
Li:first-child:nth-last-child (n+2): Nth-last-child (-n+6) ~li{}

The solution for fixing the footer to the bottom

<main> This is the main area </main>
<footer> This is the footer </footer>
<style type= "Text/css" >
mian{
Min-height:calc (100VH-HH-FH);
Box-sizing:border-box;
}
<!--another perfect way--
body{
Display:flex;
MIN-HEIGHT:100VH;
Flex-flow:column;
}
Main {
Flex:1;
}
</style>

Head and footer Widescreen layout:

<footer> This is the content area </footer>
<style type= "Text/css" >
Footer {
padding:20px;<!--fallback mechanism--
width:960px;
padding:20px Clac (50%-960px);
Background: #ccc;
}
</style>

CSS Secret reading notes