智能建站平台,提供网络推广服务,网站建设需要的技能有哪些,网站开发招标技术规范书文章目录 1、清除浮动2、opacity: 0、visibility: hidden、display: none 的区别3、css画一个三角形4、常见的主流浏览器前缀5、重绘与重排的区别#xff1f;6、如何优化图片7、CSS3 中 transition 和 animation 的属性分别有哪些8、居中为什么要使用 transform#xff08;为… 文章目录 1、清除浮动2、opacity: 0、visibility: hidden、display: none 的区别3、css画一个三角形4、常见的主流浏览器前缀5、重绘与重排的区别6、如何优化图片7、CSS3 中 transition 和 animation 的属性分别有哪些8、居中为什么要使用 transform为什么不使用 marginLeft/Topmarginleft/top如何居中transform如何居中transform不会造成页面大面积的重绘与重排 9、 用于控制图像滚动的属性是什么10、伪类与伪元素11、css样式权重优先级 1、清除浮动
先来回答一个问题为什么会需要清除浮动
如果一个dom内的所有子dom都是floatleft 或者floatright那么所有的子dom都处于另外一个层级父dom所在的层级将为空所以如果不规定父dom的高度那父dom的高度就是0
1.清除浮动最简单的方式就是规定父dom的高度 heightxxxpx 2.给父级dom添加overflow:hidden 清除浮动方法 当overflow 属性不为 visible时会形成一个BFC的独立渲染区域这个区域将会视float为同一个独立层级进行渲染所以float dom的高度就是整个BFC渲染区域的高度 3.万能清除法 ::after 伪元素清浮动现在主流方法推荐使用给父dom加一个clear类名。 .clear::after {content:;display:block;height:0;clear:both;visibility:hidden;}2、opacity: 0、visibility: hidden、display: none 的区别
display: none (让dom彻底不排布也不渲染自然是不占空间也不能点击) visibility: hidden让dom只排布不渲染所以占据空间但不能点击 opacity: 0让dom既排布又渲染出来只不过颜色是透明的看不见但不代表没渲染出来它是存在的占据空间可以点击
3、css画一个三角形
div{width: 0;height: 0;border: 10px solid red;border-top-color: transparent;border-left-color: transparent;border-right-color: transparent;
}4、常见的主流浏览器前缀
-moz-firefox 火狐浏览器兼容性前缀 -o-opera 浏览器兼容性前缀 -ms-早期ie浏览器以及edge浏览器兼容性前缀 -webkit-主流的google浏览器以及SafariOpera的较新版本几乎所有的iOS浏览器 的兼容性前缀
随着前端技术的发展曾经的五大主流浏览器也会使用统一的内核目前来看webkit最有希望。
5、重绘与重排的区别
首先确立一点渲染树是合成了html和css之后才渲染到页面上的也就是说至少会有一次排布和绘图的过程。css计算-排布-绘图总是这样一个过程。 排布就是计算dom放置在页面的位置和大小绘图就是将dom的每一个像素点展示出来。
1.如果用户的操作或者前端程序的变化导致页面发生了变化就可能发生重绘和重排。 2.通俗意义上讲如果一个dom的大小位置发生变化就会造成重排如果一个dom只是颜色背景发生变化可能只会造成重绘。 3.重排必定会重绘而重绘不一定会重排。 4.重绘与重排也是有范围的页面的dom不总是处于同一层级比如position:fixed/absolute,z-indextransform等动画都会让部分dom在一个全新的层级中进行布局层与层之间是相互独立的层内的重绘与重排不会影响到层外所以开发过程中合理切割层级将会有效降低重绘与重排带来的性能消耗。
6、如何优化图片
css处理图片也有多种手段 1.将多个图标文件整合到一张图片中雪碧图或者精灵图在background中我们可以设置position的xy坐标来展现不同的内容。 2.一般图片的size小于8k的情况下直接转为base64使用。 3.对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法能带来更小的图片体积而且拥有肉眼识别无差异的图像质量缺点就是兼容性并不好 4.对于移动端来说屏幕宽度就那么点完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载可以计算出适配屏幕的宽度然后去请求相应裁剪好的图片。 5.一些简单的装饰图片或者是简单的动图尽量使用css动画效果或者css来实现。
7、CSS3 中 transition 和 animation 的属性分别有哪些
transition 过渡动画
transition-property指定过渡的 CSS 属性 transition-duration指定过渡所需的完成时间 transition-timing-function指定过渡函数 transition-delay指定过渡的延迟时间
animation 关键帧动画
animation-name指定要绑定到选择器的关键帧的名称 animation-duration动画指定需要多少秒或毫秒完成 animation-timing-function设置动画将如何完成一个周期 animation-delay设置动画在启动前的延迟间隔 animation-iteration-count定义动画的播放次数 animation-direction指定是否应该轮流反向播放动画 animation-fill-mode规定当动画不播放时当动画完成时或当动画有一个延迟未开始播放时要应用到元素的样式 animation-play-state指定动画是否正在运行或已暂停
8、居中为什么要使用 transform为什么不使用 marginLeft/Top
先说一下transform和marginleft/top是如何居中的
marginleft/top如何居中
.position-outter {position: relative;width: 300px;height: 300px;background-color: plum;
}.position-center {position: absolute;left: 50%;top: 50%;width: 100px;height: 100px;margin-left: -50px;margin-top: -50px;background-color: pink;
}transform如何居中
.translate-position-outter { position: relative; width: 300px; height: 300px; background-color: plum;
}.translate-position-center {position: absolute;left: 50%;top: 50%;background-color: pink;transform: translate(-50%, -50%);
}transform不会造成页面大面积的重绘与重排
transform 属于合成属性composite property对合成属性进行 transition/animation 动画将会创建一个合成层composite layer这使得被动画元素在一个独立的层中进行动画。只要该层的内容不发生改变就没必要进行重绘repaint浏览器会通过重新复合recomposite来形成一个新的帧。
top/left属于布局属性该属性的变化会导致重排reflow/relayout所谓重排即指对这些节点以及受这些节点影响的其它节点进行CSS计算-重排-重绘过程浏览器需要为整个层进行重绘造成了极大的性能开销。
9、 用于控制图像滚动的属性是什么
background-attachment该属性设置背景图像是随页面其余部分滚动还是固定滚动。
.box {background-image: url(img.png);background-repeat: no-repeat;background-attachment: fixed;
}10、伪类与伪元素
伪元素能够在视觉上呈现出来但在又无法在dom中找到的元素常见一些页面icon或者tooltip是通过伪元素实现的伪元素常用的有xxx::afterxxx::beforexxx::first-linexxx::first-letter 伪类将特殊的效果添加到特定选择器上。它是已有元素上添加类别的不会产生新的元素常见的包括:hover:nth-child():first-child等
11、css样式权重优先级
!important 内联样式 id class tag
