css calc使用總結
加減等運算子前後必須加空格
表現負數:
方式一:calc(-1 * 25px - -1 * 5px); 使用-1 * 來實現
方式二:calc(0px - (25px + 5px))); 使用0px - 來實現
calc中帶變數:使用方式相同
calc(-1 * var(--circleWidth) - -1 * var(--gap));
calc(0px - (var(--circleWidth) + var(--gap)));
程式碼示例:
.jf-switch-checked{
left: 100%;
margin-left: calc(-1 * var(--circleWidth) + -1 * var(--gap));
/* calc(0px - (var(--circleWidth) + var(--gap))) */
}
相關文章
- CSS calc()CSS
- 【CSS筆記】— 使用calc()計算寬高(vw/vh)CSS筆記
- css基本語法總結及使用CSS
- css 總結CSS
- CSS總結CSS
- CSS中的calc()有什麼作用?CSS
- CSS日常總結CSS
- CSS背景總結CSS
- CSS技巧總結2CSS
- css中居中總結CSS
- html和css總結HTMLCSS
- CSS動畫總結CSS動畫
- CSS縮寫總結CSS
- css常用大總結CSS
- css 元素左右居中總結CSS
- 【CSS】Grid 佈局總結CSS
- css面試題總結CSS面試題
- CSS-@規則(At-rules)常用語法使用總結CSS
- calc
- [譯] CSS 變數 + calc + rgb = 自動高對比度CSS變數
- 關於css屬性calc對於ie的態度CSS
- css各種佈局總結CSS
- css佈局基礎總結CSS
- 初學者css每日總結CSS
- 初入HTML/Css的總結HTMLCSS
- css3新特性總結CSSS3
- CSS3陰影 box-shadow的使用和技巧總結CSSS3
- css 盒子模型和position總結CSS模型
- CSS3一些總結CSSS3
- CSS知識點面試總結CSS面試
- CSS揭祕實用技巧總結CSS
- CSS基礎知識總結(4)CSS
- 【BUUCTF】easy calc
- templatejs使用總結JS
- VideoJs使用總結IDEJS
- VUE 使用總結Vue
- Audio使用總結
- HelloCharts 使用總結