CSS 自用学习笔记（三）

动画相关属性

• 背景相关

1. background （可以所有背景属性） 推荐顺序： background-color，background-image，background-repeat，background-attachment，background-position。

2. background-color (规定背景颜色)
3. background-position (规定背景图像的位置) cente、top、left、right、bottom

background-position:left;   // 默认第二个center
 background-position: left top;

4. background-size (规定背景图片的尺寸)

background-size:100px 100px

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

5. background-repeat (规定如何重复背景图像)

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;
   }

6. background-origin (规定背景图片的定位区域,内容框来定位背景图像)

• padding-box 背景图像相对于内边距框来定位。
• border-box 背景图像相对于边框盒来定位。
• 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   //相对于内容框
}

-边框盒:

-内边距:

-内容框:

7. background-clip (规定背景的绘制区域)

• padding-box 背景相对于内边距框来定位。
• border-box 背景相对于边框盒来定位。
• content-box 背景相对于内容框来定位。

8. background-attachment (规定背景图像是否固定或者随着页面的其余部分滚动)

• scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
• fixed 当页面的其余部分滚动时，背景图像不会移动。
• inherit 规定应该从父元素继承 background-attachment 属性的设置。

9. background-image (规定要使用的背景图像)

• 边框相关

1. border

border:1px solid red   // 直线
border:1px dotted  red  // 点状
border:1px double  red   // 双线
border:1px dashed  red   //虚线

2. border-style

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

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);
      }

4. border-top-color (left,bottom,right 同理)
5. border-top-left-radius (left,bottom,right 同理)

6. border-top-width (left,bottom,right 同理)
7. border-radius

• 绝对定位相关

1. position:absolute 绝对定位 2.left:

position:absolute
left

3. right:
4. top:
5. bottom:
6. clip 剪裁绝对定位元素 (top, right, bottom, left)

 clip:rect(0px,60px,200px,0px)

• 阴影

1. box-shadow

box-shadow: 10px 10px 5px #888888;   // 偏移，偏移，放射距离，颜色

• 文章内容排版相关

1. column-count 将 div 元素中的文本分为三列

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

2.column-gap 列之间的间隔

{
-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;
}

3. column-rule 列之间的宽度、样式和颜色规则

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

4. column-width

column-rule: column-rule-width column-rule-style column-rule-color;

5. column-rule-color 列之间的颜色规则

div {
-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari 和 Chrome */
column-rule-color:#ff0000;
}

6. column-rule-width 列之间的宽度规则

div {
-moz-column-rule-width:1px; /* Firefox */
-webkit-column-rule-width:1px; /* Safari 和 Chrome */
column-rule-width:1px;
}

7. column-rule-style 列之间的样式规则

div {
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari 和 Chrome */
column-rule-style:dotted;
}

8. columns

columns: column-width column-count;

div {
columns:100px 3;
-moz-columns:100px 3; /* Firefox */
-webkit-columns:100px 3; /* Safari 和 Chrome */
}

• 图像效果

9. filter

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

• blur(px) 模糊效果,默认值是0

• brightness(%) 图像的亮度,默认值是 100％

• contrast(%) 图像的对比度,默认值是 100％

• drop-shadow(h-shadow v-shadow blur spread color) blur和spread可选，类似 box-shadow 属性

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

• grayscale(%) 灰阶。

• hue-rotate(deg) 色相旋转，默认值为 0deg

• invert(%) 反转图像中的样本。

• opacity(%) 不透明度

• saturate(%) 图像的饱和度

• sepia(%) 将图像转换为棕褐色

• flex弹性布局相关

1. flex

flex: flex-grow flex-shrink flex-basis auto initial inherit;

2. flex-grow 相对于其余弹性项目的增长量

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

3. flex-shrink 相对于其余弹性项目的收缩量

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

4. flex-basis 项目初始长度的长度。

 flex-basis: 50px;

5. flex-wrap: wrap 弹性项目在需要时换行

display: flex;
flex-wrap: wrap;

6. flex-direction 弹性项目的方向

• row 作为一行
• row-reverse 作为一行，方向相反
• column 作为一列
• column-reverse 作为一列，方向相反

display: flex;
flex-direction: row-reverse;

• 字体相关

1. font (按顺序排列)

• font-style 字体样式
• font-variant 字体异体
• font-weight 字体粗细
• font-size/line-height 字体尺寸和行高
• font-family 字体系列

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

2. font-size-adjust
3. font-stretch 当前的 font-family 进行伸缩变形

• grid网格布局

1. grid

display: grid;
grid: 150px / auto auto auto; // 三列
grid-gap: 10px;

1. grid-gap 行与列之间间隙的尺寸

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

grid-gap: 50px;   //列之间的简写设置为 50 像素

2. grid-row

grid-row: 1 / span 2    //行 1 开始并横跨两行

3. grid-column

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

grid-column: 1 / span 2;

4. grid-template-rows 行的尺寸

grid-auto-rows: 150px;
grid-template-rows: 100px 300px;

5. grid-template-columns 列的尺寸

grid-template-columns: auto auto auto auto;

5. grid-template-areas 命名项目的网格布局

.item1 {
  grid-area: myArea;    //先定义名字
}
.grid-container {
  display: grid;
  grid-template-areas: "myArea myArea . . .";  //引用，在五列网格布局中横跨两列
}

6. grid-auto-rows 规定行的自动尺寸

 grid-auto-rows: 150px;

7. grid-auto-columns 规定列的自动尺寸

 grid-auto-columns: 50px;

8. grid-auto-flow 规定如何放置自动就位的项目

grid-template-rows: auto auto;

9. grid-area 属性网格项目的尺寸以及在网格布局中的位置

(按顺序)

• grid-row-start 开始行
• grid-column-start 开始列
• grid-row-end 结束行
• grid-column-end 结束列

grid-area: 2 / 1 / span 2 / span 3;

11. grid-row-gap

grid-row-gap: 50px;   //行间隙50px

12. grid-column-gap

grid-column-gap: 50px    //列间隙

13. grid-template

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

grid-template: 150px / auto auto auto;