好程序员web前端开发测验之css部分

简介:   好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答  Q: CSS 属性是否区分大小写?1.  ul {2.  MaRGin: 10px;3.  }  A: 不区分。

  好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答
  Q: CSS 属性是否区分大小写?
1.

  ul {


2.

  MaRGin: 10px;


3.

  }

  A: 不区分。

  HTML,CSS都对大小写不敏感,但为了更好的可读性和团队协作一般都小写,而在XHTML 中元素名称和属性是必须小写的。

  Q: 行内(inline)元素 设置margin-top和margin-bottom 是否起作用?

  A: 不起作用。(答案是起作用,个人觉得不对。)

  html 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element)。

  替换元素是指用作为其他内容占位符的一个元素。最典型的就是img,它只是指向一个图像文件。以及大多数表单元素也是替换,例如input等。 非替换元素是指内容包含在文档中的元素。例如,如果一个段落的文本内容都放在该元素本身之内,则这个段落就是一个非替换元素。

  讨论margin-top和margin-bottom对行内元素是否起作用,则要对行内替换元素和行内非替换元素分别讨论。

  首先我们应该明确外边距可以应用到行内元素,规范中是允许的,不过由于在向一个行内非替换元素应用外边距,对行高(line-height)没有任何影响。由于外边距实际上是透明的。所以对声明margin-top和margin-bottom没有任何视觉效果。其原因就在于行内非替换元素的外边距不会改变一个元素的行高。而对于行内非替换元素的左右边距则不是这样,是有影响的。

  而为替换元素设置的外边距会影响行高,可能会使行高增加或减少,这取决于上下外边距的值。行内替换元素的左右边距与非替换元素的左右边距的作用一样。来看看demo:

  Q: 对内联元素设置padding-top和padding-bottom是否会增加它的高度?(原题是Does setting padding-top and padding-bottom on an inline element add to its dimensions?)

  A: 答案是不会。同上题比较纠结,不太明白这里的 dimensions指的是到底是什么意思?放置一边,咱们来分析下。对于行内元素,设置左右内边距,左右内边距将是可见的。而设置上下内边距,设置背景颜色后可以看见内边距区域有增加,对于行内非替换元素,不会影响其行高,不会撑开父元素。而对于替换元素,则撑开了父元素。看下demo,更好的理解下:

  Q: 设置p的font-size:10rem,当用户重置或拖曳浏览器窗口时,文本大小是否会也随着变化?

  A: 不会。

  rem是以html根元素中font-size的大小为基准的相对度量单位,文本的大小不会随着窗口的大小改变而改变。

  Q: 伪类选择器:checked将作用与input类型为radio或者checkbox,不会作用于option。

  A: 不对。

  伪类选择器checked的定义很明显:

  The :checked CSS pseudo-class selector represents any radio (), checkbox () or option (

相关文章
|
16天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
30 3
|
1月前
|
前端开发 JavaScript 测试技术
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
1月前
|
前端开发 测试技术 持续交付
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
13天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
17天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
17天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
17天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
33 2
|
18天前
|
开发框架 前端开发 JavaScript
Web前端框架
Web前端框架等名词
16 2
|
28天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
30天前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
53 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来