HTML + CSS 前端面试题

HTML + CSS

说一下 <label> 标签的用法

label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验

遍历A节点的父节点下的所有子节点

这题考查原生的js操作dom,属于非常简单的基础题，但长时间使用mvvm框架，可能会忘记

    <script>
        var b=document.getElementById("a").parentNode.children;
        console.log(b)
    </script>

rem、em、vh、px

rem

rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em

• 子元素字体大小的em是相对于父元素字体大小
• 元素的width/height/padding/margin用em的话是相对于该元素的font-size

vw/vh

全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有{1920*1024}等不同的分辨率

1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

水平、垂直居中的写法

水平居中

• 行内元素: text-align: center
• 块级元素: margin: 0 auto
• position:absolute +left:50%+ transform:translateX(-50%)
• display:flex + justify-content: center

垂直居中

• 设置line-height 等于height
• position：absolute +top:50%+ transform:translateY(-50%)
• display:flex + align-items: center
• display:table+display:table-cell + vertical-align: middle;

隐藏页面中某个元素的办法 ? 区别 ?

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

• display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
• visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
• opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能：displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少

( 0 ) 设置 width、height 属性为 0

将元素的 width，height，margin，padding和 border等影响元素盒模型的属性设置成 0 ，如果元素内有子元素或内容，还应该设置其 overflow: hidden 来隐藏其子元素

.hiddenBox {
width: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
特点：元素不可见，不占据页面空间，无法响应点击事件

( 1 ) 将元素设置为 display: none;后，元素在页面上将彻底消失

元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的 重排( 回流 ) 和 重绘

消失后，自身绑定的事件不会触发，也不会有过渡效果

特点：元素不可见，不占据页面空间，无法响应点击事件

( 2 ) 从页面上仅仅是隐藏该元素，DOM 结构均会存在，只是当时在一个不可见的状态

不会触发重排，但是会触发 重绘

特点：元素不可见，占据页面空间，无法响应点击事件

( 3 ) opacity 属性表示元素的 透明度 ，将元素的透明度设置为 0 后，在我们用户眼中，元素也是 隐藏 的

不会引发重排，一般情况下也会引发 重绘

特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件

特点：元素不可见，不影响页面布局

画一条0.5px的直线

考查的是css3的transform

height: 1px;
transform: scale(0.5);

说一下盒模型？

• 盒模型的组成，由里向外content,padding,border,margin.
• 在IE盒子模型中，width表示content+padding+border这三个部分的宽度
• 在标准的盒子模型中，width指content部分的宽度

box-sizing的使用

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

box-sizing的默认属性是content-box

画一个三角形

.a{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
}

<div class="a"></div>

清除浮动的几种方式，及原理

清除浮动简单，但这题要引出的是BFC，BFC也是必考的基础知识点

• ::after /
  / clear: both
• 创建父级 BFC(overflow:hidden)
• 父级设置高度

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

触发条件:

• 根元素
• position: absolute/fixed
• display: inline-block / table
• float 元素
• ovevflow !== visible

规则:

• 属于同一个 BFC 的两个相邻 Box 垂直排列
• 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
• BFC 的区域不会与 float 的元素区域重叠
• 计算 BFC 的高度时，浮动子元素也参与计算
• 文字层不会被浮动层覆盖，环绕于周围

什么是 BFC