CSS使用過程中的一些技巧以及注意點(一)

距離上次寫博客已經(jīng)是一年多以前，現(xiàn)在再次起筆是發(fā)現(xiàn)自己學的東西還是應(yīng)該進行輸出比較好，一方面可以將這個作為復(fù)習的筆記，再者可以加深自己對知識的印象蹬跃。本文主要是記錄一些在使用CSS學習過中學到的一些小技巧和在使用過程中需要注意的點。本次記錄分為兩個部分铆铆，這里所記錄的為第一個部分蝶缀，第二部分將在后續(xù)加上。

1. CSS顯示模式

html一般分為塊元素和行內(nèi)元素薄货，還有一種特殊的稱為行內(nèi)塊元素翁都。

1. 塊級元素

   塊級元素主要有 h1-h6、p谅猾、div柄慰、ui、ol税娜、li等坐搔。在后續(xù)的使用過程中查看其特點可以很方便的對其進行分類。

   塊級元素的特點：

   • 獨占一行敬矩。
   • 寬度概行、高度、外邊距弧岳、內(nèi)邊距都可以進行控制凳忙。
   • 寬度默認是容器(父級)寬度的100%业踏。
   • 是一個容器及盒子，里面可以放在塊級元素和行內(nèi)元素涧卵。

   注意點： 文字類的元素內(nèi)不能放塊級元素勤家，如p標簽、h1-h6柳恐，其中不能出現(xiàn)div伐脖。這些文字類標簽再放塊級元素，解析之后的元素和你想象的不同胎撤。

2. 行內(nèi)元素

   行內(nèi)元素包括 a晓殊、strong、b伤提、em巫俺、i、del肿男、s介汹、ins、u舶沛、span等

   行內(nèi)元素的特點：

   • 相鄰的行內(nèi)元素在一行上可以顯示多個嘹承。
   • 寬高直接設(shè)置是沒有效果的。
   • 默認寬度就是他本身內(nèi)容的寬度如庭。
   • 行內(nèi)元素只能容納文本和其他行內(nèi)元素叹卷。

   注意點： 鏈接里面不能再放鏈接，a標簽中可以放塊級元素坪它，但給a標簽轉(zhuǎn)化一下塊級模式(將其轉(zhuǎn)為塊級元素)最安全骤竹。

3. 行內(nèi)塊元素

   行內(nèi)塊元素包括img、input往毡、td蒙揣，他們同時具有行內(nèi)元素和塊元素的特點。

   行內(nèi)塊元素的特點：

   • 和相鄰行內(nèi)元素在同一行上开瞭，但他們之間會有空白間隙懒震。-- 行內(nèi)元素特點
   • 默認寬度就是它本身內(nèi)容的寬度。--行內(nèi)元素特點
   • 高度嗤详、行高个扰、外邊距以及內(nèi)邊距都可以控制。--塊級元素特點

4. 顯示轉(zhuǎn)換顯示模式

   display屬性對元素的顯示模式進行轉(zhuǎn)換

   /*將當前元素轉(zhuǎn)為塊級元素*/ 
   display: block;
   /*將當前元素轉(zhuǎn)為行內(nèi)元素*/ 
   display: inline;
   /*將當前元素轉(zhuǎn)為行內(nèi)塊元素*/ 
   display: inline-block;
   

2. CSS中的三大特性

css中三個重要的特性：層疊性葱色、繼承性锨匆、優(yōu)先級。

1. 層疊性

   相同元素存在樣式?jīng)_突的情況。
   層疊性原則：

   • 樣式?jīng)_突恐锣，遵循就近原則，哪個樣式離結(jié)構(gòu)近就執(zhí)行哪個樣式舞痰。
   • 樣式不沖突土榴，不會層疊。

2. 繼承性

   CSS中的繼承：子標簽會繼承父標簽中的某些樣式响牛，如文本顏色玷禽、字號。

   • 恰當?shù)氖褂美^承可以簡化代碼呀打，降低CSS樣式的賦值性矢赁。
   • 子元素可以繼承父元素中的樣式，包括text-贬丛、font-撩银、line-這些開頭的可以繼承，以及color屬性豺憔。

