web前端开发测验之css部分

摘要：部分问题与解答属性是否区分大小写不区分。对于行内元素，设置左右内边距，左右内边距将是可见的。而对于替换元素，则撑开了父元素。如下代码中文本的颜色是。

Tip：这是http://davidshariff.com/quiz/给出的web前端开发测试题,的CSS部分,我根据自己的理解给出的答案，欢迎拍砖，一起刷题==>Github 仓库地址。

Q: CSS 属性是否区分大小写？

ul {
    MaRGin: 10px;
}

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:

http://codepen.io/paddingme/pen/JwCDF

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

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

http://codepen.io/paddingme/pen/CnFpa

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 (in a ) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.




Q: 在HTML文本中，伪类:root总是指向html元素？

A: 不是（答案中给出了是 ==||）。以下摘自知乎:root 与 html 在 CSS3 中指的是同一个元素吗？的答案：

  
单指创建的根。这个根可能不是 html ，如果是片段html，没有创建根，则为片段的根。把这下面 URL 打到支持 data URL 的瀏覽器看看（Firefox, Chrome, Safari, Opera），可见一斑：


data:application/xhtml+xml,




Q:translate()方法能移动一个元素在z轴上的位置？

A: 不能。translate()方法只能改变x轴，y轴上的位移。


Q: 如下代码中文本“Sausage”的颜色是?




    
Milk
    
Sausage




ul {color:red;}
li {color:blue;}


A: blue。


Q: 如下代码中文本“Sausage”的颜色是?




    
Milk
    
Sausage




ul {color:red;}
#must-buy {color:blue;}


A: blue。


Q: 如下代码中文本“Sausage”的颜色是?




    
Milk
    
Sausage




.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}


A: blue。


Q: 如下代码中文本“Sausage”的颜色是?




    
Milk
    
Sausage




ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}


A: blue。


Q: 如下代码中文本“Sausage”的颜色是?




    
Milk
    
Sausage




ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}


A: blue。


Q: 如下代码中文本“Sausage”的颜色是?




    
Milk
    
Sausage




ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}


A: blue。


Q: 如下代码中文本“Sausage”的颜色是?




    
Milk
    
Sausage




#awesome .favorite:not(#awesome) .highlight {
    color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;
}


A: blue。


Q:#example位置如何变化：



Hello



#example {margin-bottom: -5px;}


A: 向上移动5px。


Q: #example位置如何变化：



Hello



#example {margin-left: -5px;}


A: 想做移动5px。


#i-am-useless 会被浏览器加载吗？




    




#i-am-useless {background-image: url("mypic.jpg");}


A: 不会


mypic.jpg 会被浏览器加载吗？




    




#test2 {
    background-image: url("mypic.jpg");
    display: none;
}


A: 会被下载。


mypic.jpg 会被浏览器加载吗？




    




#test1 {
    display: none;
}
#test2 {
    background-image: url("mypic.jpg");
    visibility: hidden;
}


A: 不会被下载。


Q: only 选择器的作用是？

@media only screen and (max-width: 1024px) {argin: 0;}


A：停止旧版本浏览器解析选择器的其余部分。

only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；另外不支持Media Qqueries 的浏览器，不论是否支持only，样式都不会被采用。


Q:overfloa:hidden 是否形成新的块级格式化上下文？




    
I am floated
    
So am I




div {overflow: hidden;}
p {float: left;}


A：会形成。

会触发BFC的条件有：


float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block 中的任何一个。
position的值不为relative 和static。



Q: screen关键词是指设备物理屏幕的大小还是指浏览器的视窗？

@media only screen and (max-width: 1024px) {margin: 0;}


A: 浏览器视窗


知识点总结：

tips:根据以上考点总结下如下知识点，后期会写文章进行总结，这里只挑出重点进行解析。



关于CSS选择器以及优先级的知识可查阅如下文章：


CSS 选择器参考手册
CSS选择器笔记
高级CSS样式选择器
征服高级CSS选择器
详解CSS选择器、优先级与匹配原理
优先级
牢记 31 种 CSS 选择器用法



如何计算优先级：

  
那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1



第一个数字(a)通常就是0，除非在标签上使用style属性；
第二个数字(b)是该选择器上的id的数量的总和；
第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；
通用选择器(*)是0优先级；
如果两个选择器有同样的优先级，在样式表中后面的那个起作用。



浏览器CSS匹配顺序：

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class="red"的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。


display:none 和visibilty:hidden的区别：

可参考：


