# 屬性 - 定位 ``` <pre class="calibre14">``` position：static <span class="token">|</span> relative相對定位 <span class="token">|</span> absolute絕對定位 <span class="token">|</span> fixed z<span class="token">-</span>index<span class="token2">:</span><span class="token3">1</span><span class="token2">;</span> top<span class="token2">:</span><span class="token3">50</span><span class="token">%</span><span class="token2">;</span> left<span class="token2">:</span><span class="token3">50</span><span class="token">%</span><span class="token2">;</span> ``` ``` - 布局 ``` <pre class="calibre14">``` display：none隱藏 <span class="token">|</span> inline內聯 <span class="token">|</span> block塊元素 <span class="token">|</span> inline<span class="token">-</span>block內聯塊 float：none <span class="token">|</span> left <span class="token">|</span> right 不浮動左浮動 右浮動 clear： left <span class="token">|</span> right <span class="token">|</span> both 清理浮動 visibility：visible <span class="token">|</span> hidden可見<span class="token">/</span>隱藏 overflow<span class="token">|</span>overflow<span class="token">-</span>x<span class="token">|</span>overflow<span class="token">-</span>y<span class="token2">:</span> hidden <span class="token">|</span> scroll 超出部分隱藏<span class="token">/</span>滾動 margin<span class="token2">:</span>上 右下左 外補白 padding<span class="token2">:</span>上右下左 內補白 ``` ``` - 邊框 ``` <pre class="calibre14">``` border<span class="token2">:</span><span class="token3">5</span>px solid #<span class="token3">000</span><span class="token2">;</span> dashed虛線 dotted點線 border<span class="token">-</span>radius<span class="token2">:</span><span class="token3">1</span>px 圓角 border<span class="token">-</span>style<span class="token2">:</span>none 隱藏邊框 ``` ``` - 背景 ``` <pre class="calibre14">``` background<span class="token">-</span>color <span class="token2">:</span>#<span class="token3">000</span><span class="token2">;</span> 默認transparent透明 background<span class="token">-</span>image <span class="token2">:</span><span class="token1">url</span><span class="token2">(</span><span class="token2">)</span> 默認none background<span class="token">-</span>repeat <span class="token2">:</span> repeat<span class="token">-</span>x： 背景圖像在橫向上平鋪 repeat<span class="token">-</span>y： 背景圖像在縱向上平鋪 repeat： 背景圖像在橫向和縱向平鋪 no<span class="token">-</span>repeat： 背景圖像不平鋪 background<span class="token">-</span>attachment<span class="token2">:</span> fixed： 背景圖像相對于窗體固定。 scroll： 背景圖像相對于元素固定 background<span class="token">-</span>position：<span class="token3">0</span><span class="token">%</span> <span class="token3">0</span><span class="token">%</span> 指定對象的背景圖像位置。 background<span class="token">-</span>origin： 指定對象的背景圖像顯示的原點。 background<span class="token">-</span>clip： 指定對象的背景圖像向外裁剪的區域。 background<span class="token">-</span>size<span class="token2">:</span> auto： 背景圖像的真實大小。 cover： 將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。 contain： 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。 ``` ``` - 字體 ``` <pre class="calibre14">``` color<span class="token2">:</span><span class="token1">rgba</span><span class="token2">(</span><span class="token3">0</span><span class="token2">,</span><span class="token3">0</span><span class="token2">,</span><span class="token3">0</span><span class="token2">,</span><span class="token3">.5</span><span class="token2">)</span><span class="token2">;</span><span class="token2">}</span> opacity<span class="token2">:</span><span class="token3">.5</span><span class="token2">;</span> <span class="token3">1</span>不透明 <span class="token3">0</span>透明 font<span class="token">-</span>style：normal <span class="token">|</span> italic 正常<span class="token">/</span>斜體 font<span class="token">-</span>weight：normal <span class="token">|</span> bold正常<span class="token">/</span>粗體 <span class="token3">700</span>粗體 font<span class="token">-</span>size：<span class="token3">16</span>px font<span class="token">-</span>family<span class="token2">:</span>helvetica<span class="token2">,</span>verdana<span class="token2">,</span>sans<span class="token">-</span>serif<span class="token2">;</span> text<span class="token">-</span>transform：none <span class="token">|</span> capitalize <span class="token">|</span> uppercase <span class="token">|</span> lowercase 不轉換<span class="token">/</span>首字母<span class="token">/</span>大寫<span class="token">/</span>小寫 text<span class="token">-</span>align<span class="token2">:</span>left <span class="token">|</span> right <span class="token">|</span> center text<span class="token">-</span>indent<span class="token2">:</span><span class="token3">20</span>px 縮進 line<span class="token">-</span>height<span class="token2">:</span><span class="token3">22</span>px 行高<span class="token">=</span>高居中 vertical<span class="token">-</span>align：baseline <span class="token">|</span> sub下標 <span class="token">|</span> super上標 <span class="token">|</span> top <span class="token">|</span> middle ``` ``` - 列表 ``` <pre class="calibre14">``` list<span class="token">-</span>style<span class="token">-</span>image<span class="token2">:</span><span class="token1">url</span><span class="token2">(</span><span class="token2">)</span> list<span class="token">-</span>style<span class="token">-</span>type：disc 實心圓<span class="token">|</span> circle 空心圓<span class="token">|</span> square實心方塊 <span class="token">|</span> decimal 數字 none不顯示<span class="token">|</span>lower<span class="token">-</span>alpha小寫 <span class="token">|</span> upper<span class="token">-</span>alpha大寫 list<span class="token">-</span>style<span class="token">-</span>position：outside <span class="token">|</span> inside 文本外<span class="token">/</span>文本內 ``` ``` - 其他 ``` <pre class="calibre16">``` border<span class="token">-</span>collapse：separate <span class="token">|</span> collapse邊框獨立<span class="token">/</span>合并 outline<span class="token">-</span>style：none 無輪廓 cursor<span class="token2">:</span>pointer<span class="token2">;</span>鼠標 ``` ```