CSS 面试题

• 解决办法：

消除 

 的字符间隔 letter-spacing:-8px，不足：这也设置了 
•  内的字符间隔，因此需要将 
•  内的字符间隔设为默认 letter-spacing:normal

  12、CSS3中有哪些新特性

  • 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
  • 圆角 （border-radius:8px）
  • 多列布局 （multi-column layout）
  • 阴影和反射 （Shadoweflect）
  • 文字特效 （text-shadow）
  • 文字渲染 （Text-decoration）
  • 线性渐变 （gradient）
  • 旋转 （transform）
  • 增加了旋转,缩放,定位,倾斜,动画,多背景

   

  13、对line-height 的理解及其赋值方式

  • line-height的概念
  line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中line-height 和 height 都能撑开一个高度
  • line-height 的赋值方式

  带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高

  纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px

  百分比：将计算后的值传递给后代

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

  15、单行、多行文本溢出隐藏

  • 单行文本溢出

  overflow: hidden;            // 溢出隐藏
  text-overflow: ellipsis;      // 溢出用省略号显示
  white-space: nowrap;         // 规定段落中的文本不进行换行

  • 多行文本溢出

  overflow: hidden;            // 溢出隐藏
  text-overflow: ellipsis;     // 溢出用省略号显示
  display:-webkit-box;         // 作为弹性伸缩盒子模型显示
  -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
  -webkit-line-clamp:3;        // 显示的行数

  注意：由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个-webkit- 来兼容一部分浏览器

  16、对 CSS 工程化的理解

   

  17、z-index属性作用，在什么情况下会失效

  • 作用：
  通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现 z-index值越大就越是在上层

  z-index元素的 position 属性需要是 relative，absolute 或是 fixed

  • z-index属性在下列情况下会失效：

  父元素 position 为 relative 时，子元素的 z-index 失效。解决：父元素 position 改为 absolute 或 static；

  元素没有设置 position 属性为非 static 属性。解决：设置该元素的 position 属性为 relative，absolute 或是 fixed 中的一种；

  元素在设置 z-index 的同时还设置了 float 浮动。解决：float 去除，改为 display：inline-block；

  18、px、em、rem的区别及使用场景

  •  三者的区别：
  1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变
  2. em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局
  3. em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值
  • 使用场景：
  1. 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用 px 即可
  2. 对于需要适配各种移动设备，使用 rem，例如需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备

  19、两栏布局的实现

  一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应 两栏布局的具体实现：
  • 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素

  .outer {
    height: 100px;
  }
  .left {
    float: left;
    width: 200px;
    background: tomato;
  }
  .right {
    margin-left: 200px;
    width: auto;
    background: gold;
  }

  • 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置 overflow: hidden; 这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠

  .left{
       width: 100px;
       height: 200px;
       background: red;
       float: left;
   }
  .right{
       height: 300px;
       background: blue;
       overflow: hidden;
   }

  • 利用flex布局，将左边元素设置为固定宽度 200px，将右边的元素设置为 flex:1

  .outer {
    display: flex;
    height: 100px;
  }
  .left {
    width: 200px;
    background: tomato;
  }
  .right {
    flex: 1;
    background: gold;
  }

  • 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px

  .outer {
    position: relative;
    height: 100px;
  }
  .left {
    position: absolute;
    width: 200px;
    height: 100px;
    background: tomato;
  }
  .right {
    margin-left: 200px;
    background: gold;
  }

  • 利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0

  .outer {
    position: relative;
    height: 100px;
  }
  .left {
    width: 200px;
    background: tomato;
  }
  .right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 200px;
    background: gold;
  }

  20、如何根据设计稿进行移动端适配

  移动端适配主要有两个维度：

  • 适配不同像素密度， 针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真
  • 适配不同屏幕大小， 由于不同的屏幕有着不同的逻辑像素大小，所以如果直接使用 px 作为开发单位，会使得开发的页面在某一款手机上可以准确显示，但是在另一款手机上就会失真。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容

  为了能让页面的尺寸自适应，可以使用 rem，em，vw，vh 等相对单位

  21、对Flex布局的理解及其使用场景

  22、响应式设计的概念及基本原理

  • 概念：

  响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本

  • 原理：

  基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理；关于兼容： 页面头部必须有mate声明的 viewport

  23、为什么需要清除浮动 清除浮动的方式

  • 浮动的定义：

   非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）

  • 浮动的工作原理：

  浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）

  浮动元素碰到包含它的边框或者其他浮动元素的边框停留

  24、对BFC的理解，如何创建BFC

  25、display、position、float 的关系

  • 首先判断 display 属性是否为 none，如果为 none，则 position 和 float 属性的值不影响元素最后的表现
  • 然后判断 position 的值是否为 absolute 或者 fixed，如果是，则 float 属性失效，并且 display 的值应该被设置为 table 或者 block，具体转换需要看初始转换值
  • 如果 position 的值不为 absolute 或者 fixed，则判断 float 属性的值是否为 none，如果不是，则 display 的值则按上面的规则转换。注意，如果 position 的值为 relative 并且 float 属性的值存在，则 relative 相对于浮动后的最终位置定位
  • 如果 float 的值为 none，则判断元素是否为根元素，如果是根元素则 display 属性按照上面的规则转换，如果不是，则保持指定的 display 属性值不变

  总的来说，可以把它看作是一个类似优先级的机制，'position:absolute' 和 'position:fixed' 优先级最高，有它存在的时候，浮动不起作用，'display' 的值也需要调整

  其次，元素的 'float' 特性的值不是 'none' 的时候或者它是根元素的时候，调整 'display' 的值；

  最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display' 特性值同设置值

  26、absolute 与 fixed 共同点与不同点

  • 共同点：

  改变行内元素的呈现方式，将 display 置为 inline-block

  使元素脱离普通文档流，不再占据文档物理空间

  覆盖非定位文档元素

  • 不同点：

  abuselute与fixed的根元素不同，abuselute的根元素可以设置，fixed根元素是浏览器。

  在有滚动条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置

  27、margin和padding分别适合什么场景使用

  • 何时使用margin：

  需要在border外侧添加空白

  空白处不需要背景色

  上下相连的两个盒子之间的空白，需要相互抵消时

  • 何时使用padding：

  需要在border内侧添加空白

  空白处需要背景颜色

  上下相连的两个盒子的空白，希望为两者之和。

  兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决

  28、列举一些CSS框架

  Bootstrap：基于HTML、CSS、JavaScript 开发，由动态  CSS 语言 Less写成

  React 组件

  Layui：遵循原生 HTML/CSS/JS 的书写与组织形式

  ElementUI：基于 Vue 2.0的桌面端组件库

  29、overflow属性在CSS中被用于什么

  • 作用：

  overflow 属性规定当内容溢出元素框时发生的事情

  如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条

  • 可能的值：

  overflow: auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

  overflow: hidden：内容会被修剪，并且其余内容是不可见的

  overflow: scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

  overflow: visible：默认值。内容不会被修剪，会呈现在元素框之外

  30、重排与重绘

  • 重排 reflow（回流）：当浏览器发现某个部分发生了变化影响了布局，需要倒回去重新渲染

  添加、删除可见的 DOM 元素

  元素位置改变、尺寸改变、内容改变

  页面初始化、resize 事件等

  • 重绘 repaint：改变某个元素的背景色、文字颜色、边框颜色等影响周围或内部布局的属性时，屏幕的一部分要重画，但元素的几何尺寸不变

  注意：

  ① 回流必定引起重绘，而重绘不一定会引起回流

  ② display: none;的节点不会被加入渲染树，而 visibility: hidden;会被加入渲染树

  ③ display:none;会触发回流；visibility: hidden;会触发重绘

   

  31、position 中的 relative 和 absolute 的定位原点是什么

  • absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

  • fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位

  • relative：生成相对定位的元素，相对于其正常位置进行定位

  • static：默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）

  • inherit：规定从父元素继承 position 属性的值

  
32、float的使用

   

  33、flex弹性布局

  34、常见居中方案

  35、制作一个访问量很高的大型网站，你会如何来管理所有 CSS 文件、js 与图片

  36、IE6 BUG的解决方法