面试之css篇

html5 新特性？

html5新特性

• 语义化标签：nav、footer\header
• Canvas绘图\SVG
• WebStorage

1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

不同：计算盒子的宽度和高度不同
W3C标准盒模型宽度是内容（content）的宽，高度是内容的高度
IE盒子模型宽是内容宽度+padding(左右)+border（左右），高是内容高+padding（上下）+ boder(上下)

• box-sizing: border-box // 怪异盒模型
• box-sizing: content-box // 标准盒模型

2、CSS选择器有哪些？哪些可以继承？

• id选择器、类选择器、元素选择器、通配符选择器、伪类选择器(:hover)、子选择器（ul>li）、相邻选择器(h2+p)、后代选择器（div span）
• 可以继承的属性： font-size、font-family、color
• 不可以继承的样式： padding、border、margin、width、height、background 、display

3、position 的值？

• static: 默认值，按照正常文档流排列；
• relative: 相对定位，不脱离文档流，相对于自身位置进行定位；
• absolute: 绝对定位，脱离文档流，相对于自身最近的一个不为static的父级元素进行定位，如果父级没有定位或者父级元素是static则对body进行定位，如果父级元素是relative、fixed、absolute则对其进行定位；
• fixed: 固定定位，对浏览器窗口进行定位；

4、 css3有哪些新特性？

• rgba和透明度
• background-image、background-size、background-repeat
• wrod-wrap(不可分割换行)
• text-shadow（文字阴影）： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
• border-radius: 圆角
• 边框图片：border-image:url() 30 30 round
• box-shadow:盒子阴影
• 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

5、请解释一下css3的flexBox（弹性布局模式），和应用场景？

• flexbox：该布局模型目的是提供一种更加高效的方式来对容器内的元素进行布局、对其和分配空间；在传统的布局方式中，block布局是垂直方向从上至下一次排列；inline布局是水平方向排列；但是弹性盒模型没有内在的方向限制，可以由开发人员自由操作，既可以将块级元素横向排列布局，也可以将行内元素进行垂直排列，同时可将既有块级元素和行内元素进行垂直或横向排列，布局方式十分便捷；
• 应用场景： (1)：元素的垂直水平居中
  （2）： 多列布局，在页面中也是最常用的布局，最常用的是两列或者三列布局，往往是一列固定宽，一列自适应宽度。flex是flex-grow、flex-shrink 和 flex-basis的简写 ，默认为0 1 auto，（放大[0:不放大，1，2等是放大倍数]、缩小[0:不缩小，1是缩小]、占空间宽[宽度比如30px等]）
  
  （3）经典的网页布局+顶栏固定

6、画三角形

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

原理：
因为border是由四块三角形组成，将其他三块三角形设置透明就变成一个三角形了。

7 常见的浏览器兼容性问题

• 不同浏览器的标签的margin和padding值都不一样，所以为了统一可以使用通配符来设置Margin和padding的值都为0（{margin:0;padding:0;}）
• Chrome中文字体如果小于12px就会强制改为12px，如果想设置小于12px的字体可设置transform:scale(0.7);。

8、css 中的visibility属性中的collapse值，在不同浏览器下有什么不同呢？

• collapse:在表格元素中使用可删除一行或一列，不会影响表格的布局，即不会占用位置。如果用在其他元素上则是跟hidden一样的效果，隐藏但是占位置。
• 不同： 在chrome中，用在除了表格以外的元素跟hidden一样的效果；在火狐、opera和IE上跟display:none一样的效果，隐藏不占位置；

9、对BFC规范(块级格式化上下文：block formatting context)的理解？

• BFC：指的是块级格式化上下文，一个元素形成了BFC之后，内部元素产生的布局不会影响到BFC外部元素,外部的元素也影响不到BFC内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。
  一般来说根元素是一个BFC区域，浮动和绝对定位的元素也会形成BFC,display属性值为inline-block、flex这些属性也会创建一个BFC，还有ovelfolw的值不为visible的时候都可创建BFC
  如何创建一个BFC：
• 根元素html
• 定位position值为absolute或fixed
• diaplay值为inlie-blick/flex/table-cell/inline-flex/table-cation
• overflow 值不为visible时，为hindden、auto、scroll
• float值不为none时，为left、right则符合
  BFC解决了什么问题？
• 可以清除浮动
• 解决上下margin重合的问题

10、IFC是什么？

