我调查了身边五六年经验以上的几个前端同学和同事，尽然发现绝大部分人都不知道，当然，在看到这个文章之前，我也不知道这个，平时虽然都一直在做web前端开发，但真没涉及到这块，或者说涉及到了，也解决了，但是还真没探究过这个问题，你是否躺枪了呢？
这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,
2025年04月26日
我调查了身边五六年经验以上的几个前端同学和同事，尽然发现绝大部分人都不知道，当然，在看到这个文章之前，我也不知道这个，平时虽然都一直在做web前端开发，但真没涉及到这块，或者说涉及到了，也解决了，但是还真没探究过这个问题，你是否躺枪了呢？
这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,
2025年04月25日
CSS 是前端里面的基础之一，也是非常重要的一部分，它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中，总会有将元素或者文字进行水平垂直居中的要求。下面w3cschool编程狮就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。
2025年04月25日
在响应式布局逐渐成为主流的今天，网页或者app的流式布局已经不算是一个新鲜的词汇了。今天我要讲的一个内容也是跟页面流式布局有关，如何让你的网页实现完美的缩放？
我们可以很快速的写出一个响应式布局的页面，首先看一下效果图。
网页布局
其中html部分的代码如下：
2025年04月25日
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS实现自适应正方形以及等宽高比矩形</title>
</head>
<style>
/* * {
padding: 0;
margin: 0;
} */
html, body {
height: 100%;
}
/* 方法一: */
.w_son-cont {
width: 20% ;
/*基于父级的宽度设置*/
padding-top: 20% ; /* 或者padding-bottom: 20%; */
background: red ;
}
/* 方法二: 这个方法不能实现正方形; 高度总是要比宽度大几个像素 */
.w_vw-cont {
width: 30%;
height: 30vw;
background: red;
}
/* 方法三: */
.w_mar-outer {
overflow: hidden;
width: 20%;
background-color: skyblue;
}
.w_mar-outer::after {
content: '';
display: block;
padding-top: 100%; /* margin 百分比相对父元素宽度计算 */
}
</style>
<body>
<div class="w_son-cont"></div>
<div class="w_vw-cont"></div>
<div class="w_mar-outer"></div>
</body>
</html>2025年04月25日
背景：
在使用layui table展示列表数据的时候，有时候单元格的内容有多行，这个时候需要设置单元格的高度自适应，这种情况下，如果有设置表格的某些列固定（fixed）的话，会造成固定列的样式错乱，排序的时候样式也会错乱，需要做特殊处理。
2025年04月25日
有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这可以大大节约我们编码的时间。
作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性？
在本文中，我将介绍一些不一样的CSS属性，希望能给你带来点新鲜感，废话不多说，让我们开始吧。
2025年04月25日
很多人在使用 CSS 时,对 Display, Visibility 和 Overflow 三个属性的理解并不是很清晰,这里就对这三个属性做一下分析,对应三个属性在使用时的区别.
Display
display 用来设置或检索对象是否及如何显示。
display 属性为 none 时,隐藏标签对象。不会为对象保留其位置空间,它下面所在的元素会被自动上移占有被隐藏标签位置。
2025年04月25日
初次使用 canvas 来绘图的小伙伴可能遇到过绘制出来的图像模糊不清的情况
我们先一起来绘制一个矩形
<body>
<style>
canvas {background: #eee;}
</style>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.strokeStyle = '#000'
ctx.lineWidth = 1
ctx.strokeRect(10, 10, 100, 100)
</script>
</body>
2025年04月25日
当大多数人想到在 Web 上进行计算时，他们会想到 JavaScript。考虑到 JavaScript 是 Web 的主要编程语言，这是有道理的，但是如果我告诉你，你可以只用 CSS 进行相当复杂的计算。老实说，它非常神奇且无限有用。
2025年04月25日
编辑导读：对于 Axure原型工具，很少有产品经过系统学习，一般都是直接上手，边摸索边学习，这直接导致很多快捷操作被忽视。笔者在日常工作中总结出以下小技巧，希望对各位有帮助。
之前整理了2期Axure的使用技巧，大约有36个技巧，具体可查看下边的文章：
产品必会的Axure使用技巧（第一弹）
Powered By Z-BlogPHP 1.7.4