enment外掛 和display屬性 和一些CSS屬性
一、
Emment是直接在編輯器上輸入HTML和CSS程式碼的縮寫，然後按下tab鍵
1. div*3 新建三個div標籤
<div></div>
<div></div>
<div></div>
2. div#content 新建一個div並且其id為content
<div id="content"></div>
3.ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
4.ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
5. .header
<div class="header"> </div>
6. p[title="Hello world"]
<p title="Hello world"> </p>
7.a:link
<a href="http://"></a>
8.link:css
<link rel="stylesheet" href="style.css" />
9. form
<form action=""></form>
10.input:psaaword
<input type="password" name="" id="">```
11.inout:s
<input type="submit" value="">
12.btn:b
<button type="button"></button>
13. border```
border-top: 1px solid #000;```
14. bd+
bdt+
15.m: a
mt:a
16. c
c:r
17.color: rgb(0, 0, 0);```
color: rgba(0, 0, 0,.5);```
18. c:ra
bgc
19. background-conlor:'''
font-style:'''
20. fs
table+
二、Display屬性
| none | 此元素不會被顯示。 |
| block | 此元素將顯示為塊級元素，此元素前後會帶有換行符。 |
| inline | 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。 |
| inline-block | 行內塊元素。（CSS2.1 新增的值） |
| list-item | 此元素會作為列表顯示。 |
| run-in | 此元素會根據上下文作為塊級元素或內聯元素顯示。 |
| compact | CSS 中有值 compact，不過由於缺乏廣泛支援，已經從 CSS2.1 中刪除。 |
| marker | CSS 中有值 marker，不過由於缺乏廣泛支援，已經從 CSS2.1 中刪除。 |
| table | 此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。 |
| inline-table | 此元素會作為內聯表格來顯示（類似 <table>），表格前後沒有換行符。 |
| table-row-group | 此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。 |
| table-header-group | 此元素會作為一個或多個行的分組來顯示（類似 <thead>）。 |
| table-footer-group | 此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。 |
| table-row | 此元素會作為一個表格行顯示（類似 <tr>）。 |
| table-column-group | 此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。 |
| table-column | 此元素會作為一個單元格列顯示（類似 <col>） |
| table-cell | 此元素會作為一個表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會作為一個表格標題顯示（類似 <caption>） |
| inherit | 規定應該從父元素繼承 display 屬性的值。 |
三、CSS裡面的屬性 樣式
border-color： 設定邊框顏色
position: absolute 絕對定位
position：relative 相對定位
border-bottom: 1px dotted #CCCCCC：下劃線 dotted 虛線
font-weight: bolder：定義字型粗細的屬性
bold 定義粗體字元。bolder定義更粗的字元 normal字型的粗細： 中等
text-align:center; 設定居中
:first-child: 偽類向元素的第一個子元素新增樣式。
marign: 設定top bottom
font-size:設定字型大小
font-weight:屬性設定文字的粗細
text-indent: 2em:/*text-indent 屬性規定文字塊中首行文字的縮排*/
line-height: 2em:/* line-height 屬性設定行間的距離(行高)*/
display: inline-block: /*相當於浮動 塊級元素能夠在同一行顯示*/
background-image:url() :設定背景圖片 記得新增高度(不然不顯示圖片）
background-repeat:no-repeat;屬性設定是否重複背景影象 不重複
background-position：定位背景影象
hover: 選擇器用於選擇滑鼠指標浮動在上面的元素
display:block:讓物件成為塊級元素(塊級元素可以顯示，行元素不能顯示）
text-decoration:none：消除文字下劃線
border-radius:10px; 邊框弧度
padding：設定寬高