前端面试知识体系（html/CSS篇）

HTML

1、如何理解HTML语义化?

• 让人更容易读懂(增加代码可读性)
• 让搜索引擎更容易读懂( SEO )

2、默认情况下，哪些HTML标签是块级元素、哪些是内联元素?

• display: block/table;有div h1 h2 table ul ol p 等
• display: inline/inline- block;有span img input button等

3、h5新标签 / 新特性

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search

CSS

CSS3新特性

1.   CSS3实现圆角（border-radius），阴影（box-shadow），

2.    对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3.    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4.    增加了更多的CSS选择器  多背景 rgba 

5.    在CSS3中唯一引入的伪元素是 ::selection.

6.    媒体查询，多栏布局

7.    border-image

1、盒子模型的宽度如何计算?

如下代码，请问div1的offsetWidth是多大?

<style>
    #div1 {
        width: 100px;
        padding: 10px;
        border :1px solid #cCC;
        margin: 10px;
    }
</style>
<div id="div1"></div>
<script>
    document.getElementById('div1').offsetWidth
</script>

 offsetWidth = (内容宽度+内边距+边框) ，无外边距

答案是122px。

补充:如果让offsetWidth等于100px ,该如何做?

#div1 {
    width: 100px;
    padding: 10px;
    border :1px solid #cCC;
    margin: 10px;
    box-sizing: border-box;
}

 

2、ma