其他应用.md

自适应圆形

padding 如果设置百分比的话, 是根据父级的 width 计算的

.box {
  width: 50%;  
  height: 0;
  padding-top: 50%;  /* 根据父级宽度计算 */
  border-radius: 50%;
  background-color: aqua;
}

渐进增强: 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行处理 优雅降级: 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容处理

HSL即是代表色调，饱和度，亮度三个通道的颜色

文字换行

• 文字内换行(长单词依然在同一行):

.wrap{
  word-wrap: break-word;
}

• 在边界换行(长单词在不同行):

.wrap{
  word-break: break-all;
}

transitionend

给设置了 transition 属性的元素监听事件

.box {
  width: 100px;
  height: 100px;
  background-color: palegreen;
  transition: all .5s ease;
}
.box:hover {
  width: 300px;
}

<div class="box"></div>

<script>
  const box = document.getElementsByClassName('box')[0]
  box.addEventListener('transitionend',()=>{
    console.log('box transitionend')
  })
</script>