css積累中。。。

一、div或者p中文字居中效果。

    第一種方法：在div中使用 height和line-height來約束。

.alert-ban{
  top: 50%;
  width: 120px;
  height: 35px;
  line-height: 35px;
  position: fixed;
  background: #545252;
  border-radius: 5px;
  margin-top: 40%;
  margin-left: 35%;
  text-align: center;
  }

    overflow:hidden是爲了防止div中的文字過多超出div。

    如圖：

        

    第二種方法：

    若是一段內容，它的高度是可變的那麼咱們就可使用上一節講到的實現水平居中時使用到的最後一種方法，就是設定        Padding，使上下的padding值相同便可。一樣的，這也是一種「看起來」的垂直居中方式，它只不過是使文字把                 <div> 徹底填充的一種方式而已。可使用相似下面的代碼： 

    

div {   
  padding:25px;   
}

    這種方法的優勢就是它能夠在任何瀏覽器上運行，而且代碼很簡單，只不過這種方法應用的前提就是容器的高度必須是可伸     縮的。

二、css hack

        

    參考博客：http://blog.csdn.net/freshlover/article/details/12132801

三、overflow屬性

基本語法
overflow-x : visible | auto | hidden | scroll 
語法取值
visible  :默認值。不剪切內容也不添加滾動條。假如顯式聲明此默認值，
             對象將以包含對象的 window 或 frame 的尺寸裁切。而且 clip 屬性設置將失效 
auto     : 在必需時對象內容纔會被裁切或顯示橫向滾動條 
hidden   :?不顯示超過對象尺寸的內容 
scroll   : 老是顯示橫向滾動條 

使用說明
檢索或設置當對象的內容超過其指定寬度時如何管理內容。全部對象的默認值是 visible ，除了 textarea 對象和 body 對象的默認值是 auto 。設置 textarea 對象此屬性值爲 hidden 將隱藏其滾動條。對於 table 來講，假如 table-layout 屬性設置爲 fixed ，則 td 對象支持帶有默認值爲 hidden 的 overflow 屬性。若是設爲 scroll 或者 auto ，那麼超出 td 尺寸的內容將被剪切。若是設爲 visible ，將致使額外的文本溢出到右邊或左邊（視 direction 屬性設置而定）的單元格。自IE5開始，此屬性在MAC平臺上可用。自IE6開始，當你使用 !DOCTYPE 聲明指定了 standards-compliant 模式，此屬性能夠應用於 html 對象。此屬性對於 currentStyle 對象而言是隻讀的。對於其餘對象而言是可讀寫的。對應的腳本特性爲 overflowX 。

    場景：有時候咱們在展現一個列表，每一個列表中的描述可能長度不一，可是咱們又要實現列表中的每一個項高度一致。超出部分用省略號來代替。

    配合

text-overflow:ellipsis

    能夠實現。（注：最好在文字先後加上<nobr>標籤，你懂得）

四、html右側頁面空出一截

    

解決辦法：

html {
  width: 100%;
  overflow: hidden;
}

五、div中加三角形

    效果圖：

    

    代碼：

    

{  
  height: 0;
  line-height: 0;
  border-width: 14px;
  border-style: solid;
  border-color: transparent transparent transparent #1000FF;
  left: 160px;
  position: relative;
}

    其餘位置的三角形只要修改border-color就好了。

六、div中加三角形

html中瀏覽器給定一些默認的樣式，要去掉的話就重寫對應的代碼（像input框中的背景顏色，select框中的右側尖角）

  關注開發，歡迎加好友交流，一塊兒成長：

      qq羣： 175677844

       微信：