如何考察前端对css盒模型的熟悉度?
发布人:zhoulujun@live.cn 点击:
在前端的笔试题中?一般的笔试题是这样的:设 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
延伸阅读:
- 排序算法图文讲解(php,javascript,java)
- 原码, 反码, 补码-减法变加法-同余理论:详解
- IM官网全新蜕变: 改版(第一期)设计总结
- css样式重置的一些方法
- CSS选择器的浏览器支持
- ios自适应:CSS Media Queries for iPads & iPhones
- 深入理解CSS3 gradient斜向线性渐变
- 浏览器滚动条设置与自定义及移动端滚动出现的坑
- CSS box-flex属性,然后弹性盒子模型简介
- 伪元素表单控件默认样式重置与自定义大全
- 【CSS深入】设置不同块级流方向时的属性百分比计算
- CSS3 实现iOS7毛玻璃模糊效果 (iOS7 live blur)
- 垂直居中相关知识总结
- 响应式布局----像素密度与viewport
- 关于css3之transform一些坑的总结-transform对普通元素的N多渲染
- css一些易忽视的点—iCss问题个人汇总
- CSS深入理解流体特性和BFC特性下多栏自适应布局
- web app响应式字体设置!rem之我见
- Retina真实还原1px边框的解决方案