第36期Web前端开发测试题之CSS

今天推荐一些CSS测试题,通过一些测试题可以看看自己有哪些不足~查漏补缺,对知识有一个重新认识Q1:CSS属性区分大小写吗?

ul{MaRGin:10px;}A:NO(不区分)个人见解

这对于初学者来说,可能会一时拿不定主义,他们区分大小写吗?但话说回来,如果你有使用过DW或者PSD生成的页面,你会发现你的代码中会有很多类似下面这样的代码:

.box{BORDER:1PXSOLIDRED;}

但这个样式完全是有效的。不过有一点需要特别注意,如果你的HTML的结构中定义的是大写类名,而在样式中使用的是小写的,那么他们是有区别的。我们来看一个简单的演示示例:

Q2:你能给内联元素设置margin-top和margin-bottom吗?A:No(不能设置)个人见解

在我接触CSS知识的时候,我就知道margin-top和margin-bottom对于一个内联元素是根不起作用的。简单的理解,margin-top和margin-bottom就是让元素离远离自身顶部和底部的元素。不过在此处,我们只是来演示一个示例。

假例我们有一个这样的DEMO:

HTML

divspan我是一个行内元素span/spanspan我是一个行内元素span/spanspan我是一个行内元素span/spanstrong我是一个行内元素strong/strongspan我是一个行内元素span/spanstrong我是一个行内元素strong/strongspan我是一个行内元素span/spanstrong我是一个行内元素strong/strongspan我是一个行内元素span/spanstrong我是一个行内元素strong/strongspan我是一个行内元素span/spanstrong我是一个行内元素strong/strong/divCSS

div{width:px;margin:20pxauto;border:1pxsolidgreen;padding:px;line-height:1.4;}span{border:1pxsolidblue;}strong{border:1pxsolidorange;}span,strong{margin-top:px;margin-bottom:px;}

margin-top和margin-bottom应用到内联元素上,这在规范中是允许的,不过由于在向一个行内非替换元素(如img)应用外边距,它对行高没有任何影响。由于外边距实际上是透明的,所以这个声明没有任何视觉效果。其原因就在于行内非替换元素的外边距(margin-top和margin-bottom)不会改变一个元素的行高。

我们来演讲一下,增加margin-top和margin-bottom值,对内联元素span和strong是否有所影响:

效果再次证明,margin-top和margin-bottom对于一个内联元素来说是没有任何影响的。

Q3:内联元素设置padding-top和padding-bottom会添加到元素的尺寸上吗?A:NO(不会)个人见解

对于内联元素,margin和padding存在一个重大的区别。为了说明这一点,我们给行内元素设置一个padding-top和padding-bottom的值,另个给其附上一个背景色,行内元素的背景会向上和向下面延伸。

理论上,对于有背景色和行内距的行内非替换元素,背景可以向元素上面和下面延伸:

strong{border:1pxsolidorange;background:orange;padding-top:10px;padding-bottom:10px;}

当然行高没有改变,不过由于内距确实延伸了背景,所以背景应该可见,是这样吗?不错,背景确实可见,它与前面的行重叠,这正是我们期望的结果。但回到试题上来,padding-top和padding-bottom并没有增加行内元素的尺寸,如背景延伸所示,他们重叠在一起了。

Q4:如果你对p元素设置字体大小:10rem,当用户调整大小/拖浏览器窗口时文本将相应变化大小么?A:NO(不能)个人见解

REM是CSS3中新增的一个单位。在W3C







































怎样才能治愈白癜风
白殿疯恢复期是什么样



转载请注明:http://www.guyukameng.com/http/8826.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了