【学习笔记】前端HTML+CSS部分必懂基础内容（面试考察重点）

一、HTML

1. 什么是语义化？为什么要语义化？语义化标签有哪些

语义化：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

语义化的意义：

代码裸奔时，结构清晰、好看
提升用户体验（title、alt、label）
有利于SEO搜索优化（爬虫依赖标签确定上下文、关键字权重）
方便其他设备解析（阅读器、移动设备...）
便于团队开发维护（提高可读性、减少差异化）

语义化注意点：

减少无意义标签（div、span）
在语义不明显时，div和p间尽量用p, p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签（b、font、u…）
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他）
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

HTML5新增了哪些语义标签：article nav aside section header footer hgroup address...

2. 默认情况下，哪些标签是块级元素？哪些是内联元素

块级元素：

特点：独占一行，宽高可变（宽度默认100%）
display:block/table（div h1 h2 table ul ol p）

内联元素:

特点：并列顺序展示，宽高不可变（内容宽高）
display:inline/inline-block（span imp input button）

二、CSS

1. 什么是盒模型？盒模型的分类有哪些？盒模型宽度计算？盒模型切换？块级盒子(block box)和内联盒子(inline box)

盒模型：CSS 基础框盒模型是 CSS 规范的一个模块，它定义了一种长方形的盒子, 包括它们margin、border、padding、content，并根据视觉格式化模型来生成元素，对其进行布置、编排、布局（lay out）。

盒模型分类：

标准盒模型(standard-box)：width = width；height = height
替代(IE)盒模型(ie-box)：width = width + padding + border；height = height + padding + border

切换：

标准盒模型(standard-box)：box-sizing: content-box
替代(IE)盒模型(ie-box)：box-sizing: border-box

2. 什么是BFC？如何创建BFC？BFC解决了什么问题

BFC：块格式化上下文（Block FormattingContext，BFC）BFC是一个完全独立的空间, 这个空间里子元素的渲染不会影响到外面的布局

创建BFC：

overflow不是visible
display: flex 或 inline-block
position 是 absolute 或 fixed
float不是none

BFC解决了什么问题：

垂直方向margin塌陷（相邻元素的margin-top和margin-bottom会发生重叠）
用Float脱离文档流，父元素高度塌陷问题（清除浮动）

3. 手写圣杯布局和双飞翼布局

圣杯布局和双飞翼布局的目的：

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于pc网页

技术总结：

使用float布局
两侧使用margin负值，以遍和中间内容横向重叠
防止中间内容被两侧覆盖，圣杯布局用padding，双飞翼布局用margin为左右留白

margin负值：

margin-top和margin-left负值，元素会分别向上和向左移动
margin-right负值，元素自身不会移动，右侧元素左移
margin-bottom负值，元素自身不受影响，下方元素上移

圣杯布局：

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style>
    body {
      min-width: 550px;
    }
    #header {
      text-align: center;
      background-color: #f1f1f1;
    }
    #container {
      padding-left: 200px;
      padding-right: 150px;
    }
    #container .column {
      float: left;
    }
    #center {
      background-color: #ccc;
      width: 100%;
    }
    #left {
      position: relative;
      right: 200px;
      background-color: yellow;
      width: 200px;
      margin-left: -100%;
    }
    #right {
      background-color: red;
      width: 150px;
      margin-right: -150px;
    }
    #footer {
      clear: both;
      text-align: center;
      background-color: #f1f1f1;
    }
  </style> 
 </head> 
 <body> 
  <div id="header">
   this is header
  </div> 
  <div id="container"> 
   <div id="center" class="column">
    this is center
   </div> 
   <div id="left" class="column">
    this is left
   </div> 
   <div id="right" class="column">
    this is right
   </div> 
  </div> 
  <div id="footer">
   this is footer
  </div>  
 </body>
</html>

