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:圖的高,文字會溢位在下方,溢位隱藏。