了解Chrome开发者工具

1.CSS的全称是什么?

CSS全称为Cascading Style Sheets, 层叠样式表。


2.CSS有几种引入方式? link 和@import 有什么区别?

CSS有四种引入方式:行内式内嵌式导入式,和 链接式
link 和@import的区别:

  • link属于html标签,而@import是css提供的。
  • 页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。
  • link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。
  • link方式样式的权重高于@import的。

3.以下这几种文件路径分别用在什么地方,代表什么意思?

1)相对路径

  • css/a.css指当前目录下的css文件夹里的a.css文件
  • ./css/a.css 指当前目录下css文件夹中的a.css文件(同上)
  • b.css 当前目录下的b.css文件
  • ../imgs/a.png 指上级目录下的imgs 文件夹中的a图片文件

2)绝对路径(本地文件的绝对地址)

  • /User/hunger/project/css/a.css 本地绝对路径中的a.css文件

3)网站路径

/static/css/a.css 指在当前目录下再按照给定目录地址找到的a.css文件


4.如果我想在js.jirengu.com上展示一个图片,需要怎么操作?

将所需图片上传至服务器。获取到该图片的url,然后在需要用该图片的地方引入它的url。


5.列出5条以上html和 css 的书写规范

  • 标签一定要正确嵌套,标签一定要闭合。
  • 模块之间必须保持独立,区块化布局,方便随意增删改,多人协作维护。
  • 使用CSS缩写属性。
  • 属性值为零的 去掉单位。
  • 16进制颜色代码缩写。
  • 需要程序单独赋值或者控制的地方尽量用独立的标签包括起来,方便添加id和其他自定义属性。

6.截图介绍 chrome 开发者工具的功能区

  • 使用 设备模拟器可以模拟不同的设备分辨率显示效果。


  • 使用 Elements(元素)面板,检查并实时编辑页面中的HTML和CSS。
    1)在Styles(样式)窗格中查看和更改应用于任何选定元素的CSS规则。
    2)在Computed(计算)窗格中查看和编辑所选元素的盒模型。
    3)在Sources(源代码)面板中查看您在本地网页上所做的任何更改。


  • 在开发期间,可以使用Console(控制台面板)记录诊断信息。或者使用它作为 shell,在页面上与JavaScript交互。


  • 在Sources(源代码面板)中,可以断点调试 JavaScript 。或者通过Workspaces(工作区)连接本地文件,使用开发者工具实时编辑。


  • 使用Network(网络面板)了解请求和下载的资源文件,并优化您的网页加载性能。


  • 使用Application(资源面板)检查加载的所有资源,包括IndexedDB与Web SQL数据库,本地和会话存储,cookie,应用程序缓存,图像,字体和样式表。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,869评论 18 139
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,510评论 0 17
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,076评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1 92
  • 1 我不知道该怎么描述自己的心情,当我听到那个消息。 听别人说,他刚刚和一个异性出去吃饭了。我明明是很开心的跑出去...
    轻绾阅读 601评论 1 9