双飞翼布局：

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style>
    body {
      min-width: 550px;
    }
    .col {
      float: left;
    }
    #main {
      width: 100%;
      height: 200px;
      background-color: #ccc;
    }
    #main-wrap {
      margin: 0 190px 0 190px;
    }
    #left {
      width: 190px;
      height: 200px;
      margin-left: -100%;
      background-color: #0000FF;
    }
    #right {
      width: 190px;
      height: 200px;
      background-color: #ff0000;
      margin-left: -190px;
    }
  </style> 
 </head> 
 <body> 
  <div id="main" class="col"> 
   <div id="main-wrap">
     this is main 
   </div> 
  </div> 
  <div id="left" class="col">
    this is left 
  </div> 
  <div id="right" class="col">
    this is right 
  </div>  
 </body>
</html>

4. 清除浮动

为什么要清除浮动：浮动会导致父盒子塌陷

清除浮动的方法：

1. 父元素固定宽高

- 优点：简单，代码少，5无兼容问题

- 缺点：内部元素高度不确定的情况下无法使用

2. 添加新元素

- 优点：简单，代码少，5无兼容问题

- 缺点：要添加无语义的html元素，代码不够优雅，不便于后期的维护

3. 使用伪元素

- 优点：仅用css实现，不容易出现怪问题

- 缺点：仅支持IE8以上和非IE浏览器

4. 触发父元素BFC

- 优点：仅用css实现，代码少，浏览器支持好

- 缺点：用overflow:hidden触发，可能会使内部本应正常显示的元素被裁剪

/*伪元素是行内元素 正常浏览器清除浮动方法*/
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}



/* 使用before和after双伪元素清除浮动 */
.father{
    *zoom: 1;
}
.clearfix:after,.clearfix:before{
    content: "";
    display: block;
    clear: both;
}

5. 实现一个三点骰子

考察点：flex布局

常用语法：

lex-direction
justify-content 主轴对其方式
align-items 交叉轴对其方式
flex-wrap
align-self 子元素在交叉轴的对其方式

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .box {
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 5px solid #000;
      display: flex;
      justify-content: space-between;
      border-radius: 7px;
    }
    i {
      display: block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #000;
    }
    i:nth-child(2) {
      align-self: center;
    }
    i:nth-child(3) {
      align-self: flex-end;
    }
  </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="box"> 
    <i></i> 
    <i></i> 
    <i></i> 
   </div> 
  </div>  
 </body>
</html>

6. css定位相关问题

position有哪些属性：

position: static
- 默认值，没有定位，元素出现在正常的流中
position: relative
- 相对定位，未脱离文档流，元素仍然占据原来的空间
position: absolute
- 绝对定位，脱离文档流，元素的位置相对于最近的已定位父元素。如果元素没有已定位的父元素，那么它的位置相对于浏览器窗口
position: fixed
- 固定定位，脱离文档流，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
position: sticky
- 粘性定位，元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

position的absolute和relative分别依据什么定位：

relative依据自身定位，对外界元素毫无影响
absolute依据最近一层的定位元素定位（absolute，relative，fixed,没有就是body）

7. 居中对齐有哪些实现方式

水平居中

inline元素：text-align: center
block元素：margin: auto
absolute：position: absolute + left: 50% + margin-left负值 / transform: translateX(-50%);

水平垂直居中

inline元素：line-height 的值等于 height 值
absolute：position: absolute + top: 50% + margin-top负值 / transform: translate(-50%, -50%);
absolute：top,left,right,bottom = 0 + margin:auto

8. css图文样式

line-height如何继承

具体数值，直接继承
比例，直接继承
百分比，继承计算出来的值（父元素font-size*百分比）

9. 响应式

CSS中的单位

px，绝对长度单位，最常用
%，相对单位，相对于父元素
em，相对长度单位，相对于父元素，不常用
rem ，相对长度单位，相对于根元素，常用于响应式布局
vw：屏幕宽度的1%
vh：屏幕高度的1%
vmin：vw，vh对比取两者的最小值
vmax：vw，vh对比取两者的最大值

响应式用法：使用@media配合rem适应不同宽度屏幕

