1 行高和字號(hào)

1.1 行高

• CSS中，所有的行，都有行高。盒模型的padding，絕對(duì)不是直接作用在文字上的，而是作用在“行”上。

  line-height: 40px;

  

  盱眙網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司于2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
  

• 文字，是在自己的行里面居中的。比如說，現(xiàn)在的文字字號(hào)為14px，行高為24px。那么：
  
• 為了嚴(yán)格保證字在行里面居中，我們的工程師都有個(gè)約定：行高、字號(hào)，一般都是偶數(shù)。這樣，它們的差，就是偶數(shù)，就能夠被2整除。

  1.2 單行文本垂直居中

• 文本在行里面居中，公式為：

  行高:盒子高;

  

• 需要注意的是，這個(gè)小技巧，行高=盒子高。只適用于單行文本垂直居中，不適用于多行。如果想讓多行文本垂直居中，需要設(shè)置盒子的padding值。
  

  1.3 font屬性

• 使用font屬性，能夠?qū)⒆痔?hào)、行高、字體一起設(shè)置。

  font: 14px/24px “宋體”;

• 等價(jià)于三行語句：

  font-size:14px;
  line-height:24px;
  font-family:"宋體";

• font-family就是“字體”的意思。
• 網(wǎng)頁中不是所有字體都能用，因?yàn)檫@個(gè)字體要看用戶的電腦里面裝沒裝。比如說你設(shè)置為：

  font-family: "華文彩云";

• 如果用戶電腦中沒有這個(gè)字體，那么就會(huì)變成宋體。頁面中，中文我們只使用： 微軟雅黑、宋體、黑體。
• 為了防止用戶電腦里面，沒有微軟雅黑這個(gè)字體。就要用英文的逗號(hào)，隔開備選字體，就是說如果用于電腦里面，沒有安裝微軟雅黑字體，那么就是宋體：

  font-family: "微軟雅黑","宋體";

• 備選字體可以有無數(shù)個(gè)，用逗號(hào)隔開。
• 我們要將英文字體，放在最前面，這樣所有的中文，就不能夠匹配英文字體，就自動(dòng)的變?yōu)楹竺娴闹形淖煮w：

  font-family: "Times New Roman","微軟雅黑","宋體";

• 所有的中文字體，都有英文別名，我們也要知道：
• 微軟雅黑的英文別名為：font-family: "Microsoft YaHei"; ；宋體的英文別名為：font-family: "SimSun";。
• font屬性能夠?qū)ont-size、line-height、font-family合三為一：

  font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";

• 行高可以用百分比，表示字號(hào)的百分之多少。一般來說，都是大于100%的，因?yàn)樾懈咭欢ㄒ笥谧痔?hào)。

  font:12px/200% “宋體”

• 等價(jià)于：

  font:12px/24px “宋體”;

  2 超級(jí)鏈接的美化

  2.1 偽類

• 也就是說，同一個(gè)標(biāo)簽，根據(jù)用戶的某種狀態(tài)不同，有不同的樣式，這就叫做“偽類”。
• 類就是工程師加的，比如div屬于box類，但是a屬于什么類呢？不明確，因?yàn)橐从脩粲袥]有點(diǎn)擊、有沒有觸碰，所以就叫做“偽類”。
• 偽類用冒號(hào)來表示，分為4種：

      a:link{
          color:red;
      }
      a:visited{
          color:orange;
      }
      a:hover{
          color:green;
      }
      a:active{
          color:black;
      }

  1、link表示，用戶沒有點(diǎn)擊過這個(gè)鏈接的樣式，是英文中“鏈接”的意思。
  2、:visited表示，用戶訪問過這個(gè)鏈接的樣式，是英文“訪問過的”意思。
  3、:hover表示，用戶鼠標(biāo)懸停的時(shí)候鏈接的樣式，是英文“懸?！钡囊馑肌?br/>4、:active表示，用戶用鼠標(biāo)點(diǎn)擊這個(gè)鏈接，但是不松手，此刻的樣式，是英文“激活”的意思。

• 需要記住，這四種狀態(tài)，在css中，必須按照固定的順序：a:link 、a:visited 、a:hover 、a:active。如果不按照順序，那么將失效?！皭酆逌?zhǔn)則”love hate，必須先愛后恨。

  2.2 超級(jí)鏈接的美化

• a標(biāo)簽在使用的時(shí)候，非常的難。因?yàn)椴粌H僅要控制a這個(gè)盒子，也要控制它的偽類。
• 我們一定要將a標(biāo)簽寫在前面，:link、:visited、:hover、:active這些偽類寫在后面。
• a標(biāo)簽中，描述盒子，偽類中描述文字的樣式、背景。

      .nav ul li a{
          display: block;
          width: 120px;
          height: 40px;
      }
      .nav ul li a:link ,.nav ul li a:visited{
          text-decoration: none;
          background-color: yellowgreen;
          color:white;
      }
      .nav ul li a:hover{
          background-color: purple;
          font-weight: bold;
          color:yellow;
      }

