那个网站可以做域名跳转的,网站排名软件优化,生活分类网站建设,网站建设军成目录 1.px和em的区别
2.介绍下BFC及其应用
3.介绍下粘性布局#xff08;sticky#xff09;
4.清除浮动的方法
5.如何用css或js实现多行文本溢出省略效果#xff0c;考虑兼容
6.如何触发重排和重绘#xff1f;
7.重绘与重排的区别#xff1f; 8.说说两种盒模型以及区…目录 1.px和em的区别
2.介绍下BFC及其应用
3.介绍下粘性布局sticky
4.清除浮动的方法
5.如何用css或js实现多行文本溢出省略效果考虑兼容
6.如何触发重排和重绘
7.重绘与重排的区别 8.说说两种盒模型以及区别
9. 讲一下png8、png16、png32的区别并简单讲讲 png 的压缩原理
10.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景 1.px和em的区别
px全称pixel像素是相对于屏幕分辨率而言的它是一个绝对单位但同时具有一定的相对性。因为在同一个设备上每个像素代表的物理长度是固定不变的这点表现的是绝对性。但是在不同的设备之间每个设备像素所代表的的物理长度是可以变化的这点表现的是相对性。
em是一个相对长度单位具体大小需要相对于父元素计算比如父元素的字体大小为80px那么子元素1em就表示大小和父元素一样为80ox0.5em就表示字体大小是父元素的一半为40px 2.介绍下BFC及其应用
所谓BFC指的是一个独立的布局环境BFC内部的元素布局与外部互不影响。
触发BFC的方式有很多常见的有
设置浮动overflow设置为autoscrollhiddenposition设置为absolutefixed
常见的BFC应用有
解决浮动元素令父元素高度坍塌的问题解决非浮动元素被浮动元素覆盖问题解决外边距垂直方向重合的问题 3.介绍下粘性布局sticky
position中sticky值是css3新增的设置sticky值后在屏幕范围时该元素的位置并不受定位影响设置topleft等属性是无效的当该元素的位置将要偏移范围时定位又会变成fixed根据设置的lefttop等属性成固定位置的效果
sticky属性值有以下几个特点
该元素并不脱离文档流仍然保留元素原本在文档流中的位置当元素在容器中被滚动超过指定的偏移值时元素在容器内固定在指定位置。即如果你设置了top: 50px那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定不再向上移动。元素固定的相对偏移是相对离他最近的具有滚动框的祖先元素如果祖先元素都不可以滚动那么是相对于viewport来计算元素的偏移量 4.清除浮动的方法
clear清除浮动添加空div法在浮动元素下方添加空div并给该元素写css样式{clear:both;height:0;overflow:hidden;}给浮动元素父级设置高度父级同时浮动需要给父级同级元素添加浮动父级设置为inline-block其margin:0 auto居中方法失效给父级添加overflowhidden清除浮动方法万能清除法: ::after伪元素清浮动 5.如何用css或js实现多行文本溢出省略效果考虑兼容
单行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;多行
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;//行数
overflow:hidden;
兼容
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: ...; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}JS实现方式
使用split正则表达式将单词与单个文字切割出来存入words加上“....”判断scrollHeight与clientHeight超出的话就从words中pop一个出来 6.如何触发重排和重绘
任何改变用来构建渲染树的信息都会导致一次重排或重绘
添加删除更新DOM节点通过displaynone隐藏一个DOM节点-触发重排和重绘通过visibilityhidden隐藏一个DOM节点-只触发重绘因为没有几何变化移动或者给页面中的DOM节点添加动画添加一个样式表调整样式属性用户行为例如调整窗口大小改变字号或者滚动。 7.重绘与重排的区别
重排部分渲染树或者整个渲染树需要重新分析并且节点尺寸需要重新计算表现为重新生成
布局重新排列元素
重绘由于节点的几何属性发生改变或者由于样式发生改变例如改变元素背景色时屏幕上的部分内容需要更新表现为某些元素的外观被改变
单单改变元素的外观肯定 不会引起网页重新生成布局但当浏览器完成重排之后将会重新绘制受到此次重排影响的部分
重绘不一定出现重排重排必然会出现重绘 8.说说两种盒模型以及区别
盒模型也称为框模型就是从盒子顶部俯视所得的一张平面图用于描述元素所占用的空间。他有两种盒模型W3C模型和IE模型
理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用css给某个元素定义高或宽时IE盒模型中内容的宽或高将会包含内边距和边框而W3C盒模型并不会。 9. 讲一下png8、png16、png32的区别并简单讲讲 png 的压缩原理
PNG图片主要有三个类型分别为 PNG 8/ PNG 24 / PNG 32。
PNG 8PNG 8中的8其实指的是8bits相当于用2^82的8次方大小来存储一张图片的颜色种类2^8等于256也就是说PNG 8能存储256种颜色一张图片如果颜色种类很少将它设置成PNG 8得图片类型是非常适合的。PNG 24PNG 24中的24相当于3乘以8 等于 24就是用三个8bits分别去表示 R红、G绿、B蓝。R(0-255),G(0-255),B(0-255)可以表达256乘以256乘以25616777216种颜色的图片这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。PNG 32PNG 32中的32相当于PNG 24 加上 8bits的透明颜色通道就相当于R红、G绿、B蓝、A透明。R(0255),G(0255),B(0255),A(0255)。比PNG 24多了一个A透明也就是说PNG 32能表示跟PNG 24一样多的色彩并且还支持256种透明的颜色能表示更加丰富的图片颜色类型。
PNG图片的压缩分两个阶段
预解析Prediction这个阶段就是对png图片进行一个预处理处理后让它更方便后续的压缩。压缩Compression执行Deflate压缩该算法结合了 LZ77 算法和 Huffman 算法对图片进行编码。 10.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
display: none (不占空间不能点击)场景显示出原来这里不存在的结构visibility: hidden占据空间不能点击场景显示不会导致页面结构发生变动不会撑开opacity: 0占据空间可以点击场景可以跟transition搭配
