前言
在响应式布局逐渐成为主流的今天，网页或者app的流式布局已经不算是一个新鲜的词汇了。今天我要讲的一个内容也是跟页面流式布局有关，如何让你的网页实现完美的缩放？
网页布局
我们可以很快速的写出一个响应式布局的页面，首先看一下效果图。
网页布局
其中html部分的代码如下：
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使用技巧（第一弹）
2025年04月25日
2015-07-29 12:01:00 作者：马荣
经过了漫长的研发，微软最新的操作系统Windows 10终于正式完整地展现在用户面前了。那么相信大家当下最关心的一个问题就是，Win10到底是个什么样的系统？尽管有着多场发布会、多个预览版的轮番曝光，但是这些碎片化的信息还是很难拼凑出一个完整的印象，所以我们今天就带来了Windows 10的360度全方位评测，看看这套新系统究竟有哪些不一样。
回归的开始菜单好用吗？
2025年04月25日
一次分清clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop概念：
clientHeight：可视的，看得见的部分，content+padding；
offsetHeight：在clientHeight基础上，添加“”边框“”，即content+padding+margin；
scrollTop：超过clientHeight“顶部界线”的部分，即看不见的、已经 滚动出去 的部分；
Powered By Z-BlogPHP 1.7.4