元素继承（块状元素内的border）
今天想要实现绘制一个三角形，具体代码如下
<div class="outer"><div class="inner"></div></div>
css样式：
.outer{width: 300px; height: 300px; background: #ff0;} .inner{border-top: solid 30px pink; border-bottom: solid 30px blue; border-left: solid 30px red; border-right: solid 30px #000;}
1、此时的效果：
2、如果inner的css样式加上width:0;height:0; 效果：
3、如果inner的css样式加上width:100%; 效果：
如此看来，设置宽度了以后inner元素所占的空间就是content+border。网上搜了一下：
不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。块状元素可继承：text-indent和text-align。列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。表格元素可继承：border-collapse。
但是实际上，width属性是会被继承的，默认情况下是在outer元素的内部，如果设置了width：100%的话，那么我想应该是浏览器执行顺序的问题，浏览器先获取width，渲染结束后再添加上border，这样就会导致上述情况的出现了。
今天又发现了一个类似的现象，先上代码
<li id="a"><button></button></li> <li id="b"></li> <li id="c"><div></div></li>
*{margin: 0; padding: 0; border: 0;} #a button{width: 300px; height: 40px; background: #00af50; border: solid 5px #ccc;} #b{width: 300px; height: 40px; background: #3166ff; border: solid 5px #ccc;} #c{width: 300px; height: 40px; background: #00af50; border: solid 5px #ccc;}
效果如图：
对button设置的宽度后，边框是向内缩的，这是否是li中元素是置换元素的缘故呢？
行内元素又分置换元素和非置换元素；
置换元素是一个很特殊的元素，包括：<img>、<input>、<textarea>、<select>、<object>
这些元素是可以设置宽高，其实这一点与声明了display：inline-block的元素相似。
【1、line-height就是相当于块状元素的height；
2、行内元素与其他元素在同一行中时(1、行内元素在前，块状元素在后，2、两个都是行内元素)，若是后面的元素向左浮动，那么该元素就会跑到前面去
3、行内元素和其他元素的对齐方式是底部对齐
】
于是测试了下，发现
1、input标签中，还有search、submit有发生了同样的情况，而type属性为text、password等input标签是正常的；
2、img的表现是正常的；
3、textarea的默认值与正常现象相同；
4、select也发生了和button同样的状况；
5、最后还剩label和object，前者严格意义上来说不是置换元素，只是它可以包含置换元素罢了，所以它默认为行内元素；object不知为何，我没有设置出宽高。。。
看来不是置换元素的问题，button、submit(input)、search(input)、select标签设置了宽度以后边框是内敛的，虽然知道了这一种现象，但只是知其然而不知其所以然，网上搜了一下也没有相关的解释，看来只能用“特例”一词来解释这“内边框”了。
2017-05-04
另外table元素也出现了同样的情况 ，并且还要特殊一些，如图：
，代码如下
tr{width: 80px;height: 60px; border: 1px solid #E9754C;} th{background: #fff;border: 5px solid #FFB8B8;} td{border: 1px solid #E9754C;}
由此可见，tr只具备宽高，border不管用，th、td可以设置border，但是整个元素是宽高不变。
button、submit(input)、search(input)、select、table，这几个元素，仔细一看，很容易发现这些元素都是已经存在特定的样式了,仔细地检查了一番，发现前面4个标签是因为
box-sizing属性导致的；box-sizing有三个值：inherit，content-box，border-box; border-box就是元素总体大小不变，border向内，content-box就是常规的border向外；
这个属性的兼容性还是很好的，所有浏览器都支持，以后想调整边框，元素大小又要固定，不妨考虑一下box-sizing；
至于table，则是因为display:table-row的缘故，至于具体是什么原因，若是读者兴趣的可以去研究一下（现在table本身用的就很少了）。
