野生切图仔
野生切图仔

原来不用控制台，也可以轻松调试CSS呀

Ⅰ. 作用

  • 用于调试CSS , 比控制台添更加方便，不需要寻找 ；
  • 边添加样式，边可以查看效果，适合初学者对CSS 的理解和学习；
    原来不用控制台，也可以轻松调试CSS呀_第1张图片

在这里插入图片描述

Ⅱ. 快速实现（两边）

① 显示这个样式眶

  • 给 head 和 style 标签添加一个样式 display:block；
  • 这样这个样式就会以 块级元素 显示 ；
<head style="display:block">
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<style  style="display:block;">
.box{
        width: 100px;
        height: 100px;
        background: red;
        border-radius: 50%;
    }
style>
  • 效果如下

原来不用控制台，也可以轻松调试CSS呀_第2张图片

  • 这时的 「样式文本」 ，没有换行 也 不可以编辑 ；

② 让样式眶可编辑

  • 我们需要先来理解 contenteditable 这个属性；

  • contenteditable : 是一个 「枚举属性」 ，表示元素是否可被 「用户编辑」 ；

  • 这里我们把它加到