• 需要記住，所有的a都不繼承text、font這些東西，因?yàn)閍自己有一個(gè)偽類的權(quán)重。
• 最標(biāo)準(zhǔn)的，就是把link、visited、hover都要寫。但是前端開發(fā)工程師在大量的實(shí)線中，發(fā)現(xiàn)不寫link、visited瀏覽器也挺兼容，所以把a(bǔ)標(biāo)簽簡(jiǎn)化了。
• a:link、a:visited都是可以省略的，簡(jiǎn)寫在a標(biāo)簽里面。也就是說，a標(biāo)簽蘊(yùn)含了link、visited的狀態(tài)。

  .nav ul li a{
          display: block;
          width: 120px;
          height: 50px;
          text-decoration: none;
          background-color: purple;
          color:white;
      }
      .nav ul li a:hover{
          background-color: orange;
      }

  3 background系列屬性

  3.1 background-color屬性

• 背景顏色屬性。CSS2.1中，顏色的表示方法有哪些？一共有三種：?jiǎn)卧~、rgb表示法、十六進(jìn)制表示法。

  3.1.1 用英文單詞來表示

• 能夠用英文單詞來表述的顏色，都是簡(jiǎn)單顏色。
• 紅色：background-color: red; 。

  3.1.2 用rgb方法來表示

