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都是对的