CSS部分

CSS部分

1、calc、support、media各自含义及用法

calc() 函数用于动态计算长度值，支持加减乘除运算

@support 主要用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式；如果不支持，可以提供另外一套样式。@support对浏览器版本有要求

@media 媒体查询，可以针对不同的媒体类型定义不同的样式，常用于响应式布局

2、css水平、垂直居中写法

水平居中：

• 行内元素：text-align: center
• 块级元素： margin: 0 auto
• 绝对定位：position: absolute; left: 50%; transform: translateX(-50%)
• flex布局： display: flex; justify-content: center

垂直居中：

• 行高等于高
• 行内块元素：verticle-align:middle；display: inline-block;
• 绝对定位：position: absolute; top: 50%; transform: translateY(-50%)
• flex布局： display: flex; align-items: center
• 父元素：display:table;子元素：display: table-cell; vertical-align:middle;

3、1rem、1em、1vh、1px各代表什么含义

rem 根元素的font-size大小

em 子元素字体大小em是父元素font-size大小，如果父元素没有设置则向上查找直到找到为止

​ 子元素的width/height/padding/margin用em表示的话就是相对于该元素的font-size大小

vw/vh 视窗的宽度和高度，相当于屏幕宽度和高度的1%，一般处理宽度用%，处理高度用VH

px 像素，相对长度单位，相对显示器屏幕分辨率而言的

4、画一条0.5px的直线

画一条1px的然后 transform: scale(0.5);

5、盒模型

  box-sizing: content-box 是W3C盒子模型
  box-sizing: border-box 是IE盒子模型

由里向外：content、padding、border、margin

w3c盒模型： 即默认盒模型（标准盒模型）：width代表content的宽度

IE盒模型（c3盒模型）：width代表content+border+padding的宽度

6、画三角形

宽高设置为0，边框给值，实心，设置边框单边颜色另外三边透明

锐角三角形

钝角三角形

7、清除浮动

BFC（块级格式化上下文），是一个独立的渲染区域。让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

• 额外标签法

在最后一个浮动的元素下添加一个标签设置clear：both

• 父元素overflow：hidden
• 伪元素清除浮动：

.clearfix:after{
    
    
   content:"";  /*设置内容为空*/
   height:0;     /*高度为0*/
   line-height:0;   /*行高为0*/
   display:block;   /*将文本转为块级元素*/
   visibility:hidden;   /*将元素隐藏*/
   clear:both;    /*清除浮动*/
}


.clearfix{
    
    
   zoom:1;    /*为了兼容IE*/
}

• 双伪元素清除浮动

.clearfix::after, .clearfix::before{
    
    
  content: "";
  display: table;
}
.clearfix::after{
    
    
  clear: both;
}
.clearfix{
    
    
  *zoom: 1;
}

8、属性继承

当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

9、浏览器兼容性差异

① 浏览器默认的 margin 和 padding 不同
解决：加一个全局 *{ margin: 0; padding: 0; }来统一
② 谷歌中文界面下默认会将小于12px 的文本强制按照12px显示
解决：使用-webkit-transform:scale(.75);收缩的是整个span盒子大小，这时候，必须将span准换成块元素。
③ 超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover 和active 了
解决：改变css 属性的排列顺序L-V-H-A

④ png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

⑤ IE下,even对象有x,y属性,但是没有pageX,pageY属性；Firefox下,event对象有pageX,pageY属性,但是没有x,y属性

10、width: auto 和 width: 100% 的区别

width: 100% 会使元素box的宽度等于父元素的contentbox的宽度
width: auto 会时元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间

11、使用base64编码的优缺点

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，

在页面上可以用该字符串来替代图片的url属性，一般一些小图标可以使用base64

优点：

减少一个图片的HTTP请求

缺点：

编码后会比源文件大小大1/3，如果把大图片编码不仅会造成文件体积增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。

使用base64无法直接缓存，只能缓存包含base64的文件，比如HTML、CSS相比于直接缓存图片的效果要差很多。

ie8以前的浏览器不支持。

12、display: none; 与 visibility: hidden; 的区别

联系：都可以让元素不可见

区别：

display：none 会让元素完全从dom树中消失，渲染的时候不占据任何空间；非继承属性

visibility：hidden 不会让元素从树中消失，只是隐藏，继承属性

修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘

其他隐藏元素的方法：

opacity: 0

transform: scale(0)

height: 0; 将元素高度设为 0 ，并消除边框

filter: blur(0); CSS3属性，将一个元素的模糊度设置为0

13、rgba() 和 opacity 的透明效果有什么不同？

• opacity 作用于元素以及元素内的所有内容（包括文字）的透明度

• rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果