3. 優(yōu)先級

   當一個元素指定多個選擇器额获，就會產(chǎn)生優(yōu)先級

   • 選擇器相同，則執(zhí)行層疊性恭应。
   • 選擇器不同抄邀，則根據(jù)選擇器權(quán)重執(zhí)行。

   選擇器權(quán)重詳情如下表：

   選擇器	選擇器權(quán)重
   繼承或者 *	0昼榛，0境肾，0，0
   元素選擇器	0胆屿，0奥喻，0，1
   類選擇器莺掠，偽類選擇器	0衫嵌，0，1彻秆，0
   ID選擇器	0楔绞，1，0唇兑，0
   行內(nèi)樣式style=""	1酒朵，0，0扎附，0
   !importment 重要的	無窮大

   在某些情況下如果你設(shè)置的樣式未能生效就需要考慮一下給元素設(shè)置樣式所對應(yīng)的選擇器權(quán)重問題蔫耽。對于上面的權(quán)重計算也即權(quán)重疊加，是對位相加，且越靠左越大匙铡。

3. 盒子模型

1. 盒子模型的組成
   盒子模型主要由四部分組成图甜，分別為margin(外邊距)、border(邊框)鳖眼、padding(內(nèi)邊距)黑毅、content(內(nèi)容)。
   
   盒子模型
   
   注意點：

   • 邊框(border)會改變盒子的實際大小钦讳，如當前盒子設(shè)置為width:200px; height:200px; border: 10px solid red; 則盒子的實際寬高變?yōu)榱?20px;因此在對于盒子大小要求較為嚴格的情況下需要將邊框的影響考慮進去矿瘦。

         width: 200px;
         heigth: 200px;
         border: 10px solid red;
     

   • 內(nèi)邊距(padding)會影響盒子的實際大小，如當前盒子設(shè)置為width:200px; height:200px; padding: 10px; 則盒子的實際寬高變?yōu)榱?20px;因此在對于盒子大小要求較為嚴格的情況下需要將內(nèi)邊距考慮的影響考慮進去愿卒。

     width: 200px;
     heigth: 200px;
     padding: 10px;
     

   • 內(nèi)邊距不會撐開盒子寬度的情況,當前元素不指定寬度,則當前元素和父級元素寬度一致缚去，如果這個時候再給當前元素設(shè)置寬度，則會影響盒子實際大小

     /*不設(shè)置寬度  默認和父級寬度一致*/ 
     height: 100px;
     pading: 10px;
     

   • 嵌套塊元素塌陷(外邊距合并)：對于兩個嵌套關(guān)系(父子關(guān)系)的元素琼开，父元素有上外邊距同時子元素也有上外邊距易结，此使父元素會塌陷較大的外邊距，同時子元素依然貼向父盒子稠通。

     /* 父元素 margin-top為50px*/
     .father {
         width: 200px;
         height: 200px;
         background-color: red;
         margin-top: 50px;
     }
     /* 子元素設(shè)置外邊距為100px 此使父元素上邊距會被撐大到位 100px衬衬，如果父元素外上邊距更大則依然是父外邊距大小*/
     .son{
         width:50px;
         height: 50px;
         background-color: gray;
         margin-top: 100px;
     

     解決方法：

     • 為父元素定義上邊框。
     • 為父元素添加內(nèi)邊距改橘。
     • 為父元素添加overflow:hidden;

     .father {
         width: 200px;
         height: 200px;
         background-color: red;
         margin-top: 50px;
         /* 給父元素添加上邊框 即可將父元素和子元素進行分開 邊框顏色為透明*/
         /* border: 1px solid transparent; */
         /*為父元素設(shè)置內(nèi)邊距*/
         /*padding: 1px*/
         /*為父元素添加 overflow: hidden*/
         overflow: hidden;
     }
     

4. CSS三種傳統(tǒng)布局方式

css三種傳統(tǒng)布局方式：普通流(標準流)滋尉、浮動、定位飞主。

1. 標準流： 標簽按照規(guī)定好的默認方式進行排列狮惜。

2. 浮動： float屬性用于創(chuàng)建浮動框，將其移動到一旁碌识，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣碾篡。
   特性：

   • 浮動元素會脫離標準流，即脫離標準流的控制(浮)移動到指定的位置(動)筏餐，且浮動的盒子不會保留原先的位置开泽。
   • 浮動的元素會在一行內(nèi)顯示，并且會沿著元素頂部對齊魁瞪。
   • 浮動元素會具有行內(nèi)塊元素的一些特性穆律，如行內(nèi)元素設(shè)置了float屬性，則其可以設(shè)置寬高导俘，即具有行內(nèi)塊元素的一些特性峦耘。

   注意點：

   • 浮動和標準流的父級盒子搭配使用。
   • 如果一個元素浮動了旅薄，其余的兄弟元素也要浮動辅髓。
   • 浮動會影響浮動盒子后面的標準流，不會影響浮動盒子前面的標準流。

   清除浮動

   為什么要清除浮動洛口？

   因為在很多時候父盒子的高度是不確定的矫付，是不能直接設(shè)置高度的，如果不清除浮動绍弟，會導致子元素浮動而父元素感受不到使得父盒子高度變?yōu)?技即，從而影響父盒子后面標準流的盒子的展示。

   方式一

   /* 在最后一個浮動元素再添加一個標簽(必須是塊級元素)樟遣，并給這個標簽設(shè)置樣式*/
   .lastAdd {
       clear: both;
   }
   

   方式二

   /*給父級添加overflow屬性 子不教父之過*/
   .father {
       /* hidden auto scroll */
       overflow: hidden;
   }
   

   方式三

   /*父元素添加 after偽元素來清除 要求會使用*/
   .clearfix:after {
       content: "";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }
   .clearfix { /*IE6、7專有*/
       *zoom: 1; 
   }
   

   方式四

   /*給父元素添加  雙偽元素清除浮動*/
   .clearfix:before,.clearfix:after {
       content: "";
       display: table; 
   }
   .clearfix:after {
       clear: both;
   }
   .clearfix { /*IE6身笤、7專有*/
       *zoom: 1; 
   }
   

