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 絕對(duì)定位精講

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

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

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


<!--方法1:有些彈出層的樣式，也可以用這個(gè)方法居中-->
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%);

<!--某容器內(nèi)居中 方法2 parent-panel內(nèi)的元素水平垂直居中 flex布局-->
<div class="parent-panel">方法2
    <div class="middle-panel">
        <p>深圳站依舊秉承“演講從實(shí)踐出發(fā)稿湿、聽眾從中受益”的原則稚铣，
        在保持北京站特色之余宽涌，針對(duì)微信開發(fā)的新情況重新設(shè)置了議程，內(nèi)容源于實(shí)踐又富于啟發(fā)性可训。
        </p>
        <p>正進(jìn)行微信開發(fā)的開發(fā)團(tuán)隊(duì)（開發(fā)者）、有興趣或即將投身于微信開發(fā)的開發(fā)者、
        想開發(fā)相關(guān)微信應(yīng)用正努力尋找微信開發(fā)團(tuán)隊(duì)的傳統(tǒng)IT企業(yè)材蹬，該會(huì)將是你不容錯(cuò)過的學(xué)習(xí)借鑒成功研發(fā)經(jīng)驗(yàn)、尋找合作的大好機(jī)會(huì)吝镣。
        </p>
        <p>如果你還在猶豫堤器，可以仔細(xì)閱讀一下主辦方總結(jié)的技術(shù)團(tuán)隊(duì)不應(yīng)錯(cuò)過2014年微信開發(fā)者大會(huì)深圳站的十個(gè)理由。
        </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;不用設(shè)置寬度*/
    border:1px solid #888;
}

</style>

Flex 布局教程：語法篇:
容器的屬性: 以下6個(gè)屬性設(shè)置在容器上末贾。

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

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

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

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

• 浮動(dòng)元素和其他任何元素之間不發(fā)生外邊距疊加 (包括和它的子元素).
• 創(chuàng)建了 BFC 的元素不會(huì)和它的子元素發(fā)生外邊距疊加
• 絕對(duì)定位元素和其他任何元素之間不發(fā)生外邊距疊加(包括和它的子元素).
• inline-block 元素和其他任何元素之間不發(fā)生外邊距疊加 (包括和它的子元素).
• 普通流中的塊級(jí)元素的 margin-bottom 永遠(yuǎn)和它相鄰的下一個(gè)塊級(jí)元素的 margin-top 疊加（除非相鄰的兄弟元素clear）
• 普通流中的塊級(jí)元素（沒有 border-top、沒有 padding-top ）的 margin-top 和它的第一個(gè)普通流中的子元素（沒有 clear ）發(fā)生 margin-top 疊加
• 普通流中的塊級(jí)元素（ height 為 auto集索、min-height 為 0屿愚、沒有 border-bottom汇跨、沒有 padding-bottom ）和它的最后一個(gè)普通流中的子元素（沒有自身發(fā)生 margin 疊加或 clear ）發(fā)生 margin-bottom 疊加
• 如果一個(gè)元素的 min-height 為 0、沒有 border渺鹦、沒有 padding扰法、高度為 0 或者 auto、不包含子元素毅厚，那么它自身的外邊距會(huì)發(fā)生疊加

解決方法：

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

BFC: 總結(jié)_1207

3. 行內(nèi)元素吸耿，塊級(jí)元素 區(qū)別

margin在塊元素祠锣、內(nèi)聯(lián)元素中的區(qū)別
HTML（這里說的是html標(biāo)準(zhǔn)，而不是xhtml）里分兩種基本元素咽安，即block和inline伴网。顧名思義，block元素就是以”塊”表現(xiàn)的元素（block-like elements）妆棒，inline元素即是以”行”表現(xiàn)的元素（character level elements and text strings）澡腾。二者表現(xiàn)的主要差別在于，在頁面文檔中block元素另起一行開始糕珊，并獨(dú)占一行动分。inline元素則同其他inline元素共處一行。

