网络营销案例ppt课件,seo技术团队,做期货关注网站,网站建设 联系我们前端面试题-(浏览器内核#xff0c;CSS选择器优先级#xff0c;盒子模型#xff0c;CSS硬件加速#xff0c;CSS扩展#xff09; 常见的浏览器内核CSS选择器优先级盒子模型CSS硬件加速CSS扩展 常见的浏览器内核
内核描述Trident(IE内核)主要用在window系统中的IE浏览器中CSS选择器优先级盒子模型CSS硬件加速CSS扩展 常见的浏览器内核CSS选择器优先级盒子模型CSS硬件加速CSS扩展 常见的浏览器内核
内核描述Trident(IE内核)主要用在window系统中的IE浏览器中由微软研发并投入使用Gecko(Firefox内核)主要用于Firefox浏览器中特点是代码完全公开开发程度高Webkit(Safari内核)苹果产品中的safari浏览器使用的就是webkit内核其特点是不受iefirefox等内核的约束比较安全。Chromium谷歌浏览器基于WebKit的,chrome由Chromium开发而来。这个内核是国内众多浏览器所使用的内核比如哦360猎豹腾讯Blink由谷歌和Opera SoftWare 开发的浏览器渲染引擎其前身是webkit的分支。Blink相对于webKit有更高的渲染引擎并提供了许多改进和新功能
CSS选择器优先级
浏览器通过优先级来判断哪些属性值与一个元素最为相关从而在该元素身上应用这些属性值。优先级是基于不同种类的选择器组成的匹配规则 优先级就是分配给指定css声明的一个权重它匹配的选择器重每一张选择器类型的数值决定。 而当优先级与多个css声明重任意一个声明的优先级相等的时候。css中最后的那个声明将会被应用到元素上
选择器格式优先级权重ID选择器#id100类选择器/伪类选择器.xxx :xx10属性选择器E[attr“value”]10标签选择器div1通配符选择器*0
当在一个样式中声明使用一个!important规则时此声明将覆盖任何其他声明。和权重没有关系。 样式的来源不同时优先级顺序为 内联内部外部浏览器用户自定义样式浏览器默认样式
盒子模型
W3C标准盒子模型宽左右内边距左右边框 左右外边距 宽度等于 高度一样 怪异盒模型:宽左右外边距(宽度等于 高度一样 box-sizing: 属性设置 1.content-box标准盒子模型 2.border-box 怪异盒子模型 他俩的区别就是一个往外撑一个往里挤的区别吧
CSS硬件加速
浏览器在处理下面的css的时候会使用GPU渲染 1.transform (当3D变换的样式出现时会使用GPU加速) 2.opacity 3.filter 4.will-change 层爆炸由于某些原因导致大量不在预期内的合成层虽然有浏览器的层压缩机制但是也有跟多无法进行压缩的情况。这就肯定会出现层爆炸的现象。很多不需要提升为合成层的元素因为某些不当操作成为了合成层。解决层爆炸的问题最佳方案是打破overlap的条件也就是说让其他元素不要和合成层元素重叠。简单直接的方式使用3D硬件加速提升动画性能时候最后给元素增加一个z-index属性人为干扰合成层的顺序可以有效的减少创建不必要的合成层提升渲染性能。移动端优化效果显著
CSS扩展
一· 左右两边固定宽度左边固定右边自适应布局中间自适应布局实现 圣杯布局指两边盒子宽度固定中间盒子自适应其中中间栏放到文档流前面保证先进行渲染。会变形
双飞翼布局为了中间div内容不被遮挡直接在中间div内部创建子div用于放置内容在该子div里用margin-left和margin-right为左右两栏div留出位置放大浏览器不会变形 宽度计算中间宽等于width:cacl(100% - 两边宽度的和) 弹性盒子布局:两边宽度固定 父盒子设置弹性盒子不允许换行 中间盒子flex:1 (建议)
二,9宫格实现方式 1.通过弹性盒子实现推荐 2.通过grid布局 3.通过table实现(不推荐 不累述 4.通过float实现(不推荐 不累述
三子元素上下左右垂直居中 1.弹性盒子 父盒子设置弹性子盒子justifiy-content 和align-item属性设置center. 2.margin 实现 3.padding实现 4.子绝父相实现
