CSS
不知名网友小H
vinchin
展开
-
css画皮卡丘
目录前言效果预览素材来源踩坑记录+技巧总结(MVC)源码奉上一、前言学习前端有一段时间了,最近复习了一下 CSS,还有 MVC 模式。发现还是有很多不足的地方。想着,就简单的使用 CSS 画个东西吧。再简单的使用 MVC 实现一个播放器 player不知道有没有机会做你的皮卡丘,举高高,要抱抱~这才是猛男该看的东西(doge)二、效果预览Gitee 预览温馨提示:点击皮卡丘的鼻子可以动的PC 端手机端三、素材来源CodePen搜索 pikachu原创 2020-12-14 16:28:00 · 513 阅读 · 1 评论 -
【CSS三种居中方案全解】CSS水平垂直居中常用方法集结
目录前言CSS水平垂直居中参考资料系列文章CSS 水平居中CSS 垂直居中一、前言难得搜索整理一番 CSS 垂直居中,水平居中,水平垂直居中的近乎所有的方案。既能回顾知识查漏补缺,又能提升知识增长见识。CSS 本身就没有道理,以下内容全是个人搜集整理,参考资料放在最后。居中的方案只是为了实现居中,不代表每个方案都是最好的解决办法,因为有些方案还是很离谱的,一般用不上。希望能帮助到你们。话不多 BB,直接上才艺(代码演示)tips:内容挺多的,顺着标题找吧二、CSS 水平原创 2020-12-09 13:38:25 · 333 阅读 · 0 评论 -
【CSS三种居中方案全解】CSS垂直居中常用方法集结
目录前言CSS垂直居中参考资料系列文章CSS 水平居中CSS 水平垂直居中一、前言难得搜索整理一番 CSS 垂直居中,水平居中,水平垂直居中的近乎所有的方案。既能回顾知识查漏补缺,又能提升知识增长见识。CSS 本身就没有道理,以下内容全是个人搜集整理,参考资料放在最后。居中的方案只是为了实现居中,不代表每个方案都是最好的解决办法,因为有些方案还是很离谱的,一般用不上。希望能帮助到你们。话不多 BB,直接上才艺(代码演示)tips:内容挺多的,顺着标题找吧二、CSS 垂直原创 2020-12-09 13:38:08 · 281 阅读 · 2 评论 -
【CSS三种居中方案全解】CSS水平居中常用方法集结
目录前言CSS水平居中参考资料CSS 居中系列文章CSS 垂直居中CSS 水平垂直居中一、前言难得搜索整理一番 CSS 垂直居中,水平居中,水平垂直居中的近乎所有的方案。既能回顾知识查漏补缺,又能提升知识增长见识。CSS 本身就没有道理,以下内容全是个人搜集整理,参考资料放在最后。居中的方案只是为了实现居中,不代表每个方案都是最好的解决办法,因为有些方案还是很离谱的,一般用不上。希望能帮助到你们。话不多 BB,直接上才艺(代码演示)tips:内容挺多的,顺着标题找吧二、原创 2020-12-09 13:37:51 · 1012 阅读 · 0 评论 -
【CSS盒模型】CSS两种盒模型
目录CSS盒模型盒模型的组成两种盒模型总结参考资料一、CSS 盒模型当对一个文档进行布局(lay out)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)。CSS 决定这些盒子的大小、位置以及属性(例如颜色、背景、边框尺寸…)。其实 HTML 都可以看做是盒子模型,只需要使用 CSS 控制就行了二、盒模型的组成一个盒子由 4 个部分组成:margin+border+paddi原创 2020-12-07 22:27:16 · 231 阅读 · 0 评论 -
CSS布局--超详解版
CSS布局目录布局分类布局思路布局需要用到哪些属性float布局flex布局grid布局(二维平均布局一、布局分类固定宽度布局:一般宽度设置为960、1000、1024px不固定宽度布局:依靠文档流的原理来布局响应式布局:PC上一种布局样式,手机上又是另外一种布局样式二、布局思路从大到小(老手推荐)先定下大局完善每个部分的小布局从小到大(新人推荐)先完成小布局组合成大布局三、布局需要使用那些属性一图流四、float布局原创 2020-10-12 10:24:20 · 526 阅读 · 2 评论 -
CSS动画及优化(附链接)
CSS 动画一、动画的定义许多静止的画面以一定的速度(如每秒 30 张)连续播放(FPS 就是 30 了)。而我们肉眼因视觉残象产生错觉误以为是活动的画面。(这就是人脑的 BUG 吗?i 了 i 了)帧:每个静止的画面。二、CSS 动画那么我们用 CSS 如何实现呢?一个简单的例子:将一个 div 盒子从左向右移动PS:我不知道如何上传视频演示,下面的演示也是一样。请知道如何上传视频的小伙伴留言告诉下我。我好修改。<!DOCTYPE html><html原创 2020-10-04 22:40:45 · 158 阅读 · 0 评论 -
transform全解
transform 全解一、四个常用功能位移:translate缩放:scale旋转:rotate倾斜:skew1. 位移 translate向 X 轴方向移动:translateX().demo{ transform:translateX(6px); }向 Y 轴方向移动:translateY().demo{ transform:translateY(50%); /* 向Y方向移动(自身的widt原创 2020-10-04 17:26:47 · 1119 阅读 · 0 评论 -
浏览器渲染原理--图解+流程
浏览器渲染流程一、步骤根据 HTML 构建 HTML 树(DOM)根据 CSS 构建 CSS 树(CSSOM)将两棵树合并成一颗渲染树(render tree)Layout 布局(文档流、盒模型、计算大小和位置)Paint 绘制(把边框、文字颜色、阴影等画出来)Compose 合成(根据层叠关系展示画面)二、三棵树图示三、如何更新样式采用 JS 来更新样式 div.style.background='red'; div.style.display='none';原创 2020-10-04 16:38:35 · 179 阅读 · 0 评论