css常用簡寫總結

2021-07-16 14:38:13 字數 3695 閱讀 5796

css的簡寫使**精簡，而且書寫方便，常用的屬性包括以下：

示例：

border-width


:1px;


border-style


:solid;


border-color:#f00;
簡寫為：

border


:1px solid #f00;
說明：border還可以單獨設定top,right,bottom,left每條邊的屬性

示例：

margin-top


:1px;


margin-right


:2px;


margin-bottom


:3px;


margin-left


:4px;
簡寫：

margin


:1px 2px 3px 4px;
說明：設定外邊距使按照上、右、下、左的順序依次設定

用法與margin一樣，參照margin

語法：none | [ <』flex-grow』> <』flex-shrink』>? || <』flex-basis』> ]

flex-grow：拉伸因子

flex-shrink：收縮因子

flex-basis：指定flex item在主軸方向上的初始大小

示例：

flex-grow


:1;flex-shrink


:0;flex-basic:auto;
簡寫：

flex


:10 auto;
說明：還有下面這種簡寫

flex


:none等價於flex


:0 0 auto


flex


:auto等價於flex


:1 1 auto


flex


:1 等價於 flex


:1 1 auto
語法：<』flex-direction』> || <』flex-wrap』>

簡寫：

flex-flow


:row nowrap;


flex-flow


:column nowrap;
簡寫：

border-radius


:5px;
語法： <』bg-image』> || <』position』> [ / <』bg-size』> ]? || <』repeat-style』> || <』attachment』> || <』bg-clip』> ||<』bg-origin』>||<』background-color』>

說明：

1. background-size需寫在background-position後面且用「/」分開

2. background-clip預設為padding-box

3. background-origin預設為padding-box

4. css sprite就是利用background-position改變背景的位置

簡寫：background:url(./image/1.jpg) no-repeat center/cover

語法：<』list-style-type』> || <』list-style-position』> || <』list-style-image』>

示例：

:outside

簡寫：list-style：didc outside url(1.jpg)

常用 list-style：none去掉 li 預設的原點

語法：[ <『font-style』> || <』font-variant』> || <『font-weight』> <『font-size』> [ / <『line-height』> ]? <『font-family』> ]

說明：

1. font-size和font-family同時設定

2. line-height設定時寫在font-size後，且要加『/』分隔

3. 屬性值的順序並非完全自由：如需設定 font-style, font-variant 和 font-weight 中任意乙個或幾個的值，它們必須要放在 font-size 值的前面

4. font-family 是必不可少的，且必須放在最後

5. 字型可設定多個，字型族名可以包含空格，但包含空格時應該用引號

簡寫：font：14px/28px helvetica

語法：<』transition-property』><』transition-duration』><』transition-timing-functio』><』 transition-delay』>

初始值：

transition-duration:0;

transition-timing-function:ease;

transition-delay:0;

語法： <』single-animation-name』> || <』time』> || <』timing-function』> || <』time』> || <』single-animation-iteration-count』> || <』single-animation-direction』> || <』single-animation-fill-mode』> || <』single-animation-play-state』>

預設值：

animation-name: none

animation-duration: 0s

animation-timing-function: ease

animation-delay: 0s

animation-iteration-count: 1

animation-direction: normal

animation-fill-mode: none

animation-play-state: running

說明：

animation-iteration-count：定義動畫在結束前執行的次數 可以是1次 無限迴圈

值:<』animation-iteration-count』>=infinite | <』number』>

animation-fill-mode 這個 css 屬性用來指定在動畫執行之前和之後如何給動畫的目標應用樣式，

值：<』animation-fill-mode』> = none | forwards | backwards | both

css 常用簡寫記法

1.字型 font 700 normal 12px 1.5 arial weight style size line height font family 2.padding margin padding 10px 四邊 padding 20px 10px 上下 左右 padding 10px 20...

總結的CSS簡寫表

總結的css簡寫表 css中有許多簡寫方式，可能平時大家注意不到。簡寫可以有效的減少css 量，提高網頁載入速度和節約伺服器流量。我想，對於這些簡寫方式，還是很有必要總結一下 分類1 margin padding div 可以簡寫成 div div 可以簡寫成 div div 可以簡寫成 div d...

css中的簡寫

這是第三遍翻看 css那些事兒 了，這本書也是我學習前端的第一本書。這次摘錄了一些關於css的簡單又容易忘記的知識點，以便查閱。希望慢慢可以寫積累更多好的博文。1.顏色 css中有四種顏色表現方式 我最常用的是前三種 ppp p 2.邊框的簡寫 div 簡寫成 div 類似於padding和marg...