前端CSS面试题个人总结

1、css文件引入的方式有哪些?link和@import的区别?

• 引入方式3种：行内添加定义style属性值，页面头部内内嵌在style标签中调用和外链调用css文件

• 区别：

  1.link是xhtml标签，除了加载css外，还可以定义RSS等其他事务，@import只能加载CSS

  2.link引用CSS时候，页面载入的时候同时加载，@import需要页面网页完全载入后加载

  3.link是XHTML标签，没有兼容问题，@import是在CSS2.1提出的，低版本的浏览器不支持。

  4.link支持使用javascript控制DOM去改变样式，但是@import不支持。

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

• 盒子模型有两种，IE盒子模型、W3C盒子模型；
• 盒子模型：内容（content），内边距（padding），边框（border），外边距（margin）
• 区别：IE的content部分把border和padding计算进去了

3、CSS选择器有哪些？权重值？优先级？

• id选择器（#id）; 0 1 0 0
• 类选择器（.class); 0 0 1 0
• 标签选择器（div）; 0 0 0 1
• 通配符（*）；
• 属性选择器（a[rel = 'xyz'];
• 伪类选择器（a:hover,li:nth-child); 0 0 1 0
• 相邻选择器（h1+p）；根据基础选择器权重叠加
• 子选择器（ul>li）；根据基础选择器权重叠加
• 后代选择器（li a）；根据基础选择器权重叠加
• 优先级就近原则，同权重样式定义最近者为准,载入样式以最后载入的定位为准；优先级：!important >行内样式（1 0 0 0）> id > class > tag > *(通配符)

4、display有哪些值？说明他们的作用

• block:设定元素变为块级元素，占据一整行，可设置宽高；
• inline-block：设定元素为行内块元素，可设置宽高，一行能显示多个；
• inline：行内元素，不可设置宽高，一行可显示多个；
• none：设置元素不可见；
• flex：开启弹性布局；
• table：作为块级表格显示；
• list-item：像块级元素一样显示，并添加样式列表标记；
• inherit：继承父元素的display属性；

5、position有哪些值？说明他们的作用和区别？

• relative：相对定位，相对于正常位置进行定位，不脱离标准流，占有位置
• absolute：绝对定位，相对于父元素中最近一个position不为 static（静态，无定位）定位；脱离标准流，不占有位置
• fixed：相对于浏览器窗口定位；脱离标准流，不占有位置
• static：默认，无定位；
• inherit：继承父元素的定位；

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

• 清除浮动主是要为了解决父级元素因为子级浮动引起内部高度为0的问题（父级没有高度的情况）；很多情况下不方面给父亲高度，比如新闻，不知道新闻里面多少字，不方面给高度，一般是让里面的内容自动撑开高度。这个时候就需要清除浮动，用clear 属性：清除浮动

• 清除方式：
  1、父级盒子定义一个height
  2、父级盒子定义overflow:hidden/auto;
  3、额外标签法：在浮动盒子的后面加一个空标签，例如

  .clear{
      clear:both;
  }
  

  4、使用after伪元素清除浮动

  .clearfix:after{
      display:block; /*  转换为块级元素*/
      content:".";  /*  内容为小点，尽量加不要空，防止旧版本有空隙*/  
      height:0; /*  高度为0*/  
      visibility：hidden；/* 隐藏小点*/
      clear：both;
  }
  .clearfix{
      *zoom:1; /*  *代表IE6和IE7能识别的特殊符号，带有这个*的属性，只有IE6和IE7才执行，zoom就是IE6和IE7清除浮动的方法，IE6和IE7浏览器的处理方式，所以必须加上*/
  }
  

  5、使用before和after双伪元素清除法

  .clearfix:before，.clearfix:after{
      display:table; /*  转换为块级元素*/
      content:"";  /*  为空*/  
  }
  .clearfix:after{
     clear:both;
  }
  .clearfix{
      *zoom:1;
  }
  

7、CSS3有哪些新特性

• 实现圆角border-radius，阴影box-shadow，边框图片border-image
• 对文字加特效text-shadow，强制文本换行word-wrap，线性渐变linear-gradient
• 实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜skew(-9deg,0deg);
• 增加了更多的CSS选择器、多背景、rgba()
• 唯一引入的伪元素是::selection；
• 实现媒体查询@media，多栏布局flex
• 过渡transition，动画animation

8、CSS优化、提高性能的方法有哪些

• 移除空的css规则（Remove empty rules）
• 正确使用display的属性
• 不滥用浮动、web字体
• 不声明过多的font-size
• 不在选择符中使用ID标识符
• 遵守盒模型规则
• 尽量减少页面重排、重绘
• 抽象提取公共样式，减少代码量

9、盒子水平居中方式

• 将margin-left和margin-right设置为auto，或者margin：0，auto；（父盒子必须有高度）

• 先让盒子向左移动父盒子宽度的一半，再往回移动自身宽度的一半

• 先把盒子转换成inline-block +，然后text-align：center，使盒子水平居中

• 使用绝对定位

  div{
      position:absolute；
      width:100px;
      height:100px;
      left:50%;
      margin-left:-50px;
  }
  

10、盒子垂直居中方式

• 使用margin计算盒子的上下边距，使其垂直居中
• 将盒子转换成display：table-cell，再vertical-align：middle；使盒子垂直居中
• 先让盒子向下移动父盒子高度的一半，再往回移动自身高度的一半

11、盒子垂直水平居中方式

• 使用绝对定位 + left：50%，top: 50% + margin-left:(自身宽度的一半),margin-top:(自身高度的一半)
• 使用绝对定位 + left：50% ，top: 50%+ translate(-50%,-50%)
• 使用绝对定位 + left: 0，right: 0, top: 0, bottom: 0 + margin：auto
• 使用弹性盒子布局，给父标签设置属性，display: flex; justify-content: center; （水平居中）align-items: center;（垂直居中）

12、opacity和rgba的区别

• opacity

  • opacity是一个属性,有opacity属性的所有后代元素都会继承 opacity 属性

  .box{
       opacity:0.4; //取值从 0.0 （完全透明）到 1.0（完全不透明）
  }
  

• rgba

  • rgba是一个属性值，语法为rgba（r,g,b,a）；rgba只会作用于它本身，不会作用于子元素上

  .box{
       background: rgba(0,0,255,0.4); // 不限于背景颜色，可以是文字颜色，阴影等
  }