css
文章平均质量分 90
LYFlied
这个作者很懒,什么都没留下…
展开
-
H5项目适配系统深色模式方案总结
文章目录一、背景二、问题三、H5项目适配深色模式方案1.声明 color-scheme1.1meta1.2CSS2.通过 CSS 媒体查询3.图片适配4. JavaScript中判断当前模式&监听模式变化4.1matchMedia4.2addListener()JavaScript监听判断一、背景随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减原创 2021-04-13 17:51:20 · 3473 阅读 · 23 评论 -
CSS-粘连布局-实现以及变形实战
文章目录一、粘连布局二、简单实现三、实战-简化DOM结构注意点一、粘连布局特点:有一块内容,当的高康足够长的时候,紧跟在后面的元素会跟在元素的后面滚动。当元素比较短的时候(比如小于屏幕的高度),我们期望这个元素能够“粘连”在屏幕的底部如图:图片来源https://blog.csdn.net/VhWfR2u02Q/article/details/84076421二、简单实现DOM结构:<body> <div class="wrap">原创 2021-04-09 20:10:49 · 2037 阅读 · 19 评论 -
前端面试系列-CSS基础-div水平垂直居中&&文本居中(单行文字、多行文字)
本文介绍div水平垂直居中&&文本居中(单行文字、多行文字)一、div水平垂直居中1.flex2.position (元素已知宽高)3.position transform (元素未知宽高度)4.position(元素已知宽度)maigin:auto5.table-cell二、文本垂直居中(单行文字、多行文字)1.利用line-height和vertical-align2.利用display:table-cell3.利用flex布局align-items:center;原创 2021-03-27 13:20:54 · 2559 阅读 · 8 评论 -
前端性能优化-CSS性能优化
一、内联首屏关键CSS二、异步加载CSS异步加载的几种方式1.js动态创建样式表link元素,并插入到DOM中。2.设置media属性3.设置rel属性4. rel="preload"三、文件压缩四、去除无用CSS五、有选择地使用选择器六、减少使用昂贵的属性七、优化重排与重绘1. 减少重排2.避免不必要的重绘八、让元素及其内容尽可能独立于文档树的其余部分九、避免使用@import十、开启GPU渲染动画十一、合并css文件原创 2021-03-27 12:39:48 · 2597 阅读 · 10 评论 -
前端面试系列-CSS-层叠上下文、层叠等级、层叠顺序、z-index
前端面试系列-CSS-层叠上下文、层叠等级、层叠顺序、z-index如果一个元素含有层叠上下文,(也就是说它是层叠上下文元素),我们可以理解为这个元素在Z轴上就“高人一等”,最终表现就是它离屏幕观察者更近。- 在**同一个层叠上下文中**,它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。- 在其他普通元素中,它描述定义的是这些普通元素在Z轴上的上下顺序。1、首先先看要比较的两个元素是否处于同一个层叠上下文中:- 如果是,谁的层叠等级大,谁在上面(怎么判断层叠等级大小呢?——看“层叠原创 2021-03-25 20:55:55 · 654 阅读 · 2 评论 -
移动端1px实现和问题踩坑
效果要实现移动端上的一像素线,window.devicePixelRatio=物理像素 /CSS像素目前主流的屏幕DPR=2或者3。拿2倍屏来说,设备的物理像素要实现1像素,而DPR=2,所以css 像素只能是 0.5。一般设计稿是按照750来设计的,它上面的1px是以750来参照的,而我们写css样式是以设备375为参照的,所以我们应该写的0.5px先看看效果:Chrome浏览器PCChrome浏览器移动端IE浏览器下,显示问题实现代码<div class="wrap"原创 2021-03-19 13:35:44 · 903 阅读 · 8 评论 -
CSS常见面试题(持续更新)
CSS常见面试题:实现单行文字、多行文字的垂直居中CSS常见布局的几种实现方式Flex(弹性布局)实现五大常用布局html标签分类浮动以及清除浮动BFC属性继承性CSS盒子模型:W3C盒子模型(标准盒子模型),IE盒子模型(怪异盒模型)CSS中 a标签的4个伪类CSS实现单行文本、多行文本溢出显示省略号(…)CSS选择器display:none和visibility:hidden两者的区别渲染机制div高度永远是宽度的一半大小为父元素宽度一半的正方形原创 2021-03-17 21:43:51 · 4198 阅读 · 5 评论 -
浮动以及清除浮动
浮动以及清除浮动,BFC块状格式化上下文,CSS样式问题原创 2021-03-17 20:11:29 · 759 阅读 · 0 评论 -
Flex(弹性布局)实现五大常用布局
Flex使用总结以及利用Flex(弹性布局)实现五大常用布局(css面试布局)弹性布局如何实现?常用样式有哪些?原创 2021-03-13 17:43:45 · 3952 阅读 · 2 评论 -
CSS常见布局的几种实现方式(面试常考)
CSS常见布局的几种实现方式(面试常考):两栏布局、三栏布局、流体布局(浮动)、BFC三栏布局、双飞翼布局、圣杯布局、flex、table布局、绝对定位布局、网格布局(Grid布局)原创 2021-03-13 16:29:27 · 5838 阅读 · 1 评论