1. 居中不定高div樣式

參考：http://www.haorooms.com/post/css_div_juzhong

垂直水平居中定高div

.parent-panel2{
    width:100%;
    height:400px;
    border:1px solid #888;
  position: relative;
}
.middle-panel2{
  position: absolute;
    width:300px;
  height: 100px;
    border:1px solid #888;
  top:50%;
  margin-top:-50px;
left: 50%;
  margin-left: -150px;
}

或CSS position: absolute 絕對定位精講

.div2 {
  position: absolute;
  border: 1px solid #888;
  width: 100px;
  height: 100px;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

垂直居中不固定高寬div的方法

相對頁面居中
.div2 {
  position: absolute;
  border: 1px solid #888;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%)
}


<!--方法1:有些彈出層的樣式，也可以用這個方法居中-->
position: fixed;//absolute
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

<!--某容器內居中 方法2 parent-panel內的元素水平垂直居中 flex布局-->
<div class="parent-panel">方法2
    <div class="middle-panel">
        <p>深圳站依舊秉承“演講從實踐出發、聽眾從中受益”的原則，
        在保持北京站特色之余，針對微信開發的新情況重新設置了議程，內容源于實踐又富于啟發性。
        </p>
        <p>正進行微信開發的開發團隊（開發者）、有興趣或即將投身于微信開發的開發者、
        想開發相關微信應用正努力尋找微信開發團隊的傳統IT企業，該會將是你不容錯過的學習借鑒成功研發經驗、尋找合作的大好機會。
        </p>
        <p>如果你還在猶豫，可以仔細閱讀一下主辦方總結的技術團隊不應錯過2014年微信開發者大會深圳站的十個理由。
        </p>
    </div>
</div>

<style type="text/css">
.parent-panel{
    width:100%;
    height:400px;
    border:1px solid #888;
    
    /**主要代碼*/
     display: flex;
    align-items: center;
    justify-content: center;
}
.middle-panel{
    /*width:500px;不用設置寬度*/
    border:1px solid #888;
}

</style>

Flex 布局教程：語法篇:
容器的屬性: 以下6個屬性設置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content: 水平居中
• align-items：垂直居中
• align-content

2. 相鄰div之間的margin,怎樣不覆蓋

參考：Collapsing margins——合并的外邊距

挨著的、且沒有任何東西分割的 兩個普通元素會在垂直方向上合并 margin
1.父子毗鄰元素Adjacent siblings
毗鄰元素的外邊距會合并（當靠后的元素 清除浮動 時除外)。
2.上下毗鄰元素Adjacent siblings
如果塊元素的 margin-top 與它的第一個子元素之間沒有border, padding, inline content, 或 clearance 分隔，或者塊元素的 margin-bottom 與它的最后一個子元素之間沒有padding, inline content, height, min-height, or max-height 分隔，那么外邊距會合并。
3.空塊元素
如果塊元素 margin-top 與 margin-bottom 之間沒有border, padding, inline content, height, 與min-height來分隔， 那么它的上下外邊距合并。

• 浮動元素和其他任何元素之間不發生外邊距疊加 (包括和它的子元素).
• 創建了 BFC 的元素不會和它的子元素發生外邊距疊加
• 絕對定位元素和其他任何元素之間不發生外邊距疊加(包括和它的子元素).
• inline-block 元素和其他任何元素之間不發生外邊距疊加 (包括和它的子元素).
• 普通流中的塊級元素的 margin-bottom 永遠和它相鄰的下一個塊級元素的 margin-top 疊加（除非相鄰的兄弟元素clear）
• 普通流中的塊級元素（沒有 border-top、沒有 padding-top ）的 margin-top 和它的第一個普通流中的子元素（沒有 clear ）發生 margin-top 疊加
• 普通流中的塊級元素（ height 為 auto、min-height 為 0、沒有 border-bottom、沒有 padding-bottom ）和它的最后一個普通流中的子元素（沒有自身發生 margin 疊加或 clear ）發生 margin-bottom 疊加
• 如果一個元素的 min-height 為 0、沒有 border、沒有 padding、高度為 0 或者 auto、不包含子元素，那么它自身的外邊距會發生疊加

解決方法：

為父元素設置 BFC(包括overflow:auto) 或 padding 或 border (解決父子重疊)
兄弟元素間設置 float 或 inline-block 或 absolute(創建BFC不一定可以，設置overflow就不可以)
寫結構的時候最好用一個方向，要不都 top 要不都 bottom

BFC: 總結_1207

3. 行內元素，塊級元素 區別

