1. 定位定位有三種：相對定位、絕對定位、固定定位 1.1 相對定位現象和使用： 1.如果對當前元素僅僅設置了相對定位，那麼與標準流的盒子什麼區別。 2.設置相對定位之後，我們才可以使用四個方向的屬性： top、bottom、left、right。特性：1.不脫標 2.形影分離 3.老家留坑 ...

1. 定位

定位有三種：相對定位、絕對定位、固定定位

1.1 相對定位

現象和使用：

1.如果對當前元素僅僅設置了相對定位，那麼與標準流的盒子什麼區別。

2.設置相對定位之後，我們才可以使用四個方向的屬性： top、bottom、left、right。

特性：1.不脫標 2.形影分離 3.老家留坑

所以說相對定位在頁面中沒有什麼太大的作用。影響我們頁面的佈局。我們不要使用相對定位來做壓蓋效果

用途：

1.微調元素位置

2.做絕對定位的參考（父相子絕）絕對定位會說到此內容。

1.2 絕對定位

特性：1.脫標 2.做遮蓋效果，提成了層級。設置絕對定位之後，不區分行內元素和塊級元素，都能設置寬高。

參考點：

一、單獨一個絕對定位的盒子

1.當我使用top屬性描述的時候是以頁面的左上角（跟瀏覽器的左上角區分）為參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角為參考點來調整位置。

二、以父輩盒子作為參考點

1.父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角為參考點，這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。

2.如果父親設置了定位，那麼以父親為參考點。那麼如果父親沒有設置定位，那麼以父輩元素設置定位的為參考點。

3.不僅僅是父相子絕，父絕子絕，父固子絕,都是以父輩元素為參考點。

註意了：父絕子絕，沒有實戰意義，做站的時候不會出現父絕子絕。因為絕對定位脫離標準流，影響頁面的佈局。相反‘父相子絕’在我們頁面佈局中，是常用的佈局方案。因為父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。

還要註意，絕對定位的盒子無視父輩的padding。

作用：頁面佈局常見的“父相子絕”，一定要會！

絕對定位中的居中：

　　 padding: 0;

　　 margin: 0;

}

.box{

　　 width: 100%;

　　 height: 69px;

　　 background: #000;

}

