使用火狐浏览器开发者工具来调试html或者css

下面是记实下利用火狐浏览器简单调试css , html的环境 , 感乐趣的可以看一下 。

使用火狐浏览器开发者工具来调试html或者css

文章插图
方式/
1如下图所示的结果图中 , 因为css样式的宽没有设置好 , 所以最后一个div没有顶到最右边的边框 。
下面我们可以经由过程火狐浏览器来找到这个最佳的宽度(width值);

使用火狐浏览器开发者工具来调试html或者css

文章插图

2然后按键盘上的F12来调出辅助的开辟者东西 。

使用火狐浏览器开发者工具来调试html或者css

文章插图

3开辟者东西如下图 , 然后在查看器中选择响应的div,然后选中width的值(因为我们是要调整它)

使用火狐浏览器开发者工具来调试html或者css

文章插图

4然后我们经由过程按键盘的标的目的上键来增添width的值 , 标的目的下是减值 , 每按一下就是增减1 。

使用火狐浏览器开发者工具来调试html或者css

文章插图

5【使用火狐浏览器开发者工具来调试html或者css】如图所示 , 在按标的目的上键增添width值的时辰结果图越往右顶 。 当顶到右边的时辰就是我们找的最佳值 。

使用火狐浏览器开发者工具来调试html或者css

文章插图

6可是你要注重 , 你的代码其实并没有被点窜 , 所以我们还要将你获得width最佳值点窜到你的代码中 , 保留 。

使用火狐浏览器开发者工具来调试html或者css

文章插图


以上内容就是使用火狐浏览器开发者工具来调试html或者css的内容啦 , 希望对你有所帮助哦!

    推荐阅读