margin在塊元素、內聯元素中的區別
HTML（這里說的是html標準，而不是xhtml）里分兩種基本元素，即block和inline。顧名思義，block元素就是以”塊”表現的元素（block-like elements），inline元素即是以”行”表現的元素（character level elements and text strings）。二者表現的主要差別在于，在頁面文檔中block元素另起一行開始，并獨占一行。inline元素則同其他inline元素共處一行。

• block元素（塊元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(隨著html5標準的推進，一些元素將被廢除，而一些新的元素將被引入)注意的是并非所有的block元素的默認display屬性都是block，像table這種display:table的元素也是block元素。
• inline元素（內聯元素）大致有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON
• 其中有類特殊的元素：如img|input|select|textarea|button|label等，他們被稱為可置換元素（Replaced element）。他們區別一般inline元素（相對而言，稱non-replaced element）是：這些元素擁有內在尺寸(intrinsic dimensions),他們可以設置width/height屬性。他們的性質同設置了display:inline-block的元素一致。
  置換元素（replaced element）主要是指 img, input, textarea, select, object 等這類默認就有 CSS 格式化外表范圍的元素。進而可知，非置換元素（non-replaced element）就是除了 img, input, textarea, select, object 等置換元素以外的元素。
  margin在塊級元素下，他的性能可以完全體現，上下左右任你設定。且記住塊級元素的margin的參照基準是前一個元素即相對于自身之前的元素有margin距離。如果元素是第一個元素，則就是相對于父元素的margin距離（但第一個元素相對于父元素margin-top而父元素又沒有設定padding-top/border-top的話要需要印證上面的垂直外邊距合并的知識）
  margin也能用于內聯元素，這是規范所允許的，但是** margin-top和margin-bottom對內聯元素（對行）的高度沒有影響**，并且由于邊界效果(margin效果)是透明的，他也沒有任何的視覺影響。
  這是因為邊界應用于內聯元素時不改變元素的行高度，如果你要改變內聯元素的行高即類似文本的行間距，那么你只能使用這三個屬性：line-height，fong-size，vertical-align。請記住，這個影響內聯元素高度的是line-height而不是height，因為內聯元素是一行行的，定一個height的話，那這到底是整段inline元素的高呢？還是inline元素一行的高呢？這都說不準，所以統一都給每行定一個高，只能是line-height了。
  margin-top/margin-bottom對內聯元素沒有多大實際效果，不過margin-left/margin-right還是能夠對內聯元素產生影響的。應用margin:10px 20px 30px 40px;，左邊這個css如果寫在inline元素上，他的效果大致是，上下無效果，左邊離他相鄰元素或者文本距離為40px，右邊離他相鄰元素或者文本距離為20px。你可以自行嘗試一番。
  最后在內聯元素中還有上文我們提到的非可置換inline元素（non-replaced element），這些個元素img|input|select|textarea|button|label雖然是內聯元素，但margin依舊可以影響到他的上下左右！
  總結下來margin 屬性可以應用于幾乎所有的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，而且垂直外邊距對非置換內聯元素（non-replaced inline element）不起作用。

4. media多屬性設置

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

5. rem怎么設置

移動web適配利器-rem

6. 盒模型: 求寬度

.outer{
  width: 500px;
  height: 300px;
  border: 1px solid red;
  padding: 10px;
}
.box1 {
  height: 200px;
  border: 1px black solid;
  padding: 5px;
  margin: 20px;
}

求$(".box1").width()
盒模型width是content .
答案：448

box-sizing
屬性用來改變默認的 CSS 盒模型 對元素寬高的計算方式。這個屬性可以用于模擬那些非正確支持標準盒模型的瀏覽器的表現。

• content-box
  默認值，標準盒模型
• border-box
  width
  與 height
  包括內邊距（padding）與邊框（border），不包括外邊距（margin）。這是IE 怪異模式（Quirks mode）使用的 盒模型 。

$.width()
注意.width()
總是返回內容寬度,不管CSS box-sizing屬性值。截至jQuery 1.8，這可能需要檢索的CSS的寬度加加上box-sizing的屬性，然后當元素有 box-sizing: border-box
時候，減去個元素上任何潛在border和padding值。為了避免這種問題，使用.css( "width" )而非.width()。

7. 畫布局

<div id="page">
  <div class="main"><div class="sub">sub</div></div>
  <div class="nav">nav</div>
</div>
#page {
  border: 1px solid red;
  width: 520px;
}
.nav {
  width: 200px;
  float: right;
}
.main {
  width: 200px;
  float: left;
  padding-left: 110px;
}
.sub {
  width: 100px;
  float: left;
  margin: 10px 10px 10px -100px;
}
.main {
  border: 1px solid yellow;
}
.nav,
.sub {
  border: 1px dashed #000;
  height: 300px;
}
.sub {
  /*   height: 280px; */
}

