CSS HTML JavaScript 基础题型总结

1.根据下面代码，.subbox盒子距.box盒子顶部距离多大？（C）

.box{ float: left; width: 300px; height: 200px; }

.subbox { margin-top:50%;}

<div class=”box”>

	<div class=”subbox”></div>

</div>

 A、50px B、100px C、150px D、200px

解析：如果父元素中有内容的时候，子元素的外边距是相对父元素内容，如果没有内容则一直向上追溯寻找如果都没有找到(案例四中可以看到)，最终以浏览器视口为参考点。所以说margin-top：50%值是相对于父元素的宽度的一半的意思，所以此题选择C。（*关于margin-top中 % 是以父元素的宽度为基准进行计算）

2、说说你对语义化的理解？列举5个语义化的标签？

解析：

一、语义化标签是什么？

常用的语义化标签包括

头部 导航栏 区块(有语义化的div) 主要区域 主要内容 侧边栏 底部

nav header footer aside article

二、为什么会用语义化标签？

平时，我们都会采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于浏览器对页面的读取。所以HTML5新增了很多新的语义化标签。并且，在我们未给页面添加css样式时，用户体验并不好。语义化标签也能让浏览器更好的读取页面结构。再就是便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

1、页面布局

如下图，如果我们用div来实现此图的布局，那么就要涉及到加类名或者选择符的问题，还有起名字，很多时候就会弄混。直接用语义化标签就会标记出每个区域的作用并且更好是实现页面布局。

前端初学者对html语义化标签的理解

2、在移动端布局方面应用

学习一阶段的最后我们会学习到移动端的布局与书写，那么此时选择使用语义化标签往往要比div书写更简单优化。比如移动端布局中我们要采用百分比布局或者rem布局方式，就会涉及到弹性盒中的固比固。比如在我们移动端页面中，拿QQ举例。

前端初学者对html语义化标签的理解

QQ的页面中就可以划分状态栏，header，main，footer。三个区域。在我们的消息区域，有很多消息时，要想查看最底部消息就要下拉，但与此同时header与footer是不动的。那么我们就用到了语义化标签。用到了弹性盒中的固比固(固定高：flex：1：固定高)；

三、总结

其实总结起来也就是一句话，没有没有用的东西，div等无语义化的标签有他们的好处，语义化标签也有语义化标签的好处，不可一概而论。但是语义化标签也不是乱用的，视我们页面需求与情况而定。

3、编程题

（1）、实现适配（@media + rem）

 

 解析：

CSS3的媒体查询，在第一段代码上面我用的是小于960px的尺寸的写法，那现在我们来实现等于960px尺寸的代码，以下代码需要写在style标签或者css文件中：

@media screen and (max-device-width:960px){
    body{background:red;}
}

然后就是当浏览器尺寸大于960px时候的代码了：