Time of Update: 2017-01-13
看代碼 代碼如下複製代碼 <div class="top"> <div class="sub">css opacity attribute!</div></div>
Time of Update: 2017-01-13
怎麼解決這個問題呢?經發現可以採用overflow來解決!方法是在父元素加上如下代碼即可: overflow:auto;zoom:1; “overflow:auto;”是讓高度自適應,“zoom:1;”是為了相容IE6,也可以用“height:1%;”來解決。 代碼如下複製代碼 <!DOCTYPE html PUBLIC &
Time of Update: 2017-01-13
cell-box:包圍內容的最小框。 cell-box的baseline:一般來說為這個cell-box裡第一行文字框從下往上四分之一處(大約,為個人理解)。 這一行的baseline:這一行vertical-align為baseline的所有cell-box,cell-box頂部到該cell-box baseline距離最大的
Time of Update: 2017-01-13
文法:text-align : left | right | center | justify 說明:設定元素內文本的水平對齊。 參數:left : 靠左對齊;right : 靠右對齊;center : 置中;justify : 左右對齊 初始值:跟瀏覽器的設定有關 繼承性:
Time of Update: 2017-01-13
無意中路過Firefox社區發現他們的跟隨捲軸漂浮層比自己之前做的要流暢、自然,好奇下用Firebug對其構造進行分析:1、剛開始覺得和自己寫的原理一樣用以下控制浮動層顯示位置 view sourceprint?Top:0; position:
Time of Update: 2017-01-13
今天在做一個表單時涉及到這方面,當選中相應的選項後設定相應的幾個元素(控制項可見或不可見),後來還是用了visibility來實現。我們先來看下visibility對應的幾個屬性的介紹:-------------------------------------------------------------------------------- 1 visibility:visible 2 /*元素可見,預設值*/ 3 visibility:hidden 4
Time of Update: 2017-01-13
ie和ff下有所不同。ie下如果要成功擋住,必須為上層標籤加背景,否則無效。ff加不加背景都行。a.showdetaillnk{position:absolute;top:0;left:0;width:220px;height:20px;z-index:100;opacity:0;background:#ffffff;filter:alpha(opacity=0);}.flash_container{position:relative;}<div
Time of Update: 2017-01-13
e8/9(標準模式) and firefox/safari/chrome/operaie6/7 and ie8/9(怪異模式)外層div加了上下padding 15px,可是在ie6/7 and ie8/9(怪異模式)下padding卻翻倍了。<!doctype html><html> <head> <meta charset="utf-8"> <title>ie6/7 double
Time of Update: 2017-01-13
一、浮動元素自動變區塊層級元素首先說說區塊層級元素和行內元素區別,簡單的來說,區塊層級元素獨佔一行,可以設定寬高以及邊距,行內元素不會獨佔一行,設定寬高行距等不會起效。常見的區塊層級元素有:h1~h6、p、div、ul、table,常見的行內元素有:span、a、input、select等。 範例程式碼:<div style="height: 200px; width:
Time of Update: 2017-01-13
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html><head><title>new document</title><style
Time of Update: 2017-01-13
px像素(pixel)相對長度單位是相對於顯示器螢幕解析度而言的(引自css教程2.0手冊)。 em相對長度單位是相對於當前對象內文本的字型尺寸而言的,如當前對行內文本的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸(引自css2.0手冊)。 任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合:
Time of Update: 2017-01-13
自己的一些簡單瞭解原點位置,即外層塊元素的左上方background-position 位置設定是指圖片與座標原點的位移量原點是不會動的,移動的是圖片 X座標為正則圖片左上方向右平移,為負則圖片左上方向左平移Y座標為正則圖片左上方向下平移,為負則左上方向上平移百分比的計算是有公式的:X軸( container寬度 ? 圖片寬度 )*含符號百分比Y軸( container高度 ?
Time of Update: 2017-01-13
代碼如下複製代碼 table{ table-layout: fixed;}td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 解析:1. table-layout: fixed 由於table-layout的預設值是auto,即table的寬高將取決於其內容的多寡,如果內容的體積無法估測,那麼最終表格的呈現形式也無法保證了,fixed一下就好了。(注意:此樣式是關鍵)2.
Time of Update: 2017-01-13
代碼如下複製代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
Time of Update: 2017-01-13
涉及到的條件注釋代碼如下: 代碼如下複製代碼 <!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6"><![endif]--><!--[if IE 7 ]><html class="ie ie7"><![endif]--><!--[if IE 8 ]><html
Time of Update: 2017-01-13
代碼如下複製代碼 <style>body{margin: 30px; font-size:9pt;}.a, .b, .c, .d, .e{width: 100px;height: 100px;margin: 5 auto;color: #fff;background: #000;}.aa, .bb, .cc, .dd, .ee{top: 10px;left: 10px;width: 10px;height: 10px;overflow:
Time of Update: 2017-01-13
對於div1.(IE瀏覽器)white-space:normal; word-break:break-all;這裡前者是遵循標準。 代碼如下複製代碼 #wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;width:200px;}eg.<div id="wrap">ddd1111111111111111111111111111111111111111111111
Time of Update: 2017-01-13
關於如何使用 PostCSS 外掛程式跨瀏覽器安全色,請點擊這裡:
Time of Update: 2017-01-13
Animate.css是一個超強的CSS3動畫庫,它使用簡單,只需要將相關效果對應的class加入頁面元素中,就能實現翻轉、滑動、旋轉等等複雜超炫的跨瀏覽器的動畫效果,它讓開發這製作頁面動畫變得非常簡單。首先引入animate css檔案。<link rel="stylesheet" href="animate.min.css">然後給指定的元素加上指定的動畫class樣式名。<div class="animated
Time of Update: 2017-01-13
有一天,Harry Roberts有一段有關於他網站上的代碼在twitter求教,如果有可能,在某些方面得到改善。Harry Roberts做的是使用keyframes的carousel動畫,所以說使用一些數學計算是有可能得到相應改善。 “Why do we have to learn algebra, Miss? We’re never going to use it…” —Everyone in my maths class