前端常见面试知识复习 - HTML/CSS

HTML

1. 说下对语义化的理解

简述：简单来说就是使用合适的标签做合适的事情，比如：使用作为页眉，做页脚，

用于写段落，用于标题。

优点

结构清晰，便于人员维护。
便于浏览器解析，有利于SEO。

常见

header、footer、main、nav、section、aside、p、h、a、img等

2. html文件中的DOCTYPE是什么

简述：DOCTYPE即是文档对象声明，DOCTYPE表示在浏览器中使用标准模式解析页面，确保HTML或XHTML可以在不同的浏览器中使用相同的方式解析页面，如果不添加DOCTYPE则会触发怪异模式。

标准模式：默认模式，按照w3c标准渲染页面。
怪异模式：浏览器自己的模式，浏览器模式不一样，渲染的结构也不同。

3. 行级元素和块级元素

块级元素：

默认每个块级元素自上而下独占一行，宽度占满整行。
可以设置宽高、内边距、外边距。
可以在块级元素中放置行元素和块元素。

常见：div、p、h、li、ul、table等

行内元素：

默认每个行内元素并列排列。
可以设置高、内边距、外边距，不可以设置宽度，宽度根据内容而定。
不可以放置块级元素，可以放置其他行内元素。

常见：span、img、a、input等

行内元素注意：

行内元素的高不是通过height设置，而是通过line-height设置。
行内元素无论内边距还是外边距都是只可以设置左右，不可以设置上下。

4. 标签属性href与src的区别

类型不同

href：超文本引用，用于建立文档与资源的引用，多用于a、link等标签。
src：将资源下载到文档中，多用于script、img等标签。

作用不同

href：文档与资源建立联系。
src：将资源下载到文档中代替内容。

解析方式不同

href：将资源当成css文档，使用并行解析，不阻塞后面内容执行。
src：会阻塞后面的内容执行，因此js文件多放到最后执行。

5. @import与link的区别

本质上@import是属于css规则，link是属于html标签。
在加载上link会和页面并行加载，而@import是加载完页面后再加载@import导入的css文件。
在兼容性上，@import是在css2.1新增的，所以有些老浏览器不支持，link是标签不存在以上问题。
link是属于标签因此可以使用dom操作进行操作，但是@import不可以。

6. a标签除了做导航，还有什么作用

a标签最常用的是做锚点和文件下载。不过a标签中的href属性可以支持浏览器任何协议，因此还可以使用a标签进行打电话 href="tel:110" 以及发短信 href="sms:110" 。

7. HTML和XHTML的区别

简述：HTML是超文本标记语言，XHTML是可扩展超文本标记语言，在写法上XHTML会更加严格。

HTML对大小写不敏感，XHTML区分大小写都应使用小写。
XHTML的标签需要有闭合标签，空元素也不例外，HTML不强制要求。
XHTML所有属性必须带引号，所有属性必须有值，必须小写，HTML的可以简写。
XHTML的元素必须正确的嵌套，HTML中不正确浏览器也会解析。

CSS

1. px、em、rem的区别

px：px是像素，是根据显示器的像素决定，使用了px单位后元素大小不会跟随浏览器大小改变而改变，不适合用在响应式布局中。
em：em单位不是固定的，根据父元素的字体大小元素改变而改变，适用于响应式布局。
rem：rem单位也不是固定的，是根据根节点标签的字体大小元素改变而改变，也就是< html >标签，适用于响应式布局。

注意

em单位如果父元素都没有设置字体大小，那么将会继承根节点的字体大小。
em单位的参照物（父元素）可能会比较多，计算会照成混乱；rem的参照物只有根节点元素，因此计算会更清晰。

2. vw和vh单位

vw和vh单位是css3新增的单位，想了解这两个单位需要先了解下可视化窗口-视口。

视口

pc：在pc端指的是浏览器可视区域。移动端：简单理解就是屏幕的区域。

定义

相对于视口的宽度和高度，视口为100vw、100vh，xvw、xvh就是相对于视口的x%宽高。

3. BFC的理解

简述：BFC为“块级格式化上下文”，会创建一个私有的区域，区域内的元素和区域外的元素互不影响。

触发方式

浮动：float属性除“none”外其他值
绝对定位：position中的“absolute”和“fixed”。
display：“inline-block”、“table-cell”、“flow-root”、table-caption。
overflow：除“visible”外其他值。

