盒子模型总结

墨蓝 2022-05-20 01:20 88阅读 0赞

![70][]

![70 1][]

##### 对比 #####

标准盒子模型中: 定义的width, 只包含content部分的宽度, 如果增加盒子的padding和border, 会增加盒子所占的整体宽度

ie盒子模型中: 定义的width, 是包含content的跨度, 还有左右两侧的padding还有border

##### 兼容处理 #####

1) ie浏览器文档注释

<!DOCTYPE html>
    
    
    
    <html lang="en">

通过上述方法, 在不同的浏览器中, 使用不同的class, 简单明了, 也不用也很多csshack

2) 对于360双核这种找抽浏览器，据说添加以下头部meta信息可以使得网页用webkit内核渲染

IE=edge：保持使用最高级别模式显示内容；

chrome=1：谷歌的外挂插件Google Chrome Frame（谷歌内嵌浏览器框架GCF），使用IE浏览网页时实际上是使用Chrome浏览器内核渲染，最低支持IE6，但前提是客户端已经安装GCF。

但实际上这个meta标识是ie浏览器所识别的，并不是公认的标准，所以用双核的浏览器会傲娇。当然360也会傲娇，所以有时你会发现360并不能总是（也可能是我本人rp差）以chrome内核渲染你的按现代标准开发的网页。

那么试试这个吧，添加：

这个meta标识是360自家实现的，表示强制要求360浏览器用chrome的内核渲染网页。

ok，一行代码搞定360绝大部分的兼容。

##### 随笔 #####

css实现三角形效果

<div class="box"></div>
    
    .box {
       width: 0;
       height: 0;
       border: 50px #fff solid;
       border-bottom: none;
       border-top-color: red;
    }

![70 2][]

[70]: /images/20220520/c6df217e6a63484ba02ac0f1c5e5dba0.png
[70 1]: /images/20220520/7a15b5119a254d42851b9e544daa1d6a.png
[70 2]: /images/20220520/6d0cf75ea5874abe9093e0a977427eff.png