1 常用
1.14 margin/padding设置为百分比是基于父元素宽度的
2 冷门
- @import">2.1 @import
- @font-face">2.2 字体@font-face
  - 2.2.1 字体问题
  - NotoSans-Regular">2.2.2 某个项目使用的字体—NotoSans-Regular
- ">
- 2.3 重置浏览器默认样式
- 2.4 CSS 函数
1. 图片
2. 图形绘制
conic-gradient()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
shape()
3. 布局
calc()
clamp()
fit-content()
max()
min()
minmax()
* repeat()
4. 变形/动画
transform
matrix()
matrix3d()
perspective()
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
skew()
skewX()
skewY()
translate()
translate3d()
translateX()
translateY()
translateZ()
5. 环境与元素
var()
env()
* attr()

1 常用

1.1 清除浮动

celar清楚浮动，可以作用用内部孙子元素，不仅只有子元素

<style>
    .box{
      background-color: red;
      /* overflow: hidden; */
    }
    .box::after{
      display: table;
      clear: both;
      content: '';
    }
    .item1{
      background-color: green;
      min-height: 3px;
    }
    .item1 p {
      margin: 0;
      background-color: yellow;
      float: left;
      height: 30px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item1">
      <p>fefefefefefefeeeeeee</p>
    </div>
  </div>
</body>

1.2 transform适用于：所有块级元素及某些内联元素

1.3 去除inline-block元素间间距的N种方法

1.4 解决chrome 浏览器表单自动填充默认样式 - autofill

1.5 让浮动元素高度等于父元素高度

1.6 伪元素实现实心or空心三角形

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           .tri_top, .tri_right, .tri_bottom, .tri_left{
               width: 150px;
               height: 100px;
               background: #CCCCCC;
               border-radius: 8px;
               margin: 50px 50px;
               position: relative;
               float: left;
           }
           .tri_top:before{
               content: "";
               width: 0px;
               height: 0px;
               border-left: 10px solid transparent;
               border-right: 10px solid transparent;
               border-bottom: 10px solid #CCCCCC;
               position: absolute;
               top: -10px;
               left: 65px;
           }
           .tri_right:before{
               content: "";
               width: 0px;
               height: 0px;
               border-top: 10px solid transparent;
               border-bottom: 10px solid transparent;
               border-left: 10px solid #CCCCCC;
               position: absolute;
               top: 40px;
               left: 150px;
           }
           .tri_bottom:before{
               content: "";
               width: 0px;
               height: 0px;
               border-top: 10px solid #CCCCCC;
               border-left: 10px solid transparent;
               border-right: 10px solid transparent;
               position: absolute;
               top: 100px;
               left: 70px;
           }
           .tri_left:before{
               content: "";
               width: 0px;
               height: 0px;
               border-top: 10px solid transparent;
               border-bottom: 10px solid transparent;
               border-right: 10px solid #CCCCCC;
               position: absolute;
               top: 40px;
               left: -10px;
           }
       </style>
   </head>
   <body>
       <div class="tri_top"></div>         <!--三角形在上边-->
       <div class="tri_right"></div>       <!--三角形在右边-->
       <div class="tri_bottom"></div>      <!--三角形在底边-->
       <div class="tri_left"></div>        <!--三角形在左边-->
   </body>
</html>

1.7 多行文本居中

flex / table cell

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}
//或
.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

1.9 指定文字行数

纯 CSS 实现多行文字截断 #12
一行

overflow:hidden;//超出一行文字自动隐藏 
text-overflow:ellipsis;//文字隐藏后添加省略号
white-space:nowrap;//强制不换行

三行

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

1.10 布局-内容不够，footer总在浏览器底部

八种方法实现CSS页面底部固定

1.11 font简写属性不生效

1.12 a标签内部子元素点击触发跳转

https://segmentfault.com/a/1190000016269417

1.13 scroll-snap css原生滑动吸附

1.14 margin/padding设置为百分比是基于父元素宽度的

但是不知道这有什么用，于是看了看大佬的分析：巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

2 冷门

大部分来自极客时间-重学前端

2.1 @import

不建议使用

2.2 字体@font-face

指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

2.2.1 字体问题

2.2.2 某个项目使用的字体—NotoSans-Regular

@font-face{
    font-family:'ns-r';
    src:url('//css.yuyue.com/buyer/home3/image/fonts/eot/NotoSans-Regular.eot');
    src:url('//css.yuyue.com/buyer/home3/image/fonts/eot/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
    url('//css.yuyue.com/buyer/home3/image/fonts/woff/NotoSans-Regular.woff') format('woff'),
    url('//css.yuyue.com/buyer/home3/image/fonts/ttf/NotoSans-Regular.ttf') format('truetype'),
    url('//css.yuyue.com/buyer/home3/image/fonts/svg/NotoSans-Regular.svg#ns-r') format('svg');
    font-weight:normal;
    font-style:normal
}

使用

把字体文件block掉，对比效果

2.2.3 开源字体

https://fonts.google.com/

2.2.4 字体闪现

2.2.5 默认字体

如果不设置，使用系统默认字体，各系统不一样，依macos-catlina为例

如何优雅的选择字体(font-family) - SegmentFault 思否

2.3 重置浏览器默认样式

张鑫旭反对使用
京东首页重置样式

// reset.css
* {
    margin: 0;
    padding: 0
}
em,i {
    font-style: normal
}
li {
    list-style: none
}
img {
    border: 0;
    vertical-align: middle
}
button {
    cursor: pointer
}
a {
    color: #666;
    text-decoration: none
}
a:hover {
    color: #c81623
}
button,input {
    font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
}
body {
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    color: #666
}
.hide,.none {
    display: none
}
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}
.clearfix {
    *zoom:1}

2.4 CSS 函数

按照功能，分成以下 5 个类别（可能并不完全准确）：

1. 图片

filter
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue_rotate()
invert()
opacity()
saturate()
sepia()
cross-fade()
element()
image-set()
imagefunction()

2. 图形绘制
conic-gradient()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
shape()

3. 布局
calc()
clamp()
fit-content()
max()
min()
minmax()
* repeat()

4. 变形/动画
transform
matrix()
matrix3d()
perspective()
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
skew()
skewX()
skewY()
translate()
translate3d()
translateX()
translateY()
translateZ()

5. 环境与元素
var()
env()
* attr()

2.5 命名空间namespace

svg 和 HTML 中都有 a 元素，我们若要想区分选择 svg 中的 a 和 HTML 中的 a，就必须用带命名空间的类型选择器。

2.6 鼠标事件pointer-events:none

**pointer-events** CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
input等设置为disaled后，就不出触发鼠标事件，比如click，mouseove等。
某次项目需要在不符合条件（disabled）点击按钮出现提示，就需要解决该问题

有多种解决方式，设置改css后，可以在父级元素触发事件，从而解决问题
参考：

2.7 父元素设置 opacity 影响子元素解决办法

父元素设置opacity后，子元素也受到影响了

解决办法：为父元素设置css3属性 background: rgba(0,0,0,0.3)。代替opacity。

2.8 css 变量var

tailwindcss中常见
tailwind css

css知识