CSS常见问题

1、浏览器默认样式消除
2、relative 相对自身左上角的元素点定位，sticky粘性定位兼容性不好，inherit继承父元素定位，initial设置css属性默认值，fixed相对浏览器窗口定位，absolute是以第一个position为relative或absolute定位，如果它的父级元素都没有，就是相对于body定位的。
3、选择器的种类：后代选择器空格；子类选择器 >；兄弟选择器 ~；相邻兄弟选择器 +；交集选择器不加分隔；并集选择器逗号分隔；
优先级：!important > 行内样式 > id > class =伪类=伪元素> 标签 > 通配符 * > 继承 > 默认样式
通过js可以去修改已经写好的所有样式
4、伪类选择器 :link :visited :hover :active :focus

伪类的特效实现：https://juejin.im/post/5f1ecfe7f265da22eb2a8c42#heading-27

5、块级元素：div h table form ul dl p 行级元素：span img a input
6、rem是相对于html根元素的字体 em是相对于父元素的字体
7、英文换行单词不截断（默认的行为）设置了word-break:break-all 会截断
8、保留文本格式：white-space: pre-wrap;
9、单行文本超出省略号： overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
多行 webkit内核使用display: box; box-orient: vertical; line-clamps: 3; overflow: hidden;
weex 可用内置的lines: 3; text-overflow: ellipsis; 解决
10、box-sizing: border-box； context-box; 宽高的设置作用
12、vw和vh 分别作为屏幕宽度、高度的百分之一，通过calc(100vw / 750 * 1)
13、层级，定位>浮动>标准流（默认为0）> z-index负值；同级的后面的更高，z-index设置值只对定位元素有效（position属性值为 relative 或 absolute 或 fixed的对象），没有定位的（默认定位的）无效，当父元素z-index有效则首先遵循父元素的定位；父元素的定位无效则子元素的定位有效
15、animition和transition

animition可以设置动画的次数，进入触发，可以设置多个帧，作用于元素本身
transition 需要借助hover或js进行触发，触发就执行一次，作用于样式
canvas 绘制

// animition: 关键帧 时间 过渡效果 延迟时间 周期（n/infinite）正向反向（altermate奇正偶反） 静态效果 当前状态指定
div {
  animation: demo 2s infinite(循环);
}
@keyframes demo {
    0%{
       transform: rotate(0)   
}
    100% {
       transform: rotate(30deg)
 }
}
// transition: 过渡属性 时间 过渡效果 延迟时间
div {
 transition: all 2s linear (过渡效果默认ease) 2s(delay 延迟时间) 
}
div:hover {
 transform: rotate(30deg)
}
// canvas
ctx = document.getElementById('canvas').getContext('2d')
ctx.rotate(30*Math.PI/180)
ctx.fillRect(0,0, 300,200)

canvas

https://www.twle.cn/l/yufei/canvas/canvas-basic-gradient-line.html

伪元素选择器和伪类选择器

之前这两种选择器都是用：来标志，而在css3之后伪类用：标识。伪元素选择器用:：来标识，而两者的区别在于：

伪类是我们用于标志一些状态或者是逻辑关系的选择器比如:link :visited :hover : active : focus :first-child :last-child :first-of-type :last-of-type
伪元素选择器，不进行选择元素而是在元素的之前或者之后（等同于但是实际上不是）创造一个新的元素从而实现某些效果，如::after ::before ::first-letter ::first-line ::selection
1、伪元素需要借助一个content来给真实的dom元素添加一些文字或图形，这个添加的content不在dom树上但是可以操纵，需要在css上定义，但是不可以被选择

css3新特性

过渡动画形状转换 transition animation transform
flex grid布局
文字换行 word-break
边框阴影和图片 border-shadow border-image
background-clip 制定背景绘制（显示border-box; padding-box; content-box）区域 background-origin 对比clip来说是定位，clip是裁切； background-size
盒模型定义：box-sizing: border-box; box-sizing: content-box

实现一个0.5px的线(用伪类来实现)

1、渐变一半有颜色一半透明

.linear:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-image:linear-gradient(0, transparent 50%, red 50%) // 角度 90deg 方向 to bottom right
  // background-image: radial-gradient(circle, red, yellow, green);  放射渐变 默认椭圆 可设置百分比
}
// canvas渐变
let gradient = ctx.createLinearGradient(0,0,0,10) // 起点和终点
// let gradient = ctx.createRadialGradient(300,300, 300,300,300, 0) 渐变的起点圆心 半径 结束圆心 半径
gradient.addColorStop(0, "white")
gradient.addColorStop(1, "green")
ctx.fillStyle = gradient
ctx.fillRect(0,0, 300,1)

2、压缩到原来的1/2

.linear:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  border: 1px solid red;
  transform: scaleY(0.5);
}

3、四周

.linear:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 1px solid red;
  transform-origin: 0 0;
  transform: scale(0.5, 0.5)
}

CSS常见问题