CSS

提示：您可以先修改部分代碼再運行 兩列寬度自適應兩列寬度自適應測試左側浮動，右側margin-left,IE6,7下在縮小到一定程度右側會下沉,而且有一個 IE6 3px bug Right 測試子項目能否使用width:100% 左側絕對位置，右側margin-left,此方法有效避免了右側下沉和IE6 3px bug Right 測試子項目能否使用width:100%

先來看下 ie、Firefox、Google瀏覽器下各個字型顯示情況ie下：Firefox下：Google下：從上面的圖可以很明顯看出Google下 css設定字型大小為12px及以下時，顯示都是一樣大小，都是預設12px;那麼網上一直有一個方法就是給當前樣式添加Google私人屬性：-webkit-text-size-adjust:none;可是我進行驗證後發現，在Google現在的新版本裡已經無效。那麼我們應該如何設定Google下的字型呢？我們可以使用到

前言inline-block，我們平時用的很多，最普通的用法就是幾個div在一行中顯示，我們用display:inline-block。今天之所以寫這篇文章，主要是寫inline-block的幾個比較奇特的用法。實現div寬度根據內容自適應我們知道div是區塊層級元素，假如我們不設定寬度，那麼div的寬度預設是100%；問：要想div寬度根據內容自適應怎麼辦？請看下面代碼：<div class="parent">  <div

