最近又迎来一年一度的求职高峰，本人也是准备找工作，于是整理了一下面试中可能出现的知识点。欢迎补充，本集内容只包含html和css。js下期分享吧。
Doctype作用
- 声明于html文档中第一行，告知浏览器的解析器用什么文档标准解析这个文档。
页面样式导入时候 link 和 @import有什么区别
- link属于xhtml标签，除了加载css外，还能定义Rss，定义rel连接属性等。而@import是css提供的，只能用于加载css。
##介绍一下你对浏览器内核的理解
- 主要分两部分 渲染引擎和js引擎。渲染引擎负责获取网页内容 整理信息 js引擎负责解析和执行javascript来实现网页的动态效果。
常见浏览器内核有哪些
- 谷歌：-webkit-
- 火狐：-moz-
- ie：-ms-
- 欧鹏：-o-
- qq浏览器：双内核 -webkit- -ms-
H5标签的新属性
-
语义化标签 header footer nav 有利于代码可读性和SEO,语义元素在IE6-8的兼容可以使用.
-
表单新增功能 以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性綁定
-
视频标签 音频标签 画布标签
如何用html和css写三角形 transparent属性为透明
<style>
.box{
height:0px;
width:0px;
border-top:10px solid red;
border-left:10px solid transparent;
border-right:10px solid transparent;
}
</style>
<body>
<div class="box"></div>
</body>
标签
- 块标签：div ul li ol h p 语义化标签 可以设置宽高，并且独占一行。转化为块标签：display:block；
- 行内块标签：img input 可以设置宽高 不独占一行。 转化为行内块：display:inline-block;
- 行内标签：a I br span 不可以设置宽高 不独占一行 大小由内容决定 只能设置左右间距 不能设置上下间距。转化为行内标签：display:inline;
选择器
- 伪元素选择器:操作的不是页面中真实的dom元素 可以用来处理浮动引发的bug
- 伪类选择器：操作页面中真实的元素
margin-top 的bug问题
- margin-top 的bug问题 子元素添加margin-top 父元素也掉下来。
- 原因：子元素是父元素的第一个元素 子元素没有浮动 父元素没有浮动 父元素没有内填充 父元素没有边框
- 解决方法1.父元素添加overflow:hidden 2.父元素添加padding-top减去父元素高度子元素删除margin-top
浮动
- 卡顿问题 一个元素高度高于其他元素，就会吧其他元素挤下去
- 浮动引发的bug：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素的高度，
- 原因：浮动元素会脱离文档流 不在一个平面内
- 解决办法：1.给父元素添加高度 2.给父元素加overflow：hidden；3.给父元素添加一个最后的子元素 添加属性必须是一个块元素 所以有时候要加display：block clear：both；
右边宽度固定，左边自适应
<!--方法1-->
<style>
body{
display: flex;
}
.left{
background-color: rebeccapurple;
height: 200px;
flex: 1;
}
.right{
background-color: red;
height: 200px;
width: 100px;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
<!--方法2 -->
<style>
div {
height: 200px;
}
.left {
float: right;
width: 200px;
background-color: rebeccapurple;
}
.right {
margin-right: 200px;
background-color: red;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
水平垂直居中
/*方法1*/
#container{
position:relative;
}
#center{
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
/*方法2*/
#container{
position:relative;
}
#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
/*方法3*/
#container{
display:flex;
justify-content:center;
align-items: center;
}
flex布局用的多么
- 不多 因为要考虑ie9的兼容
##移动端的适配怎么做
- 用css3的媒体查询做响应式布局，根据屏幕的不同去响应不同的css
##CSS的transition和animation有何区别
- transition是过渡，由一个状态过渡到另一个状态，比如高度100px过渡到200px；
- transition的作用在于，指定状态变化所需要的时间。
- （1）transition需要事件触发，所以没法在网页加载时自动发生。
- （2）transition是一次性的，不能重复发生，除非一再触发。
- （3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态
- （4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
- animation是动画，animation有帧的概念，可以设置关键帧keyframe,一个动画可以由多个状态过渡组成。
选择器优先级
- 权重分为四级，权重值越大优先级越高。
- 1.内联样式。如：style=“xxx”，权值为1000
- 2.ID选择器。如：#content，权值为100
- 3.类，伪类和属性选择器。如：.content,:hover,[attribute],权值为10
- 4.元素选择器，伪元素选择器。如：div,p,权值为1.
- 注意：通用选择器（*），子选择器（>)，相邻同胞选择器(+)并不在四个等级中，权值为0.权重值越大优先级越高，相同权值后定义覆盖前面定义的.
如何实现满屏品字布局
- 上面div宽100%；下面两个div宽度50%；然后用float让其不换行
经常遇到的浏览器兼容性问题 原因，解决方法是什么，
- png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
- 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
