其他分享
首页 > 其他分享> > 今日学习内容

今日学习内容

作者:互联网

设置成网格 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以下支持

利用缩放去解决  

https://www.jq22.com/yanshi819

必须引入animated class

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