前端面试题 知识点（一）

1.display的block、inline和inline-block的区别

• （1）block：会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；
• （2）inline：元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
• （3）inline-block：将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

对于行内元素和块级元素，其特点如下：

• （1）行内元素
  • 设置宽高无效；
  • 可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
  • 不会自动换行；
• （2）块级元素
  • 可以设置宽高；
  • 设置margin和padding都有效；
  • 可以自动换行；
  • 多个块状，默认排列从上到下。

2.隐藏元素的方法有哪些

• display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
• visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
• opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
• position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
• z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
• clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
• transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

3.transition和animation的区别

• transition是过渡属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
• animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

4. display:none与visibility:hidden的区别

这两个属性都是让元素隐藏，不可见。两者区别如下：
（1）在渲染树中

• display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
• visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
  （2）是否是继承属性
• display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
• visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；
  （3）修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；
  （4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。

5. 伪元素和伪类的区别和作用？

• 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
  p::before {content:“第一章：”;}
  p::after {content:“Hot!”;}
  p::first-line {background:red;}
  p::first-letter {font-size:30px;}
• 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
  a:hover {color: #FF00FF}
  p:first-child {color: red}
  总结：伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

6.对盒模型的理解

CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

• 标准盒模型的width和height属性的范围只包含了content，
• IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

• box-sizing: content-box表示标准盒模型（默认值）
• box-sizing: border-box表示IE盒模型（怪异盒模型）

7.li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个

• 放在一行，这导致
• 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

• 解决办法：
  （1）为

• 设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
  （2）将所有
• 写在同一行。不足：代码不美观。
  （3）将
  • 内的字符尺寸直接设为0，即font-size:0。不足：
    • 中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
      （4）消除
      • 的字符间隔letter-spacing:-8px，不足：这也设置了
      • 内的字符间隔，因此需要将
      • 内的字符间隔设为默认letter-spacing:normal。

• 8.CSS3中有哪些新特性

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

  9. margin 和 padding 的使用场景

  • 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin；
  • 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding。

  10. 对line-height 的理解及其赋值方式

  （1）line-height的概念：

  • line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
  • 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
  • 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
  • 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
  • line-height 和 height 都能撑开一个高度；
    （2）line-height 的赋值方式：
  • 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
  • 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
  • 百分比：将计算后的值传递给后代

  11.::before 和 :after 的双冒号和单冒号有什么区别？

  （1）冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
  （2）::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

  注意： :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。

  12. display:inline-block 什么时候会显示间隙？

  • 有空格时会有间隙，可以删除空格解决；
  • margin正值时，可以让margin使用负值解决；
  • 使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；

  13.单行、多行文本溢出隐藏

  • 单行文本溢出

  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- 来兼容一部分浏览器。

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

  三者的区别：

  • px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
  • em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
  • em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

  使用场景：

  • 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 。
  • 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

  15.flex:1 表示什么

  flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。flex:1 表示 flex: 1 1 auto，它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto)：

  • 第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；
  • 第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；
  • 第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。

  16.三角形

  div {
      width: 0;
      height: 0;
      border-bottom: 50px solid red;
      border-right: 50px solid transparent;
      border-left: 50px solid transparent;
  }
  

  17.解决高度坍塌

  当父元素中的所有子元素都浮动走，也就是所有的子元素都脱离文档流，释放布局空间后，不再支撑父元素的高度，父元素就会高度坍塌

  • 1.父元素自定义高度
    父元素可以通过参考子元素的高度给自己设置一个高度
    应用场景：
    已知子元素的高度，并且子元素高度相同时，适合此方案，比如:导航条
    注意:当子元素高度未知时，无法自定义父级高度
  • 2.给父元素设置BFC保护
    任何设置了BFC的元素，和浮动的元素相遇时，都可以实现”自动填充”的适应布局
    也就是说，当父元素设置了BFC结界后，子元素浮动浮动，父元素会根据子元素实际浮动后的高度自动填充自己的高度
    应用场景:
    子元素未知高度，且子元素不会超出父级范围
    会触发BFC的代码:overflow:hidden/auto/scroll;
  • 3.父级元素称为同层元素
    父级想要和浮动的子元素称为同一层元素，相当于父元素也要脱离文档流
    父元素浮动脱离文档流，就可能会影响到父元素的父元素，导致上层元素依然需要解决高度坍塌问题
  • 4.clear属性清除浮动影响
    clear属性是专门用于解决float带来的高度坍塌问题
    • 1.清除指的是清除前面“哥哥们”浮动对父元素产生的不支撑效果
    • 2.clear会让前面的浮动元素与当前元素换行显示，对后面的浮动元素无法起到作用
    • 3.使用clear属性的元素，自己不可以浮动，要保持在文档流中替前面的浮动元素清除影响
  • 4.clear属性只对块级元素生效
    使用方法：
    在父元素的最后添加一个宽高都为0的块级子元素，清除浮动影响
    但这样的方式会造成后续在父元素下多一个孩子
  • 5.使用伪元素
    给父元素最后生成一个空白的“假孩子”，变块级，清影响
    .clearfix::after{ /* 在指定元素的最后生成一个假孩子 /
    content: ‘’; / 内容是空白的,宽高为0 /
    display: block; / 块级元素才可以使用clear属性 /
    clear: both; / 清除前面所有元素浮动造成的不支撑影响 */
    }
    哪个元素高度坍塌，就可以给哪个元素上加类名clearfix
    我们使用::after模拟出来的假孩子，在父元素的最后，很方便的帮我们清除高度坍塌影响

  18.幽灵空白节点

  内联元素(行内+行内块)自带一个叫“幽灵空白节点”的文字节点
  如果需要去掉幽灵空白节点，可以把该内联元素变为块级元素
  display: block;
  注意：幽灵空白节点不是必须要去除的，看实际需求有没有必要

  19.BFC

  BFC的全称是Block Formatting Context(块级格式化上下文)
  简单的来说，它是一个独立的渲染区域，这个区域和外部不相干了，相当于子元素在父元素内部折腾，但也不会超出父元素的范围
  触发条件: 使用overflow的三个属性值auto/hidden/scroll都可以让父元素形成BFC结界
  BFC结界一旦形成，就能让父元素重新计算内部浮动的子元素的实际高度，进行自动填充
  BFC结界一旦形成，就能避免margin的父子贴边问题