CSS
关注
分享
扫一扫
文章平均质量分 55
xj-L
哈哈哈哈哈哈
展开
-
圣杯布局、双飞翼布局、flex布局
在面试中，我们经常会遇到CSS中两端宽度固定大小，中间自适应问题问题： 编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为100px，right宽度为200px，main处在中间，宽度自适应解决方法：圣杯布局页面DOM结构如图：设置外层div内边距，使中间div宽度为100%，将所有节点设置浮动方向为left，利用margin-l...原创 2018-07-18 11:08:08 · 308 阅读 · 0 评论 -
CSS渐变实现进度条、立体小球
进度条 设置 div 元素属性 background-image 为 linear-gradient （渐变）来实现倾斜的进度条，在使用 animation 动画来让进度条动起来，就能达到想要的效果啦HTML 代码：<div id="loader"></div>CSS 代码：@keyframes loader{ 0% { } ...原创 2018-11-29 16:05:05 · 1836 阅读 · 0 评论 -
位图与矢量图
位图与矢量图位图（BitMap）矢量图位图（BitMap）位图又叫像素图，其构成最小单位是像素，在缩放过程中会失真。位图是一个 HTML 元素，其中的图形不会单独创建 DOM 元素。因此我们不能通过 JavaScript 操控位图内单独的图形，不能对其中的具体图形进行监控。位图每次更改位图设置都会重新绘制，位图相对矢量图能达到更好的视觉效果，效果越复杂需要的像素越多，图像文件内存占比也越大矢...原创 2018-11-29 09:45:43 · 1262 阅读 · 0 评论 -
页面中绘制圆周运动的 dom
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style> * { margin: 0;原创 2018-09-08 22:12:42 · 354 阅读 · 0 评论 -
两栏自适应布局与高度自适应
两栏自适应float + BFC使用 float 让 left 块脱离文档流，使用 BFC 规则，让 right 块宽度自适应，代码如下<!-- CSS 样式 --><style> * { margin: 0; padding: 0; } .left { float: left; ...原创 2018-08-20 21:48:08 · 2170 阅读 · 0 评论 -
CSS 权重问题
权重等级行内内嵌样式行内样式包含在你的 html 标签中 对你的元素产生直接作用，权重最大，但是不能声明伪类样式<div style="position:absolute;color:red;">test</div>ID 选择器ID 一般用来作为元素的唯一标识，权重第二类选择器、属性选择器、伪类选择器属性选择器：针对标签中的属性的选择器（这个形容有点...原创 2018-08-20 15:07:02 · 926 阅读 · 0 评论 -
逐帧动画
在网页中我们通常需要一些图片动画效果，一般我们可以使用 gif 来展示，但如果我们需要与动画有交互， gif 就不能满足需求。下面我们介绍其他方法。Js通过 js 逐帧切换 dom 的背景图 url ，达到一个动画的效果，并且可以实现交互，只是在这里我们需要很多张可以连贯起来的图片。可能会对网页负载有影响，因为会加载很对张图片。我们主要讲讲用 CSS 来实现的方法，js 就不多做介绍了...原创 2018-08-08 20:27:55 · 675 阅读 · 0 评论 -
浏览器渲染过程及重绘重排
浏览器渲染过程HTML代码转化成DOM CSS代码转化成CSSOM（CSS Object Model） 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息） 生成布局（layout），即将所有渲染树的所有节点进行平面合成 将布局绘制（paint）在屏幕上详情可以思考下面两张图： 重排和重绘（重新布局、重新绘制）修改DOM 修改样式表 用户事件（比如...原创 2018-08-01 11:30:21 · 1244 阅读 · 0 评论 -
Flex布局（CSS弹性盒子）
CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。 ----摘自MDN 使用CSS弹性盒子.box{ display: flex;}...原创 2018-07-31 16:10:12 · 878 阅读 · 1 评论 -
前端性能优化
HTML语义化HTML：可以使代码简洁清晰，支持不同设备，便于团队开发，对搜索引擎和用户更加友好； 减少DOM节点：加速页面渲染； 给图片加上正确的宽高值：减少页面重绘，同时防止图片缩放； 避免src属性和link的href属性为空：当值为空时浏览器很可能会把当前页面当成其属性值加载； 正确的闭合标签；CSS合并css文件 使用link 合写css（通过少些css属性来达...原创 2018-07-22 15:13:56 · 254 阅读 · 0 评论 -
CSS预编译---SASS
声明变量（$name:10px;） 计算功能（font-size:10px-2px;） 嵌套#idName { .className { color: red; }}注释（标准的CSS注释 /* comment */ ，会保留到编译后的文件。 单行注释 // comment，只保留在SASS源文件中，编译后被省略。 在/*后面加一个感叹号，表示这是...原创 2018-07-22 15:08:15 · 347 阅读 · 0 评论 -
HTML5-History路由
现今框架（Vue、React等）内置路由（Router）默认一般为Hash路由，包括我自己搭建的博客路由也使用Hash路由今天主要记录H5的新增API--History，可以实现不刷新操作页面，通过其中API操作浏览器历史记录history.pushState(state, title, url);/* state通常作为页面数据状态值* title即页面标题，一般都为null* ...原创 2018-07-24 11:42:20 · 3057 阅读 · 0 评论 -
怪异模式与标准模式
什么是怪异模式与标准模式：浏览器一般都有两种解析渲染模式：标准模式和怪异模式。在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。而浏览器解析渲染时采取什么模式是由什么决定呢？答案是DOCTYPE声明DOCTYPE声明：告知浏览器如何解析和渲染文档 DTD：文档类型定义//H5中DOCTYPE...原创 2018-07-24 11:11:43 · 780 阅读 · 0 评论 -
Canvas 绘制背景小球、与鼠标交互的小球
canvas入门，跟随掘金小册如何使用 Canvas 制作出炫酷的网页背景特效学习，完成一个简单的 canvas demo下面是代码，操作解释都有注释：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie原创 2018-11-30 11:25:34 · 995 阅读 · 1 评论