display:block小技巧

发表于2022-10-31|更新于2026-02-24

|浏览量:

成功之道，在于你为获得成功所做出的积极努力，而不在于预先就衡量这种成功的价值——哈里特

分享一个小技巧

display:block

可以将style标签可见

例如：

<body>
    <style contenteditable style="display: block;white-space: pre">
        * {
            transition: all 0.2s
        }

        html {
            background: #ff00ff;
            font-size: 16px
        }

    </style>
</body>

因为我们这里给了contenteditable

所以可以直接在页面上编辑

试试吧

前端

相关推荐

2023-06-10

log-viewer

心平气和则能言——朱熹 https://github.com/FEMessage/log-viewer 分享一个前端日志库其提供了中文文档 https://github.com/FEMessage/log-viewer/blob/dev/README-zh.md

2022-04-06

react hook 生命周期

诚实的生活方式其实是按照自己身体的意愿行事，饿的时候才吃饭，爱的时候不必撒谎。——马尔克斯《霍乱时期的爱情》官方文档：https://zh-hans.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect 直接上代码： 123456789101112131415161718192021222324252627282930313233343536373839404142'use strict';function LikeButton() { const [liked, setLiked] = React.useState(false) const [count, setCount] = React.useState(0) React.useEffect(() => { // 只执行一次 setInterval(() => setCount(state => ++state), 1000) ...

2022-12-26

pug

人心只能赢得，不能靠人馈赠——叶芝分享一个前端框架pug github地址：https://github.com/pugjs/pug 它可以以下面的方式编写html 12345678910111213141516doctype htmlhtml(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) bar(1 + 5); body h1 Pug - node template engine #container.col if youAreUsingPug p You are amazing else p Get on it! p. Pug is a terse and simple templating language with a strong focus on performance and powerful fe...

2021-09-13

css模糊

我们都希望自己过艺术的一生，但艺术是什么，却没有明确的定义。你过早地为人生设限，大多数时候是不成熟的表现。——灵遁者对应的css代码为： 1filter: blur(1px); 这里可以更改blur值的大小 1filter: blur(2px);

2022-04-07

setState异步问题

若人间有情，那是开始，也是尽头。——北岛怀念顾城今天使用react中setState后立马从state中获取，然后使用，发现时灵时不灵的，我立马意识到setState可能是异步的，翻看官方文档，果然：调用 setState 其实是异步的 —— 不要指望在调用 setState 之后，this.state 会立即映射为新的值。如果你需要基于当前的 state 来计算出新的值，那你应该传递一个函数，而不是一个对象（详情见下文）。代码不会像预期那样运行的示例： 123456789101112131415161718incrementCount() { // 注意：这样 *不会* 像预期的那样工作。 this.setState({count: this.state.count + 1});}handleSomething() { // 假设 `this.state.count` 从 0 开始。 this.incrementCount(); this.incrementCount(); this.incrementC...

2022-03-09

Array.prototype.fill()

新的方法和概念，常常比解决问题本身更重要。——华罗庚我们在前端开发中，可以使用fill函数来快速构建数组 1Array(5).fill(1,1,4) 得到的是这样一个数组： 1[, 1, 1, 1, ] 这里参数fill(value,start,end)也是可以省略的 12345678910111213141516[1, 2, 3].fill(4); // [4, 4, 4][1, 2, 3].fill(4, 1); // [1, 4, 4][1, 2, 3].fill(4, 1, 2); // [1, 4, 3][1, 2, 3].fill(4, 1, 1); // [1, 2, 3][1, 2, 3].fill(4, 3, 3); // [1, 2, 3][1, 2, 3].fill(4, -3, -2); // [4, 2, 3][1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3][1, 2, 3].fill(4, 3...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中