首页 > webfront > style > css3 > > 正文

如何考察前端对css盒模型的熟悉度?

点击:

在前端的笔试题中?一般的笔试题是这样的:设 demo{width:100px;height:50px;padding:3px;margin:3px;border:3px;}则,demo的宽度多少??

在前端的笔试题中,一般的笔试题是这样的:

.demo{width: 100px;height: 50px;padding: 5px;margin: 5px;border: 1px;}
//html
<div class="demo">demo</div>

demo在页面占位 长宽分别为多少?

一般回答即为:100+5*2+5*2+1*50+5*2+5*2+1*2。

但是,真的是这样的吗?

是在现代浏览器还是老旧的IE?box-size属性如何?这些都清楚了,那么再设置:

.box{width: 500px;height: 300px;}
.demo{width: 20%;height:10%;padding: 1%;margin: 1%;border: 1px solid #ccc;}
//html
<div class="box"><div class="demo">demo</div></div>

demo在页面占位 长宽分别为多少?

到这里,就卡死了一部分求职者。但是,到这里

…………真的偷窥到css盒模型的真()蒂了吗?


偷窥

比如如下,

.box,.box2{width: 500px;height: 300px;}
.box2{writing-mode:vertical-lr;}
.demo{width: 20%;height:10px;padding: 1%;margin: 1%;border: 1px solid #ccc;}

demo 宽高?分别是多少??

关于writing-mode属性与盒模型的计算,可以推荐看《设置不同块级流方向时的属性百分比计算

css盒模型也也没用想当然地那么简单。

关于这么方面的问题,推荐访问:https://github.com/chokcoco/iCSS