• IFC指的是行级格式化上下文它有一个布局规则：
  （1）行级上下文内部的盒子会在水平方向，一个接着一个排列
  （2）当一行放不下的时候，自动切换到下一行
  （3）行级上下文的高度由内部最高的内联元素的高度决定

11 、为什么要清除浮动？清除浮动的方式？

为什么？

• 清除浮动是为了清除使用浮动元素产生的影响，浮动的元素，高度会塌陷，而高度塌陷会使我们页面后面的布局不能正常的显示。
  方式？
• 给浮动元素后面加上一个空的div，添加样式clear:both
• 给浮动元素的父级创建一个BFC,添加样式overflow:hidden或者auto

12、上下margin重叠的问题？

• 在重合元素外面包裹一个容器（例如div、p等），并触发改容器生成一个BFC

13 、设置浮动元素后，改元素的display的值是多少？

• 自动改为block

14、CSS优化，提高性能的方法有哪些？

（1）加载性能上

• css压缩：将写好的css进行压缩，可以减少很多的体积
• css单一样式：当只需要上边距或者下边距的时候不要用简写，直接使用margin-top这种执行效率更高，只有当上下左右都需要的时候，就是用简写就方便快捷
• 减少使用@important ，建议使用link，因为link在页面加载时一起加载，important是页面加载完之后再加载。
  （2）选择器
• 尽量少的去对标签进行选择，而使用class标签
• 尽量少的使用后代选择器，降低选择器的权重，后代选择器的开销是最高的
• 避免使用！important 选择器
• 了解哪些属性是可以通过继承来的，然后避免对这些属性重复定义样式

（3）渲染性能

• 尽量减少页面重排、重绘
• 属性为0时，不加单位
• 属性值为0.**的时候，可省略0
• 标准化各种浏览器前缀，带浏览器前缀在前，标准属性在后
• 不适用@important前缀，他会影响css的加载速度
• 选择器优化嵌套，尽量避免层级过深
• 使用css雪碧图，减少页面的请求次数，但是图片本身也会变大，使用时，优劣考虑清楚在使用
• 正确使用diaplay属性，由于dispaly的作用，某些样式组合会无效，徒增样式体积的痛死也影响解析性能
  （4）可维护性、健壮性
• 将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性
• 样式与内容分离来讲css代码定义到外部css中

15、浏览器是怎么样解析css选择器的？

css选择器的解析是从右向左解析的。试想一下从左向右进行匹配的话，样式系统会从左到右一直匹配，直到匹配到，如果读到最后一个不匹配，那么就放弃，就很费时耗能。所以从右向左解析，一开始就筛选掉大部分不和匹配的节点。

16、在网页中应该使用奇数还是偶数的字体？为什么？

• 使用偶数字体相对更容易和web设计的其他部分构成比例关系。比如当我用了14号正文字体，我可能会在一些地方用14*0.5=7px的margin等
• 浏览器缘故，低版本的浏览器IE6会把奇数字体强制转化为偶数
• 系统差别，早期的windows里，中易宋体点阵只有12、14、16px
• 也可以使用奇数字体，缺点就死文本段落无法对齐

17、magin和padding 分别适合什么场景使用？

• margin 是用来隔开元素与元素之间的距离，
• padding是用来隔开元素与内容之间的间隔

何时使用margin

• 需要在border外侧添加空白的时候
• 空白处不需要背景
• 上下项链的盒子之间需要空白，需要相互抵消时

何时用padding

• 需要在botder内侧添加空白
• 空白处需要背景时

18、抽离样式模块怎么写，说出思路，无需实践经验

把通用的样式单独分离出来做成一个css文件，跟业务相关的样式分离，然后把通用的样式用类名的方式运用到html中。

简单了解css3的all属性

19 、 全屏滚动的原理？用到了css的那些属性？

• 原理： 有点类似轮播，整体的元素一直向下排列，假设有5个全屏页面，那么高度就是500%，只展示100%，同时容器的父级元素设置为overflow：hidden,通过更改容器的可视区域的位置来实现全屏滚动效果。
• 属性： overflow:hidden ; transition: all 1000ms ease;

20、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

• 响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本
• 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
• 页面头部必须有meta生命viewport

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>

21、怎么让chrome支持小于12px的文字？

• 在chrome 27版本以下可以使用-webkit-text-size-adjust:none;来解决，字体打小就不受限制了，但是27版本以上就不能使用了，所以使用的时候慎用。
• 使用transform缩放的属性-webkit-transform:scale(0.5);注意这个收缩是整个元素的大小，这个时候如果是内联元素，必须将内联元素转为块级元素或者行内块元素
• 使用图片，如果是内容固定不变的情况下，使用将小于12px的内容切为图片，这样不影响兼容和美观

