继上一篇文章 干了这么久前端，你有注意到CSS的这个冷知识吗？ ，今天来给大家推出css冷知识系列的第二篇，今天给大家介绍如何在网页中实时编辑css,先附上代码：
这是一个DIV
从上面代码可以看出，与平常不同的是，我给style标签也新增了一些样式（估计平常是没人这么干的）这些样式最重要的一点是：
display:block;
这样就让style标签中的css代码区域在网页上可见了，至于：
position: fixed;right: 0;top: 0；
让style标签fixed布局是为了在编辑css的过程中不影响页面其他内容的布局，当然，style标签仅仅可见还是不行的，我们还要让他可编辑，所以，给style标签加上了：
contenteditable="true"
这样一来，这个style标签就展现了网页的固定区域，并且可以让我们自由编辑了！，下面来看看效果吧：
可以看到，右侧出现了可编辑的css区域，我们编辑这个区域试试：
从上图可以看出，我们在网页上把div的颜色从红色改成了绿色，实现了实时编辑！
css的实时编辑就说到这里啦，你学到了吗？
PS:如果这票文章让你学到了一点知识，欢迎点赞并关注我哦，每天一点技术干货，让我陪你在大牛的路上越走越远！！！
分享到:
