前端开发

CSS实现移动端屏幕适配

2020-11-02129次阅读csscss模块
在前端开发中,一般使用淘宝的flexible。其原理是使用js动态计算html的font-size,利用rem来实现不同宽度的适配。但也有它的一些缺点,比如性能损耗,由于js的阻塞加载和动态计算,页面不免会出现卡顿和闪屏的现象,影响用户体验。现在我们不妨看看CSS如何实现移动端屏幕适配!
前端开发

css属性选择器

2020-10-28170次阅读css
css属性选择器,做个记录
前端开发

clip-path轻松实现三角形多边形

2020-10-22150次阅读css
clip-path就是利用遮罩的方法,连接坐标绘制遮罩区域,就可以做出许多不同的形状,让底色或者是地图按遮罩的区域显示出来。
前端开发

display:contents

2020-09-23201次阅读css
display:contents于2016年就已经得到了Firefox的支持。display:contents使盒子不产生任何框 ,因此不会渲染其背景、边框和内边距,但颜色、字体等继承的属性还是会对其子元素产生效果。( 即在盒子上添加display:contents , 使盒子设置了background border padding width height 等属性会失效 )
前端开发

css下划线动画

2020-08-25227次阅读csscss模块
css下划线动画,支持多个文字换行下划线动画。
前端开发

backdrop-filter实现毛玻璃效果

2020-07-27237次阅读csscss模块
CSS 属性backdrop-filter可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。
前端开发

拥抱Grid网格布局基本概念之Grid项目

2020-07-20254次阅读csscss模块Grid网格布局
CSS Grid网格布局是为二维布局服务的(同时沿着横向和纵向),Flexbox弹性布局是为一维布局服务的(只能沿横向或纵向的)。CSS Grid网格布局项属性有grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row、grid-area、justify-self、align-self、place-self
前端开发

拥抱Grid网格布局基本概念之Grid容器

2020-07-17283次阅读csscss模块Grid网格布局
CSS Grid网格布局是为二维布局服务的(同时沿着横向和纵向),Flexbox弹性布局是为一维布局服务的(只能沿横向或纵向的)。CSS Grid网格布局容器属性有display: grid、grid-template-columns、grid-template-rows、grid-template-areas、grid-template、column-gap、row-gap、gap、justify-items、align-items、place-items、justify-content。。。。
前端开发

::part()为Shadow DOM中具有匹配part属性的任何元素添加样式

2020-07-09259次阅读csshtml5css模块
Shadow DOM 为Web组件中的DOM和CSS提供了封装,保持与主文档的DOM保持分离。::part()则可以为Shadow DOM中具有匹配part属性的任何元素添加样式
前端开发

scroll-margin-top应用

2020-06-19313次阅读css
fixed固定导航中例如Jump链接指向当前页中的Header。那您会发现固定导航会挡住Header