22、如果需要手动写动画，你认为最小时间间隔是多久？为什么？

• 多数显示器默认频率为60hz,即1秒刷新60次，所以理论上最下间隔应该是1/60*1000ms = 16.8ms

23、如何去除inline-block元素间间距？

• 移除html之间的空格
• 使用margin负值
• letter-spacing 字符间距
• word-spacing 单词间距

24、overflow:scroll 时ios不能平滑滚动的问题怎么处理？

• 一下代码可以解决卡顿问题： -webkit-overflow-scrolling:touch ; 这是因为这行代码启动了硬件加速特性，所以滑动很流畅

25、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？

• gif是支持动画和透明
• jpg是有损压缩的使用直接色的点阵图，由于使用了直接色，色彩较为丰富，一般适用于来存储照片。但由于使用的是直接色，可能文件的体积相对于GIF格式来说更大。
• 第四种是PNG-8格式，它是无损压缩的使用索引色的点阵图。它是GIF的一种很好的替代格式，它也支持透明度的调整，并且文件的体积相对于GIF格式更小。一般来说如果不是需要动画的情况，我们都可以使用PNG-8格式代替GIF格式。
• 第五种是PNG-24格式，它是无损压缩的使用直接色的点阵图。PNG-24的优点是它使用了压缩算法，所以它的体积比BMP格式的文件要小得多，但是相对于其他的几种格式，还是要大一些。
• 第六种格式是svg格式，它是矢量图，它记录的图片的绘制方式，因此对矢量图进行放大和缩小不会产生锯齿和失真。它一般适合于用来制作一些网站logo或者图标之类的图片。
• webp是谷歌开发的一种新图片格式，使用webp格式的最大优点是，在相同质量的文件下，它拥有更小的体积。因此它非常适合于网络图片的传输，因为图片提价减少，意味着请求时间减少，这样会提高用户的体验。但是目前兼容性还是不太好。

26、 浏览器如何判断是否支持webp格式的图片？

• 宽高判断法：通过创建image对象，将其src属性设置为webp格式的图片，然后再onload时间中获取图片的宽高，如果能获取，则说明浏览器支持webp格式图片，如果不能或者触发了oneerror函数则是不支持
• canvas 判断方法，我们可以动态创建一个canvas对象，通过canvas的todataURL将设置为webp格式，然后判断返回值中是否含有image/webp字段，如果包含这说明支持webp,反之则不支持。

27、使用rem布局的优缺点？

（1）优点：

• 在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备商的展现都统一起来，而且现在浏览器基本都已经支持rem了，兼容性也非常好。

（2）缺点

• 在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱
• 使用iframe引用也会出现问题
• rem在多屏幕尺寸适配上与当前两大平台的设计不一致，即大屏的出现到底是为了看得又大有清楚还是更多的问题。

28、几种常见的css布局？

资料可查看：几种常见的布局方式

29、怎么画一条0.5px的边？

兼容性好的两种方法

• transform:scaleY(0.5); transfrom-origin:50% 100%; 这样子在chrome和safari上不会变糊
• 使用svg的line元素划线，stroke 标识描边颜色，默认描边宽度stroke-width =“1”,由于svg的描边等属性的1px是屋里像素的1px，相当于高清屏的0.5px,另外还可以使用svg的rect等元素进行绘制。
• 注意：在viewport是1的情况下，可以使用transfrom/svg画0.5px，而如果是viewport 的缩放比例不是1的话，就直接画1px

<meta name="viewport" content="width=device-width,initial-sacle=0.5">

兼容性不太好的方法：

