今日学习内容

• 网格布局

设置成网格 display：grid、inline-grid

设置列数和列宽 grid-template-columns：repeat（列数，宽度）；

设置行数和行高 grid-template-rows：repeat(行数，行高)；

划分区域 grid-template-areas：有几行就写几对引号  引号里边用名字代替区域

设置行和列的空隙 grid-gap

制定那个区域属于那个元素（给子元素写）grid-area：名字（区域划分的名字）

单元格在整个父元素中的的对齐方式place-centent （这个可以实现水平垂直居中）

• 浏览器的兼容

浏览器内核代表作品

*Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器

代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。

*Gecko(壁虎)：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。

*Webkit : 代表作品Safari、Chrome ， 是一个开源项目。

*Presto : 代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎  ( Opera前内核 已经废弃,现在欧鹏浏览器 用的是 谷歌的 Blink )。

*Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

1. 图片（插入图片）兼容问题

向下撑大3像素：给图片写diplay:block; 或者vertical-align:top/middle/bottom  给图片添加float；给父元素添加font-size:0

通过超链接插入的图片在ie浏览器中会有边框：border:none/0;  hidden ie6不支持

1. 表单行高不一致（清空浏览器默认值的时候input距离上边还存在一定的空隙）

给input添加float属性

1. 按钮大小不一致

将input变成怪异盒模型 box-sizing：border-box

给按钮单独设置高度

使用其他标签代替按钮

使用背景图片的方式代替按钮

在按钮的外部嵌套一个标签

1. 鼠标指针变成小手型

Cursor:pointer /hand(只有ie支持)

1. 透明度的兼容

Filter：alpha(opacity=value) 0-100  ie支持

Opacity:value   0-1  其他浏览器支持

1. 双边距问题（ie6上将float向边缘的margin按照双倍解析）

给float的元素添加display:inline

1. Ie6的默认高度问题（ie6上将低于16px以下的高度按照16px去解析）

解决方法：overflow：hidden或者 font-size:0;

1. Ie6的百分比问题（ie6里边将50%+50%按照大于100%去解析）

给浮向右边的元素添加clear:right;

1. 过滤器

下划线  ie6支持

关键字  ！Important

星号  ie6 ie7支持

Background:#f00\9   ie9以下支持

• 移动端1像素边框的兼容解决（手机上显示的是2px）

利用缩放去解决  

• Flexbase.js

• Animation.css

https://www.jq22.com/yanshi819

必须引入animated class

标签：浏览器,float,ie6,学习,内容,按钮,代表作品,今日,grid
来源： https://blog.csdn.net/weixin_45273844/article/details/119301575