10. 元素隐藏

隐藏属性

display: none：不保留空间，直接删除dom节点，会改变页面布局。
opacity: 0，单纯样式隐藏，不会改变页面布局，并且，如果该元素已经绑定一些事件，如click 事件，那么点击该区域，也能触发点击事件的
visibility：hidden：保留空间，不改变页面布局，但不触发事件（重绘）

11. css选择器

css选择器：css选择器是css规则的一部分，css规则由选择器和一条或多条声明组成。用来对选定的页面元素进行样式修改。

css选择器有哪些：

标签选择器
通配选择器
类选择器
ID 选择器
标签属性选择器
伪类选择器
伪元素选择器
后代选择器
子代选择器
相邻兄弟选择器
通用兄弟选择器 A~B 选择 A 元素之后所有同层级 B 元素

选择器优先级：!important> 行内样式 > ID 选择器 > 类、伪类、属性选择器> 标签、伪元素选择器> 通配符、子类选择器、兄弟选择器

12. CSS继承

可继承属性：

字体：font、font-family、font-size、font-style、font-variant、font-weight
字母间距：letter-spacing
文字展示：line-height、text-align、text-indent、text-transform
可见性：visibility
字间距：word-spacing

13. CSS性能

css 提升页面性能的方法：

属性设置使用简写：减少生产包体积
用css替换图片：减少http请求节约带宽
删除不必要的0和单位：减少生产包体积
用css精灵图代替单个文件加载啊：减少http请求节约带宽
动画尽量少改变基础属性，用transform，开启3D加速

14. CSS画三角

<div class="triangle"></div>

.triangle {
    height: 0;
    border: 5px solid transparent;
    border-left: 5px solid red ;
}

15. css动画

transition过渡动画

语法：transition: property duration timing-function delay; 默认值：transition: all 0 ease 0;
- transition-property：规定设置过渡效果的 css 属性名称
- transition-duration：规定完成过渡效果需要多少秒或毫秒
- transition-timing-function：指定过渡函数, 规定速度效果的速度曲线
- transition-delay：指定开始出现的延迟时间
有多个css属性的过渡效果transition: background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;

transform 转变动画

可以利用 transform 功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
- 旋转 rotate
  - 2D 旋转： transform: rotate(45deg); // 顺时针旋转45度
  - 3D 旋转： transform: rotate(x,y,z,angle);
- 缩放 scale
  - 2D缩放：transform: scale(0.5); transform: scale(0.5, 2) ;第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率
  - 3D缩放：transform: scale3d(x, y, z);transform: scaleX(x);transform: scaleY(y);transform: scaleZ(z);参数为收缩比例
- 倾斜 skew
  - transform: skew(30deg) ;transform: skew(30deg, 30deg);第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
  - skew 的默认原点 transform-origin 是这个物件的中心点
- 移动 translate
  - 2D移动：transform: translate(45px, 150px); //沿着X轴和Y轴同时移动
  - 3D移动：transform: translate3d(x,y,z); //在x，y，z轴上都移动
    - transform: translateX(100px); //仅仅是在X轴上移动
    - transform: translateY(100px); //仅仅是在Y轴上移动
    - transform: translateZ(100px); //仅仅是在Z轴上移动（注意：translateZ一般都是用px单位）
  - 基准点 transform-origin
    - 在使用 transform 方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。
    - 用法: transform-origin: 10px 10px;
      - 第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；
      - 两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为 left、center、right，第二个参数可以指定为 top、center、bottom。
  - 多方法组合变形
    - transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

animation 关键帧动画

@keyframes 规则用于创建动画
语法
- animation: name duration timing-function delay iteration-count direction;
  - animation-name 规定需要绑定到选择器的 keyframe 名称
  - animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
  - animation-timing-function 规定动画的速度曲线。默认是 “ease”。
  - animation-delay 规定动画何时开始。默认是 0。
  - animation-iteration-count 规定动画被播放的次数。默认是 1。
  - animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”; alternate (轮流)。