16/09/21


盒模型相關(guān)的 CSS


border
    border-width
    border-style
    border-color

border-top
    border-top-width
    border-top-style
    border-top-color

border-right
    border-right-width
    border-right-style
    border-right-color

border-bottom
    border-bottom-width
    border-bottom-style
    border-bottom-color

border-left
    border-left-width
    border-left-style
    border-left-color



margin
    margin-top
    margin-right
    margin-bottom
    margin-left

padding
    padding-top
    padding-right
    padding-bottom
    padding-left

三種縮寫, 分別對應(yīng)有 4 2 3 個值的時候的解釋, padding 同理
margin: top  right  bottom  left
margin: (top/bottom)  (right/left)
margin: top  (right/left)  bottom

border-radius 左上角為 top, 右下角為 bottom






background 相關(guān)屬性和縮寫


background-color: #233;
background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed; /* 背景圖片隨滾動軸的移動方式 */
background-position: top right; /* 這個屬性的取值非常掏糞但是用得很少, 只在特殊的情況下有用 */

background: #233 url(bg.png) no-repeat top right;





list 屬性和縮寫


list-style-type: circle;
list-style-position: inside;
list-style-image: url(list.png);

list-style: circle inside url(list.png);





font 設(shè)置


font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 20px;
line-height: 1.5em;
font-family: Arial, sans-serif;


font:italic small-caps bold 20px/1.5em Arial, sans-serif;




顯示相關(guān)的屬性

visibility: visible;
            hidden;     /* 不影響子元素 */

overflow: visible;
          hidden;
          scroll;
          auto;




display: block | inline | inline-block
position: static | relative | absolute | fixed | sticky
當(dāng) position 不為 static 的時候, 元素就是 positioned element
此時會開啟下面 5 個秘密屬性
    top
    right
    bottom
    left
    z-index

特殊屬性
float
clear

非 inline 元素可以設(shè)置盒子尺寸
width
height
min-width
min-height
max-width
max-height




雜七雜八的垃圾

/* 可以疊加效果 */
text-decoration: underline overline line-through blink(這個值已經(jīng)廢棄了);

text-align: left | right | center | justify
vertical-align 偶爾有用
text-transform: none | capitalize | uppercase | lowercase
text-indent: 100px;

純垃圾屬性
unicode-bidi
direction






查文檔
搜索 mdn 屬性值