【經驗】css

1.父元素overflow:hidden，當父元素大小減少到不容納子元素時，會出現滾動條。
2.input的盒模型尺寸基準是content-box，它的寬度將是以width-border計算，也就是說一個設定width:100px;border:5px solid;的input，其寬度將是90px。
3.position:relative 對display:表格類是無效的。http://www.w3.org/TR/CSS21/visuren.html#choose-position 中有說明。
4.360的line-height小於font-size時，會隱藏文本行。而ff和chrome則不會隱藏。
5.當div中的元素全浮動時，div自己將不包含任何東西所以爲空，因此其後的兄弟元素不會換行而是如同左浮同樣靠在div的右側。這種時候給這個div設置overflow:hidden就可讓它擁有佈局。
6.display:inline的元素不會繼承line-height。
7.原來元素設定position:absolute能夠相對有滾動條的父元素進行fixed定位，前提是父元素沒有定義position。
可是，一旦點擊其中的元素，會致使元素從新定位（點擊觸發重繪因此從新繪製位置）。具體位置是「父元素的頂端」，情形像是父元素因滾動而往上位移了。
8.overflow:hidden可使得元素不佔據浮動元素的位置。
9.ff會默認給border使用文本顏色，樣式爲-moz-use-text-color
10.給ul添加inline-block可使用verticla-align，在span上添加彷佛沒法使用？
11.inline-block和inline在對空格的處理上有區別，
<span>a</span><span>
a</span>
在inline中會呈現空格，在inline-block中則不會
12.兄弟元素上下邊距會重合，任一方定義了display:inline-block與float，則重合取消。overflow:hidden不行。
13.父元素的其中一個子元素float，若沒有其餘子元素來clear:both，則這個父元素計算寬高時不會包括浮動的子元素(除非父元素float或overflow或inline-block)
因此，若是沒有子元素清除浮動，則父元素最好仍是使用:after{content:"."; display:block; height:0; visibility:hidden; clear:both;}生成子元素清除浮動。
14.display:inline-block疑似會讓父元素得到子元素的浮動屬性。
15.after僞類須要聲明content:""來生成盒子
16.明明line-height等於height，爲何文字垂直總差理想的居中一點點？是否是還有點偏下？看下是否設置了box-sizing吧，height會被重計算。
17.overflow:hidden能夠防止元素被浮動兄弟元素掩蓋。
17.2.可是即便設置了overflow:hidden，不管哪一個方向的margin仍是會被浮動兄弟元素掩蓋。inline-block則不會。
這個設定可能有其深意：當margin-top大於浮動兄弟元素，將把元素推到兄弟元素的下一行。
浮動換行，除了clear，還能夠這麼幹。
18.在項目中我採用<ul>代替<table>，由於，雖然<thead>的th和<tbody>裏對應的td可以自動調節成二者間的最大寬度，但寬度會被文字撐開致使width屬性無效，即便設置了overflow:hidden也沒用。
18.1.要解決文字撐開問題，能夠在th和td裏添加p，給p設置寬度，就能夠限定內容的寬度了。
18.2.若是要給<thead>和<tbody>裏的p設置寬度，那何須使用<table>，使用<ul>就好。
18.3.使用<ul>代替，關鍵點是.title和.list裏的li.col是一一相應的，基於這點認識設計圖，寫html就會順利。
19.對於block元素，當其寬度根據父元素計算時(父元素的寬度不依賴本元素)，設置width:auto，設置負margin-left，能夠拉長寬度。(水平上，正值margin則會減小寬度，負值margin固然會增長寬度)
19.1.當父元素寬度依賴本元素計算時，水平上，正margin會擴充父元素，負margin會縮短父元素。
20.元素首先按照自身計算box-width，再按照父元素計算，再按子元素計算。已經計算就不會再考慮後面的因素。
20.1.元素不會【直接】根據兄弟元素計算寬度。由於，能根據兄弟元素計算寬度的前提條件是：二者同在文檔流的一行。要同行顯示，元素得設置float/inline-block/inline。但這些都會使得元素會根據自身計算寬度。
20.2.元素能夠間接經過父元素，根據兄弟元素計算寬度。元素依賴父元素，父元素依賴兄弟元素。
21.inline-block/inline的負margin-right會影響到下一行的兄弟元素的定位。
22.文字超出顯示省略號
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;/*這句的做用是使得文字溢出也不換行。這會對其中的浮動元素產生影響，起碼對右浮元素有影響*/

23.inline-block+vertical-align:middle 疑似= float:left
24.
<ul>
  <li><i></i></li>
  <li></li>
