直观地看应该选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这东西你也明白,外国人搞的,中文当然是不支持啦。
使用外部样式表确实能使页面更简洁的。
希望能帮到你