CSS Hack技術，就是利用不同瀏覽器不同版本之間的CSS實現的特性差異，來滿足我們需要的效果：在所有主流瀏覽器上顯示統一的效果，或者為特定瀏覽器顯示特定的效果。眾所周知，如果在一個css樣式選取器中存在兩個名稱相同的屬性，瀏覽器一般會以最後面的屬性為準。<style type="text/css">.css-hack {    background-color: red;    background-

當前web屆，絕大多數的頁面間布局都是水平置中布局，主體定個寬度，然後margin: 0 auto的節奏~例如，大淘寶的首頁：  然而，這種布局有一個存在一個影響使用者體驗的隱患。應該都知道，現代瀏覽器捲軸預設是overflow:auto類型的，也就是如果尺寸不足一屏，沒有捲軸;超出，出現捲軸。於是，問題來了：資訊流頁面，如新浪微博，是從上往下push渲染的。開始只有頭部一些資訊載入，此時頁面高度有限，沒有捲軸;然後，更多內容顯示，捲軸出現，佔據可用寬度，margin: 0

inherit是個好東西，不僅節約代碼，尤其與background之流打交道；而且還利於維護。不過，如果想要繼承background的圖片，不能這樣縮寫，會顯得很天真：background: #fff inherit left top;可以這樣子：background-image: inherit;height:100%和height:inherit的異同1. 相容性差異height:100% IE6+ √height:inherit IE8+ √2.

css代碼最佳化作用與意義1、減少佔用網頁位元組。在同等條件下縮短瀏覽器下載css代碼時間，相當於加快網頁開啟速度2、便於維護。簡化和標準化css代碼讓css代碼減少，便於日後維護3、讓自己寫的css代碼更加專業。css最佳化方法-需要最佳化css代碼地方1、縮寫css代碼。2、排列css代碼。3、同屬性提取共用css選取器。4、分離網頁顏色和背景設定樣式(較大網站需要注意)。5、條理化css代碼。執行個體講解以上幾點div

有時我們可能希望內部連結與外部連結顯示不同的樣式，如外部連結。我想在連結的旁邊加上一個小表徵圖，以表示其是一個外部的連結，來告訴來訪者，讓他們來確認是在新視窗開啟還是在本視窗開啟。我們可能會這樣做：  代碼如下複製代碼 .external{background:url(images/external.gif) no-repeat right top;padding-right:12px;}

　　background-position 的值可以是長度單位，百分比，或者關鍵字。　　長度單位比較好理解。多少就多少，正的就正，負的就負的。而關鍵字的中left top就是0% center 就是50% right bottom就是100%，那百分比是怎樣算的呢？　　假如是 background-position:50% 0 的話，就是容器的左上方開始的座標(50%,0) 和背景圖的左上方開始的座標(50%,0)的位置同點處，但這樣的說法好像比較不好計算。或者換個說法比較容易理解：

　　我們應該養成良好的編碼習慣，CSS整體布局聲明為我們的代碼簡化、提高運行效率提供了途徑。我們列舉比較常用的形式，並加上解釋。整體布局聲明的作用在於將目標作一個整體的概括，聲明一些完全相同或基本相同的屬性及值，以免在後面的代碼中每一個標籤中都需要單獨定義。若有不同的屬性與值，後面的重新定義即可。一、通配式整體布局聲明。  代碼如下複製代碼 * {margin:0;padding:0;font-size:0.8em;...}　

元素的屬性(Attribute)也可以用於selector。下面的列表中例舉了幾種模式：Attribute Selector Patterns模式說明E[attr]Attribute selector屬性選取器、匹配任何含有該屬性的E元素，不必考慮它的值的大小E[attr="value"]Attribute selector,屬性選取器、匹配任何具有該屬性的元素E，條件是屬性的值必須與設定的值相等。E[attr~="value"]Attribute

為了實現一些特殊效果，需要將頁面元素變透明，本文介紹的就是用 CSS 實現 Firefox 和 IE 都支援的 Alpha 透明效果。  代碼如下複製代碼 filter:alpha(opacity=50);       /* IE

CSS設定文本溢出不顯示或顯示省略符號，只顯示一定長度的文本,ie9下只需設定  代碼如下複製代碼 div{white-space:nowrap;text-overflow: none;} 或  代碼如下複製代碼 div{white-space:nowrap;text-overflow: ellIPsis;} 即可，在ie6,ie7需增加寬度設定才會生效  代碼如下複製代碼

<style type="text/css">#mainbox{ width:84px; background-image:url(e_pic/select.jpg); background-repeat:no-repeat; font-size:12px; }#box0{ width:63px; height:28px;  float:left; padding-

對於定寬的非浮動元素我們可以在CSS中用 margin:0 auto 進行水平置中，對於不定寬的浮動元素我們也有一個常用的技巧解決它的水平置中問題。解決水平置中問題有很多種方法，下面先給大家分享一下三種方法，希望能協助到大家。方法一：1、HTML 部分：<div class="box"> <p>我是浮動的</p> <p>我也是置中的</p></div>2、CSS 部分：.box{ float:left;

簡要教程這是一款使用jQuery和CSS3來製作的炫酷漢堡包變形動畫特效。該特效通過通過jQuery來附加按鈕事件，並通過CSS3 transform和animation來製作動畫特效。 使用方法 HTML結構該漢堡包變形動畫特效的HTML結構如下：<div class='container'> <div class='burger'> <div class='burger__line-top'><

簡要教程這是一款基於Bootstrap的垂直手風琴特效。該垂直手風琴特效基於原生的Bootstrap Accordion組件來製作，通過CSS3來對它進行美化，效果美觀大方。使用方法 HTML結構該垂直手風琴特效的基本HTML結構如下：<div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6

簡要教程這是一款使用純CSS3製作的時尚價格表。該價格表通過Bootstrap來進行布局，採用扁平風格，滑鼠划過時還帶有平滑過渡的顏色變化效果。 使用方法 HTML結構該價格表的基本HTML結構如下：<div class="container"> <div class="row"> <div class="col-md-3 col-sm-6">

CSS層疊樣式表CSS（層疊樣式表） 即 階層式樣式表 。 它是一種用來表現HTML（標準通用標記語言 (SGML)的一個應用）或XML（標準通用標記語言 (SGML)的一個子集）等檔案樣式的電腦語言。明白何謂Margin Collapse不同於其他很多屬性，盒模型中垂直方向上的Margin會在相遇時發生崩塌，也就是說當某個元素的底部Margin與另一個元素的頂部Margin相鄰時，只有二者中的較大值會被保留下來，可以從下面這個簡單的例子來學習:.square { width: 80px;

簡要教程這是一款非常有創意的純CSS3導覽功能表特效。該導覽功能表主要通過CSS3 transform和transition方法實現效果，非常簡單。該特效由進擊的燊提供。 使用方法 HTML結構該導覽功能表使用一個<nav>元素來包裹一組無序列表。<nav> <ul> <li><a href="#">Home</a></li> <li><a href=&