</ul>
<li>左浮且overflow:hidden，<i>右浮，且設置white-space: nowrap;，按理li應該能夠包含i。
但因爲white-space: nowrap;會換行顯示(但應該偏偏相反啊)
25.我有點明白爲何有時候字體垂直居中對齊會偏下了，多是我設置了line-height，又由於文字或空格分紅了兩行。
26.有時設爲inline-block的子元素，相對父元素上邊會偏下一點點，多是由於它們繼承了父元素的line-height，而父元素的line-heigth與height相等。重設子元素line-height便可。
27.元素的默認樣式優先彷佛高於繼承。
28.inline-block元素裏面放圖片，若是發現元素像是有下內邊距似的，能夠設置元素line-height:0解決。
29.<div.pull-left /><div.overflow />
.overflow設置margin-left:-1px，並不會它自己左移。給.pull-left設置margin-right:-1px就能實現理想的效果。
30.我終於明白爲何有的inline-block元素不能跟兄弟img或者i垂直對齊了，由於它們設置了垂直margin，這個也會影響垂直對齊
31.overflow:hidden有不讓元素與浮動兄弟元素重合的功能，display:inline-block更有不讓垂直margin重合的功能。
32.text-align:center如同text-align:left同樣，會被兄弟浮動元素影響，其對齊位置爲(父元素width-浮動元素width)/2 + 浮動元素width
33.我第一次知道bold和bolder的區別。bolder是相對父元素繼承值"更粗"，而bold大概是等於800，因此bold總大於等於bolder
34.first-child多是選取父元素的第一個元素，而元素集的第一個。
35.<br />也會繼承line-height而得到高度，因此用br來換行時要注意。
36.父容器固定高度，內有一子容器固定高度，其下方有另外一子容器設置overflow:auto指望自適應滾動條。問題是，第二個子容器的高度如何自適應，如何使它不設置固定高度也能實現滾動條的自適應？
能夠給父容器設定overflow:hidden，給它設定height:100%。【當父容器設置overflow:hidden，子容器設置overflow:auto，不只子容器的內容溢出子容器時子容器會出現滾動條，子容器自己溢出父容器時也會出現滾動條】
37.chrome的input被focus會有藍色邊框，能夠添加outline:none處理。
38.給body設置overflow:hidden，若內容溢出時點擊鼠標中鍵仍能夠進行滾動。還要給html設置才行。
39.padding-top,padding-bottom,margin-top,margin-bottom等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。
http://www.webhek.com/vertical-percentages-are-relative-to-container-width-not-height
40.absolute的body的子元素，設定height:100%，其高度會跟隨瀏覽器窗口高度而變化，而不是根據body的height。
緣由是body未設置position:relative，致使子元素根據html定位。
41.hover時設置的background只在hover後開始加載
42.line-height固定的inline-block容器內文字換行，可能不會撐起容器的高度致使容器的高度只有line-height值。可設置height:auto避免。
43.兩行才顯示省略號，只用css的完美實現：
<div style="height: 26px;line-height:12px;width: 8em;font-size:12px;position: relative;overflow: hidden;">
    <p style="display: inline-block;width: 8em;height:12px;line-height: 12px;overflow: hidden;">一二三四五六七八九十九八七六五四三二一</p>
    <p class="ellipsis" style="margin-left:-8em;width:16em;text-overflow: ellipsis;white-space: nowrap;word-break: break-all;overflow: hidden;">一二三四五六七八九十九八七六五四三二一</p>
</div>
44.要一個框不使用px爲單位，實現水平居中。
對這個框設定position:absolute;left:50%;display:inline-block//可能也不用inline-block
對其子元素設定position:relative;left:-50%;
（其實只是這個框的子元素實現水平居中）
44.1 有個有趣的地方是，若是子元素使用margin代替position。則父元素在垂直上會失去高度，而在水平上則不會
44.2 缺點在於，父元素不可避免地擁有佈局，在頁面拉小時會出現滾動條。
我最終使用了父元素寬度100%，height設定爲子元素高度；子元素設定固定高度，設置margin: 0 auto以居中對齊的方式實現水平對齊;
可能垂直對齊會設定父元素height等同body，設定line-height等同高度來實現。
45.控制檯中的盒模型計算有個細節，使用百分比line-height決定高度時盒子的height會是整數，而使用百分比height時盒子的height會帶小數。
46.垂直的margin真的是根據width來計算的。是根據父元素的width計算的。
47.遇到了input中focus字體就上升的問題，把height和line-height設爲等高就能夠了。
47.1出現input二者不等高的緣由，就我來講，多是.input-box設定了border-box;而後將input的height設100%，將input的line-height設爲等同.input-box的height——這點會由於差了邊框的高度而使得line-height比height要低。
這種模型中沒必要要給.input-box設定border-box，給它設定width:auto就能夠了。
48.a會繼承line-height，但不會使用到高度計算；而float的a會根據繼承到的line-height計算高度。
48.1 其實也不奇怪，畢竟p在有行高時會根據行高計算高度。a設定float就會成爲塊元素。
49.默認的vertical-align是baseline吧，這個跟兄弟元素各自的line-height有關。
50.若是容器中沒有文本，vertical-align就不會起效，即便設置的是bottom
51.給span加line-height，在firebug中的探查器裏不會反映到高度上。
52.html的width是窗口的寬度，而其高度是取決於子元素與窗口高度無關。
因此當子元素寬度比窗口大時會出現橫向滾動條，html中設置了width:100%的，都會在右側出現空白。
而設置了height:100%的html的子元素，其高度有可能不會充滿屏幕。
52.1 出現滾動條的緣由是document大於視口
52.1 $(document).width()是包括滾動的橫向寬度
52.2 水平空白解決方案：
var document_elem = $(document),
    oldDocWidth = document_elem.width();
