一、doctype是什么？doctype的作用是什么？页面中有或者没有它的区别是什么？
doctype是document type的缩写。它 是一种标记语言的文档类型说明。即告诉浏览器，当前html是用什么版本编写的。doctype的声明必须是文档的第一行，位于html标签之前。
doctype的作用是指出阅读程序应该用什么规则来解释文档中的标记，在网页中是用来声明你用的xhtml或者html是什么版本。
如果不做声明或者声明不正确的情况下，将可能导致标识与css失联，从而导致网页布局变乱，造成网页在浏览器中不能正常显示
二、css的width属性在w3c标准盒模型与IE盒模型的区别是什么？如何才能让他们保持一致？
w3c盒子模型中的宽不包括填充（padding）和和边框（border）的值，而IE盒模型中的宽包括填充（padding）和边框（border）。
为保持一致的方法有两种：
1、将页面设为标准模式
添加对应的dtd标识。如：<!doctype html>。
经测试，IE6/7/8/9、火狐、谷歌、opera均表现一致。
<!DOCTYPE html>
<html>
<head>
<style>
#box {width:100px;padding:0 10px;border:20px solid blue;margin:70px;}
</style>
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>
<div id="box">
</div>
<script>
var box = $('#box');
var boxboxWidth=box[0].offsetWidth;//包括补白、边框和内容宽度
alert(boxWidth+":"+box.width());//专指内容的宽度
</script>
</body>
</html>
注意：offsetWidth=borderLeft+paddingLeft+contentWidth+paddingRight+borderRight。
此时alert的值是160:100。即，各浏览器均认为css中的width就是100px即内容的宽度,和padding+border最终相加结果是：160px。
如果把doctype去掉，即进入“怪异模式”，此时，ie6/7/8的值均为100:40，证明它们认为css中width指的和offsetWidth是同一个值，除了内容的宽度外还都包含补白和边框，而内容的宽度则被压缩为40。而ie9,ff,chrome,opera这样的标准浏览器则依然是160:100。
2、使用hack或者在外面套上一层wrapper
前提是页面处于怪异模式，标准模式不存在兼容性问题。
（1）hack
#box {
width:100px !important; // ie9,ff,chrome,opera这样的标准浏览器
width:160px; //所有的浏览器；它的本意是只对不认识!important的设置。可是ie7、ie8也认识
+width:160px!important;//ie7
width:160px/0!important;//ie8
padding:0 10px;border:20px solid blue;margin:70px;
}
（2）wrapper
#box {
width:100px;
margin:70px;
float:left;
}
.wrapper {
padding:0 10px;border:20px solid blue;
}
<div class="wrapper">
<div id="box"></div>
<div style="clear:both"></div>
</div>
3、请说下移动端常见的适配不同屏幕大小的方法
（1）响应式布局
页面元素按照屏幕尺寸的变化而变化，通常会用百分比来定位
（2）cover布局
就跟background-size的cover属性一样，保持页面的宽高比，取宽或者高中较小者占满屏幕，超出的内容会被隐藏
（3）contain布局
就跟background-size的contain属性一样，保持页面的宽高比，取宽或者高中较大者占满屏幕，不足的部分用背景填充
（4）样式缩放
最省事的适配方法。直接用px为单位按视觉进行开发，通过计算屏幕与网页的宽高比，用transform：scale来对网页进行全局缩放
bug：如果网页中有动画，会影响网页的性能。在低配的安卓手机上比较明显
（5）rem缩放
通过用rem为单位进行视觉开发，目前比较流行的是font-size=62.5%，1rem=10px的这种方法
4、一个高度未知的图片如何在一个比它大的容器内水平垂直居中？
（1）背景法 不利于动态导入图片
<div class="wrap"></div>
.wrap{
width:300px;
height:100px;
background:url(XX.jpg) center center no-repeat;
}
(2)图片外用一个p标签，用line-height使图片垂直居中
<div class="wrap">
<p><img src="./images/XX.jpg" /></p>
</div>
.wrap{
width:300px;
height:100px;
text-align:center;
}
.wrap p{
line-height:100px
}
.wrap p img{
vertical-align:middle
*margin-top:expression((300 - this.height )/2);
}
(3)用display：table-cell （不兼容IE6 7）
<div class="wrap">
<img src="./images/1.jpg">
</div>
.wrap{
width:300px;
height:500px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
(4)添加table标签 兼容性好，但是冗余较多
<div class="wrap">
<table>
<tr>
<td align="center">
<img src="./images/1.jpg">
</td>
</tr>
</table>
</div>
.wrap{
width:800px;
height:500px;
text-align:center;
border:1px solid red;
}
table img{
width:800px;
heihgt:500px;
}
5、label标签的作用是什么？
label标签有两个很有用的属性。一个是for，一个是accesskey
for属性要绑定input元素，当点击这个标签时，所绑定的元素获得焦点
accesskey属性 表示label标签所绑定元素的热键。当按下热键，所绑定的元素获取焦点。
局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。
6、定义链接的四种伪类的正确书写顺序是？
a:link,a:visited;a:hover;a:active
7、position有哪些属性，他们的区别是？
static、relative、absolute、fixed
8、下面两个div的间距应该是什么？为什么？
<div style="margin-bottom:10px"></div>
<div style="margin-top:5px"></div>
5px ;div具有margin （所谓的外边距）两个相邻div的margin会发生重叠，重叠后的距离是其中最大的一个的值
9、清除浮动的方法有哪些？
（1）使用overflow属性来清除浮动
（2）使用额外标签法
.clear{
clear:both;
}
10、行级元素与块级元素的区别
| 新增元素 | 说明 |
|---|---|
| video | 表示一段视频并提供播放的用户界面 |
| audio | 表示音频 |
| canvas | 表示位图区域 |
| source | 为video和audio提供数据源 |
| track | 为video和audio指定字母 |
| svg | 定义矢量图 |
| code | 代码段 |
| figure | 和文档有关的图例 |
| figcaption | 图例的说明 |
| main | |
| time | 日期和时间值 |
| mark | 高亮的引用文字 |
| datalist | 提供给其他控件的预定义选项 |
| keygen | 秘钥对生成器控件 |
| output | 计算值 |
| progress | 进度条 |
| menu | 菜单 |
| embed | 嵌入的外部资源 |
| menuitem | 用户可点击的菜单项 |
| menu | 菜单 |
| template | |
| section | |
| nav | |
| aside | |
| article | |
| footer | |
| header |
扫一扫
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
