css 數學函式

min max calc

  :root{
      --box:120px
    }
    .box {
      /*width: var(--box);   120px*/ 
      /*width: min(var(--box),100px);   100px*/
      /*width: max(var(--box), 100px);   120px*/
      /*width:calc(var(--box) - 20px);   100px*/
      height: 100px;
      background-color: khaki;
    }

新增屬性到內容上

 .box {
      width: 100px;
      height: 100px;
      background-color: khaki;
    }
    .box::after{
      content:attr(data-text);
    }
<div class="box" data-text="min()"></div>
 

把內容 min() 新增到內容裡面

max-width

.box {
      width: min(550px,50%);
      height: 100px;
      background-color: khaki;
    }
    .box1{
      width: 50%;
      max-width:550px;
      height: 100px;
      background-color: black;
    }

兩者的效果相同,都是螢幕<=550px

同理 min-width 和max() 的效果也是一樣的

clap(min,val,max)

就是結合min()

 font-size: clamp(20px,8vw,50px)  // 字型大小等於 8vw 不小於20px 不大於40px

確定範圍,我們給width 設定 最小值和最大值

      min-width:800px;
      max-width:1000px;
	範圍800px到1000px;寫成calp()
      width: clamp(500px, 100%, 800px); // 範圍就是500px 到 800px

calc

width: calc(100%-40px);   // 就是始終保持40px的間距

隨著螢幕大小的增加而增加

 font-size: calc(1rem + .5vw);
  line-height: calc(1.2rem + .5vw);
 

通過計算的邏輯

如果你想佔總寬度的1/12,就可以這樣寫

width:calc(100%/12)

文字給左右的padding,圖片百分百

 <style>
         .aaa{
           min-width: 400px;
           max-width: 600px;
           height: 300px;
           margin: 30px auto;
           background-color: firebrick;
           --padding:20px;
           padding: var(--padding);
         }
          .bbb {
            width: calc(100% + var(--padding) * 2);
            margin-left: calc(var(--padding) * -1);
            height: 200px;
            background-color: cornsilk;
          }
  </style>
<div class="aaa">
    <p style="word-break: break-word">
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
    </p>
	<div class="bbb"></div>
</div>

attr()

<div class="aaa" data-num="200"></div>
<style>
  .aaa::after{
        content:attr(data-num);
      }
</style>

自定義視訊

  <style>
    .video {
      /*算出縱橫比*/
      --aspect: calc(var(--height) / var(--width));
      /*給height 新增單位*/
      --units: calc(var(--height) * 1px);
      max-width: 100%;
      height: min(calc(100vw * var(--aspect)), var(--units));
    }
  </style>

<article class="article">
  <h1>Adaptive video with custom properties</h1>

  <iframe
    style="--width: 560; --height: 315;"
    class="video"
    width="560" height="315"
    src="//player.bilibili.com/player.html?aid=21032426&bvid=BV1PW411g7T3&cid=34444684&page=1" scrolling="no" border="0"
    frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</article>

使用flex 導致overflow 失效

子元素使用flex-shrink: 0; 就可以解決

一道有趣的面試題

let x='6'
console.log(x +++ 3, x)
// 9  7

++ 優於+ ,並將字串強制轉化為數字,所以解析為(x++)+3 所以結果是9 ,由於是後加加,所以x本身為7

this的一次思考

const twit={
  names:'a',
  a(){
    return this.names
  },
  b:function(){
    return this.names
  },
  c:()=>{
    return this.names
  }
}

console.log(twit.a());// a
console.log(twit.b());// a
console.log(twit.c());// window
function add(){
  this.a=1;
  const twit={
    c:()=>{
      return this.a
    }
  }
  console.log(twit.c());
}
add();// 1

this 功能是作用於上下文

由於箭頭函式的this是指向上一層的this ,object不存在this,所以只想window

但是當我們在上面寫成函式,那個函式指向上一層的函式

一道有趣的面試題

console.log(typeof Object,typeof Number,typeof Array)
// 'function' 'function'  'function'

因為內建函式也是函式,所以列印的都是函式,

如果把內建函式傳遞引數Number(1) 應該就是大家能理解的意思

快捷鍵觸發函式

<button accesskey="c" onClick="alert(333)">CLick Me</button>

Alt+ accessKey (window)會觸發函式

control+Alt+ assessKey(mac) 會觸發函式

css 隱藏dom 的方式

• display

display:none

• visibility

檢視上隱藏,但是保留位置

visibility:hidden ; 

• opacity

跟visibility 類似

opacity:0

• position

  position: absolute;
  top: -9999px;
  left: -9999px;

• ttansform

transform:scale(0)

SVG 在文章中使用

出現環繞的效果

 <style>
    .box{
      width: 300px;
      border: 1px solid #00230b;
      margin: 40px auto;
    }
    .box-c {
      --image-url: url("data:image/svg+xml,<svg width='150px' height='150px' xmlns='http://www.w3.org/2000/svg'> <clipPath id='emojiClipPath'> <text x='0' y='130px'  font-size='130px'>