盒子模型

字型樣式

font-family: "微軟雅黑","宋體",sans-serif;
            /*絕對單位|相對單位 通常使用相對單位px受顯示器解析度影響 em相對父元素的多少倍 180%和1.8em*/
            font-size: 20px;
            text-indent: 2em;/*行距*/
            line-height: 30px;/*行高 可以使用em 百分比 這和文字大小有關*/
            word-spacing: 2px;/*單詞間距*/
            letter-spacing: 2px;/*字母間距*/
            text-transform: none;/*首字母大小寫*/
            text-decoration: underline;/*文字的樣式裝飾 underline下劃線 overline上劃線 line—through 中劃線（刪除線）*/
            color:red;
            /*#080 ==#008800*/
            font-weight: bold;/*文字粗細 加粗*/
            font-style: italic;/*斜體*/
            font-variant: small-caps;/*小型大寫字母*/
            text-align: center;/*文字對齊方式 只對塊級元素div p等有效，span ，img等無效  justify實現兩端對齊文字效果*/

 

背景

			width: 100px;
            height: 100px;
            background-color: #FF2F2F;/*背景顏色 transparent 透明色*/
            background-image: url("");/*背景圖片*/
            background-position: 20px,20px;/*背景起始位置*/
            background-attachment: scroll;/*背景影象是否固定或者隨著頁面的其餘部分滾動*/
            background-repeat: no-repeat;/*設定背景影象是否重複及如何重複*/
            background: #50074d;/*簡寫屬性，作為是將背景屬性設定在一個宣告中*/
            padding: 2px;/*n內邊距*/
            margin: 2px;/*外邊距*/
            border: 20px solid blue;/*邊框*/
 

行內元素、塊級元素

列表樣式

			list-style-type: square;/*列表項的標記樣式*/
            list-style-image: url("");/*圖片列表項的標記樣式 */
            list-style-position: inside;/*多行時候圖示使用是否佔用文字位置*/

繼承關係

居中設定

• 行內樣式居中

.jv{
            vertical-align: middle;
            text-align: center;

        }

• 塊級中元素樣式居中 display兩個元素都設定 然後vertical-align: middle;垂直居中才生效

 div{
            height: 200px;
            width: 100%;
            border:1px #FF2F2F solid;
            display: table;
        }
        div h2{
            vertical-align: middle;
            display: table-cell;
            text-align: center;
        }

<div>
    <h2>居中</h2>
</div>