clip-path 属性的作用是：定义一个剪裁区域，只有在这个区域内的内容才会被显示，区域外的部分都会被“剪掉”变成透明。

1
2
3
4
5
6
7
.triangle {
      width: 200px;
      height: 200px;
      background: red;
      /* 三个点：顶部中点(50% 0%)，右下角(100% 100%)，左下角(0% 100%) */
      clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

如图：

img

img

这个属性感觉不用记住

https://bennettfeely.com/clippy/访问这个网站，自己拖动出自己想要的图形，下方会自动生成代码，复制就行。

img

css布局属性：

（1）display 确定元素的显示类型：

常见的块级元素：div h1 p ul li

常见的行内元素：span a b i

  • block：块级元素。//可以设置宽高，如果没有设置宽度，那么会自动撑起父级元素的100%
  • inline：行内元素。//只能包含文本和行内元素，不可以设置宽高，是用自己的字体大小撑开
  • inline-block：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。

（2）position 确定元素的位置：

  • static：默认属性值。
  • relative：相对定位。相对于元素本身进行偏移，不会改变它所占据的空间。
  • absolute：绝对定位。相对于父元素中最近的 relative/absolute 进行偏移，自己去寻找祖先元素，会脱离文档流。
  • fixed：固定定位。相对于可视区域固定，会脱离文档流。//可以运用导航栏（加上top:0; left:0;等操作）

relative、absolute、fixed这三个属性，可以结合 z-index 来设置层级。

inline-block 布局:

当我使用这个属性的时候，会将块级元素转化为文本，而文字之间本身是有空隙的，所以会出现行内块出现空隙，我就需要对于父级元素设置字体大小font-size为0（注意一定要给子元素设置字体大小，否则子元素会继承父元素的字体大小也为0了，就会没有显示），清除样式，随后对于子级元素进行设置对应的字体大小，即可清除间隙。

但是我也可以使用flex布局，或者是直接将div盒子挨在一块写，就不会有间隙了。

多字体 fallback 机制：

1
2
3
.div1{
    font-family: "PingFang SC", "Microsoft Yahei", monospace;
}

字体：

大部分好看的字体都是要收费使用的，一旦打印下来什么的就缴费，不然就吃官司哈哈。

对于粗细来说，某些字体只支持400和700，而使用其他的大小100-900自动选接近的。

水平垂直居中：

行内元素（文字、图片等）：

1
2
3
4
5
6
7
水平居中：text-align:center;//左右

垂直居中:行高等于盒子高度
.father{
height：20px;
line-height:20px;
}//上下

块级元素：（重点）

margin:四个属性，上 右 下 左

border-radius四个属性：左上 右上 右下 左下

在这里提到的绝对定位即就是:

子绝父相

  1. 绝对定位+margin：
1
2
3
4
5
6
width: 200px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
  1. 绝对定位+translate
1
transform: translate(-50%, -50%);（即就是代替了-margin法）
  1. 最推荐flex布局+margin:auto;
1
2
3
4
5
6
7
8
9
.father{
display:flex;
}

.son{
margin:auto;
}

//margin-left:可以实现导航栏的划分

flex-wrap: wrap; 的意思就是 “允许换行”。

实际上不只是居中，即使是水平方向上，也可以使用flex布局和margin-top和margin-bottom

对于弹窗红包来说：

  1. position: fixed：它的作用是让元素“浮”起来，相对于屏幕窗口定位。它确实脱离了文档流，但是背景层面依旧是活的。
  2. 滚动穿透：即便弹窗盖住了全屏，用户在弹窗上操作时，下方的背景页面依然随之滚动的现象。
  3. overflow: hidden：通过给 body 设置这个属性，强制剪裁掉超出屏幕的内容，从而从根源上禁止 body 的滚动能力。

但是仅限于wed端，移动端会失效的。

flex布局居中：

1
2
3
display:flex;
justify-content:center;//左右
align-items:center;//上下

隐藏盒子的几种方式：

  1. overflow:hidden;（溢出隐藏，BFC）
  2. display:none;（display:block;这俩切换使用）
  3. margin-left：1000px;（最暴力的方式）

盒子设置半透明：

  1. background: rgba(red,yellow,blue,0.3);//rgba色泽，然后加一个不透明度；
  2. opacity: 0.4//同时内容也会透明

参考资料