日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

利用calc函數實現簡單的自適應

作者:Mr.wang、、 更新時間: 2022-08-15 編程語言

calc()是css3推出的一種函數,可用于樣式中各種長寬計算。例如定義一個寬度頁面大小且留白50像素的盒子。

width: calc(100% - 50px)

calc()可以識別各種css度量單位(px、em、rem),且可以進行加減乘除運算。
注意:計算符左右必須空格,否則無法識別

想定義一行六個盒子,可以寫:

width: calc(100% / 6)

再使用float或者flex布局整理一下就完成了,且因為%的特性,盒子大小會隨著網頁大小改變而改變。
利用calc可以解決許多自適應問題。
比如動態調整input框的大?。?/p>

input {
  width: calc(50% - 2em);
}

原文鏈接:https://blog.csdn.net/qq_30258721/article/details/126273893

欄目分類
最近更新