CSS Self-use Learning Notes (3)

Animation-related properties

• Related background

1. background (All background properties can be used)

Recommended order: background-color, background-image, background-repeat, background-attachment, background-position.

Copy the code

2. background-color(Specify background color)
3. background-position(Specify the position of the background image)

Top, left, right, bottom

background-position:left; // Default second center background-position: left top;Copy the code

4. background-size(Specify the size of the background picture)

background-size:100px 100px
Copy the code

div {
        width: 300px;
        height: 300px;
        background-image: url(./2.jpg);
        background-position: left top;
        background-size: 100px 100px;
    }
Copy the code

5. background-repeat(Specify how to repeat background image)

div {
         width: 300px;
         border: 1px solid red;
         height: 300px;
         background-image: url(./2.jpg);
         background-position: left top;
         background-size: 100px 100px;
         background-repeat: no-repeat;
   }
Copy the code

6. background-origin(Specify the positioning area of the background image and the content box to position the background image)

• Padding-box Position the background image relative to the inner margin box.
• The border-box background image is positioned relative to the border box.
• The content-box background image is positioned relative to the content box.

div{ border:1px solid black; padding:35px; background-image:url(''); background-repeat:no-repeat; background-position:left; background-origin:border-box; //background-origin:padding-box; //background-origin:content-box // Content-boxCopy the code

– Border box:

– Inside margin:

– Content box:

7. background-clip(Specify the drawing area of the background)

• Padding-box Position the background relative to the padding box.
• The border-box background is positioned relative to the border box.
• The content-box background is positioned relative to the content box.

8. background-attachment(Specifies whether the background image is fixed or scrolls along the rest of the page)

• Scroll default value. The background image moves as the rest of the page scrolls.
• Fixed The background image does not move while the rest of the page is scrolling.
• Inherit specifies that background-attachment property Settings should be inherited from the parent element.

9. background-image(Specify the background image to be used)

• Border related

1. border

Dotted red // dotted red // double red // double red border:1px dashed red //Copy the code

2. border-style

.div3 {
          border-width: 10px;
          border-color: red;
          border-style: dotted double;
      }
Copy the code

3. border-top.border-right.border-left.border-bottom

.div4 {
         border-top: 10px dashed red;
         border-bottom: 10px dashed rgb(57, 143, 90);
         border-left: 10px dashed rgb(62, 22, 99);
         border-right: 10px dashed rgb(170, 128, 13);
      }
Copy the code

4. border-top-color(left, bottom, right in the same way)
5. border-top-left-radius(left, bottom, right in the same way)

6. border-top-width(left, bottom, right in the same way)
7. border-radius

• Absolute location correlation

1. position:absoluteAbsolute positioning

2.left:

position:absolute
left
Copy the code

3. right:
4. top:
5. bottom:
6. clipClipping absolutely positioned elements (top, Right, bottom, left)

 clip:rect(0px,60px,200px,0px)
Copy the code

• shadow

1. box-shadow

box-shadow: 10px 10px 5px #888888; // Offset, offset, radial distance, colorCopy the code

• Article content typesetting related

1. column-countDivide the text in the DIV element into three columns

-moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;Copy the code

2. Column-gap Specifies the interval between columns

{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}
Copy the code

3. column-ruleWidth, style, and color rules between columns

div { -moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ column-rule:3px outset #ff00ff; }Copy the code

4. column-width

column-rule: column-rule-width column-rule-style column-rule-color;
Copy the code

5. column-rule-colorColor rules between columns

div { -moz-column-rule-color:#ff0000; /* Firefox */ -webkit-column-rule-color:#ff0000; /* Safari and Chrome */ column-rule-color:#ff0000; }Copy the code

6. column-rule-widthWidth rules between columns

div { -moz-column-rule-width:1px; /* Firefox */ -webkit-column-rule-width:1px; /* Safari and Chrome */ column-rule-width:1px; }Copy the code

7. column-rule-styleStyle rules between columns

div { -moz-column-rule-style:dotted; /* Firefox */ -webkit-column-rule-style:dotted; / / column-rule-style:dotted; }Copy the code

8. columns

columns: column-width column-count;
Copy the code

div { columns:100px 3; -moz-columns:100px 3; /* Firefox */ -webkit-columns:100px 3; /* Safari and Chrome */Copy the code

• The image effect

9. filter

filter: none blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia() url();
Copy the code

• Blur (px) blur effect, default value is 0

• Brightness (%) of the image. Default is 100%

• Contrast (%) Specifies the contrast of the image. The default value is 100%

• Drop-shadow (H-shadow V-shadow blur spread color) Blur and spread are optional, similar to box-shadow

img {
  filter:drop-shadow(8px 8px 10px red)
}
Copy the code

• Grayscale gray-scale (%).

• Hue -rotate(deg) hue rotation. The default value is 0deg

• Invert (%) Invert the sample in the image.

• Opacity (%

• Saturate (%) Saturation of the image

• Sepia (%) converts the image to tan

• Flex elastic layout related

1. flex

flex: flex-grow flex-shrink flex-basis auto initial inherit;
Copy the code

2. flex-growGrowth relative to the rest of the elastic items

div:nth-of-type(1) {flex-grow: 1; } div:nth-of-type(2) {flex-grow: 3; }Copy the code

3. flex-shrinkThe amount of shrinkage relative to the remaining elastic items

div:nth-of-type(1) {flex-shrink: 1; } div:nth-of-type(2) {flex-shrink: 3; }Copy the code

4. flex-basisThe length of the initial project length.

 flex-basis: 50px;
Copy the code

5. flex-wrap: wrapElastic items wrap as needed

display: flex;
flex-wrap: wrap;
Copy the code

6. flex-directionDirections for flexible projects

• Row as a row
• Row-reverse is a row in the opposite direction
• Column as a column
• Column-reverse is a column in the opposite direction

display: flex;
flex-direction: row-reverse;
Copy the code

• Font related

1. font

(In order)

• Font-style Indicates the font style
• Font -variant
• Font-weight Indicates the size of the font
• Font-size /line-height Specifies the font size and line height
• Font-family: “family”

font:italic bold 12px/30px arial,sans-serif;
Copy the code

2. font-size-adjust
3. font-stretchThe current font-family is stretched and deformed

• Grid layout

1. grid

display: grid; grid: 150px / auto auto auto; // Grid-gap: 10px;Copy the code

1. grid-gapThe size of the gap between rows and columns

• grid-row-gap
• grid-column-gap

grid-gap: 50px; // Abbreviations between columns are set to 50 pixelsCopy the code

2. grid-row

Grid-row: 1 / span 2 // row 1 starts and spans two rowsCopy the code

3. grid-column

• grid-column-start
• grid-column-end

grid-column: 1 / span 2;
Copy the code

4. grid-template-rowsThe size of

grid-auto-rows: 150px;
grid-template-rows: 100px 300px;
Copy the code

5. grid-template-columnsThe size of the column

grid-template-columns: auto auto auto auto;
Copy the code

5. grid-template-areasName the project’s grid layout

.item1 { grid-area: myArea; }. Grid-container {display: grid; grid-template-areas: "myArea myArea . . ."; // Reference, across two columns in a five-column grid layout}Copy the code

6. grid-auto-rowsAutomatic dimensions of specified lines

 grid-auto-rows: 150px;
Copy the code

7. grid-auto-columnsSpecifies the automatic size of the column

 grid-auto-columns: 50px;
Copy the code

8. grid-auto-flowSpecify how to place auto-emplacement items

grid-template-rows: auto auto;
Copy the code

9. grid-areaProperty the size of the grid item and its position in the grid layout

(In order)

• The grid – row – start start line
• The grid – column – start start column
• The grid – row – end end line
• The grid – column – end to end

grid-area: 2 / 1 / span 2 / span 3;
Copy the code

11. grid-row-gap

grid-row-gap: 50px; // Line gap 50pxCopy the code

12. grid-column-gap

Grid-column-gap: 50px // column gapCopy the code

13. grid-template

• grid-template-rows
• grid-template-columns
• grid-template-areas

grid-template: 150px / auto auto auto;
Copy the code