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

  1. <p><font size="3">  ul {</font></p>
  2. <p><font size="3">  MaRGin: 10px;</font></p>
  3. <p><font size="3">  }</font></p>

  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 (

好程序员web前端开发测验之css部分的更多相关文章

  1. 好程序员web前端分享12个CSS高级技巧汇总

    好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...

  2. 好程序员web前端分享HTML基础篇

    好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...

  3. 好程序员web前端分享想要学习前端需要学那些课程

    好程序员web前端分享想要学习前端需要学那些课程,仔细思考了一下如何回答好这个话题,其实前端是一个涵盖面非常之广泛的一个职位,所需知识体系非常庞杂,与传统语言“想要精一行,必先通一门” 有很大差别, ...

  4. 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM

    好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...

  5. 好程序员web前端分享前端学习路线自学如何找到工作

    好程序员web前端分享前端学习路线自学如何找到工作,自学能不能学会WEB前端并且找到WEB前端开发岗位的工作取决于自身条件,如果基础好,自律性强那么将会容易很多,还有就是自学最难克服的并不是知识点,而 ...

  6. 好程序员web前端分享如何理解JS的单线程

    好程序员web前端分享如何理解JS单线程,JS本质是单线程的.也就是说,它并不能像JAVA语言那样,两个线程并发执行. 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢? 首先,J ...

  7. 好程序员web前端分享javascript关联数组用法总结

    好程序员web前端分享javascript关联数组用法总结,有需要的朋友可以参考下. Hash关联数组定义 代码如下 // 定义空数组 myhash = { } // 直接定义数组 myhash = ...

  8. 好程序员web前端分享18个用CSS制作出来的东西

    好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...

  9. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

随机推荐

  1. springboot+mybatis+dubbo+aop日志终结篇

    之前的几篇文章把dubbo服务层都介绍完毕,本篇文章咱们主要写web层如何调用服务层的方法.文章底部附带源码. 启动服务 服务启动时,会向zk注册自己提供的服务,zk则会记录服务提供者的IP地址以及暴 ...

  2. gcc编译基本用法~1

    命令格式:gcc [选项] [文件名] 编译的四个阶段:-E:仅执行编译预处理: -c:仅执行编译操作,不进行连接操作:-S:将C代码转换为汇编代码: -o:指定生成的输出文件. Expiain : ...

  3. Spring Cloud Alibaba基础教程:Nacos配置的多文件加载与共享配置

    前情回顾: <Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现> <Spring Cloud Alibaba基础教程:支持的几种服务消费方式> ...

  4. Mysql语句中当前时间不能直接使用C#中的Date.Now传输

    MySql中处理字符串时间,会默认把第一个数字当成年份处理. 在C#服务器中,使用Date.Now.ToString()生成的字符串时间,如果不指定字符串格式,C#会按照系统语言输出不同的字符串格式, ...

  5. 斐波那契数列 (C#)

    斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一 ...

  6. Java开发笔记(七)强制类型转换的风险

    编码过程中,不但能将数字赋值给某个变量,还能将一个变量赋值给另一个变量.比如下面代码把整型变量changjiang赋值给整型变量longRiver: // 长江的长度为6397千米 int chang ...

  7. Pythoy 数据类型序列化——json&pickle 模块

    Pythoy 数据类型序列化--json&pickle 模块 TOC 什么是序列化/反序列化 pickle 模块 json 模块 对比json和pickle json.tool 命令行接口 什 ...

  8. arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. 关于Skyline沿对象画boundingbox的探讨

    先来说说为什么要搞这个?项目中经常遇到的一个操作就是选定对象,以前都是通过Tint设置对象颜色来标识选定对象,但是随着图层中模型增多,模型色彩丰富,会出现选定色与对象颜色对比不明显的情况.因为看到Te ...

  10. 基于LBS的六边形热力图算法

    六边形算法: 我把六边形铺满的分布图进行了切分,切分为矩形,每个矩形中有一个六边形.4个三角形.两个小长方形,依次计算.边界判断上,采用主流的MP>MN的方式(M为上边界对称点,N为与六边形的交 ...