interview record 20160822
面试公司
大连云匠软件
面试职位
Web前端开发
面试方式
电话面试
总结
问了一些列范围超级广的问题,不过我感觉大部分问题的答案,面试官还是比较满意的,有一些小问题没有答上来,我觉的并不是因为自己没有能力,其实就是所谓的“约书亚树”道理,当你不明白或者不知道一个事情的时候,如果没有机会去了解它,确实可能永远不可能了解了。就好比这次面试,如果面试官不问我,而我项目经验又比较匮乏,确实真的不知道啊。
有两个问题我特意去网上查了一下,因此这里特意记录下来,知道的就无视吧,不知道的共勉吧。
display:inline-block为默认样式的标签有哪些?
这个问题我去网上查了一圈,最终按我的理解,这个问题答案的起点应该始于,HTML中有哪些替代标签?
那么就来查概念吧,替换标签是浏览器根据其标签的元素与属性来判断具体显示内容的标签。比如常见的input,根据type属性的值会生成不同功能及样式的标签。所以举一反三咯,a也是,img也是,textarea也是,select也是,因为这些标签本身并没有内容,它们的内容依赖于属性,因此是可”替换”的。
值得一提的是,替换标签均可以增加行高(line-height),还可以调整baseline(vertical-align),废话,因为人家是inline嘛。
内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height
那么反过来,非替换标签就是浏览器根据其标签内容直接判断具体显示内容的标签。这个就很常见了,因为浏览器中的标签大部分都是非替换的,比如div, p等等。非替换元素添加padding-top或padding-bottom,不影响行框高度,但内容区高度会变化,margin-top,margin- bottom对行框没有任何影响。添加左右边距会影响非替换元素水平位置。要使非替换元素在父元素框内居中,可以设定line-height = 父元素框的高度。
使用display:inline-block时,标签之间的空格如何解决(非margin)?
这个问题是面试官连着上面的问题问的,当时直接就蒙逼了。后来挂了电话之后,回到电脑上试了一下,这个问题其实以前也确实遇到过,只不过没有在意罢了。
这个问题的表现类似于这样:
其中第一行中的input之间有一个小小的空格,然后呢,源码中并没有类似的的空格,然而真的没有吗,并不是的,这里的空格其实是input后跟着的那个换行符,要解决这个问题,下边的大神博客给了N种方法,我并没有挨个试,因为我没有额外的ie浏览器进行验证,只挑了几个简单易行的。
- 可以不写换行符,直接把元素写到一行,如果觉的可读性不行,那就把换行符写到块级注释中。
- 可以使用margin为负值进行调整,但是这个不推荐,因为空格宽度因浏览器不同而不同。
- 可以使用无闭合标签
- 可以对父元素使用
font-size: 0;
这几个方法我亲测有效,其他方法日后有机会也试试,最后感叹句css真是博大精深,我表示除了积累应该是没有捷径了。
- linux下基本操作记录mongodb
- ClassLoader究竟为何物?
- Oracle应用实战八(完结)——存储过程、函数+对象曹组
- 动态代理模式原理
- SQL可以正常用,但cmd启动不了mysql,报错[ERROR] unknown variable ;basedir=....问题
- Percona-toolkit的安装和配置(r8笔记第86天)
- 分布式服务框架 Zookeeper
- python--类方法、对象方法、静态方法
- Go语言内存分配器的实现
- Go 语言 数据库操作之链接数据库实现
- 对于tnsping的连接超时的功能补充(r9笔记第3天)
- struts2拦截器源码分析
- Go语言学习(一):hello world
- JAVA基础知识点:内存、比较和Final
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 进程间通信的方式(1)
- Python Django开发 经验技巧总结(二)
- 进程间通信的方式(2)
- AkShare-股票数据-机构持股
- View的滑动方式 详细介绍
- AkShare-期货数据-分时数据
- Python 爬取留言板留言(三):多进程版+selenium模拟
- View事件分发、滑动冲突 详解
- Python Django开发 异常及其解决办法(一)
- 带你彻底搞懂-View的工作原理!
- Python 批量下载BiliBili视频 打包成软件
- 必要掌握!Window、WindowManager !
- 面试必备:ThreadLocal+Looper+Handler
- 子线程 真的不能更新UI ?
- Web前端开发 HTML设计 经验与技巧总结