繼上一篇文章 幹了這麼久前端，你有注意到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:如果這票文章讓你學到了一點知識，歡迎點贊並關注我哦，每天一點技術乾貨，讓我陪你在大牛的路上越走越遠！！！
分享到:
