文字屬性 以及背景圖設定 相對 絕對定位 042
文字屬性 :
文字對齊 text-align 有 none | center | left | right | justify
文字顏色 color 首行縮排 建議使用 em 即相對內容的大小 2em 即首行縮排2個文字內容字元
文字修飾 text- decoration none(預設) | underline(下劃線) | overline(定義文字上的一條線) | line-through (定義穿過文字下的一條線) | inherit(繼承父元素的text-decoration屬性的值。)
行高 line-height
針對單行文字垂直居中
公式：行高的高度等於盒子的高度，可以使當行文字垂直居中，注意只適用單行文字。
針對多行文字垂直居中
行高的高度不能小於字型的大小，不然上下字之間會緊挨一起。
第一步，一個寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那麼就知道行高*5=150px
第二步，讓(盒子的高度-150px)/2=75;那麼設定盒子的padding-top:75px;同時保證盒子的高度為300px,那麼高度改為225px;
字型大小 font-size 粗細 font-weight 字體系列 font-family
background 背景 有 背景色 背景圖片 是否平鋪
| repeat | 預設。背景影象將在垂直方向和水平方向重複。 |
| repeat-x | 背景影象將在水平方向重複。 |
| repeat-y | 背景影象將在垂直方向重複。 |
| no-repeat | 背景影象將僅顯示一次。 |
| inherit | 規定應該從父元素繼承 background-repeat 屬性的設定。 |
雪碧圖技術(精靈圖技術):
CSS雪碧 即
CSS 雪碧圖應用原理：
只有一張大的合併圖， 每個小圖示節點如何顯示單獨的小圖示呢？
其實就是 擷取 大圖一部分顯示，而這部分就是一個小圖示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bojie{ width: 28px; height: 30px; background-color: black; border: 1px solid red; /*預設是橫向平鋪 縱向平鋪*/ background-image: url("https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png"); background-repeat: no-repeat; /*如果想調整圖片在盒子中的距離*/ /*background-position: 50px 100px;*/ background-position: 0 -50px; } </style> </head> <body> <div class="bojie"></div> </body> </html>View Code
使用雪碧圖的好處：
1、利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的效能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
2、CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。
3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。
4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便
不足：
1）CSS雪碧的最大問題是記憶體使用
2）拼圖維護比較麻煩
3）使CSS的編寫變得困難
4）CSS 雪碧呼叫的圖片不能被列印
我們可以使用background綜合屬性製作通天banner，什麼是通天banner呢，就是一般我們電腦的螢幕都是1439.但是設計師給我們的banner圖都會比這個大，
那麼我們可以此屬性來製作通天banner。
background: red url('./images/banner.jpg') no-repeat center top;
background-attach
設定fixed之後，該屬性固定背景圖片不隨瀏覽器的滾動而滾動
定位 有相對定位 絕對定位 和 固定定位
相對定位:相對於自己原來的位置定位
現象和使用：
1.如果對當前元素僅僅設定了相對定位，那麼與標準流的盒子什麼區別。
2.設定相對定位之後，我們才可以使用四個方向的屬性： top、bottom、left、right
特性：
1.不脫標
2.形影分離
3.老家留坑（佔著茅房不拉屎，噁心人）
所以說相對定位 在頁面中沒有什麼太大的作用。影響我們頁面的佈局。我們不要使用相對定位來做壓蓋效果
用途：
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等於元素寬度的一半，實現絕對定位盒子居中*/
}
View Code
父相子絕參考點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .yeye{ width: 800px; height: 800px; background-color: yellow; position: relative; } .father{ width: 500px; height: 500px; margin: 0 auto; background-color:red; /*position: relative;*/ /*定位 與padding沒有任何關係*/ /*padding: 50px;*/ } .child1{ width: 100px; height: 100px; background-color: green; position: absolute; top: 200px; left: 10px; } .child2{ width: 200px; height: 200px; background: darkmagenta; position: absolute; right: 0; top: 50%; } </style> </head> <body> <div class="yeye"> <div class="father"> <div class="child1"></div> <div class="child2"></div> </div> </div> </body> </html>