目录
HTML&C
一、盒模型
在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成
###
标准盒模型 （非IE浏览器）
box-sizing:content-box；一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异盒模型 （IE浏览器）
box-sizing:border-box；一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
怎么获取和设置box的内容宽高
IE： dom.currentStyle.width/height
非IE: window.getComputedStyle(dom).width/height
var obj = document.getElementById("box");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, null); // 非IE
} else {
style = obj.currentStyle; // IE
}
alert("width=" + style.width + "\nheight=" + style.height);
二.BFC
什么是BFC
BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；
如何触发BFC
overflow: auto/ hidden; position: absolute/ fixed; float: left/ right; display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
BFC的应用
1 可以用来自适应布局
利用BFC的这个原理可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。
给左边盒子加浮动，右边盒子加overflow:hidden;变成BFC，就可以消除外部左边盒子因浮动对他的影响
2 可以清除浮动
一个父元素中的子元素，设置浮动时，父元素没有设置高度，这时子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷。 这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。
3 解决垂直边距重叠
三、清除浮动
为什么要清除浮动
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
清除浮动
一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签的方法
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
.clear{
clear:both;
}
二、 父级添加overflow方法：
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
三、使用after伪元素清除浮动：
<body>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
</body>
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
四、使用before和after双伪元素清除浮动：用法同上
四、position定位的属性方法
position含义是指定位类型, 可取值有: static, relative, absolute, fixed, inherit, sticky(另: sticky是除css3新发布的属性)
1. position: static;
static(没定位)是position的默认值, 元素处于正常的文档流中, 会忽略left, top, right, bottom, z-index属性.
2. position: relative;
relative(相对定位)是给元素设置相对原本位置的定位, 不脱离文档流, 此元素原本位置会保留, 其他元素不会受影响.
3. position: absolute;
absolute(绝对定位)指给元素设置绝对定位，相对定位的对象可以分为两种情况：
-
设置了
absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。 -
如果并没有设置了
position属性的祖先元素，则此时相对于body进行定位。
4. position: fixed;
可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。
5. inherit
继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。
6. sticky (黏性定位,吸顶效果)
设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
五 、盒子水平垂直居中
第一种：盒子宽高 + margin
思路 ：上外边距为自身高度一半，左外边距为自身宽度一半：
.box {
width: 800px;
height: 400px;
border: 1px solid black;
}
.son {
width: 400px;
height: 200px;
margin-top: 100px; /* 上外边距为自身高度一半 */
margin-left: 200px; /* 左外边距为自身宽度一半 */
border: 1px solid red;
}
第二种：盒子高度 + margin
-
思路：让子盒子距离顶部外边距为自己高度的一半，左右auto
.box {
width: 800px;
height: 400px;
border: 1px solid black;
}
.son {
width: 400px;
height: 200px;
/* 让子盒子距离顶部外边距为自己高度的一半，左右auto */
margin: 100px auto;
border: 1px solid red;
}
第三种：盒子宽高 + 定位 + margin
-
思路 1 ：给父盒子加相对定位，给子盒子加绝对定位，再设置子盒子相对于父盒子的边偏移：top：50%，left：50%；然后设置左外边距为自身宽度一半，上外边距为自身高度一半
.box {
position: relative;
width: 800px;
height: 400px;
border: 1px solid black;
}
.son {
position: absolute;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
border: 1px solid red;
}
-
思路 2 ：将子盒子边偏移全部设置成0，然后使用margin:auto
.box {
position: relative;
width: 800px;
height: 400px;
border: 1px solid black;
}
.son {
position: absolute;
width: 400px;
height: 200px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 1px solid red;
}
第四种：定位 + Transform
-
思路：设置子盒子边偏移 top：50%，left：50%，再用CSS3属性transform: translate(-50%, -50%);
.box {
position: relative;
width: 800px;
height: 400px;
border: 1px solid black;
}
.son {
position: absolute;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
}
第五种：Felx
-
思路：
-
justify-content：center；设置flex盒子中的项目在主轴上居中对齐
-
align-items：center；设置flex盒子中的项目在侧轴和主轴上居中对齐
-
主轴和侧轴都居中了，盒子也就水平垂直居中了
-
.box {
display: flex;
justify-content: center; /* 设置flex盒子中的项目在主轴上居中对齐 */
align-items: center; /* 设置flex盒子中的项目在侧轴和主轴上居中对齐 */
width: 800px;
height: 400px;
border: 1px solid black;
}
.son {
width: 400px;
height: 200px;
border: 1px solid red;
}
六、两栏布局、三栏（圣杯、双飞翼）
作用：
圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局：
为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
优缺点：
不需要添加dom节点
缺点：如果将浏览器无线放大时，「圣杯」将会「破碎」掉。当middle部分的宽小于left部分时就会发生布局混乱。（middle<left即会变形）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#bd{
padding: 0 200px 0 180px;
height: 100px;
}
#middle{
float: left;
width: 100%;
height: 500px;
background:blue;
}
#left{
float:left;
width:180px;
height:500px;
margin-left:-100%;
background: #0c9;
position: relative;
left: -180px;
}
#right{
float: left;
width: 200px;
height: 500px;
margin-left: -200px;
background: #0c9;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
其中：
左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置
#bd{
padding: 0 200px 0 180px;
height: 100px;
}
中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置
#left{
position: relative;
left: -180px;
}
中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置
#right{
position: relative;
right: -200px;
}
双飞翼布局：
为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。
优缺点：
优点：不会像圣杯布局那样变形
缺点是：多加了一层dom节点
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
}
.mian>div{
float: left;
}
.left{
width: 200px;
background-color: cyan;
margin-left: -100%;
}
.right{
width: 200px;
background-color: darkorange;
margin-left: -200px;
}
.midden{
width: 100%;
background-color: deepskyblue;
}
.centent{
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<div class="mian">
<div class="midden">
<div class="centent">中间</div>
</div>
<div class="left">
左边
</div>
<div class="right">右边</div>
</div>
</body>
</html>
圣杯与双飞翼的区别
圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。`
七、Flex 布局
flex基本概念
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
设为 Flex 布局以后，子元素的float、clear,position和vertical-align属性将失效
开启flex布局
display:flex
flex容器属性
| flex-direction | 属性决定主轴的方向（即项目的排列方向 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 |
|---|---|
| flex-wrap | 设置项目是否换行 * nowrap（默认）：不换行。 * wrap：换行，第一行在上方。 |
| flex-flow | 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap |
| justify-content | 定义了项目在主轴上的对齐方式 flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端靠边对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 |
| align-items | 定义项目在侧轴上如何对齐 一根侧轴的情况下 flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度 |
| align-content | 定义了多根侧轴线的对齐方式。 flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴 |
八、行内元素.块级元素. 空(void)元素
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
-
行内元素有：a b span img input select strong
-
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
-
空元素：br hr img input link meta
-
行内元素不可以设置宽高，不独占一行
-
块级元素可以设置宽高，独占一行
-
块级元素转行内元素:display:block
-
行内元素转块级元素:displai:inline
-
行内元素或块级元素转行内块元素:display:inlind-block
九、CSS Hack
什么是CSS Hack?
简而言之就是:针对不同浏览器编写带有前缀的css就是csshack,就是前段hack. 三种方法
方法一:IE条件注释法
(lte表示小于等于 lt表示小于 gte表示大于等于 gt表示大于 !表示不等于) IE条件注释是微软官方推荐的方法,向前兼容性方面考虑,它是最安全的hack方式,理论上是最好的选择,但这种方式需要将所有的hack根据浏览器类型集中在相应的文件中
<!--[if IE]> <link type="text/CSS href="test.css ref ="stylesheet> <![endif]-->
test.css文件是只加载到IE浏览器会生效,对于非IE浏览器会忽略这条语句.
<!--[if gt IE 6]> <link type="text/CSS href="test.css ref ="stylesheet> <![endif]-->
test.css文件是只加载到IE6以上版本时候加载生效.
虽然条件注释最常用于CSS的hack,但他能包含的内容其实不仅仅是link标签,它还可以用这样的形式进行hack(条件注释和style标签)
<!--[if IE 6]>
<style type="text/CSS >
.test{
}
</style>
<![endif]-->
条件注释和script标签
<!--[if IE 6]>
<script type="text/JavaScript">
alert("我是IE 6");
</script>
<![endif]-->
针对不同IE版本分别导入样式
<!--[if IE 6]> <link type="text/CSS href="ie6.css ref ="stylesheet> <![endif]--> <!--[if gt IE 7]> <link type="text/CSS href="ie7.css ref ="stylesheet> <![endif]--> <!--[if gt IE 8]> <link type="text/CSS href="ie7.css ref ="stylesheet> <![endif]-->
虽然它的向后兼容性是最好的,但它的缺点也非常明显,将同一css选择服下的样式分散到三个文件中去控制,增加了开发和维护成本.
方法二.选择符前缀法
原理是在css选择符前加一些只有特定浏览器才能识别的前缀 例如"html"只对IE6生效,"+html"只对IE7生效,这就不能保证IE9和IE10不识别,在向后兼容性有风险( 只能在CSS样式文件或内嵌式的style中这样写，不能用于行内式)
方法三.样式属性前缀法
原理是在样式的属性名前加前缀,这些前缀旨在特定的浏览器生效( 行内 style=＂width:200px＂ IE6 style="*width:200px" IE7 或者在CSS文件中写这样的样式，也是可以的) 如""只在IE6生效 "*"只在IE7生效
<style type="text/CSS >
.test{
width:80px;
*width:70px;
_width:60px;
}
</style>
样式属性前缀法相比起选择符前缀法,聚合程度更高,代码更精简,可维护性很强,和选择符前缀法相同,向后兼容性有风险
十、src与href的区别
href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。
<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。
<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。
十一、link和@import的区别
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
十二、H5和C3新特性
-
选择器
-
背景和边框
-
文本效果
-
2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)
1.选择器
:last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */（fer斯特） :nth-child(1) /* 按照第几个孩子给它设置样式 */ :nth-child(even) /* 按照偶数 */ :nth-child(odd) /* 按照奇数 */ :disabled /* 选择每个禁用的dom元素 */ :checked /* 选择每个被选中的dom元素 */ :not(selector) /* 选择非 selector 元素的每个元素 */ ::selection /* 选择被用户选取的元素部分 */
伪类和伪元素：
根本区别在于它们是否创造了新的元素（抽象）
伪类：用于向某些选择器添加特殊的效果（没有创建新元素）
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
伪元素：创建了 html 中不存在的元素，用于将特殊的效果添加到某些选择器
::before {} /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
::after {} /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
:first-letter /* 选择该元素内容的首字母 */
:first-line /* 选择该元素内容的首行 */
::selection /* 选择被用户选取的元素部分 */
2. 背景和边框
背景：
background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域 对于 background-origin 属性，有如下属性 背景图片可以放置于 content-box、padding-box 或 border-box 区域
边框：
border-radius：圆角 box-shadow / text-shadow：阴影 border-image：边框图片
3. 文本效果
属性 描述 text-shadow 向文本添加阴影 text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法 text-emphasis 向元素的文本应用重点标记以及重点标记的前景色 text-outline 规定文本的轮廓 text-overflow 规定当文本溢出包含元素时发生的事情 text-wrap 规定文本的换行规则 word-break 规定非中日韩文本的换行规则 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行 text-decoration 文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线
@font-face 自定义字体
渐变，CSS3新增了渐变效果，包括 linear-gradient(线性渐变)和 radial-gradient(径向渐变)
4. 2D/3D 转换
变形transform
变形有rotate旋转、scale缩放、translate位移、skew倾斜
过渡transition
过渡transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值
一般写在一起：
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
动画animation
动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用
.myClass {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn; /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）
H5 新特性
1. h5新增特性：
语义化标签：header、footer、section、nav、aside、article增强型表单：input 的多个 type新增表单属性：placehoder、required、min 和 max音频视频：audio、videocanvas 画布地理定位拖拽本地存储： localStorage 没有时间限制的数据存储； sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpauseWebSocket：建立持久通信协议
2. 语义化标签
| 标签 | 描述 |
|---|---|
| header | 定义了文档的头部区域 |
| footer | 定义了文档的尾部区域 |
| nav | 定义文档的导航 |
| section | 定义文档中的节（section、区段） |
| article | 定义页面独立的内容区域 |
| aside | 定义页面的侧边栏内容 |
| dialog | 定义对话框，比如提示框 |
3. 表单类型增强
HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证
| input 的 type | 描述 |
|---|---|
| color | 主要用于选取颜色 |
| date | 从一个日期选择器选择一个日期 |
| datetime | 选择一个日期（UTC 时间） |
| 包含 e-mail 地址的输入域 | |
| month | 选择一个月份 |
| number | 数值的输入域 |
| range | 一定范围内数字值的输入域 |
| search | 用于搜索域 |
| tel | 定义输入电话号码字段 |
| time | 选择一个时间 |
| url | URL 地址的输入域 |
week选择周和年
4. html5 新增的表单属性
| 表单属性 | 描述 |
|---|---|
| placehoder | 简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失 |
| required | 是一个 boolean 属性。要求填写的输入域不能为空 |
| pattern | 描述了一个正则表达式用于验证 input 元素的值 |
| min 和 max | 设置元素最小值与最大值 |
| step | 为输入域规定合法的数字间隔 |
| height 和 width | 用于 image 类型的 input 标签的图像高度和宽度 |
| autofocus | 是一个 boolean 属性。规定在页面加载时，域自动地获得焦点 |
| multiple | 是一个 boolean 属性。规定 input 元素中可选择多个值 |
5. html5 新事件
| 事件 | 描述 |
|---|---|
| onresize | 当调整窗口大小时触发 |
| ondrag | 当拖动元素时触发 |
| onscroll | 当滚动元素滚动元素的滚动条时触发 |
| onmousewheel | 当转动鼠标滚轮时触发 |
| onerror | 当错误发生时触发 |
| onplay | 当媒介数据将要开始播放时触发 |
| onpause | 当媒介数据暂停时触发 |
十三、前端常见浏览器兼容性问题解决方案
前言：
不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎 所以浏览器兼容性问题一般指：css兼容、js兼容
常见的浏览器内核：
常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit
| IE浏览器 | Trident内核，也成为IE内核 |
|---|---|
| Chrome浏览器 | Webkit内核，现在是Blink内核 |
| Firefox浏览器 | Gecko内核，俗称Firefox内核 |
| Safari浏览器 | Webkit内核 |
| Opera浏览器 | 最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核； |
| 360浏览器 | IE+Chrome双内核 |
| 猎豹浏览器 | IE+Chrome双内核 |
| 百度浏览器 | IE内核 |
| QQ浏览器 | Trident（兼容模式）+Webkit（高速模式） |
常见的兼容性问题：
1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }
2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline;
3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
4、图片默认有间距
解决方案：使用float 为img 布局
5、IE9一下浏览器不能使用opacity
解决方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；
7、cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer
8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative
8660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