What is the difference between visibility:hidden and display:none?
display:none和visibility:hidden的区别！

  
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用`` visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而display:none`属性会使这个对象彻底消失（看不见也摸不到）


  
display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. so for example:


test | Appropriate style in this tag | test

  
display:none would be:


  
test |   | test


  
visibility:hidden would be:


  
test |     | test


  
In visibility:hidden the tag is rendered, it just isn"t seen on the page.



浏览器如何渲染，可以查阅如下文章：


浏览器的渲染原理简介
专题：浏览器:渲染重绘、重排两三事
浏览器加载和渲染HTML的顺序以及Gzip的问题
从FE的角度上再看输入url后都发生了什么



BFC( block formatting contexts ) 块级格式上下文


深入理解BFC和Margin Collapse
CSS布局中一个简单的应用BFC的例子
理解BFC(Block Formatting Context)


margin，padding相关的知识可以参考查阅《CSS权威指南》

           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         云服务器
                                             
                         GPU云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               web前端前端开发
                                                                                                           前端web前端开发
                                                                                                           web前端开发前端
                                                                                                           前端开发和web前端
                                                         
                 
               
              
             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/110939.html
               
                      
               

                 
                                  
上一篇：该如何选择 background-image 和 img 标签
  
                                                
                                       
下一篇：值得参考的css理论：OOCSS、SMACSS与BEM
                                  
              
              

                
相关文章
                

                             
                                                                    

                                                

                          
web前端开发测验之HTML部分
                                                     
摘要：标签规定用于表单的密钥对生成器字段。元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。中元素表现为一个超链接，支持任何行内元素和块级元素。

Tip：这是http://davidshariff.com/quiz/给出的前端开发测试题的HTML部分,我根据自己的理解给出的答案，欢迎拍砖，一起刷题==>Github 仓库地址。



Q:  是正确的HTML5标签吗？

A:...
                                                   
                          

                                

                                    DoINsiSt
                                    2019-08-01 14:41
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                                                       

                                                

                          
网易微专业之《前端开发工程师》学习笔记（1）
                                                     
摘要：点击此处了解网易微专业课程前段时间报名参加了网易云课堂微专业课程前端开发工程师，这周课程开始了，正式学习。以下内容为前端开发工程师微专业的第一门课网页制作的课程学习指南，学习视频课程后自己整理的学习笔记，会持续更新内容。

何为网易微专业？
微专业是由网易云课堂联合各领域知名专家，以就业为导向，精心打造的职业培训方案。按要求完成学习，考试通过可获得专业认定证书，令你求职或加薪多一份独特优...
                                                   
                          

                                

                                    geekzhou
                                    2019-08-28 18:28
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
网易微专业之《前端开发工程师》学习笔记（1）
                                                     
摘要：点击此处了解网易微专业课程前段时间报名参加了网易云课堂微专业课程前端开发工程师，这周课程开始了，正式学习。以下内容为前端开发工程师微专业的第一门课网页制作的课程学习指南，学习视频课程后自己整理的学习笔记，会持续更新内容。

何为网易微专业？
微专业是由网易云课堂联合各领域知名专家，以就业为导向，精心打造的职业培训方案。按要求完成学习，考试通过可获得专业认定证书，令你求职或加薪多一份独特优...
                                                   
                          

                                

                                    刘东
                                    2019-08-01 15:00
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
发表评论
                   

                                      
                      

                        登陆后可评论
                      
                   
               
              

                

                  
0条评论
   
                
 
                      

              
           
           

              
 
                

                    
                    
Ajian
                    
男|高级讲师
                    

                     
                                                                      我要关注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          阅读更多
                    
                      

                                                  
Python0基础（上）——期末不挂科
                            
阅读 3044·2021-11-22 09:34
                                                       
SWR 发布 1.0 版本、Microsoft Edge 新标签页底部出现无法关闭的广告 | 淘系前
                            
阅读 3634·2021-08-31 09:45
                                                       
关于SVG
                            
阅读 3835·2019-08-30 13:57
                                                       
前端每日实战：4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
                            
阅读 1669·2019-08-29 15:11
                                                       
织梦做网站过程中引用bootstrap产生css冲突的解决
                            
阅读 1680·2019-08-28 18:04
                                                       
web前端开发测验之css部分
                            
阅读 3218·2019-08-28 17:59
                                                       
每日 30 秒 ⏱ JSON对象数组转换 CSV 表格数据
                            
阅读 1558·2019-08-26 13:35
                                                       
JS正则表达式学习笔记2
                            
阅读 2187·2019-08-26 10:12
                                                
                      
                

                   
              
  

                  
最新活动
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           
        
       
    
    
     

      
    
    
    

    
       
       

         
阅读需要支付1元查看
  
         
支付并查看
     
       
      
  
    
    









<