css（css3）面试笔试题

1. 关于link与@import的区别:

1. 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2. 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3. 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4. 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

1. 在这里列举下css可继承属性：

1. 所有元素可继承：visibility和cursor。 
   内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。 
   终端块状元素可继承：text-indent和text-align。 
   列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

1. 在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素、内联元素(又叫行内元素)和内联块状元素。 
2. 常用的块状元素有：

1.  
   、

   、

   …

   、

   、
   、

   、、

   、

   、

   1.  什么是块级元素？ 

   1. 在html中
      、

      、

      、、

      和
      • 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 

   1. 块级元素特点：

   1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）;

    2、元素的高度、宽度、行高以及顶和底边距都可设置。

    3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 

   1. 常用的内联元素有： 

   1. 、、
      、、、、、、、、 在html中，、、、 和就是典型的内联元素（行内元素）（inline）元素。
   2. 当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div 元素具有内联元素特点。
   3. div{ display:inline; } ......
      我要变成内联元素
       

   1. 内联元素特点： 

   1、和其他元素都在一行上； 

   2、元素的高度、宽度及顶部和底部边距不可设置； （这是答案^-^）

   3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 

   1. 常用的内联块状元素有：

   1.  、
   2. 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。

   1. inline-block 元素特点： 

   1、和其他元素都在一行上； 

   2、元素的高度、宽度、行高以及顶和底边距都可设置。

   1. display:none和visibility:hidden都能把网页上某个元素隐藏起来，但是两者有区别：

   一、display:none

   1、不为被隐藏的对象保留其物理空间。html对象在页面上彻底消失（display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间）。

   2、是非继承属性，子孙节点消失由于元素从渲染树消失造成的，通过修改子孙节点，属性无法显示。

   3、修改常规文档流元素的display通常会造成文档的重排（reflow）重绘（repaint）。

   二、visibility:hidden

   1、为隐藏的对象保留其物理空间，html对象仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在（visibility:hidden不会让元素从渲染树中消失，渲染树元素继续占据空间，只是内容不可见）。

   2、是继承，子孙节点消失由于继承了hidden，通过visibility:visible可以让子孙节点显示。

   3、修改visibility属性只会造成文档的重绘（repaint）。

   1. 添加哪个属性可以使超出的文字部分变成「…」(text-overflow:ellipsis)
   2. HTML5 中使用的媒体元素？

   1. Source
   2. Audio
   3. Track

   1. 
   2. Inhert：规定应该从父元素继承position属性的值；
   3. 关于 CSS 布局中的 BFC 是：

    

   1.   BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
   2.         内部的Box会在垂直方向，从顶部开始一个接一个地放置。
   3. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
   4. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
   5. BFC的区域不会与float box叠加。
   6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
   7. 计算BFC的高度时，浮动元素也参与计算。

   1. 下列对 Reflow（回流）和 Repaint（重绘）的描述正确的是？
   2. 

    

   1. ele.clientWidth = 宽度 + padding
   2. ele.offsetWidth = 宽度 + padding + border
   3.  ele.scrollTop = 被卷去的上侧距离
   4.  ele.scrollHeight = 自身实际的高度（不包括边框）

   属性	描述
   linear	动画从头到尾的速度是相同的。
   ease 默认	动画以低速开始，然后加快，在结束前变慢。
   ease-in	动画以低速开始。
   ease-out	动画以低速结束。
   ease-in-out	动画以低速开始和结束。
   cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

   1. 不同浏览器提供的编程环境不一致，所以在编程时才要使用 -ms、-webkit、-moz来实现不同浏览器的兼容性
   2. JS文件按在HTML中引入的顺序依次载入（不是最后载入），在载入后马上执行，执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）
   3. 箭头函数不能调用Funciton的bind、apply、call方法（Function类具有的方法），没有继承Function类
   4. Background-position属性

   1. 用处：配合background-image属性一起使用，用于设置背景图片在盒子中的位置
   2. 参数：xpos ypos |x% y% |x y三种,
   3. 如果只写第一个水平方向的参数，第二个垂直方向的参数会默认为：
   4. enter|50%|容器高度的一半px
   5. Xpos：规定水平方向的对齐方式,值有left,right,center
   6. Ypos：规定垂直方向的对齐方式,值有top,bottom,center
   7. x%:规定图片水平方向的距离。
   8. 你会不会以为这个x%就是父级容器宽度的x%？那你就想错了哦，这里的x%指的是父级容器的宽度减去图片的宽度后的差值的x%。
   9. 举个栗子：background-position：50%，20%；
   10. 图片的宽度为     imgwidth：100px；高度为     imgheight：100px；
   11. 容器的宽度为     conwidth：200px；高度为     conheight：200px；
   12. 那么此时图片的左顶点距离容器的左顶点的水平距离就是(conwidth-imgwidth)*50%=50px,而不是conwidth*50%=100px；(很好理解的吧，不然盒子宽度200px，图片宽度100px，又距离左边100px，岂不是50%没实现水平居中而紧靠右了吗？)
   13. 由此也可以算出图片的左顶点距离容器的左顶点的垂直距离为20px
   14. y%:对应x%
   15. x:图片距离容器水平方向距离
   16. y:图片距离容器垂直方向距离

   1. 默认的盒子模型是content-box
   2. Input标签的readonly属性
   3. Readonly规定输入的字段为只读，即用户不可修改，但是用户可以通过tab切换到该字段，还可以选中复制该字段。可以配合js设置条件控制用户是否可以更改或输入内容
   4. Input标签的step属性
   5. Step规定输入字段的合法数字间隔(如step=”2”,则合法数字可为-2，0，2，4等)
   6. Step属性的值为负数或0时默认为1，该属性可以配合max，min属性来创建合法值得范围。
   7. Step，max，min属性适用于类型有:number,range,date,datetime,month,time,week
   9. form标签的enctype属性
   10. 规定在发送表单数据之前如何对其编码，可取值有：
   11. application/x-www-form-urlencoded
   12. multipart/form-data
   13. text/plain
   14. form标签的method属性
   15. 规定用于发送表单数据的http方法，可取值有：post和get
   16. video标签，H5新标签
   17. 用来定义视频，电影片段或其他视频流
   18. 常用属性：autoplay(视频就绪后马上播放)
   19.           controls(向用户显示播放控件，如按钮)
   20.           loop(循环播放)
   21. 可以为没有controls控件属性的video嵌套按钮控件
   22. alc()的运算规则

   1. calc()使用通用的数***算规则，但是也提供更智能的功能：
   2. 使用“+”、“-”、“*” 和 “/”四则运算；
   3. 可以使用百分比、px、em、rem等单位；
   4. 可以混合使用各种单位进行计算；
   5. 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
   6. 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。