var elem = 子元素
$(window).on('resize', function() {
    var document_width = document_elem.width();
    if(oldDocWidth != document_width){
        elem.css('width', '100%');
    }
    else {
        elem.width(document_width);
    }
    oldDocWidth = document_width;
})

53.父元素只設置font-size，其子元素設置height:100%是沒法與父元素等高的，父元素至少要設置line-height
54.讓子元素決定父元素盒子，多是一種很差擴展的作法。
55.我發現一個有趣的現象，當<a>寬度不足時使得其中文字垂直顯示，形如：
<a>
<i inline-block>(用於顯示圖標)
在
線
客
服
</a>

此時不會有什麼問題，<a>會正確根據<i>的高度計算其自身高度；若是把<i>換成<img>，則<a>計算高度時會有誤差，根據觀察，如同它認爲<img>的高度只有1em。
要避免這個問題，解決方案是爲<a>設置display:block/inline-block

56.9px寬高，邊框寬爲1的盒子，設置border-radius:5px纔是準確的圓。
57.絕對定位的元素會掩蓋兄弟元素，即便在文檔流中它處於兄弟元素的前面。這時要給兄弟元素添加相對定位。
58.絕對定位百分比寬高，會基於定位所基的父元素而而不是直接父容器。
59.透明度代碼
http://blog.csdn.net/freshlover/article/details/17143341

    -webkit-opacity: 0.5;  
    /* Netscape and Older than Firefox 0.9 */  
    -moz-opacity: 0.5;  
    /* Safari 1.x (pre WebKit!) 老式khtml內核的Safari瀏覽器*/  
    -khtml-opacity: 0.5;  
    /* IE9 + etc...modern browsers */  
    opacity: .5;  
    /* IE 4-9 */  
    filter:alpha(opacity=50);  
    /*This works in IE 8 & 9 too*/  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    /*IE4-IE9*/  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  

60.overflow:hidden確實會清除浮動，可是有時候不能設置overflow:hidden或者display:inline-block，這時候須要用
.clear-fix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
61.清除浮動或否是很重要的，不能盲目清除。由於清浮動會擴展父元素的佈局，父元素的box會所以增大一個區域，佔據空間；不清浮動，父元素的box範圍會縮小，box寬高爲0時甚至自身沒法觸發點擊事件，其上的點擊事件通通由子元素冒泡得來。
總之，清除浮動會讓父元素在保持box爲方形的條件下擴展自身box，使box剛好地包含浮動元素。
62.inline-block元素中間插入br或者div以斷行，會在中間產生間距，須要設置vertical-align:top;以消除。
63.top:100%;好像會致使子元素上邊與父元素下邊重合。需加margin-top
64.width設置負數，如同不設置width
65.垂直居中的方法還有top:0;bottom:0;margin-top:auto;margin-bottom:auto;
66.letter-spacing會在最後一個字符右側產生一個空白間距。對text-align的文字，這樣會致使沒法居中對齊；可使用text-indent設置一樣值實現居中對齊。
67.父元素絕對定位，設定padding，子元素設inline-block有寬高，這時父元素內實現部高度可能爲雙倍子元素高度。爲父元素設置行高可解。
68.inline-block元素會被添加行高
69.letter-spacing配合text-indent能夠實現字符中間產生間距並居中對齊
70.當inline-block子元素因過長換行時，父元素即便是inline-block也會擴展爲其父元素的寬度，而不是子元素所佔水平空間的寬度。