• block元素（塊元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(隨著html5標(biāo)準(zhǔn)的推進(jìn)红选，一些元素將被廢除澜公，而一些新的元素將被引入)注意的是并非所有的block元素的默認(rèn)display屬性都是block，像table這種display:table的元素也是block元素喇肋。
• inline元素（內(nèi)聯(lián)元素）大致有：#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）。他們區(qū)別一般inline元素（相對(duì)而言蝶防，稱non-replaced element）是：這些元素?fù)碛袃?nèi)在尺寸(intrinsic dimensions),他們可以設(shè)置width/height屬性甚侣。他們的性質(zhì)同設(shè)置了display:inline-block的元素一致。
  置換元素（replaced element）主要是指 img, input, textarea, select, object 等這類默認(rèn)就有 CSS 格式化外表范圍的元素间学。進(jìn)而可知殷费，非置換元素（non-replaced element）就是除了 img, input, textarea, select, object 等置換元素以外的元素。
  margin在塊級(jí)元素下菱鸥，他的性能可以完全體現(xiàn)宗兼，上下左右任你設(shè)定。且記住塊級(jí)元素的margin的參照基準(zhǔn)是前一個(gè)元素即相對(duì)于自身之前的元素有margin距離氮采。如果元素是第一個(gè)元素殷绍，則就是相對(duì)于父元素的margin距離（但第一個(gè)元素相對(duì)于父元素margin-top而父元素又沒有設(shè)定padding-top/border-top的話要需要印證上面的垂直外邊距合并的知識(shí)）
  margin也能用于內(nèi)聯(lián)元素，這是規(guī)范所允許的鹊漠，但是** margin-top和margin-bottom對(duì)內(nèi)聯(lián)元素（對(duì)行）的高度沒有影響**主到，并且由于邊界效果(margin效果)是透明的茶行，他也沒有任何的視覺影響。
  這是因?yàn)檫吔鐟?yīng)用于內(nèi)聯(lián)元素時(shí)不改變?cè)氐男懈叨鹊窃浚绻阋淖儍?nèi)聯(lián)元素的行高即類似文本的行間距畔师，那么你只能使用這三個(gè)屬性：line-height，fong-size牧牢，vertical-align看锉。請(qǐng)記住，這個(gè)影響內(nèi)聯(lián)元素高度的是line-height而不是height塔鳍，因?yàn)閮?nèi)聯(lián)元素是一行行的伯铣，定一個(gè)height的話，那這到底是整段inline元素的高呢轮纫？還是inline元素一行的高呢腔寡？這都說不準(zhǔn)，所以統(tǒng)一都給每行定一個(gè)高掌唾，只能是line-height了放前。
  margin-top/margin-bottom對(duì)內(nèi)聯(lián)元素沒有多大實(shí)際效果，不過margin-left/margin-right還是能夠?qū)?nèi)聯(lián)元素產(chǎn)生影響的糯彬。應(yīng)用margin:10px 20px 30px 40px;凭语，左邊這個(gè)css如果寫在inline元素上，他的效果大致是情连，上下無效果叽粹，左邊離他相鄰元素或者文本距離為40px览效，右邊離他相鄰元素或者文本距離為20px却舀。你可以自行嘗試一番。
  最后在內(nèi)聯(lián)元素中還有上文我們提到的非可置換inline元素（non-replaced element）锤灿，這些個(gè)元素img|input|select|textarea|button|label雖然是內(nèi)聯(lián)元素挽拔，但margin依舊可以影響到他的上下左右！
  總結(jié)下來margin 屬性可以應(yīng)用于幾乎所有的元素但校，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素螃诅，而且垂直外邊距對(duì)非置換內(nèi)聯(lián)元素（non-replaced inline element）不起作用。

4. media多屬性設(shè)置

<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怎么設(shè)置

移動(dòng)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
屬性用來改變默認(rèn)的 CSS 盒模型 對(duì)元素寬高的計(jì)算方式状囱。這個(gè)屬性可以用于模擬那些非正確支持標(biāo)準(zhǔn)盒模型的瀏覽器的表現(xiàn)术裸。

• content-box
  默認(rèn)值，標(biāo)準(zhǔn)盒模型
• border-box
  width
  與 height
  包括內(nèi)邊距（padding）與邊框（border）亭枷，不包括外邊距（margin）袭艺。這是IE 怪異模式（Quirks mode）使用的 盒模型 。

$.width()
注意.width()
總是返回內(nèi)容寬度,不管CSS box-sizing屬性值叨粘。截至jQuery 1.8猾编，這可能需要檢索的CSS的寬度加加上box-sizing的屬性瘤睹，然后當(dāng)元素有 box-sizing: border-box
時(shí)候，減去個(gè)元素上任何潛在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的元素都沒有了默認(rèn)的寬度瘪撇，寬度由子元素絕定获茬。

8.清除浮動(dòng)

經(jīng)驗(yàn)分享：CSS浮動(dòng)(float,clear)通俗講解
CSS清除浮動(dòng)float的三種方法總結(jié)，為什么清浮動(dòng)倔既？浮動(dòng)會(huì)有那些影響锦茁？

這里我沒有給最外層的DIV.outer 設(shè)置高度，但是我們知道如果它里面的元素不浮動(dòng)的話叉存，那么這個(gè)外層的高是會(huì)自動(dòng)被撐開的码俩。但是當(dāng)內(nèi)層元素浮動(dòng)后挑宠，就出現(xiàn)了一下影響：

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

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

缺點(diǎn)： 我想說這并不是一個(gè)好方法著瓶，盡管它兼容所有瀏覽器并且隨用隨清瞳秽。這個(gè)方法需要添加大量無語義的html元素瓣履，你能想象一個(gè)并不算復(fù)雜的footer里就使用4次div.clear嗎？天哪练俐！

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

原理：使用overflow屬性來清除浮動(dòng)有一點(diǎn)需要注意袖迎，overflow屬性共有三個(gè)屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動(dòng)腺晾，但切記不能使用visible值燕锥，如果使用這個(gè)值將無法達(dá)到清除浮動(dòng)效果，其他兩個(gè)值都可以悯蝉，其區(qū)據(jù)說在于一個(gè)對(duì)seo比較友好归形，另個(gè)hidden對(duì)seo不是太友好，其他區(qū)別我就說不上了鼻由，也不浪費(fèi)時(shí)間暇榴。

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

