今天想要实现绘制一个三角形，具体代码如下
<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中元素是置换元素的缘故呢？
行内元素又分置换元素和非置换元素；
置换元素是一个很特殊的元素，包括：、、