day1-day10学习笔记
高频面试题（笔试题）
1、简述 <!doctype> 的作用？
声明文档类型，告诉浏览器以何种方式解析文档
2、常见的浏览器及其内核？
Ie:trident
谷歌：blink
火狐：gecko
苹果：webkit
欧朋：presto
3、b 和 strong（i 和 em）标签的区别？
后者具有语义化；
4、谈谈对语义化的理解？
语义化：运用合适的标签和特定的属性去格式化文档;
对用户体验更好；易于开发和维护；易于seo和爬虫，能和搜索引擎建立良好的沟通
5、CSS 引入方式有哪些？
行内式；内嵌式；外链式。
优先级：行内>内嵌>外链
6、CSS 基本选择器有哪些？
Id选择器，类选择器，标签选择器，通配符选择器；
优先级 id>类>标签>通配符
7、如何合并表格单元格？
行合并：colspan；列合并：rowspan
8、thead、tbody、tfoot 有什么用？
Thead是头部，通常写表格的每一列的标题；
Tbody是身体，写表格的数据
Tfoot 是尾部，写一些脚注
9、常见表单元素有哪些？
Text文本框
Password 密码框
Radio 单选框
Chearbox 复选框
Submit 提交按钮
File 上传文本
Image 上传图片
Button 普通按钮
Textarea 文本域
Selet { option
}下拉框
10、请简述一下盒模型的组成？
外边距margin ;border 边框；内边距 padding; 内容content
11、CSS 复合选择器有哪些？
子代选择器 .wrap>.box
后代选择器： .wrap .box
群主选择器.wrap，.box{
}
交集选择器：.wrap.box
伪类链接选择器： .wrap:hover
12、块级标签和行内标签的区别？
块级标签：垂直向下排列，默认独占一行；可以设置宽高；四个边的边距都可以设置有效；内部可以嵌套块级和行内标签，p和h1-h6除外
行内标签：在一排排列，不能设置宽高；水平方向的边距有效，垂直方向的不生效，只有颜色但不占用位置，内部只能嵌套行内标签
13、浮动产生的问题？清除浮动的方案？
设置浮动的标签会脱离标准流，使父标签高度塌陷，影响后续布局.
1：给父标签设置高度；
2：在最后一个浮动的元素后面加一个div,设置clear：both;
3:给父标签加overflow：hidden
4:.clearfix:after{
display:block;
content:””;
clear:both
14、伪元素如何创建 ?
伪元素:before和:after创建
15、如何实现盒子水平垂直居中？
Position:absolute
Top:0; Bottom:0; Left:0; Right:0
Margin:anto;
Margin-left:50%
Magin-left:-自身宽度的一半
Margin-top:50%;
Margin-top:-自身高度的一半；
16、图片下方空白间隙如何解决？
1.设置父标签字体font-size：0；
2.display:block ；float:left/right
3.设置图文对齐方式不为 baseline;vertical-align!=baseline
17、请简述 等高布局、圣杯布局、双飞翼布局的实现原理。
圣杯布局：设置一个父盒子，父盒子下面设置3个子盒子；左右固定，中间一个先解析，中间盒子宽度自适应；给3个盒子加浮动，左侧盒子margin-left:-100%,右边盒子margin-left：-自己本身宽度；给父盒子设置一个左右的padding值；在利用定位，回到对应的位置；
双飞翼布局：设置一个父盒子，父盒子下面设置3个子盒子；左右固定，中间一个先解析，中间盒子宽度自适应；给3个盒子加浮动，左侧盒子margin-left:-100%,右边盒子margin-left：-自己本身宽度；给中间的盒子在设置一个子盒子；给子盒子一个左右的外边距
等高布局分为假等高和真等高；
假等高：设置无限大的padding和无限小的margin；然后溢出隐藏；利用padding和margin相消法实现假等高；
真等高：设置div.a{div.b{div.c{div.box1;div.box2;div.box3}}}
然后给box1,box2,box3，设置浮动，给a,b,c设置一样的宽度900，然后给b和c一个margin-left: -1/3width300px的值,再利用定位给box1,box2,box3.一个left:600px
18、简述 CSS 精灵图原理，及优缺点？
把很多图片融合在一张图片文件上，通过背景图定位的方式将图标显示在每一个盒子中
减少http的请求，提高页面性能；减少图片命名困扰；跟换方便
缺点要准确的计算.
19、简述 BFC 规则及解决的问题？
块级格式化上下文页面，是一个渲染区域
Bfc区域不会与浮动标签相重叠
计算bfc高度时候，浮动标签也要加上
Bfc是一个隔离的独立容器，容器内的标签不会影响外面，反之亦然
解决了清浮动，外边距塌陷，两栏三栏布局
20、文本溢出显示省略号如何实现？
单行文本：white-space:nowrap
Text-overflow:ellipsis;
Overflow:hidden
多行：display:-webkit-box
-webkit-box-orint：vertical;
-webkit-line-clamp:行数
21、为什么要初始化 CSS 样式？哪些样式需要初始化？
保证浏览器的统一性，去掉标签自带的样式
22、display:none 和 visibility：hidden 的区别？
后者隐藏后占据位置
23、你能想出几种方法让元素在页面中消失？
display:none 和 visibility：hidden 和opacity：0
24、标签应该如何合理嵌套？
块级套块级和行内，p,h1-h6只能套行内
行内 只能套行内
25、简述网页中常见图片格式及特点？
jpg 色彩丰富，文件小 有损压缩，反复保存图片质量下降明显
gif 文件小，支持动画、透明，兼容性比较好 只支持256种颜色
png 无损压缩，支持透明，简单图片尺寸小 不支持动画，色彩丰富的图片尺寸大
webp 文件小，支持有损和无损压缩，支持动画、透明 浏览器兼容性不好
26、说说你了解的浏览器兼容问题有哪些？
Ie图片边框去掉或者border:none;
背景属性连写时候空格不可省略；
行高很小时候；overflow：hidden；fout-size:0;line-height;0
IE6及更早浏览器浮动时产生双倍边距的BUG时候_display:inline;
IE7及更早浏览器下子标签相对定位时父标签overflow属性的auto|hidden失效的问题
解决方案：给父标签也设置相对定位position:relative;
块转行内块 ie7 不在一行显示
解决方案：
div {
display:inline-block;
*display:inline;
*zoom:1;
ie7 及以下浏览器 清浮动问题
/* : 单冒号兼容性更好，不推荐用双冒号 :: */
.clearfix:after {
content: '';
display: block;
clear: both;
}
/* 兼容 ie7 及以下浏览器 清浮动问题 */
.clearfix {
*zoom: 1;
}
}
27、什• 条件Hack
o 大于：gt
o 大于或等于：gte
o 小于：lt
o 小于或等于：lte
o <!--[if IE]>
<p>只在IE中能看到这个段落</p>
<![endif]-->
//只有IE6以上，才能看到应用了test类的标签是红色文本
<!--[if gt IE 6]>
<style>
.test {
color:red;
}
</style>
<![endif]-->
o IE10以上已经将条件注释移除，使用时要注意
o 属性级Hack
_ 下划线：选择IE6及以下
*：选择IE7及以下
\0：选择ie8以上
o color:red;//所有浏览器可识别
o _color:red;//仅IE6识别
o *color:red;//IE6、IE7识别
o color:red\0;//IE8、IE9识别
o
o 选择符级Hack
* html .box {
background:red;
}//只有在IE6显示红色
* + html .box {
background:red;
}//只有在IE7显示红色
•
么是 CSSHack 技术？
28、在项目中你是如何做图片优化的？
• 使用背景图
o 对于页面中与页面内容无关，起修饰作用的图片，使用背景图 background-image（如页面中小图标尤其多次重复出现的，纹理性的背景），与页面内容相关展示性的图片如（广告图、产品图）使用 img 标签。
• 图片品质
o 注意图片优化：在保证视觉效果的情况下，选择最小的图片格式与图片质量，以减少加载时间。
o 注：通常颜色丰富线条复杂的图片选择 .jpg，颜色单一的小图片使用 .gif，需要更好的显示细节或需要支持半透明的图片使用 .png 等。
• 使用精灵图
o 运用 CSS sprites 技术集中小的背景图或图标，减少页面 http 请求。
测试检查