方法三： 據(jù)說是最高大上的方法 :after 方法：（注意：作用于浮動(dòng)元素的父親）

先說原理：這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng)，他就是利用:after和:before來在元素內(nèi)部插入兩個(gè)元素塊蕉世，從面達(dá)到清除浮動(dòng)的效果蔼紧。其實(shí)現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個(gè)div.clear標(biāo)簽狠轻，而outer利用其偽類clear:after在元素內(nèi)部增加一個(gè)類似于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有點(diǎn)類似哈误，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問題
優(yōu)點(diǎn)：瀏覽器支持好哩至，不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用躏嚎，如：騰迅，網(wǎng)易菩貌，新浪等等）
缺點(diǎn)：代碼多卢佣，不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用箭阶，才能讓主流瀏覽器都支持
建議：推薦使用虚茶，建議定義公共類，以減少CSS代碼

方法優(yōu)劣總結(jié)：清除浮動(dòng)方式總結(jié)

• 父級(jí)div定義height
  原理：父級(jí)div手動(dòng)定義height仇参，就解決了父級(jí)div無法自動(dòng)獲取到高度的問題嘹叫。
  優(yōu)點(diǎn)：簡(jiǎn)單、代碼少诈乒、容易掌握
  缺點(diǎn)：只適合高度固定的布局罩扇，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)怕磨，會(huì)產(chǎn)生問題
  建議：不建議使用喂饥，只建議高度固定的布局時(shí)使用
  結(jié)尾處加空div標(biāo)簽 clear:both
  原理：添加一個(gè)空div，利用CSS提供的clear:both清楚浮動(dòng)肠鲫，讓父級(jí)div自動(dòng)獲取高度
  優(yōu)點(diǎn)：簡(jiǎn)單员帮、代碼少，瀏覽器支持好导饲，不容易出現(xiàn)怪問題
  缺點(diǎn)：如果頁面浮動(dòng)布局多捞高，就要增加很多空div
  建議：不推薦使用，但此方法是目前使用很頻繁的一種方法

• 父級(jí)div定義偽類:after和zoom
  原理：IE8以上和非IE瀏覽器才支持渣锦，原理類似2硝岗，zoom（IE專有屬性）可解決ie6，ie7浮動(dòng)問題
  優(yōu)點(diǎn)：瀏覽器支持好泡挺、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用辈讶，如：騰迅命浴，網(wǎng)易娄猫，新浪等等）
  缺點(diǎn)：代碼多、不少初學(xué)者不理解原理生闲，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持媳溺。
  建議：推薦使用，建議定義公共類碍讯，以減少css代碼
• 父級(jí)div定義overflow:hidden
  原理：必須定義width或zoom:1悬蔽，同時(shí)不能定義height，使用overflow：hidden時(shí)捉兴，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域高度
  優(yōu)點(diǎn)：簡(jiǎn)單蝎困、代碼少录语、瀏覽器支持好
  缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽鐣?huì)被隱藏
  建議：只推薦沒有使用position的朋友
• 父級(jí)div定義overflow：auto
  原理：必須定義width或zoom:1禾乘，同時(shí)不能定義height澎埠，使用overflow:auto時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
  優(yōu)點(diǎn)：簡(jiǎn)單始藕、代碼少蒲稳、瀏覽器支持好
  缺點(diǎn)：內(nèi)部寬高超過父級(jí)div時(shí)，會(huì)出現(xiàn)滾動(dòng)條伍派。
  建議：不推薦使用江耀，如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧。
• 父級(jí)div 也一起浮動(dòng)
  原理：所有代碼一起浮動(dòng)诉植，就變成了一個(gè)整體
  優(yōu)點(diǎn)：沒有優(yōu)點(diǎn)
  缺點(diǎn)：會(huì)產(chǎn)生新的浮動(dòng)問題祥国。
  建議：不推薦使用，只作了解晾腔。
• 父級(jí)div定義 display:table
  原理：將div屬性變成表格
  優(yōu)點(diǎn)：沒有優(yōu)點(diǎn)
  缺點(diǎn)：會(huì)產(chǎn)生新的未知問題系宫。
  建議：不推薦使用，只作了解建车。
• 結(jié)尾處加 br標(biāo)簽 clear:both
  原理：父級(jí)div定義zoom:1來解決IE浮動(dòng)問題扩借，結(jié)尾處加 br標(biāo)簽 clear:both
  建議：不推薦使用，只作了解缤至。

10.當(dāng)文本溢出包含元素時(shí)用...潮罪。

• 單行：

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

• 多行：

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

9. 下列CSS表達(dá)式錯(cuò)誤的是

.a .b .c 是正確的
font: 12px是錯(cuò)的 font不能用來設(shè)置font-size
overflow: visible``visibility: visible都是對(duì)的