【前端的一些内容及各大浏览器的兼容性】默认样式重置(css reset)css reset
原则：但凡是浏览器的样式，都不要使用
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0}
ol,ul{list-style:none,padding:0;
margin:0}
a{text-decoration:none;
}
img{border:none;
}
a伪类的先后顺序 link、visited、hover、active
块元素和内嵌元素
块元素的特征
1.默认读占一行
2.没有宽度时，默认撑满一排
3.支持所有css命令
内嵌(内嵌、行内)的特征
1.同排可以继续跟同类的标签
2.内容撑开宽高
3.不支持上下的margin和padding
4.代码换行被解析
inline-block的特点和问题
特性：
1.块在一行显示
2.行内属性标签支持宽高
3.没有宽高的时候内容撑开宽度
问题：
1.代码换行被解析
2.ie6、ie7不支持快属性标签的inline-block;
前端规范：
1.所有书写均在英文半角状态下的小写
2.id,class必须以字母开头
3.所有标签必须闭合
4.html标签用tab键缩进
5.
6./*css注释*/
7.ul,li/ol,li/dl,dt,dd拥有父子关系的标签
8.p,dt,h标签里面不能嵌套快属性标签
9.a标签不能嵌套a
10.内联元素不能嵌套块
float浮动：
1.块元素
2.内容撑开宽高
3.脱离文档流 (文档流是文档中可以显示对象在排列时所占用的位置)
4.提升层级半层
清除浮动的方法及问题
1.加高度(扩展性不好)
2.给父级加浮动(页面中所有元素都加浮动，margin左右自动失效(floatsbad!))
3.加inline-block(margin左右自动失效)
4.空标签清除浮动(ie6最小高度19px；(解决ie6下还有2px偏差))
5.br清除浮动(不符合工作中的结构、样式、行为三者分离的要求)
6.after伪类清除浮动(现在主流)
.clear:after{content:’’;
display:block;
clear:both;
}
.cler{zoom:1}
after伪类：元素内部末尾添加内容
:after{content:”添加的内容”;
}ie6,ie7下不兼容
zoom缩放
a.触发ie下haslayout，使元素根据自身内容计算快高
b.ff不支持
7.ovrflow:hidden清除浮动方法(需要配合宽高或者zoom兼容ie6 ie7)
overflow:scroll || auto || hidden；
overflow:hidden;
溢出隐藏(裁刀)
浮动兼容性问题
ie6双倍边距bug(ie6下块属性标签浮动，并且有横向margin，横向margin加倍)
a.ie6
b.浮动
c.横向margin
d.块属性标签(加display:inline)
ie6下 li部分兼容性问题：
a.左右两列布局，右边右浮动ie6ie7下拆行；(左边元素浮动)
b.ie6 ie7 li下元素都有浮动，在ie6ie7下方会产生4px间隙的问题；(加vertical-align:top;
)
图片下方间隙问题
a.display;
(改变标签本身特性)
b.overflow:hiden;
(必须知道图片高度)
c.vertical-align(暂时最完美的方案)
css精灵
是一各网页图片处理方式，它允许你将一个页面涉及到的所有零星图片包含到一张大图中去
优点：利用css精灵能很好地减少了网页的http请求次数，从而大大的减少了页面的性能
缺点：降低开发效率;
维护难度加大
css hack:针对不同的浏览器写不同的css样式的过程
\9 ie10之前的ie浏览器解析
+，*，ie7包括ie7之前的浏览器解析
_ie6包括ie6之前的ie浏览器解析
?
!important提升样式优先级权重
在ie6下高度小于19px的元素，高度会被当做19px处理;
解决ie6下的最小高度是加overflow:hidden;
解决办法：font-size:0;
但只能解决到2个像素，小于2个像素这个方法将无法解决
haslayout 根据元素内容的大小或者父级的父级的大小重新计算宽度
display:inline-block
height:(除auto外的任何值)
float:(left或right)
widht:(除auto外的任何值)
zoom:(除normal外的任何值)
推荐阅读
- Url地址区分大小写
- element-ui|如何对 el-table列表项 内的 form表单元素 使用 自定义规则校验
- vue|vue el-upload 组件上传的 文件跟随表单数据 发送后台保存
- 纯前端实现文件导出
- JQuery 绑定select标签的onchange事件