1. 程式人生 > >css---基礎技巧總結

css---基礎技巧總結

一、書寫css樣式:

1.優先寫位置---使元素脫離文件流的功能

2.再寫寬高內外邊距等---合模型的內容

3.背景顏色,樣式

4.css3的動畫轉換等效果

目的:瀏覽器在解析時先重拍再重繪,先寫位置可以先確定位置再排版,最後新增附屬樣式可以修飾。


二、常見標籤的一些用法

a標籤的作用:

1.超連結

2.錨點  常見用法:側邊導航欄固定,通過錨點跳轉到指定id的模組<a href="#id"></a>

3.打電話  <a href="tel:12345678901"></a> 移動端用這個可以自動呼叫手機進行電話撥打

4.協議限定符 <a href="javascript:void(0)"></a> 消除跳轉功能,void(0)可換成需要執行的js程式碼


input的placeholder的原生實現

<input type="text" onblur="if(this.value=='')this.value='招聘季月薪10000+'" onfocus="if(this.value=='招聘季月薪10000+')this.value=''">
//可以通過失去焦點,得到焦點修改classname來修改文字的顏色


三、選擇器權重問題

!important > 行間樣式 > id > class | 屬性選擇器 | 偽類 > 標籤選擇器 | 偽元素選擇器 > 萬用字元

   Infinite           1000       100                    10                                       1                             0 

權重進位制是256進位制,也就是這個10是256個1;

瀏覽器在遍歷選擇器時時從最後的葉子開始向樹根遍歷,效率高(div p span i)---從i到span到p到div去找符合的路徑;


四、碎的知識點

1.font-size設定的是高!!不然同一行的字有高有低多醜。font-style可以去掉斜體。

2.px是相對單位,em是相對單位(根據不同設定的屬性,相對對應的屬性)

div{
  text-indent:2em;//2個文字的高度(font-size的兩倍)
   line-height:1.2em;//(height的1.2倍)
}
span{
     text-decoration:line-through;//字的中劃線
   text-decoration:overline;//字的上劃線
   text-decoration:underline;//字的下劃線
}

3.行級元素和塊元素

行元素:內容決定元素所佔位置,不可通過改變寬高,只能包含行元素(a不能包含a)

span strong em a del  

塊元素:獨佔一行,可以通過css改變寬高,塊元素可以包含任何元素(p元素不能包含塊元素)

div p ul li form address

行級塊元素:內容決定大小,可以通過css改寬高,行級塊元素裡面有文字時,後面的文字會和裡面的文字底部對齊,否則會和行級塊元素底部對齊。vertical-align可以通過設定畫素值微調到需要的對齊地方。

img

凡是帶inline的元素(inline inline-block)都有文字特性,標籤空格或者換行會和文字一樣會有間隔(4px)

例如:許多img在一起會有空白間隔就是因為Img是inline-block。解決方法:不要換行,專案上線肯定會壓縮,其他處理方式多半會有問題,遲早壓縮,直接就別換行。

4.層模型:

position:absolute---相對於最近的有定位的父級,沒有的話,相對文件定位。脫離原來位置進行定位(到新的一層)

position:relative---相對於自己定位,保留原來位置(其他元素到不了該位置,始終佔據原先位置)到新層

z-index只在position的時候有效,另外到新的層是每個元素都會有新的層,float是所有元素到同一層。

5.元素居中方式:

div{
   position:absolute;
   top:50%;
   left:50%;
   height:100px;
   width:100px;
   margin-left:-50px;
   margin-right:-50px;
}

6.兩欄佈局---只知道一欄的width

注意:html中要先寫right,因為left一旦出現,會佔據整行,再調整定位,不設定top的情況下只會在當前出生行右側定位。


 
   
   *{
  
   
   margin:
   0;
  
   
   padding: 
   0;
  
  
    }
  
   
   div.left {
  
   
   height: 
   50px;
  
   
   margin-right: 
   100px;
  
   
   background: 
   red;
  
  
    }
   
   
   div.right {
  
   
   position: 
   absolute;
  
   
   right: 
   0;
  
   
   width: 
   100px;
  
   
   height: 
   50px;
  
   
   background: 
   green;
  
  
    }
  
 
 


7.margin塌陷

父子元素同時設定同方向上的margin只會採用大的並且只在父級上有效。

解決方法:父級觸發bfc---會改變盒子解析的一些規則,子元素會停止塌陷

bfc的觸發方式任選其一,根據業務邏輯需要:

position:absolute; 

display:inline-block;

float:left/right; 

overflow:hidden;

8.浮動元素產生浮動流,所有產生浮動流的元素,塊元素看不到,產生bfc的元素和文字類元素以及文字都能看到浮動元素

解決浮動流問題(父級塊元素包含子浮動元素,沒高度)---因為塊元素看不到浮動元素

解決方式:

方法1:在父級元素內的最後一個浮動子元素後加p----p設定為clear:both;不建議使用這種方式

方法2:用偽元素(父級::after{content:'';clear:both;display:block})---偽元素是天生的行元素,clear:both只對塊元素生效。

9.報紙樣式----img{float:left;} 給圖片加浮動,後面的文字會圍繞它

10.文字溢位打點

  1.單行文字:{white-space:nowrap; overflow:hidden;text-overflow:ellipsis}

  2.多行文字:不做打點,做截斷 ---單行文字(line-height)*行數=height(容器高)加overlow:hidden;

11.背景處理

當網站採取預設載入模式(就是網速不好,只加載html的時候)要保證使用者也可以操作;

<a href="http://www.taobao.com">淘寶網</a>

給這個a設定背景圖,當背景圖失效的時候(就是css載入不出來的時候),要可以看到字並且可以點選,當背景圖存在的時候,字應該看不到。

解決方式:

 1.縮排容器的寬,讓文字溢位,不允許換行,再溢位隱藏----text-indent:200px;white-space:nowrap;overflow:hidden;

 2.高設為0,padding-top:圖的高,文字會溢位在下方,溢位隱藏。