3. 定位：將盒子定在某一個位置豹悬，所以定位也是在拜訪盒子，按照定位的方式移動盒子液荸。

        定位=定位模式 + 邊偏移
        定位模式用于指定一個元素在文檔中的定位方式瞻佛。
        邊偏移則決定了該元素的最終位置。
   

   • 定位模式是通過position屬性來進行設(shè)置娇钱，其中值有

     	值	語義
     	static	靜態(tài)定位
     	relative	相對定位
     	absolute	絕對定位
     	fixed	固定定位

   • 邊偏移有top伤柄、bottom、left和right四個屬性

   靜態(tài)定位
   靜態(tài)定位是默認的定位方式文搂，無定位的意義适刀。靜態(tài)定位按照標準流特性擺放位置，他沒有邊偏移煤蹭。
   相對定位

   • 相對定位是元素在移動位置的時候笔喉，是相對于他原來的位置進行移動的。
   • 保持占有原來的位置硝皂，后面的盒子仍以標準的方式對待他常挚。
   • 最重要的作用就是給絕對定位當?shù)?/li>

   絕對定位
   絕對定位是元素在移動的時候，是相對它祖先來說的稽物。

   • 如果沒有祖先元素或祖先元素沒有定位奄毡，則以瀏覽器為準定位(Document文檔)。
   • 如果祖先元素有定位贝或，則采取就近原則吼过，以最接近當前的結(jié)構(gòu)的有定位的祖先元素進行定位。
   • 絕對定位脫離了標準流傀缩，不占有原先的位置那先。

   子絕父相： 通過對相對定位和絕對定位的特點進行分析，通過結(jié)合相對定位和絕對定位可以很方便的解決一些比較困難的布局赡艰，如輪播圖中的左右箭頭和底部小點售淡。
   

   在這里插入圖片描述
   
   固定定位
   固定定位是元素固定瀏覽器可視區(qū)的位置。主要使用場景：可以在瀏覽器頁面滾動時元素位置不會改變。
   • 以瀏覽器的可視窗口為參照點
   • 不隨滾動條的滾動而滾動
   • 固定定位是不占有原先的位置

   粘性定位(Sticky)
   可以理解為相對定位和固定定位的混合揖闸。

   • 以瀏覽器的可視窗口為參照點來移動元素(固定定位的特點)
   • 黏性定位占有原先的位置的(相對定位的特點)
   • 必須添加top揍堕、bottom、right汤纸、left中的一個邊偏移才有效衩茸。

   注意點：

   • 行內(nèi)元素添加絕對定位或者相對定位，可以直接設(shè)置高度和寬度贮泞。
   • 塊級元素加絕對定位或相對定位楞慈，如果不設(shè)置寬高，則默認大小為內(nèi)容大小啃擦。
   • 浮動元素囊蓝、相對定位、絕對定位不會觸發(fā)外邊距合并的問題令蛉。

