day19兼容&图片整合

最新推荐文章于 2024-05-29 15:45:18 发布

417545911

最新推荐文章于 2024-05-29 15:45:18 发布

阅读量52

点赞数

分类专栏：前端文章标签：内核 css html

本文链接：https://blog.csdn.net/qq_44718740/article/details/119422204

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

一、浏览器内核

1.欧鹏浏览器是公认的渲染静态页面最快的浏览器

2.谷歌浏览器：之前是webkit内核，现在是blink内核（和欧鹏浏览器共同采用和开发）

3欧鹏浏览器（opera）：之前内核是Presto(已经废弃)，现在内核是blink

4火狐浏览器：Mozilla Firefox,内核是Gecko；美[ˈɡekoʊ]

5.Safari浏览器：使用的是苹果公司自己的内核：webkit.

6.IE浏览器是微软出品的浏览器，IE4以上版本都是Trident内核.由于垄断性，IE在很长一段时间内没有更新，导致两个后果：一是IE与W3C标准脱节，二是Trident内核大量的bug问题没有得到及时解决。

浏览器的发展：

-网景公司 NN（Netscape Navigator）市场占比很大

-微软公司 IE

第一次浏览器大战 IE胜

第二次浏览器大战谷歌 IE9（及以上）

二、表单元素input

1.表单之间有间距

元素可以写在一行

浮动

2.表单元素高度不一致

原因：input 默认的间距和边距；button类型的input默认为怪异盒模型

<body>
    <input type="text">
    <input type="button" value="搜索" onclick="alert('一刀999级')">
</body>

    <style>
        *{
            margin: 0;padding: 0
        }
        input{
            float: left;
            outline: none
        }
        input:nth-child(1){
            width: 200px;
            height: 40px;
            border: 1px solid #000;
            border-right: none
        }
        input:nth-child(2){
            width: 80px;
            height: 40px;
            border: 1px solid #000;
            box-sizing: content-box;}
    </style>

三、表单元素规范版

简单来说：就是在button类型的input外面套一层div,给div设置宽高；

    <style>
        *{
            margin: 0;padding: 0;
        }
        .input1{
            width: 200px;
            height: 40px;
            border: 1px solid #000;
            float: left;
        }
        div{
            width: 80px;
            height: 40px;
            border: 1px solid #000;
            float: left;
        }
        .input2{
            width: 80px;
            height: 40px;
        }
    </style>

<body>
    <input type="text" class="input1">
    <div>
        <input type="button" class="input2" value="1111">
    </div>
</body>

四、透明属性

opacity:0~1; 0透明 0.5半透明 1不透明；

/* 低版本浏览器中显示透明:IE各个浏览器不一样,滤镜 */
            filter:alpha(opacity=50);

五、指针的设置

属性：cursor

属性值：

auto默认
cursor:
crosshair加号
text文本
wait等待
help帮助
progress过程
inherit继承
move移动
ne-resize向上或向右移动
pointer手形

六、图片整合技术、精灵图、雪碧图

图片整合技术（css sprites）

作用：将若干张小的图片放在一张大的图片中，减少加载次数，减少服务器的压力

原理：利用到属性：background-position

七、面试题：前端的优化怎么做

1.html+css代码：html结构合理规范语义化，代码之间不要用空格和换行（压缩打包）

2.图片：转化图片（质量）小图标（背景定位技术）阿里巴巴矢量图标库（文本）。

417545911

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day19兼容&图片整合

一、浏览器内核 1.欧鹏浏览器是公认的渲染静态页面最快的浏览器 2.谷歌浏览器：之前是webkit内核，现在是blink内核（和欧鹏浏览器共同采用和开发） 3欧鹏浏览器（opera）：之前内核是Presto(已经废弃)，现在内核是blink 4火狐浏览器：Mozilla Firefox,内核是Gecko；美[ˈɡekoʊ] 5.Safari浏览器：使用的是苹果公司自己的内核：webkit. 6.IE浏览器是微软出品的浏览器，IE4以上版本都是Trident内核.由于垄断性，IE在很长
复制链接

扫一扫