1、background-clip:border-box/padding-box/content-box;
<div></div>
div{
box-sizing:border-box;
width:100px;
padding:10px;
background-color:yellow;
background-clip:content-box;
}
问黄色区域多宽？
看不到黄色，因为没有内容高度是0，但是宽度是80px。
分析：
兼容性：除IE8及以下，都可以。
作用：背景使用的区域[border-box,包括边框在内的区域;padding-box,包括padding在内的区域;content-box,包括内容在内的区域。
background-clip:默认就是border-box。
对于这段代码的表现呢？
div {
box-sizing: border-box;
width: 300px;
padding:10px;
height: 100px;
border:10px dotted #ccc;
background:url(q.png);
background-repeat: no-repeat;
background-clip: border-box;
}
将背景改成了图片，猜一下现在的结果呢？图片是放在哪个位置呢？
在此就不得不提一下：background-origin 属性。
可选值和background-clip一样,它规定了背景是从什么位置开始的，当然都是对应区域的左上角为起点。默认值是padding-box，对，就是因为它的默认值是padding-box，所以把background-clip压制住了,但是还需要注意一点：此时background-repeat:no-repeat，如果设为其它或者没有设置该值，background-origin无效，会认为从border-box开始，尽管它的默认值是padding-box。
by the way,就来一个应用实例：
对于上图来说，左右两边在颜色分界线这是稍微有一点区别的。那么分析这样一个场景，其长度可拉伸，保持左右两边小部分不变。如何实现？
常见的思路应该是这三部分图片组合起来，那么又要用几个标签，要写多少代码？
思考一下~~~上代码
<div class="button"></div>
.button{
width: 200px;
height: 100px;
border-width:0 11px;
border-style:dashed;
border-color: transparent;
background:url(left.png),url(center.png),url(right.png);
background-position: left,center,right;
background-repeat: no-repeat,repeat-x,no-repeat;
background-clip: border-box,content-box,border-box;
background-origin: border-box,content-box,border-box;
}
就是这么简单，so easy~当然这里需要注意一点，左右border的宽度要等于切割下来的图片部分，不然就会有间隙。
【 兼容除IE8外所有主流浏览器】
2、使如下代码可以使得XY并列排放：
<div class="parent">
<div class="xx">X</div>
<div class="yy">Y</div>
</div>
A:.parent{display: flex;}
B:.xx{float: left;} .yy{width: 100%;}
还有常见的display:inline/inline-block
分析：
A、父元素使用display:flex后，子元素的float、clear、verticle-align将失效。所以呢，如果对于X，Y没有添加任何约束的话，XY将会按照float的样子来布局。如果设置.yy{width:100%;}的话，由于默认flex-wrap:nowrap;所以是X就按inline显示，Y排在X右边，占满改行剩余位置。
B、再理解float：float的效果不就是使文字环绕么，怎么做到与宽度100%的块级元素站在一行呢？使用float的元素，破坏了其inline-box，使其高度为0，和不存在一样；但有其包裹性，其宽度上实际存在，尽管脱离原来的文档流，但是内容上仍然不会像position:absolute那样与正常文档重叠。
by the way，常见的两列布局，一边定宽，另一边自适应:float+padding；position:absolute+padding
3、<div class="parent"></div>哪些宽度是0？
A.parent{display:flex;}
B.parent{display:inline;}
C.parent{display:block;}
D.parent{display:table;}
分析：我开始的猜测是考察行内元素与块级元素的，那么flex弹性盒子占满全行，block一行，inline行内肯定是0，table 是块级的占满，
然而display:table的宽度却是0，好桑心。
谁能这到底是为什么？？？
不过再考虑到常用的父元素display:table子元素display:table-cell的垂直居中方法，就蒙了。这table 到底是个什么类型的元素？
【2016.4.11更新，问题待解决】
�看到这篇文章：http://www.iyunlu.com/view/css-xhtml/55.html 里说
display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。
但是利用闭合浮动简单测试一下，并没有看在BFC方面display:table和display:table-cell的差异。实在是不知道他们的差异到底体现在哪里，还希望各位能指点一二。
然后结合table平时的使用，让我更倾向于觉得table是和a标签类似，他们的宽度都是靠内容支撑起来的，因为无论table标签还是display:table的元素宽度就是内容的宽度。但是它在布局时候却又总是独占一行，这一点又像块级元素一样，让人真的搞不清它的性别了好么。。。
总之呢，table是个很特殊的元素，宽度由内容决定，但是又吃着碗里瞧着锅里，布局中它会独占一行。
如果各位有什么想法，欢迎交流~