小技巧

1. 單行文字垂直居中

   /*讓文字的行高等于盒子的高度*/ 
   /**/ 盒子高度
   height: 100px;
   line-height:  100px; /*通過這種方式可以實現(xiàn)單行文本垂直據(jù)中*/ 
   

2. 靈活使用背景圖片

• 小的裝飾性圖片使用背景來進行處理聚霜。

  /*設(shè)置背景圖片*/ 
  background-image: url(url...); //圖片url
  /*no-repeat 不重復(fù)展示圖片*/ 
  background-repleat: no-repeat;
  /*設(shè)置背景位置 可以設(shè)置top|center|bottom|left|right 或者是精確單位*/ 
  /* background-position： x y; 這個屬性的具體內(nèi)容可以查看手冊*/
  background-position: left center;
  /*背景圖片固定和滾動*/ 
  /* background-attachment: scroll | fixed*/
  

3. 表格邊框合并

   /* 表格相鄰邊框合并在一起 */ 
   border-collapse: collapse;
   

4. 外邊距讓塊級盒子水平居中
   條件：

   • 盒子必須指定寬度
   • 盒子左右外邊距設(shè)置為auto

   width: 1024px;
   margin: 0 auto;
   /* || */  
   margin: auto;
   /* || */ 
   margin-left: atuo;
   margin-right: auto; 
   

5. 行內(nèi)元素和行內(nèi)塊元素水平居中
   為使行內(nèi)元素和行內(nèi)塊元素水平居中給其父元素添加text-align:center; 即可

   /* 給父級元素設(shè)置text-align: center; */
   .father{
       text-align: center;
   }
   

6. 清除內(nèi)外邊距
   有些情況元素本身會帶有內(nèi)外邊距，這樣會影響我們設(shè)置實際我們想要的內(nèi)外邊距珠叔，因此一開始一般情況下我們需要清楚各種元素自帶內(nèi)外邊距的影響蝎宇。

   * {
       margin: 0px; /*清除外邊距*/
       padding: 0px; /*清除內(nèi)邊距*/
   }
   

7. 浮動元素經(jīng)常和標準流的父級搭配使用
   為了約束浮動元素，我們一般采用的策略：父元素為標準流上下排列祷安，之后子元素采取活動排列左右位置姥芥。

8. 固定定位技巧--固定到版心右側(cè)

   /*主界面  版心 盒子的樣式*/
   .main{
       /*設(shè)置盒子寬高*/
       width: 1024px;
       height: 2000px;
       /*設(shè)置盒子居中*/
       margin: auto;
       background-color: red;
   }
   /*設(shè)置固定定位的盒子樣式*/
   .fix{
       position:fixed;
       /* 走瀏覽器寬度的一半 */
       left: 50%;
       /* 走版心的一半 即512px*/
       margin-left: 512px;
       width: 200px;
       height: 200px;
       background-color: gray;
   }
   

9. 絕對定位的盒子居中

   .box {
       /*設(shè)置盒子為絕對定位*/
       postion: absolute;
       width: 50px;
       height: 50px;
       /*邊偏移為 父級盒子的 一半  垂直居中同理*/
       left: 50%;
       /*再向左移動盒子本身一半 即可使得絕對定位的盒子在父級盒子中居中顯示*/
       margint-left: -25px;
       background-color: gray;
   }