css佈局常遇見的一些問題

CSS樣式層疊表


1、link與@import的區別（5點）
（1）、link爲XHTML的標籤，可以引進CSS樣式表，除了引進CSS文件還可以引進其他的文件如.js或.rss文件;@import爲CSS中的標籤，只能引進CSS文件。
（2）、加載順序不同：link引進的CSS時同時也被加載，而@import引進的CSS要下載完才加載。
（3）、兼容性問題：@import是CSS2.1纔出來的不被老的瀏覽器支持，而link沒有此問題。
（4）、使用JavaScript操作DOM改變樣式只能由link引進CSS文件才能實現。
（5）、@import可在CSS內再次引進CSS其他文件
<link src="xx.css" rel="styleSheet" type="text/css">
<style>
@import xx.css;
</style>




2、display和visibility的區別


（1）、display：none;是元素沒有框，即是沒有寬高，不佔文檔的位置；
　　　display：inline;可以使像<p>這樣的塊級元素變爲像<a>一樣的行內元素
　　　display：block;可以使像<a>一樣的行內元素變爲像<p>一樣的塊級元素
　　　display：inline-block；行內塊元素
（2）、visibility：hidden；不顯示，透明，但是有寬高，在文檔中佔有位置，只是隱藏




3、定位機制


除了默認的流定位方式，還有：浮動定位，相對定位，絕對定位，和固定定位
浮動定位：將元素排除在普通流之外，將它放置到邊框的左邊或右邊
相對定位：將元素相對於普通流中的位置定位
絕對定位：將元素內容完全從普通流中完全移除，可以偏移屬性在固定元素的位置
固定定位：將元素固定在頁面的一個某個位置


4、標籤語義化


在HTML5的新標籤，開始了標籤語義化，直觀的認識標籤和屬性的用途和作用。如<header>、<aside>、<footer>
語義化可讓頁面顯得結構化，便於瀏覽器解析，便於引擎搜索解析，並提高代碼的可讀性，可維護性和可重用性。


5、爲什麼簡易設置背景圖片時，需要設置背景顏色？


一般我們在設置background-image時都會設置background-color，並設置與圖片相應的顏色。如果在加載頁面的，突發狀況，圖片無法顯示，頁面可以使用背景顏色充當。


6、CSS中content的作用


content屬性與：before和：after僞元素配合使用來插入生成的內容，在元素之前或者元素之後，可以插入文本、圖像、引號及計數器生成的編號
eg、body{counter-reset:chapter}
　　h1:before{content:"第"chapter(chapter)"章"}
　　h1{counter-increment:chaptr}


7、CSS sprite是什麼，優缺點？


CSS精靈，是一種網頁圖片應用處理方式，把網頁中的一些背景圖片整合在一張圖片文件中，在利用background-image、background-repeat、background-position組合進行背景定位。
優點：（1）、減少HTTP請求，提高性能
　　　　（2）、減少圖片字節
　　　　（3）、減少命名困擾
　　　　（4）、更換風格方便
缺點：圖片合成麻煩，設置時必須精確定位，維護時最好是添加圖片，不更改已有的圖片


8、過渡與動畫的區別


過渡屬性transition可以在一定時間內實現元素的狀態過渡到另一個狀態，模擬動畫效果，但功能有限。而動畫屬性animation則可以實現比較複雜的動畫，通過關鍵幀控制動畫的每一步控制更爲精準，可以實現複雜動畫。


9、CSS reset


CSS reset叫CSS重寫或CSS重置
用於改寫HTML標籤的默認樣式，如p元素有上下邊距，li 有列表標識符。這些默認樣式在不同的瀏覽器會有不同的效果，如ul默認有縮進的樣式，在IE中使用margin實現，在Firefox中是用padding實現，這必然會有兼容性問題。
因此在CSS樣式中去掉這些默認樣式，重新定義標籤樣式覆蓋默認樣式，即爲CSS reset。
注意，樣式重寫不建議用*{}來重置，影響性能
p,b,ul{margin:0;padding:0}


10、瀏覽器兼容性


由於瀏覽器的版本及類型不同導致CSS的樣式也不盡相同因此需要考慮到瀏覽器的兼容性書寫不同的CSS樣式。
首先，各主流的瀏覽器對W3C的標準支持較好，所以要保證代碼符合W3C的標準。
其次，對於某些支持受限的屬性，針對不同的瀏覽器添加不同的前綴，如-webkit- -o- -moz-.
還有，對於IE的低版本可帶前綴書寫特定的代碼，實現版本識別
eg .bg{
　　　　background-color:#333;/所有都能識別/
　　　　background-color:#00deff\9;/IE 6 7 8能識別*/
　　　　+background-color:#a200ff;/IE6 7能識別/
　　　　_background-color:#l10bd1;/IE6/
　　　　}
另外，特殊情況特殊處理
（1）CSS reset改變默認的樣式效果
（2）IE低版本中auto不能實現居中，用text-align
（3）子元素設置外邊距時，父元素設置外邊距或border
（4）外邊距合併問題
最後的清除浮動元素帶來的影響
　　由於浮動的元素不在文檔的普通流中，所以元素浮動之後其原有的位置不在保留，其他的元素位置也會受到影響。
（1）清除左右帶來的浮動影響，用clear屬性來設置，如果在包含框內，是父元素顯示其寬高使用overflow:hidden來設置。
推薦方法（2）父元素添加後置內容生成
　　　　　　parent：after{
　　　　　　　　　　　　content:" ";
　　　　　　　　　　　　display:table;
　　　　　　　　　　　　clear:both;
　　　　　　　　　　}
還有我們經常遇到的小問題，<div>
　　　　　　　　　　　　　　　<div class="s1"></div>
　　　　　　　　　　　　<div>
　　　　　　　　　　　　<style>
　　　　　　　　　　　　　　.s1{margin-top:10px;}
　　　　　　　　　　　　</style>
margin-top是不是把父元素也帶下來了呢？第一個子元素的margin-top與最後一個子元素的margin-bottom的越界問題
解決（1）、給父元素加border
　　（2）、給父元素加padding
　　（3）、給父元素加overflow：hidden；
　　（4）、推薦方法：爲父元素添加前置內容生成
　　　　.parent:before{
　　　　　　　　ｃｏｎｔｅｎｔ：＂＂；
　　　　　　　　ｄｉｓｐｌａｙ：ｔａｂｌｅ；
　　　　　　　　　　}


2.文字大小12px ，padding-left：22px，可以讓li和圖片對齊