前端面试快速准备之：HTML与CSS
主要内容：
HTML考点与面试题CSS考点和面试题布局
定位
图文样式
响应式
HTML 面试题
如何理解
HTML语义化？默认情况下，哪些
HTML标签是块级元素、哪些是内联元素？
CSS 面试题
盒子模型的宽度如何计算？
margin纵向重叠的问题margin负值的问题BFC 理解和应用
float布局的问题，以及clearfixflex画色子absolute和relative分别依据什么定位居中对齐有哪些实现方式
line-height的继承问题rem是什么如何实现响应式
关于 CSS3 动画
HTML 面试题
如何理解 HTML 语义化
让人更容易读懂（增加代码可读性）
让搜索引擎更容易读懂（SEO）
SEO，即搜索引擎优化（Search Engine Optimization），是一系列策略和技术的集合，旨在提升网站在搜索引擎结果页面（SERPs）中的自然排名。其中HTML语义化属于网站优化的一部分，以便搜索引擎更容易抓取和索引网站内容。
块状元素 & 内联元素
display: block / table；有div h1 h2 table ul ol p等；display: inline / inline-block；有span img input button等；
CSS 面试题
CSS - 布局
盒模型宽度计算
offsetWidth = (内容宽度 + 内边距 + 边框), 无外边距示例代码：
<style>
#div1 {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
</style>
<div id="div1">
</div>如上代码，offsetWidth 为 122px；
关键点： box-sizing：border-box；加上此属性，就会导致 width: 100px 包括内容宽度、内边距 以及 边框宽度；
margin纵向重叠问题
相邻元素的margin-top和margin-bottom会发生重叠；
空白内容的<p></p>也会重叠；
margin 负值问题
对 margin 的 top left right bottom 设置负值，有何效果
margin-top 和 margin-left负值，元素向上、向左移动；
margin-right 负值，右侧元素左移，自身不受影响；
margin-bottom 负值，下方元素上移，自身不受影响
BFC理解与应用
Block Format Context ，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素；
形成BFC的常见条件：
float 不是 none
position 是 absolute 或 fixed
overflow 不是 visible
display 是
flexinline-block等
BFC的常见应用
清楚浮动
Float 布局
圣杯布局与双飞翼布局
目的：
三栏布局，中间一栏最先加载和渲染（内容最重要）；
两侧内容固定，中间内容随着宽度自适应；
一般用于PC网页；
圣杯布局： 圣杯布局是一种基于浮动的布局方式，通过设置元素的宽度和margin来实现。具体步骤如下：
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
}
.main, .left, .right {
float: left;
}
.main {
width: 100%;
background-color: #ccc;
}
.left, .right {
width: 200px;
height: 300px;
background-color: #f0f0f0;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">主内容区</div>
<div class="left">左侧边栏</div>
<div class="right">右侧边栏</div>
</div>
</body>
</html>双飞翼布局： 双飞翼布局是一种基于BFC（Block Formatting Context，块级格式化上下文）的布局方式，通过设置overflow属性来实现。具体步骤如下：
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
}
.main, .left, .right {
float: left;
}
.main {
width: 100%;
overflow: hidden;
background-color: #ccc;
}
.left, .right {
width: 200px;
height: 300px;
background-color: #f0f0f0;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">主内容区</div>
<div class="left">左侧边栏</div>
<div class="right">右侧边栏</div>
</div>
</body>
</html>技术总结：
使用float布局；
两侧使用margin负值，以便和中间内容横向重叠；
防止中间内容被两侧覆盖，一个用padding，一个用margin；
手写Clear fix
.clearfix: after {
content: "";
display: table;
clear: both;
}
/*兼容IE低版本*/
.clearfix {
*zoom: 1;
}flex布局（Flexible Box 弹性布局）
常用语法回顾
flex-direction: 决定主轴的方向；
justity-content: 定义了项目在主轴对齐方式；
align-items: 定义项目在交叉轴上如何对齐；
flex-wrap: 一条轴线排不下，如何换行；
align-self:
默认值auto，表示继承父元素的align-items属性；
允许单个项目与其它项目有不一样的对齐方式；
flex实现一个三点的色子
HTML代码：
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div>CSS代码：
.box{
width: 200px;
height: 200px;
padding: 20px;
display: flex;
flex-direction: row;
justify-content: space-between; /*设置两端对齐*/
border: 2px solid #ccc;
border-radius: 10px;
}
.item{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
.item:nth-child(2){
align-self: center; /*垂直方向居中*/
}
.item:nth-child(3){
align-self: flex-end; /*垂直方尾对齐*/
}CSS - 定位
absolute 和 relative 定位
relative 依据自身定位；
absolute 依据最近一层的定位元素定位；
居中对齐的实现方式
a. 水平居中
inline元素：text-align: center；
block元素：margin: auto；
absolute元素：left 50% + margin-left负值；
b. 垂直居中
inline元素： line-height 等于 height；
absolute元素：
top 50% + margin-top负值；
transform (-50%, -50%)；
top、left、bottom、right = 0 + margin: auto；
3.图文样式
4.响应式
4.1.rem是什么？
rem是一个长度单位；
px：绝对长度单位，最常用；
em：相对长度单位，相对于父元素，不常用；
rem：相对长度单位，相对于根元素，常用于响应式布局；
4.2.响应式布局的常用方案
media-query：根据不同的屏幕宽度设置根元素 font-size；
rem 基于根元素的相对单位；
4.3.rem的弊端
"阶梯"性
4.4.网页视口尺寸
window.screen.height：屏幕高度；
window.innerHeight：网页视口高度；
document.body.clientHeight：body高度；
vh：网页视口高度的 1/100；
vw：网页视口宽度的 1/100；