?日常工作或學習中常逢關于css的問題，之前一直零零散散的記在云筆記中，所以至如今已經雜亂無章，是時候好好理理了。

（1）css畫小圖標（箭頭）使用css border的屬性，可以實現箭頭的效果。當我們為一個容器只設置border，高寬設置為0時，如下.arrow{ border-color: red green blue pink;border-style: solid; border-width: 20px; height: 0; width: 0;}

如果想得到一個箭頭形狀的圖案，只需要將border的三個邊的顏色改成透明，如下：

.arrow{ border-color: red transparent transparent;border-style: solid; border-width: 20px; height: 0; width: 0;}

如此可以設置四個不同方位的箭頭

（2）css固定底部

當頁面內容不充實時，底部會上移，使用min-height設置最小高度，margin-bottom:-50px使底部上移

? ? <style?type="text/css">

????html,body{height:?100%;}

????.main{min-height:?100%;margin-bottom:?-50px}

? ? .content{height:50px;} ?//使footer不會覆蓋main里的內容

????footer{height:?50px;background:?blue;}

????</style>

?<div class="main">

? 中間內容

? <div class="content">dddd</div>

?</div>

?<footer>

? 底部底部底部底部

?</footer>

（3）單行文字的高度問題（不同游覽器的差異）

例：

<style>

span{font-size:12px;?font-family:"微軟雅黑";?color:#666;}

</style>

<span>熱賣品牌</span>

google：

? ie8： ie10：

解決方法：使用行高line-height控制

注意：在各瀏覽器下對于line-height的解決也是有細微的區別的,上下會有1px的差別,如果行高是偶數的話,大部分瀏覽器解釋還是比較正常,如果是奇 數的話,有些瀏覽器會上比下多1px,而另一些瀏覽器會下比上多1px,對于有些要求比較嚴格的網站,建議行高設計時用偶數

（4）display:none與visibility:hidden;

????visibility:hidden規定元素不可見，即使不可見的元素也會占據頁面上的空間

????????display:none不顯示，也不占據空間。

（5）、a標簽下使用img有留白

原因：a元素下有一個匿名文本，這個文本外有一個匿名行級盒子，它有的默認vertical-align是baseline的，而且往往因為上文line-height的影響，使它有個line-height，從而使其有了高度，因為baseline對齊的原因，這個盒子就會下沉，往下撐開一些距離。

擴展：baseline是基于基線對齊的，那基線是怎么回事？

? ?? ?? ? 基線并不是漢字文字的下端沿，而是英文字母"x"的下端沿。

方案一：消除匿名盒子的高度，也就是給a設置line-height:0;或font-size:0;

方案二：給兩者vertical-align:top;讓其top對齊，而不是baseline對齊。

方案三：給img以設置display:block；

（6）清除浮動

.l-clear:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}

（7）不定高寬元素水平垂直居中

水平居中很好實現，直接vertical-align:center；而垂直居中有幾種實現方式

方案一：利用table的特性，使用display:table與display:table-cell，將元素做為塊級表格來顯示

方案二：子元素絕對定位，距離頂部 50%，左邊50%，然后使用css3 transform:translate(-50%; -50%)

方案三：使用flex布局，使項目居中排列

（8）css實現超出隱藏并且加省略

hide{overflow:hidden;text-overflow:ellipsis(css3屬性);white-space:nowrap;(強制不換行);width:20em;}

（9）彈出框背景透明

.outer{

width: 100%; height: 100%;position: fixed;z-index: 9;left: 0;bottom: 0;background: rgba(0,0,0,0.8)!important;background: #000;filter: alpha(opacity=80); /*ie6/7/8*/

}

（10）消除inline-block間的間隙

inline-block包含html空白節點，當你設置的元素之間有換行，則頁面上元素之間無法緊貼

若設置不同的margin-top,padding-top,該行的高度由"最高"的元素撐開，其余元素相對于基線對齊。

父元素設置font-size:0;inline-block的元素再設置font-size大小

（11）css優先級

一：權值

元素選擇器：1

類選擇器：10

id選擇器：100

內聯樣式：1000

css優先級按權值大小排列，權值越大，優先級越高。

權值相等，則后面的樣式設置要優于先出現的樣式設置。

例：

<style>

.content span{color:red;} ? //10+1

.content .cl{color:blue;} ? ? ?//10+10

.cl{color:black !important;} ? ? ? ? ? ? ? ? ? //10

</style>

<div class="content"><span class="cl">字體顏色</span></div>

結果顯示!important具有最高優先級。

（12）css position未設置top、left的默認狀態

position:absolute 出現在正常的文檔流中，但不占據文檔的位置，會跟后面的內容重疊

position:relative 出現在正常的文檔流中，但占據文檔的位置。

position:static 默認的屬性

position:fixed 出現在正常的文檔流中，不占據位置，會跟后面的正常的文檔流內容重疊

?*******************************************1************************************************

轉載于:https://www.cnblogs.com/weiyemo/p/6670372.html

總結

以上是生活随笔為你收集整理的日常使用之css篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。