滴滴前端实习一面

1. 你对盒子模型的理解？

    第一次面试，有点紧张，导致这么简单的题，居然没回答完整…

    主要就是要把这两个都说全比较好一点

• 标准盒子模型
  
• IE盒子模型
  

图片来源自 css盒子模型

2. HTML5添加了哪些新标签？

template、section、nav、article、aside、header、footer、main、canvas、svg、video、audio、source、track、menu

HTML语义化

    不同功能的盒子要用能表示相对应功能的HTML标签
    作用：

• ①让人更容易读懂（增加代码可读性，利于维护）
• ②让搜索引擎更容易“读懂”（SEO）

    前一天晚上稍微看了一下，但是只答出video跟audio两个，可能平时用得不多的原因…其实到这我已经很紧张了，不过还好后面的题目都还答得挺好的。

3. 块级标签、行内标签有哪些？有什么区别？本质区别？

（1）块级元素

• div、p、h1-h6、ul、ol、dl、li、header、footer、aside、section、article、form、table

（2）行内元素

• span、img、button、input、b、q、i、a、em、label

（3）区别

    我以前没有认真看过这个相关区别，只说了块级标签是单独占一行，而行内标签是挨着排列，直到浏览器边缘才换行。后面他又补问了一句本质区别是什么，你知道吗？

（4）本质区别

• 行内元素 设置width，height属性无效

• 行内元素 起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果

• 行内元素 设置 width 无效，height 无效（可以设置 line-height），设置 margin 和 padding 的上下不会对其他元素产生影响

• 块级元素 可以设置width，height属性

4. 如何设置值改变其行内或是块级？

直接设置display为block、inline、inline-block但后两者是有区别的

• block 就不讲了，就是上面第3点讲的块级元素
• inline：将标签设置为行内标签，不可设置宽高
• inline-block：将标签设置为行内