前端试题-CSS试题(1)

1. css属性命名区分大小写吗?

不区分,不过一般小写,便于理解

2. margin-top和margin-bottom对于行内(内敛inline)元素效果一样么?

3.padding-top和padding-bottom对于inline元素都会增加元素本身的大小么?

回答2,3,需要了解html里的替换元素和非替换元素。

替换元素是指作为其他内容点位符的一个元素。如img等。非替换元素是指内容包含在文档中的元素,例如span。

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

把margin应用到行内元素是可以的,不过向非替换元素应用margin时,对行高没影响,而margin实际又是透明的,所以margin-top和margin-bottom没有任何视觉效果。把margin-left和margin-right应用到非替换元素是有影响的。

为行内替换元素设置margin-top和margin-bottom,可能会使行高增加或减少,这取决于margin-top和margin-bottom的值。margin-left和margin-right对行内替换元素和非替换元素一样也是有影响的。

 

对于行内元素,设置padding-left和padding-right是可见有影响的,设置padding-top和padding-bottom后,对于行内非替换元素,padding-top和padding-bottom没用,不会影响其行高,不会撑开父元素。而对于行内替换元素,padding-top和padding-bottom会撑开父元素。

inline元素(准确来说是非替换的行内元素)不能设置竖直方向上的margin和padding,这个是css标准所规定的。

总之,inline元素,宽高无效,margin,padding只有左右边距有效,上下无效。

4. 如果一个p 标签拥有font-size: 10rem,那么这个p标签会自动响应窗口布局吗?

不会,rem是以html根元素font-size的大小为基准的相对度量单位,文本的大小不会随着窗口的大小改变而改变。一般默认根元素font-size为16px,不过可以改变它的值。

5. 伪类选择器:checked对于option标签有效果吗?

有。

伪类选择器:checked会作用于radio(<input type=”radio”>), checkbox(<input type=”checkbox”>)或者 option元素(<option> in a <select>)。

6.  伪类 :root 通常指的是标签<html>?

不是。

单指创建的根。这个根可能不是 html ,如果是片段html,木有创建根,则为片段的根。如呂康豪 大大所说的一样。https://www.zhihu.com/question/20312140

7. translate()方法可不可以使元素在z轴上做变换?

不能。

translate()方法包含在CSS3的2D transform函数里。它可以在x轴和y轴上移动位置。

时间: 2024-10-23 20:08:45

前端试题-CSS试题(1)的相关文章

前端开发面试题收集(css部分)

http://davidshariff.com/quiz/ 做了下这里面前端开发面试的题,发现有些不会,所以在此做个整理以供自己学习,参考,总结. 1.问: CSS属性是否区分大小写? ul { MaRGin: 10px; } 答:不区分.(HTML, CSS都不区分,但为了更好的可读性和团队协作,一般都小写,而在XHTML 中元素名称和属性是必须小写的.) 2.问:对行内元素设置margin-top 和margin-bottom是否起作用 答:不起作用.(需要注意行内元素的替换元素img.in

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 Hello,移动WEB Linux权限管理之特殊权限 Android高级特效-索引 原文出处: Ico_Coco 的博客(@CHoK__Coco_mAm)   欢迎分享原创到伯乐头条 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习

面试题2:BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第一篇:BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 S

(转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第一篇:BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什

web前端工程师面试题

[HTML && CSS]--来自百度文库 1. Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? Doctype 声明位于文档中的最前面的位置,处于标签之前.此标签可告知浏览器文档使用哪种 HTML 或XHTML 规范. 该标签可声明三种DTD 类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档. 当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性.为了实现这一点,他们创 建了两种呈现模式:标准模式和混杂模式(quirks mode)

【转】BAT及各大互联网公司2014前端笔试面试题:JavaScript篇

原文转自:http://blog.jobbole.com/78738/ 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第二篇:BAT及各大互联网公司2014前端笔试面试题–Html,Css篇 前面几题是会很基础,越下越有深度. 初级Javascript: 1.Jav

大公司移动前端开发面试题——做转盘

"如果有个做转盘的需求,你准备怎么做?设计师只会提供一个转盘的图片,其余都需要你完成,不能用框架和类库." "这个转盘没有惯性的需求,只要求在手机上,用手指拖转盘,能让转盘跟随手指转起来即可." 这是我在面试前端开发人员时,经常会问到的一道题.转盘是类似上图的样子. 博主之前在M公司和C公司的时候,经常用这题面试移动前端开发工程师.M公司的产品和设计是美国团队,在个别项目上UI设计比较大胆脱俗,对前端开发人员有较高的要求.C公司的只会JS的前端开发人员占比较大,产品

web前端工程师 面试题

今天刚结束一场面试(含笔试),对自己的表现不太满意,感觉没有发挥好应有的水平,也只能怪自己平时没有及时积累和整理知识,准备也不充分. 就不扯那么多了,下面是我面试时,没能答上或者觉自己回答的不够好的题目. 1.position 属性规定元素的定位类型 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom&