自行整理面试知识(CSS篇)(二)

inline-block间隙处理

移除空格和换行,使用margin负值,使用font-size:0(谷歌浏览器无效),使用letter-spacing负值(字符间距)或者word-spacing解决(Opera有间隙极限,不支持负值)。所以需要同时设置

font-size:0 letter-spacing:-3px,在ie下存在2px覆盖,所以hackIE,*letter-spacing: normal

伪类

::与:元素性伪类的区别,就是没区别,只不过前者的适配性较低,所以还是应当在开发时选择后者

大部分伪类可以顾名思义,比较常用nth-child() 和 nth-of-type() 前者选取在父元素下排名第N的指定子元素,后者选取在父元素下的同类元素中排名第N的子元素

:after和:before大部分的时候用来做图标和一些独特的hover样式,以及用于清除浮动

等高布局

1.用背景图进行y轴缩放,创建一种等高列的假象

2.利用div的height会被最大高度撑大的原理,将带有背景色的div嵌套使用,并且使顶层div具有overflow:hidden切掉溢出元素,使所有元素具有float:left,并设置其列宽,再通过相对定位,将每一列的背景色容器与其对应的内容元素对齐,这样内容元素会撑大所有的背景色容器。(背景色容器的width都是100%,他们颜色会互相覆盖只剩下最深背景色容器的颜色,再用right值将遮盖的元素偏移,这样就可以精确的定位到内容元素所在的位置,内容元素设置float是为了让其变为行内元素且紧密排列)

3.flex布局下的aligin-items:stretch,可以在flex元素不写死高度的情况下等高

圣杯布局/双飞燕布局

实际上圣杯布局就是先用padding铺好主体,然后用左右的面板来通过margin挤压主体的width以达到效果

首先float:left是为了使元素脱离文档流,按照说法inline-block也可以做到

设置主体的width为100%的情况下,由于占满一行,会导致左右盒子都被换行到下一行,所以使用margin强行挤出左右盒子的位置,右侧设置margin-left : - 自己宽度,和right; -自己宽度(你挤出来的位置是margin,是空白的,当然要用位移去填咯 ,同理,左侧盒子需要设置margin-left : 100%将左侧挤出一个自己的身位,然后用left : -自己宽度填补空白位置)


双飞燕布局:

双飞燕布局是先用容器设置自适应的100%的width,然后用其包裹主体元素,主体元素用左右外边距留出左右盒子的宽度,这是与圣杯最大的不同,圣杯中实际上是用位移强行使左右盒子覆盖padding,而这里我认为是用margin去合并(利用margin的折叠)主体元素左右的margin

同样需要用float;left使其脱离文档流。

最好自己参考一下网上的代码,实际上很好理解。


flex版:

其实就是用flex-basis(固定大小),flex-shrink(容器宽度不够时缩小的比例)

将主元素的宽度设置为100%,使得其能自适应大小,由于shrink = 0的原因,左右的元素永远不会被缩小,这样就实现了圣杯布局了。

但是flex版没有办法提前渲染主体噢,主列是不会优先加载的。

 FOUC(Flash of Unstyled Content)

当使用@import导入css时会遇到的情况,页面的样式内容有可能会发生瞬间的闪烁,这种情况下被称为文档的暂时性失效

其实是因为@import的串行加载,会阻塞html的渲染过程,直到样式表被下载加载完成再进行重新渲染

避免方式:webpack和避免使用@import

gird栅格布局

https://blog.csdn.net/gaoqiang1112/article/details/80266142

CSS优化策略

CSS压缩:运用webpack或者gulp。

合并CSS,减少冗余CSS

删除无用的样式,利用继承

按需加载CSS,抽离公共的CSS。

尽量避免style标签内嵌CSS,因为link引入的CSS可以缓存

将CSS放在html的顶部,避免出现FOUC,同时避免使用@import

尽量不使用css中的算术运算Expression,其相当影响性能

尽量不使用子选择器,查找过程耗费一定的性能

合并图片,限制图片的宽高,裁剪图片

你可能感兴趣的:(前端,CSS,前端,CSS)