直观地看应该选D，
成都创新互联公司专业为企业提供罗源网站建设、罗源做网站、罗源网站设计、罗源网站制作等企业网站建设、网页设计与制作、罗源企业网站模板建站服务，10多年罗源做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
稍微解释一下，border是边框的宽度，inbox在outbox里面，图片在inbox里面，所以图片到最外层外边缘的距离应该先加上这两个边框的宽度：10+20 = 30；
同时，在inbox里，还有margin，表示页边距，也就是说在页面的每个边都留出这么多的空白，因此距离得再加上margin的值10：30+10 = 40；
再有，padding表示的是填充，这里，我们把它默认为是内填充，也就是可以想象成多填充一次margin，因此也要加上：40+10 = 50。
因此最终答案是50，选D。
但是这道题出的不严密，因为对于不同版本的浏览器，对于padding，border等的定义是不同的，比如有个叫“box-sizing”的属性，若定义成“box-sizing: content-box”，和定义成“box-sizing: border-box"时浏览器对padding和border等的解析不同，而不同的浏览器默认采取的解析方法不同。
测试候选人的CSS3技能的一个强大的测试例子。这个按钮具有很多样式，我们一起来看看：
他们是如何处理多边框的？在这里，box-shadow可能是最好的办法。
他们是使用text-transform:uppercase;将文本转换成大写吗？这将是最好的。
他们是如何处理星星？伪元素将是一种很好的候选方法。他们是使用了"unicode"还是字体图标？
他们有没有使用text-shadow做微妙的处理？
他们是怎么把按钮的主要背景制作出来？使用linear-gradient技巧将会是一个好技巧，或者box-shadow。
他们是使用嵌套来实现的圆角吗？
我希望我没有破坏Mobify的招聘过程！但老实说，我认为这些东西是假装不出来的。你可以做它，讨论它，或者你可以不做任何事情。
1.position:absolute+transform:translate(-50%,-50%)
2.position:absolute+margin-top:-100px+margin-left:-100px(需要直到div的宽高)
3.flex
4.绝对定位的top，left，bottom，right都设置为0，然后通过margin:auto实现水平垂直居中
5.display:table-cell;vertical-align:middle;text-align:center
6.calc函数计算实现
1. DOM结构 ：元素不会渲染
2. 事件监听 ：不能监听DOM事件
3. 继承 ：子元素不会继承
4. 性能 ：改变此属性会重排，性能较差
1. DOM结构 ：元素会渲染
2. 事件监听 ：能监听DOM事件
3. 继承 ：子元素会继承，可以通过visibility:visible;来取消继承
4. 性能 ：改变此属性会重绘，性能较好
1. DOM结构 ：元素会渲染
2. 事件监听 ：能监听DOM事件
3. 继承 ：子元素会继承，而且不能通过opcity：1;来取消隐藏
4. 性能 ：改变此属性会重绘，性能较好
window.divicePixelRatio=2(默认)
意思是：我们css中1px相当于实际移动端设备2px
1.border-width:0.5px
2.box-shadow内阴影模拟边框，
box-shadow:inset 0px -1px 1px 1px red;
3.通过viewport设置rem的基准值，就可以直接写rem了，较好的解决方案
4.伪类+transform
通过:after或:before设置border，结合定位
两侧宽度固定，中间宽度自适应
所以我们要尽量少使用以上属性和方法
这道题目选择B，因为：
css的外部样式表就是以xxx.css这样形式存在的，后缀就是.css。
style/style这是页面内的样式表写法，是嵌套的页面内的，外部css文件是不需要的。
css这东西你也明白，外国人搞的，中文当然是不支持啦。
使用外部样式表确实能使页面更简洁的。
希望能帮到你
