龙空技术网

前端小白自学前端之如何用浏览器进行css调试(二)

爱敲代码的猫咪 147

前言:

此时同学们对“css移”都比较关注,朋友们都想要剖析一些“css移”的相关内容。那么小编在网络上收集了一些有关“css移””的相关知识,希望兄弟们能喜欢,看官们快快来了解一下吧!

准备工具,浏览器一个,谷歌,ie,360浏览器都可以打开一个网页,按 F12 ,点击元素模块里的html标签,这里我选中了 li 标签,最右侧的样式模块下方则显示了应用于该标签的样式

css样式排在最上面的说明css级别更高。

你可以在上面相应的css样式表进行样式的修改,也可以新增样式。修改过的样式就会在页面上即时显示。在方块1下面编写代码等同于行内样式,方块2所代表的是该样式在文件中的位置行数,把小鼠标移到方块2就可以看到具体文件地址。


想查看:hover这类隐形样式时,你可以强制它们显示

在编写页面的时候,发现写了样式,结果却不起作用时,想审查都有哪些代码影响时,你可以点击已计算模块,在这里你可以查看盒模型,也可以进行样式筛选,也可以看到具体属性被影响的css样式所在位置

元素模块里的元素标签里的内容也是可以修改的,比如在里面写行内样式,修改class的类型,甚至是修改文字也是可以的

ps:如果不知道去哪找页面来编写的话,可以关注我,会不定期分享纯前端的web,小程序、uniapp,vue等项目源码。


标签: #css移