calc 語法規則

2021-10-25 12:22:07 字數 1275 閱讀 1593

calc() 只作用於屬性值

css有很多長度,它們都可以與calc() 一起使用:

不能在**查詢中使用

@media (max-width: 40rem) 

/* 無效 */

@media (min-width: calc(40rem + 1px))

與預處理器數學比較
.foot 

//組合不同單元; .foot元素總是小於它父元素寬度 50px;

//使用 calc(),計算值是表示式它自己,而非表示式的結果

.foot

// scss 等同於 width: 150px;

//當使用 css 預處理器做數**算時,給定值為表示式的結果。

.foot

1.支援"+", 「-」, 「*」, "/"四則運算,又有區別

//(+、-)要求這兩個數都是長度

.foot

//除法(/)要求第二個數字是無單位的

.foot

//乘法(*)要求其中乙個數是無單位的。

.foot

//加法和減法要加前後空格

//負數是可以的(例如 calc(5vw - -5px) ),但這是乙個例子,說明空格不僅是必需的,而且是有用的

.foot

//calc() 與開頭括號之間沒有空格。

.foot

2.可以巢狀

.foot
3.支援大多數瀏覽器,對於不支援的可以寫後補;

.foo
使用例子:

1.元素垂直居中(已知元素尺寸)

// foot的元素寬高均為300px

.foot

//calc()寫法

.foot

2.建立根柵格尺寸( 1rem 寬度的元素總是視口元素寬度的 1/30)

html
3.清晰可讀

//更加清晰可讀

.foot

.foot

4.css自定義屬性和calc()

html 

.module[data-spacing="xl"]

...

...

...

div

5.漸變色

.foot
其他

XML 語法規則

xml的語法規則非常簡單,同時也是非常嚴格的 它易於學習,易於使用。因此,開發能夠識別和處理xml的軟體也是非常容易的。xml文件使用自述式語法,並且,語法規則非常簡單。tove jani reminder don t forget me this weekend 文件的第一行 xml宣告 定義xm...

C 語法規則

c 中的布林型別 布林型別只占用乙個bit 但是如果連續定義多個布林型別時,編譯器可能會多個布林型別定義在一起。true 編譯器用1來表示。false 編譯器用0來表示。將乙個其他型別的資料賦給布林型別變數 c 編譯器會將所有的非0的值轉換為true 1 將0 轉化為false 0 三木運算子?將乙...

Markdown語法規則

這裡可以看到官方的 markdown 語法規則文件,當然,後文我也會用自己的方式,闡述這些語法在實際使用中的用法。mac 平台 windows ios web 平台 標題是每篇文章都需要也是最常用的格式,在 markdown 中,如果一段文字被定義為標題,只要在這段文字前加 號即可。一級標題 二級標...