9CA715DB-00A6-4D87-8224-2DAE536672B6.png

float 和 absolute的元素都沒有了默認的寬度，寬度由子元素絕定。

8.清除浮動

經驗分享：CSS浮動(float,clear)通俗講解
CSS清除浮動float的三種方法總結，為什么清浮動？浮動會有那些影響？

這里我沒有給最外層的DIV.outer 設置高度，但是我們知道如果它里面的元素不浮動的話，那么這個外層的高是會自動被撐開的。但是當內層元素浮動后，就出現了一下影響：

（1）：背景不能顯示 （2）：邊框不能撐開 （3）：margin 設置值不能正確顯示
方法一：添加新的元素 、應用 clear：both；

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

缺點： 我想說這并不是一個好方法，盡管它兼容所有瀏覽器并且隨用隨清。這個方法需要添加大量無語義的html元素，你能想象一個并不算復雜的footer里就使用4次div.clear嗎？天哪！

方法二：父級div定義 overflow: auto（注意：是父級div也就是這里的 div.outer）

原理：使用overflow屬性來清除浮動有一點需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達到清除浮動效果，其他兩個值都可以，其區據說在于一個對seo比較友好，另個hidden對seo不是太友好，其他區別我就說不上了，也不浪費時間。

.over-flow{ overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題}

方法三： 據說是最高大上的方法 :after 方法：（注意：作用于浮動元素的父親）

先說原理：這種方法清除浮動是現在網上最拉風的一種清除浮動，他就是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似于clear:both方法，只是區別在于:clear在html插入一個div.clear標簽，而outer利用其偽類clear:after在元素內部增加一個類似于div.clear的效果。下面來看看其具體的使用方法：

.outer {zoom:1;} /*==for IE6/7 Maxthon2==*/ .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多，不少初學者不理解原理，要兩句代碼結合使用，才能讓主流瀏覽器都支持
建議：推薦使用，建議定義公共類，以減少CSS代碼

方法優劣總結：清除浮動方式總結

• 父級div定義height
  原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
  優點：簡單、代碼少、容易掌握
  缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
  建議：不建議使用，只建議高度固定的布局時使用
  結尾處加空div標簽 clear:both
  原理：添加一個空div，利用CSS提供的clear:both清楚浮動，讓父級div自動獲取高度
  優點：簡單、代碼少，瀏覽器支持好，不容易出現怪問題
  缺點：如果頁面浮動布局多，就要增加很多空div
  建議：不推薦使用，但此方法是目前使用很頻繁的一種方法

• 父級div定義偽類:after和zoom
  原理：IE8以上和非IE瀏覽器才支持，原理類似2，zoom（IE專有屬性）可解決ie6，ie7浮動問題
  優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
  缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。
  建議：推薦使用，建議定義公共類，以減少css代碼
• 父級div定義overflow:hidden
  原理：必須定義width或zoom:1，同時不能定義height，使用overflow：hidden時，瀏覽器會自動檢查浮動區域高度
  優點：簡單、代碼少、瀏覽器支持好
  缺點：不能和position配合使用，因為超出的尺寸會被隱藏
  建議：只推薦沒有使用position的朋友
• 父級div定義overflow：auto
  原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
  優點：簡單、代碼少、瀏覽器支持好
  缺點：內部寬高超過父級div時，會出現滾動條。
  建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
• 父級div 也一起浮動
  原理：所有代碼一起浮動，就變成了一個整體
  優點：沒有優點
  缺點：會產生新的浮動問題。
  建議：不推薦使用，只作了解。
• 父級div定義 display:table
  原理：將div屬性變成表格
  優點：沒有優點
  缺點：會產生新的未知問題。
  建議：不推薦使用，只作了解。
• 結尾處加 br標簽 clear:both
  原理：父級div定義zoom:1來解決IE浮動問題，結尾處加 br標簽 clear:both
  建議：不推薦使用，只作了解。

10.當文本溢出包含元素時用...。

• 單行：

tex{
  width: 40px;
  border: 1px solid blue;
 white-space:nowrap;/*不換行*/
  text-overflow: ellipsis;
  overflow: hidden;/*必須設置*/
}

• 多行：

.tex {
  width: 40px;
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;/*必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 */
  -webkit-line-clamp: 2;/*用來限制在一個塊元素顯示的文本的行數。*/
  -webkit-box-orient: vertical;/*必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。*/
}

9. 下列CSS表達式錯誤的是

.a .b .c 是正確的
font: 12px是錯的 font不能用來設置font-size
overflow: visible``visibility: visible都是對的