• 紅色：background-color: rgb(255,0,0);。rgb表示三原色“紅”red、“綠”green、“藍(lán)”blue。光學(xué)顯示器，每個(gè)像素都是由三原色的發(fā)光原件組成的?？棵髁炼炔煌梢哉{(diào)成不同的顏色。
• 用逗號(hào)隔開，r、g、b的值，每個(gè)值的取值范圍0~255，一共256個(gè)值。
• 如果此項(xiàng)的值background-color: rgb(0,255,0); ；藍(lán)色：，是255，那么就說明是純色。
• 綠色：background-color: rgb(0,255,0); ；藍(lán)色：background-color: rgb(0,0,255);；黑色：background-color: rgb(0,0,0);；白色：background-color: rgb(255,255,255);。
• 顏色可以疊加，比如×××就是紅色和綠色的疊加：background-color: rgb(255,255,0);

  3.1.3 十六機(jī)制表示法

• 紅色：background-color: #ff0000;。所有用#開頭的值，都是16進(jìn)制的。
• 16進(jìn)制表示法，也就是兩位兩位看，看r、g、b，但是沒有逗號(hào)隔開。
• ff就是10進(jìn)制的255，00就是10進(jìn)制的0，所以等價(jià)于rgb(255,0,0)。

  3.2 background-image

• 用于給盒子加上背景圖片：background-image:url(images/wuyifan.jpg);。
• url()表示網(wǎng)址，uniform resouces locator 統(tǒng)一資源定位符。images/wuyifan.jpg 就是相對(duì)路徑。
  
• 背景天生就是被平鋪滿的。

  3.3 background-repeat屬性

• 設(shè)置背景圖片是否重復(fù)，重復(fù)方式為：repeat表示“重復(fù)”。
• repeat表示“重復(fù)”的意思。
  
• 也就是說，background-repeat屬性，有三種值：

  background-repeat:no-repeat;   不重復(fù)
  background-repeat:repeat-x;    橫向重復(fù)
  background-repeat:repeat-y;    縱向重復(fù)

  3.4 background-position屬性

  3.4.1 屬性的意思

• position就是“位置”的意思，background-position就是背景定位屬性。

  background-position:向右移動(dòng)量 向下移動(dòng)量;

  

• 定位屬性可以是負(fù)數(shù)：
  

  3.4.2 CSS精靈

• “CSS精靈”，英文css sprite，所以也叫作“css雪碧”技術(shù)。是一種CSS圖像合并技術(shù)，該方法時(shí)將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位技術(shù)來顯示需要顯示的圖片部分。
• CSS精靈有什么優(yōu)點(diǎn)，就是減少了http請(qǐng)求。比如說4張小圖片，原來需要4個(gè)http請(qǐng)求，但是用了css精靈后，4張小圖片變成了一張圖，http請(qǐng)求只有1個(gè)。
• 如淘寶網(wǎng)中的精靈兔：
  

  3.4.3 使用單詞描述屬性

• background-position描述左右的詞為left、 center、right；描述上下的詞為：top 、center、bottom。

  background-position: right bottom;

  

  3.5 background-attachment

• 背景是否固定。

  background-attachment:fixed;

• 背景會(huì)被固定住，不會(huì)被滾動(dòng)條滾走。

  3.6 background綜合屬性

• background屬性和border一樣，是一個(gè)綜合屬性：

  background:red url(1.jpg) no-repeat 100px 100px fixed;

• 等價(jià)于：

  1background-color:red;
  2background-image:url(1.jpg);
  3background-repeat:no-repeat;
  4background-position:100px 100px;
  background-attachment:fixed;

• 可以任意省略部分：

  background: red;

  4 相對(duì)定位

• 定位有三種，分別為相對(duì)定位、絕對(duì)定位、固定定位。
• 相對(duì)定位為：position:relative;
• 絕對(duì)定位為：position:absolute;
• 固定定位為：position:fixed;

  4.1 認(rèn)識(shí)相對(duì)定位

• 相對(duì)定位，就是微調(diào)元素位置的。讓元素相對(duì)自己原來的位置，進(jìn)行位置調(diào)整。
  
• 也就是說，如果一個(gè)盒子想要進(jìn)行位置調(diào)整，那么就要使用相對(duì)定位。

  position:relative;   → 必須先聲明，自己要相對(duì)定位了，
  left:100px;       → 然后進(jìn)行調(diào)整。
  top:150px;       → 然后進(jìn)行調(diào)整。

  4.2 不脫標(biāo)，老家留坑，形影分離

• 相對(duì)定位不脫離標(biāo)準(zhǔn)流，其真實(shí)的位置還是在老家里，只不過影子出去了，可以到處飄。
  

  4.3 相對(duì)定位用途

• 相對(duì)定位有坑，所以一般不用于做“壓蓋”效果。頁面中，效果極小。就兩個(gè)作用：
  1、微調(diào)元素；
  2、做絕對(duì)定位的參考；

  4.4 相對(duì)定位的定位值

• 可以使用left、right來描述盒子左、右的移動(dòng)；可以使用top、bottom來描述盒子的下、上的移動(dòng)。

  5 絕對(duì)定位

• 絕對(duì)定位要比相對(duì)定位更靈活。
  

  5.1 絕對(duì)定位脫標(biāo)

• 絕對(duì)定位的盒子，是脫離標(biāo)準(zhǔn)文檔流的。所以，所有的標(biāo)準(zhǔn)文檔流的性質(zhì)，絕對(duì)定位之后都不準(zhǔn)守。絕對(duì)定位之后，標(biāo)簽就不區(qū)分所謂的行內(nèi)元素、塊級(jí)元素了，不需要display:block;就可以設(shè)置寬高：

      span{
          position: absolute;
          top: 100px;
          left: 100px;
          width: 100px;
          height: 100px;
          background-color: pink;
      }

  5.2 參考點(diǎn)

• 絕對(duì)定位的參考點(diǎn)，如果用top描述，那么定位參考點(diǎn)就是頁面的左上角，而不是瀏覽器的左上角。
  
• 如果用bottom描述，那么就是瀏覽器首屏窗口尺寸，對(duì)應(yīng)的頁面的左下角：
  
• 面試題：
  
• 用bottom定位的時(shí)候，參考的是瀏覽器首屏大小對(duì)應(yīng)的頁面左下角：
  

  5.3 以盒子為參考點(diǎn)

• 一個(gè)絕對(duì)定位的元素，如果父輩元素中也出現(xiàn)定位的元素，那么將以父輩這個(gè)元素，為參考點(diǎn)：
  
• 要聽最近的已經(jīng)定位的祖先元素的，不一定是父親，可能是爺爺。

     →  相對(duì)定位
      
    →  沒有定位
          
     → 絕對(duì)定位，將以box1為參考，因?yàn)閎ox2沒有定位，box1就是最近的父輩元素
      
  

     →  相對(duì)定位
      
    → 相對(duì)定位
          
     → 絕對(duì)定位，將以box2為參考，因?yàn)閎ox2是自己最近的父輩元素
      
  

• 不一定是相對(duì)定位，任何定位，都可以作為參考點(diǎn)。

    → 絕對(duì)定位
      
    → 絕對(duì)定位，將以div作為參考點(diǎn)。因?yàn)楦赣H定位了。
  

  5.4 絕對(duì)定位的盒子居中

• 絕對(duì)定位之后，所有標(biāo)準(zhǔn)流的規(guī)則，都不適用了，所以margin : 0 auto；失效?？梢允褂萌缦略O(shè)置使其水平居中：

  left:50%;
  margin-left:負(fù)的寬度的一半

  6 固定定位

• 固定定位，就是相對(duì)于瀏覽器窗口的定位。無論頁面如何滾動(dòng)，這個(gè)盒子顯示的位置不變。
• 固定定位脫標(biāo)。

  7 z-index

  1、z-index值表示誰壓著誰。數(shù)值大的蓋住數(shù)值小的。
  2、只有定位了的元素，才能夠有z-index值。也就是說，不管相對(duì)定位、決定定位、固定定位，都可以使用z-index值。而浮動(dòng)的東西不能夠使用。
  3、z-index值沒有單位，就是一個(gè)整數(shù)值。默認(rèn)的z-index值為0。
  4、定位了的元素，永遠(yuǎn)能夠壓住沒有定位的元素。