1.div標籤隨內容大小變化

這些黃色矩形框大小得隨內容變化，適應性的
哈哈哈想一下，你會怎麼做？
其實很簡單

沒錯！width:auto；就可以了

咦，好像有點擠，沒事，加個padding: 10px;


.blockcolors{width:auto;height:26px;color:#fff;background:orange;line-height: 26px;text-align: center;border-radius: 4px;font-size:1.2em;margin-left: 10px;cursor: pointer;display: inline-block;margin-top: 20px;padding: 10px;}


程式碼實現：

<input type="text">
<script>  document.querySelector("input").addEventListener("input",function(){
    this.style.width="0px";//讓 scrollWidth 獲取最小值，達到回縮的效果
 

    this.style.width=this.scrollWidth+"px";
  });
</script>

一般有最大最小長寬度限制：
中級實現：

附：
scrollWidth,clientWidth,offsetWidth的區別
解釋：
scrollWidth：物件的實際內容的寬度，不包邊線寬度，會隨物件中內容超過可視區後而變大。
clientWidth：物件內容的可視區的寬度，不包滾動條等邊線，會隨物件顯示大小的變化而改變。
offsetWidth：物件整體的實際寬度，包滾動條等邊線，會隨物件顯示大小的變化而改變。