特点

在BFC中的块级元素默认垂直向下排列。
在BFC中相邻块级元素的margin会重叠，取最大的margin距离。
在BFC中计算高度会将浮动元素计算在内。
在BFC中的元素与BFC外的元素互不影响。

作用

生成一个私有区域，避免被其他元素影响。
清除浮动。
利用BFC内的元素与元素外的元素互不影响，解决margin重叠。
避免元素被浮动元素覆盖。

4. 垂直居中

简述：实现元素的垂直居中的方法大致可以分为两大类，一个是已经知道元素的宽高，一个是不知道元素宽高，在这只距离常见的几种。

已知元素宽高

使用定位position父相子绝+margin，父元素相对定位，子组件绝对定位，子组件top、left、right、bottom均设为0，而且margin：auto。

.parent {
    width: 300px;
    background: red;
    height: 300px;
    position: relative;
}
.son {
    width: 150px;
    background: rgb(102, 102, 102);
    height: 150px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
    margin: auto;
}

使用定位position父相子绝+margin，父元素相对定位，子组件绝对定位，子组件的top、left均设为50%，而且margin：-75px 0 0 -75px。

.parent {
    width: 300px;
    background: red;
    height: 300px;
    position: relative;
}
.son {
    width: 150px;
    background: rgb(102, 102, 102);
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
}

元素宽高未知

使用定位position父相子绝+margin，父元素相对定位，子组件绝对定位，子组件的top、left均设为50%，子组件使用transform的translate。