.box .c{

　　width: 960px;

　　 height: 69px;

　　 background-color: pink;

　　 /*margin: 0 auto;*/

　　 position: relative;

　　 left: 50%;

　　 margin-left: -480px;

　　 /*設置絕對定位之後，margin:0 auto;不起任何作用，如果想讓絕對定位的盒子居中。當做公式記下來設置子元素絕對定位，然後left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/

}

1.3 固定定位

固定當前的元素不會隨著頁面滾動而滾動

特性: 1.脫標 2.遮蓋，提升層級 3.固定不變

參考點：

設置固定定位，用top描述。那麼是以瀏覽器的左上角為參考點
如果用bottom描述，那麼是以瀏覽器的左下角為參考點

作用： 1.返回頂部欄 2.固定導航欄 3.小廣告

2. 文本屬性和字體屬性

2.1 文本屬性

屬性	描述	屬性值	說明
text-align	文本對齊方式	none center left right justify
color	文本顏色
text-indent	首行縮進，單位建議em
text-decoration	規定文本修飾的樣式	none underline overline line-through inherit	預設下劃線定義文本上的一條線定義穿過文本下的一條線繼承父元素text-decoration屬性的值
line-height	行高		針對單行文本垂直居中公式：行高=盒子高度，使文本垂直居中，只適用單行文本。針對多行文本垂直居中行高不能小於字體，不然字會緊挨一起。
text-shadow	陰影	5px 5px 5px #FF0000	水平方向偏移量垂直方向偏移量模糊度陰影顏色
text-overflow	文字溢出	clip ellipsis	修剪文本顯示省略號代表被修剪文本
white-space	處理元素內的空白	normal pre nowrap pre-wrap pre-line inherit	預設。空白被瀏覽器忽略。空白會被瀏覽器保留文本不換行，直到遇到 <br> 保留空白符序列，但正常地進行換行合併空白符序列，但是保留換行符繼承父元素 white-space 屬性的值

文字溢出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow</title>
    <style type="text/css">
        .div0 {
            width: 300px;
            border: 1px solid darkblue;
        }
        .div1 {
            width: 300px;
            border: 1px solid red;
 
            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
        }
        .div2 {
            width: 300px;
            border: 1px solid black;
 
            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
            /*修剪超出的文本*/
            text-overflow: clip;
        }
        .div3 {
            width: 300px;
            border: 1px solid chocolate;
 
            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
            /*顯示省略符號來代表被修剪的文本*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="div0">各國領導人感謝中方作為東道主對各國參展給予的大力支持</div><br>
<div class="div1">各國領導人感謝中方作為東道主對各國參展給予的大力支持</div><br>
<div class="div2">各國領導人感謝中方作為東道主對各國參展給予的大力支持</div><br>
<div class="div3">各國領導人感謝中方作為東道主對各國參展給予的大力支持</div><br>
</body>
</html>

2.2 字體屬性

屬性	描述	屬性值	說明
font-size	字體大小
font-weight	字體粗細	none bold border lighter 100~900 inherit	預設值，標準粗細粗體更粗更細值，400=normal，700=bold 繼承父元素字體的粗細值
font-family	字體系列	"Microsoft Yahei","微軟雅黑", "Arial", sans-serif	瀏覽器使用它可識別的第一個值

使用font-family註意幾點：

1.網頁中不是所有字體都能用哦，因為這個字體要看用戶的電腦裡面裝沒裝，
比如你設置： font-family: "華文彩雲"; 如果用戶電腦裡面沒有這個字體，
那麼就會變成宋體
頁面中，中文我們只使用： 微軟雅黑、宋體、黑體。 
如果頁面中，需要其他的字體，那麼需要切圖。 英語：Arial 、 Times New Roman

2.為了防止用戶電腦裡面，沒有微軟雅黑這個字體。
就要用英語的逗號，隔開備選字體，就是說如果用戶電腦裡面，
沒有安裝微軟雅黑字體，那麼就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體可以有無數個，用逗號隔開。
3.我們要將英語字體，放在最前面，這樣所有的中文，就不能匹配英語字體，
就自動的變為後面的中文字體： 
font-family: "Times New Roman","微軟雅黑","宋體";

4.所有的中文字體，都有英語別名，
我們也要知道： 微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性能夠將font-size、line-height、font-family合三為一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比，表示字型大小的百分之多少。
一般來說，都是大於100%的，因為行高一定要大於字型大小。 
font:12px/200% “宋體” 等價於 font:12px/24px “宋體”; 
反過來，比如： font:16px/48px “宋體”;
等價於 font:16px/300% “宋體”

3. background

給元素設置padding之後，發現padding的區域背景和content部分的一致。

3.1 background-color —— 背景顏色

設置背景色：

css: 
   <style>
       .demo{
           width: 50px;
           height: 100px;
           background-color: greenyellow;
       }
    </style>
html:
<body>
<div class="demo"></div>
</body>

3.2 background-image —— 背景圖片

設置背景圖片：

css:
     <style>
       .demo{
           width: 2000px;
           height: 1500px;
           background-image: url('img/1.jpg');
       }
    </style>
html:
    <body>
    <div class="demo"></div>
    </body>

那麼發現預設的背景圖片，水平方向和垂直方向都平鋪。

背景圖片相關配置：

background-repeat：設置背景圖像的平鋪方式

repeat

repeat-x

repeat-y

no-repeate

inherit

預設。背景圖像將在垂直方向和水平方向重覆

背景圖像將在水平方向重覆

背景圖像將在垂直方向重覆

背景圖像將僅顯示一次

規定應該從父元素繼承 background-repeat 屬性的設置

background-position：設置背景圖像的起始位置

垂直位置水平位置

可以從兩個緯度上設定關鍵詞：上中下左中右

垂直位置：top center bottom

水平位置：left center right

如僅規定了一個關鍵詞，那麼第二個值將是"center"。

預設值：0 0；

這兩個值必須挨在一起。

background-attachment：設置固定的背景圖像

scroll

fixed