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;}
2. 文字框(input,textarea)等的大小隨內容自適應
思路:
為了讓輸入框的大小和內容匹配,我只需要獲取內容顯示需要的長度就可以了,如何獲取呢?
scrollWidth:
物件的實際內容的寬度,不包邊線寬度,會隨物件中內容超過可視區後而變大。

程式碼實現:

<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:物件整體的實際寬度,包滾動條等邊線,會隨物件顯示大小的變化而改變。

這裡寫圖片描述

.