.parent {
    width: 300px;
    background: red;
    height: 300px;
    position: relative;
}
.son {
    background: rgb(102, 102, 102);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

使用表格样式进行设置,display: table-cell将元素作为表格元素显示，vertical-align: middle设置元素垂直父元素中部，text-align: center文本居中，再将子元素设置成行内块元素。（注意：该方式中parent的父元素不可为display: flex，否则会影响到垂直居中布局）

.parent {
    width: 300px;
    background: red;
    height: 300px;
    display: table-cell; 
    text-align: center; 
    vertical-align: middle;
}
.son {
    background: rgb(102, 102, 102);
    display: inline-block;
}

使用弹性布局，目前最流行的垂直居中方式display: flex;、justify-content: center;、align-items: center;。

.parent {
    width: 300px;
    background: red;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.son {
    background: rgb(102, 102, 102);
}

使用grid布局，与弹性布局写法相识，不同在于设置display的值display: grid;(注意：grid布局目前需要考虑兼容性)

.parent {
    width: 300px;
    background: red;
    height: 300px;
    display: grid;
    justify-content: center;
    align-items: center;
}
.son {
    background: rgb(102, 102, 102);
}

5. display:none和visibility:hidden和opacity:0的区别

display:none

DOM结构：display:none不会被DOM树渲染出来，不占据空间。
继承性：非继承，因为不会被渲染出来，因此子元素设置display其他值也不会显示。
性能：因为是改变了DOM的结构，属于回流，性能消耗较大。
绑定的事件：不响应。
transform：不支持。

visibility:hidden

DOM结构：visibility:hidden会渲染出来但是内容不可见，因此会占据空间。
继承性：继承，子元素可修改显示。
性能：因为结构已经被显然出来，只是不可见，因此改变属于重绘，性能消耗较小。
绑定的事件：不响应。
transform：支持。

opacity:0

DOM结构：opacity:会渲染出来但是因为是透明的，内容不可见，因此会占据空间
继承性：继承，子元素可修改显示。
性能：因为结构已经被显然出来，只是不可见，因此改变属于重绘，性能消耗较小。
绑定的事件：响应，只是透明，但是结构还在可以点击到。
transform：支持。 总结：display:none是不存在；visibility:hidden是存在但是看不见摸不着；opacity:0是存在看不见摸得着。

6. 使用css实现一个三角形

主要是使用css的border属性实现。设置border的宽度，再根据需求设置边框四周的颜色透明实现不同的三角形。

// 等边三角形
.box {
    wigth: 0;
    heigth: 0;
    boder: 10px solid red;
    border-top-color: transparent; 
    border-left-color: transparent; 
    border-right-color: transparent;
}

7. 浏览器盒模型

简述：可以将html中的每个元素都看成一个盒子，盒子由content + padding + margin + border组成，浏览器有两种盒模型标准盒模型（使用w3c标准） 与 怪异盒模型（IE盒模型） ，可以使用box-sizing属性设置。

content：展示内容的区域。
padding：内边距，盒子边框与内容的距离。
margin：外边距，盒子与盒子间的距离。
border：盒子的边框。

标准盒模型

标准盒模型中，使用wigth/heigth改变的是content区域的大小，它的实际大小为content+padding+border，margin不算入实际大小中，可以box-sizing: border-box定义。

怪异盒模型

怪异盒模型即IE盒模型，使用wigth/heigth改变的虽然也是content区域的大小，但是它的content区域（内容大小）是content+padding+border，，改变padding和border都无法改变它的实际大小，即设置的wigth/heigth就是实际宽高。

8. 清除浮动

简述：使用浮动的话会使父元素的高度坍塌，可能会造成布局的混乱，因此有时候需要清除浮动对布局的影响。

让元素出发BFC，BFC计算父元素高度时会将浮动元素计算在内，这是BFC的特性。
在浮动元素后面添加一个空的div元素，设置clear:both这样可以时达到清除浮动的效果。
某些场景下可以自定义父元素高度，这样就不会担心高度坍塌。
父级元素定义伪类:after和zoom

9. 什么是伪类和伪元素，它们的区别

伪类

伪类是在某个时段里操作对元素进行操作；如：:hover是当鼠标移动到元素上时触发定义在该元素的css样式。

伪元素

伪元素用于创建一些不在DOM树中的元素，并为其添加样式。如::before在元素前创建元素。

区别

区别就是在于它们的作用不一样。

伪类是在某个时段里操作对元素进行操作。
伪元素用于创建一些不在DOM树中的元素。

10. css的选择器以及优先级

选择器

id选择器、类选择器、标签选择器、属性选择器、伪类选择器、伪元素选择器、兄弟选择器、父子选择器、后代选择器、通配符。

优先级

!important声明的优先级最高。
内联样式 1000。
id选择器 100。
类选择器、属性选择器、伪类选择器 10。
伪元素选择器、标签选择器 1。
其余的选择器 0。

11. 重绘和回流的理解

简述：当页面中的元素发生变化时，浏览器会会页面重新计算渲染会产生性能的消耗，不同的变化造成的结果不同，会形成重绘或回流。

重绘

元素的一些属性需要更新，但是这些更新不会影响布局、元素大小，这样的变化就是重绘。

回流

页面中的元素尺寸大小、布局、显隐等发生变化会造成页面的渲染树重新构建，称为回流。每次页面至少会发生一次回流，就是第一次渲染的时候。

注意

重绘不一定触发回流，但是回流一定触发重绘。
回流的性能消耗大于重绘

12. css实现骰子的三点

这里使用弹性布局实现，父元素使用弹性布局，子元素使用align-self来改变单个元素的对齐方式。

 <div class="parent">
      <div class="son"></div>
      <div class="son1"></div>
      <div class="son2"></div>
 </div>

.parent {
      display: flex;
      justify-content: center;
      width: 200px;
      height: 200px;
      border: 1px solid #999999;
      border-radius:20px;
      padding: 10px;
 }
.parent > div {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: black;
}
.son1 {
      align-self: center;
}
.son2 {
      align-self: flex-end;
}

13. CSS Sprites的理解

简述：CSS Sprites也就是雪碧图，是将一些图片整合到一个图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。雪碧图达到减少http请求优化页面速度。

优点

减少http的请求次数，提高页面性能。
降低文件的字节，将图片合成一张的字节少与多张的总和。
减少给文件起名的烦恼。
方便更改风格，在需要统一更改风格时不需要一张张更改，只需要修改一张即可。

缺点

有序的将多张图片合成一张需要考虑各张图片的位置，步骤繁琐。
开发麻烦，因为需要对雪碧图中的小图位置进行计算。
维护麻烦，如果页面背景需要改变，那么雪碧图也需要跟着改变。

14. 说说外边距重合

简述：当两个相邻的盒子都设置了外边距时，相邻的外边距将会重合而不是相加。

规则

当相邻的外边距都为正值时，取最大的值作为两个盒子间的距离。
当相邻的外边距都为负数时，取负数的绝对值中最大值为两个盒子间的距离。
当相邻的外边距一正一负时，将取两数的和作为两个盒子的距离。