• 直接画0.5px，chrome上会直接把0.5px四舍五入为1px
• 线性渐变 backgorund:lineat-gradient(0deg,#fff,#000); 原理是渐变角度从下至上，从白色到黑色，在高清屏是哪个，1px的像素代表物理像素有2px，由于是线性渐变，所以第一个px是白色，第二px是黑色，所以视觉效果就像只画了一半。但是效果都是虚的
• box-shadow：0 0.5px 0 #000； 这个chrome和火狐上非常完美，但是Safari不支持小于1px的boxShadow。
  详细资料可看这里：怎么画一条0.5px的边

30、animation(动画)、transition（过渡）、transfrom（变形）、translate(移动)，其中animation和transition有什么不同？

• transition（过渡）：样式的过渡，只能定义一个属性的变化不能涉及多个属性；且需要事件触发，所以没法在网页加载的是自动触发；只能定义开始状态和结束状态，不能定义中间状态，只有两种状态；且是一次性的，不能重复发生，除非再次触发事件；
• animation(动画)：官方介绍这个属性是transition属性的扩展，弥补了transition的很多不足，可在不同状态下定义多个属性的样式，可以一直被触发，网页加载时就可以自动触发。操作性更强，能够做出更多复杂炫酷的动画。
• transform（变形）：用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
• translate（移动）：translate只是transform的一个属性值，即移动。
  不同：
• keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，是的flash的部分动画效果可以由css直接控制完成。

参考资料：CSS动画：animation、transition、transform、translate傻傻分不清

31 、什么是首选最小宽度？

• 指的是元素最适合的最小的宽度，如果想让英文字符和中文一样，每个字符都用最小宽度单位，可以试试使用css 中的 word-break:break-all

32、min-width/max-width和min-height/max-height属性之间的覆盖规则？

• max-width会覆盖width，即使width是行类样式或者设置了！important
• min-width会覆盖max-width,此规则发生在min-width和max-width冲突的时候

33、什么是替换元素？

通过修改某个属性值呈现的内容就可以被替换的元素成为替换元素。例如 img 、video、ifream、textarea 和 input 及select都是典型的替换元素。

34、letter-spacing和word-spacing的区别？

• letter-spacing是字符之间的间距
• word-spacing是空格之间的间距。
  举个例子：
  “你好呀”：
  letter-spacing：10px; 效果就会为： 你 好 呀
  word-spacing：10px；效果还是为：你好呀。 因为没有空格使用这个无效
  “你 好呀”：
  letter-spacing：10px; 效果： 你 好 呀
  word-spacing：20px；效果：你 好呀

35、常见的元素隐藏方法？

• display：none;不会渲染改元素，因此元素不会在页面中占位置，也不会影响绑定的监听事件
• visibility：hidden；元素在页面中占位置，但不会影响绑定的事件
• opacity:0；将元素的透明度设置为0，来隐藏元素，元素在页面中占位置，并且能触发绑定的事件
• 通过绝对定位将元素移除可视区域，以此来隐藏元素
• 通过z-index负值，使其他元素遮在此元素之上，达到隐藏的目的
• 通过transfrom:scale(0,0)缩放元素，元素仍占位置，但是不触发绑定的事件

36、css实现上下固定，中间自适应？

flex布局

body {
	height:100%;
	display:flex;
	flex-flow:cloumn nowrap;
}
.header {
	height:100px;
	background:red;
}
.content {
	flex-grow:1;
	background:green;
}
.footer {
	height:100px;
	background:yellow;
}

37、实现一个宽高自适应的正方形？

// 第一种，利用css3的vw单位是根据视口宽度的百分比，1v代表视窗的宽度为1%。
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}
/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}

38、一个自适应矩形，水平垂直居中，且宽高比为2:1

/*实现原理参考自适应正方形和水平居中方式 正方形原理：padding的上下百分比跟父元素的宽度来实现的*/

.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;

  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}

39、你知道css中不同属性设置为百分比时对应的计算基准吗？

• 公式：当前元素某CSS属性值 = 基准 * 对应的百分比

• 元素的 position 为 relative 和 absolute 时，top和bottom、left和right基准分别为包含块的 height、width

• 元素的 position 为 fixed 时，top和bottom、left和right基准分别为初始包含块（也就是视口）的 height、width，移动设备较为复杂，基准为 Layout viewport 的 height、width

• 元素的 height 和 width 设置为百分比时，基准分别为包含块的 height 和 width

• 元素的 margin 和 padding 设置为百分比时，基准为包含块的 width（易错）

• 元素的 border-width，不支持百分比

• 元素的 text-indent，基准为包含块的 width

• 元素的 border-radius，基准为分别为自身的height、width

• 元素的 background-size，基准为分别为自身的height、width

• 元素的 translateX、translateY，基准为分别为自身的height、width

• 元素的 line-height，基准为自身的 font-size

• 元素的 font-size，基准为父元素字体

40、px 、em 、rem?

一、px为具体的长度单位，表示一个像素点，是一个绝对尺寸

二、em、rem都是倍数的意思，其尺寸是相对的

   1.em相对于父级的font-size的倍数

   2.rem相对于根元素，即html的font-size的倍数