前言

用浏览器调试

如何用浏览器找到错误

选择电脑中fn+f12
实践：就会有这样的画面
然后用鼠标点击一下这行文字

就会在下面看到这行文字的css

那么大概会出现的错误如下
层叠了或者被注释了的时候会出现删除键

这时候如果发现是不小心层叠的就可以回去把他改掉
旁边有一个黄色感叹号，也是出错了的一种表现，一般是因为语法错误了，改正后黄色感叹号就无了

如何用浏览器调试

可以通过他找出更适合的大小

先选中想要改变的数字，用键盘的上下键进行增加或减少，然后找到合适的尺寸，到vscode中再去修改（在浏览器里面修改不算，一刷新就又没有了，只是方便你找到合适的尺寸而已）

可以同他增加一些代码
点击最后一行的分号出现了小光标就可以添加啦

找到合适的大小去vscode中更改

可以通过选择
在把鼠标放在文字空白处的时候，会出现这些选择的小方块，这时候可以通过删除对勾，来看看删除这些长什么样，如果觉得删除更好，就回到vscode中进行改进
但是通过以上三种都无法直接改进，只能通过他看到改进后的效果，必须到vscode中改变

总结

通过浏览器的调试器，可以更方便的找到错误，不需要去html中一行一行的看，这个与之前c++中的codeblocks的调试是一个道理的，只是这个是用浏览器调试，而不是用写代码的软件调试
也可以通过调试找到更适合的样式，大小，再进行改进
总之，很方便

CSS基础-04-浏览器调试相关推荐

从头学前端-CSS基础04
CSS高级技巧精灵图 css sprites 为了有效减少服务器接收和发送的频率,减轻服务器的压力:将许多的小图片放到一张大图片上去:就是精灵技术,CSS sprites; 精灵技术主要针对背景图片 ...
两天学会css基础（一）
什么是css?css的作用是什么? CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式,搭建页面结构,比如设置元素的宽高大小,颜色,位置等等. 学 ...
前端笔记 | CSS基础
CSS基础一.CSS简介 1.1 HTML的局限性 1.2 CSS的作用 1.3 CSS语法规范 1.4 CSS代码风格二.CSS基础选择器 2.1 CSS选择器的作用 2.2 选择器的分类 2. ...
HTML、css基础知识
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表学习目标理解 css的目的作用 css的三种引入方式应用 css三种引用方式的书写通 ...
篇一、Flask打造 Python Web 开发的灵活框架，实现简易登录。要求有 Python、HTML 和 CSS 基础。
⭐ 简介:大家好,我是zy阿二,我是一名对知识充满渴望的自由职业者. ☘️ 最近我沉溺于Python的学习中.你所看到的是我的学习笔记. ❤️ 如果对你有帮助,请关注.点赞,让我们共同进步.有不足之处 ...
【前端开发基础】CSS基础知识以及CSS3
文章目录一.CSS层叠样式 (一) 目标 1.CSS简介 1.1 HTML的局限性 1.2 CSS网页的美容师 1.3 CSS语法规范 1.4 CSS代码风格 (1)样式格式书写 (2)样式大小写风 ...
1.2 CSS 基础
CSS 基础介绍 Introduction to Basic CSS CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. 注意,CSS 的选择器区分 ...
前端学习笔记（一）：HTML+CSS基础
一.HTML文本标签文章目录一.HTML文本标签 1. 基础标签 2. 表格标签 3. 表单标签 4. 语义及字符标签二.CSS(层叠样式表)标签 1. 基础样式标签 2. 字体文本样式标签 3 ...
vscode+node.js 调试js程序/edge浏览器调试javaScript/edge浏览器独立调试编辑并保存代码/浏览器内开发者工具element/console布局(focus Mode)
文章目录 declaration vscode 对于javascript的支持环境使用node.js调试纯js代码使用浏览器调试试验代码 Note! edge浏览器独立调试编辑并保存代码窗格 ...

CSS基础-04-浏览器调试

文章目录

前言

如何用浏览器找到错误

如何用浏览器调试

总结

CSS基础-04-浏览器调试相关推荐

最新文章

热门文章