css知识点查漏补缺，知识点补充，比较零碎

文档流

文档流：文档内元素流动的方向。
inline元素从左往右流动→，如果宽度不够另挤一行
block元素独占一行，从上往下流动↓

块级元素

块级元素的高度

由其内部文档流元素的高度总和决定

块级元素居中

margin:0 auto;

方法1

html,body {
  height: 100%;/*必须*/
}
#app {
  position: relative;
  min-height: 100%; /*重点！！！*/
}
header {
  background: #f90;
}
#main {
  padding-bottom: 30px;/*等于footer的高度*/
}
footer {
  height: 30px;
  background: #f90;
  position: absolute;
  bottom: 0px;width: 100%;/*修复绝对定位导致宽度失效*/
}

【查看在线实例】

方法2 flex布局

html,body,#app{
  height:100%;
}
#app{
  display:flex;
  flex-direction:column;
}
header,footer{
  background: orange;
}
#main{
  flex-grow:1;
}

【查看在线实例】

内联元素的高度

多个内联元素以baseline对齐

内联元素如果同处一个块元素内，那么按照基线对齐(可以通过vertical-align来设置内联元素对齐方式)
可以看到，x不是在div的正中间，而是与hug的基线对齐

渐变gradient

在线渐变生成器:http://www.colorzilla.com/gradient-editor/

设置dib后，一定要加上vat

1 2	display: inline-block; vertical-align: top;

text-transform: uppercase

将字母变成大写

利用box-shadow实现多层边框(立体感)

1 2	box-shadow: 向左向下模糊程度一个不模糊的边框内阴影inset; box-shadow: 0 0 0 1px #1a1b1c, 0 0 0 2px #1f2020, 0 3px 0 1px #080808;

100vh使元素的高度占满可视区高度

1 2	div{height: 100vh} 再利用flex就可以使元素内的item相对于可视区居中

icon图标

1
2
3

将favicon.ico放在根目录下
如果要获取其他网站的icon，可以通过 //该网站根目录/favicon.ico
比如 //www.qq.com/favicon.ico  就可以获得qq的icon

overflow:hidden别给老子出现滚动条！

当元素设置了 absolute 后，默认就不是100%的宽度了，而是内容多宽就是多宽

当元素设置了 absolute 后，默认就不是100%的宽度了，而是内容多宽就是多宽
如果希望absolute 以后的元素依然和父容器一样是的100% 宽度
有两个方法：

给子级设置 width:100%

给子级设置left:0px;right:0px;

min-width和max-width

min-width:无论如何，都不会小于这个宽度
max-width:无论如何，都不会比这个宽度大

多色border

.box{
  border:50px solid red;
  width:0;
  height:0;
  border-color:red yellow green blue
}

多色三角形变形

.box{
  border:50px solid red;
  width:0;
  height:0;
  border-color:red yellow green blue;
  border-width:10px 30px 50px 80px
}

扇形

.box{
  border:50px solid black;
  width:0;
  height:0;
  border-color:red yellow green blue;
  border-radius: 50%;
}

渐变动画加载图

利用background-size: 200% auto将背景在x轴扩大，然后改变background-position的位置达到渐变动画的效果

文字显示两行，超出两行部分显示省略号

p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

改变文字被选中后的颜色

::selection {
  background: #00b38a;
  color: #fff;
}

visibility的注意事项

visibility使用之前，必须先给元素设置display

1 2	display: block; //先设置display visibility: hidden; //再使用visibility

rotate(360deg)可以写成rotate(1turn)

::placeholder给输入框的占位符添加样式

1
2
3

::placeholder{
  color:red;
}

平滑滚动scroll-behavior

1
2
3

html{
  scroll-behavior: smooth;
}

滚动条样式

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background: #cdcdcd;
}

🔒 css知识点补充

文档流