CSS
文章平均质量分 55
Kobe_G
shopee前端开发工程师,一名正在进阶的前端学习者
展开
-
css、js的加载是否阻塞DOM的解析与渲染
首先说一下浏览器渲染页面的流程:浏览器内核(渲染进程)拿到静态资源后,渲染大概可以划分成以下几个步骤:解析html构建dom树解析css构建render树(将CSS代码解析成树形的数据结构,然后结合DOM合并成render树)布局render树(Layout/reflow),负责各元素尺寸、位置的计算绘制render树(paint),绘制页面像素信息浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上。从以上步骤可以得出几个结论:1.html和css的原创 2022-04-29 18:30:00 · 2754 阅读 · 1 评论 -
css之width继承
只说两点:一、哪些情况下子元素会继承父元素的width属性?只要子元素是块级元素且不定位、不浮动,都会继承父元素的width属性二、width:100%,是以谁为基准的?对于使用position:relative的子元素或浮动的子元素,其基准点始终是基于其直接父元素而言的,跟其父元素是否有定位无关对于绝对定位position:absolute的子元素,其基准点是相对于离其最近的一层定位父元素而言。如果其所有父级元素均无定位,则是相对于body而言对于使用position:fixed的子元素,其原创 2022-04-29 11:44:54 · 1211 阅读 · 0 评论 -
关于如何使用css3中的steps完成图片帧动画
前端中的动画效果可以有很多种方法完成,对于一些简单的颜色、大小、长度、位置变化都可以通过transition轻松实现,对于一些复杂的、不规则的动画就要借助图片来完成了。今天介绍一种结合图片和css3中的keyframes和animation实现的复杂动画方法。先看图片和动画效果,实现的原理是通过改变背景图片的位置,从而让人看起来是动画,看一下它的源码:<div class="box"></div>.box { width: 50px; height:原创 2020-12-29 18:38:34 · 606 阅读 · 0 评论 -
关于如何用CSS3制作切割轮播图的问题
我们先来看一下切割轮播图的效果:这种切割轮播图非常的炫酷,但是有一个缺点就是只能有四张图片,如果想实现4张图片以上的切割效果就非常的麻烦。本文只阐述四张图片切割图的制作方法。切割轮播图的原理是一个立方体,立方体的四个面各有一张图片,然后让这个立方体绕水平轴旋转就实现了切割轮播图的效果。首先,我们先写好html结构:<div class="view"> <ul&g...原创 2019-02-28 14:42:36 · 729 阅读 · 6 评论 -
CSS3-选择器和过渡
一、选择器和盒模型1.属性选择器E[attr]:查找指定的拥有attr属性的E标签E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签,=是严格匹配E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签E[at...原创 2019-02-10 13:15:25 · 315 阅读 · 0 评论 -
关于如何使用CSS3制作立方体的问题
今天给大家带来如何用css3制作立方体效果的案例,话不多说,先上图:先说一下网页当中的数轴,以屏幕的左上方为原点:重点说一下Z轴,Z轴是垂直于屏幕的,比如我们给一个元素加transform属性,transform:translateZ(100px);从正面看是没有任何变化的。所以我们不能从正面去看,一般我们想看到立方体效果,都要给box加一个三维空间上的旋转:transform: rota...原创 2019-02-15 22:17:17 · 460 阅读 · 0 评论 -
CSS3-transform二维三维变换和flex伸缩布局
一、transform1.二维变换移动:translate /*使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态 1.如果只有一个参数就代表x方向 2.如果有两个参数就代表x/y方向*/ /*transform: translate(100px);*/ ...原创 2019-02-15 21:30:33 · 915 阅读 · 0 评论 -
关于如何用css使盒子的边框做成圆角的问题
要实现圆角的效果其实很简单,用一个radius属性就行了。话不多说,直接上代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css">原创 2018-11-17 20:58:56 · 10637 阅读 · 0 评论 -
小技巧-不使用js制作高级足球比赛赛程表
今天给大家介绍一种不使用js而用id来实现制作高级足球比赛赛程表(点击轮次即可显示出对应的轮次的赛程,后文会详细说明)本文代码只展示核心代码我们先用a标签写出轮次图的代码:(a里面的href使用id)<div class="lunci3"> <ul> <li>&...原创 2018-09-27 13:12:47 · 4021 阅读 · 4 评论 -
关于css中line-height(行高)设置无效的问题
关于css中line-height(行高)设置无效的问题我们先写下这一串代码:&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp原创 2018-09-21 21:33:24 · 23656 阅读 · 12 评论