1 HTML
1.1 如何理解HTML语义化
让人更容易读懂,让搜索引擎更容易读懂
1.2 哪些是块状元素、哪些是内联元素
display:block/ table; eg: div h1 h2 table ul ol p (独占一行)
display:inline/ inline-block; eg: span img input button(逐个向后排)
2 CSS
知识模块： 布局 定位 图文样式 （继承） 响应式 CSS3（flex 动画）
2.1 布局
1.盒模型宽度
1)offsetWidth是多少？（offsetWidth = 内容宽度 + 内边距 + 边框，无外边距）
#div1{
width: 100px;
padding: 10px;
border: 1px;
margin: 10px;
}
2)要让offsetWidth = 100px，该怎么做
#div1{
width: 100px;
padding: 10px;
border: 1px;
margin: 10px;
box-sizing: border-box; //加入该行，使width不再是content的width，而是
内容宽度 + 内边距 + 边框
}
2.margin纵向重叠
//因为margin-top和margin-bottom重叠为15，三个空的p标签也重叠为无，所以'AAA' 'BBB'距离为15px
<style type="text/css">
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
3.margin负值
1）对margin的top left right bottom设置负值，有何效果
top、left为负，元素向上向左移动；
right为负，右侧元素左移，自身不受影响；
bottom为负，下方元素上移，自身不受影响
4.BFC理解和应用
1)什么是BFC
BFC(Block formatting context)直译为"块级格式化上下文"。
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且
与这个区域外部毫不相干。
2)形成BFC的条件
float不是none； position为absolute、fixed；
overflow不是visible； display为flex、inline-block
3)通过BFC清除浮动
<div class="container bfc">
<img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
<p class="bfc">某一段文字……</p>
</div>
<style type="text/css">
.container {
background-color: #f1f1f1;
}
.left {
float: left;
}
.bfc {
overflow: hidden; /* ！！！触发元素 BFC */
}
</style>
5.float布局
1）圣杯布局和双飞翼布局
圣杯和双飞翼目的
三栏布局，中间一栏最先加载和渲染（内容最重要）；
两侧内容固定，中间内容随着宽度自适应；
一般用于PC网页
圣杯和双飞翼技术总结
使用float布局；
两侧使用margin负值，以便和中间内容横向重叠；
防止中间内容被两侧覆盖，圣杯用padding留白，双飞翼用margin留白
如何实现圣杯和双飞翼（传统PC）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style type="text/css">
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;
background-color: yellow;
width: 200px;
/* 使向左移动100%，即父元素宽度 */
margin-left: -100%;
/* 移动自身宽度，即200px */
right: 200px;
}
#right {
background-color: red;
width: 150px;
/* 自身元素不受影响，后面的元素左移（一种理解：实际在缩小自身宽度，当缩小到零时，不再浮动，可看做不存在） */
margin-right: -150px;
}
#footer {
text-align: center;
background-color: #f1f1f1;
}
/* 关键 */
/* 手写 clearfix */
.clearfix:after {
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="header">this is header</div>
<div id="container" class="clearfix">
<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>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style type="text/css">
body {
min-width: 550px;
}
.col {
float: left;
}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
/* 左右各留190，因为left和right块的宽度为190 */
#main-wrap {
margin: 0 190px 0 190px;
}
#left {
width: 190px;
height: 200px;
background-color: #0000FF;
margin-left: -100%;
}
#right {
width: 190px;
height: 200px;
background-color: #FF0000;
/* margin-right不可行，因为相当于在缩小自身宽度，虽然main-wrap中留出了190px的位置，但margin-right为-190时，其宽度被认为是0，从而占据上一行的最后，
但其实际宽度为190，所以溢出了容器 */
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>
6.手写clearfix
7.flex画色子
1）三点色子
熟练掌握：
flex-direction: 横向纵向；
justify-content: 主轴对齐方式；
align-items: 其他轴（和主轴垂直的轴）的对齐方式；
flex--wrap: 是否换行；
align-self: 子元素在其他轴的对其方式
2.2 定位
1.absolute和relative分别依据什么定位
relative依据自身定位；
absolute依据最近一层的元素（定位元素）定位，若向上未找到定位元素，则以body为定位元素。
定位元素：absolute、relative、fixed； body
2.居中对齐有哪些实现方式
1）水平居中
inline元素：text-align: center；
block元素： margin：auto（自动填充边距）；
absolute元素：left：50% + margin-left负值 (必须知道子元素高度)
2）垂直居中
inline元素：line-height的值等于height值；
absolute元素：
top：50% + margin-top负值(必须知道子元素高度)
transform(-50%, -50%) （无需知道子元素尺寸，！有浏览器兼容问题）
top,left,bottom,right = 0 + margin: auto （无需知道子元素尺寸）
2.3 图文样式
line-height的继承问题
body中的line-height为具体数值则继承该数值，为比例则继承该比例（该比例乘以子元素的font-size），
！！！若为百分比，则继承计算出来的值（百分比乘以body的font-size）。
<style type="text/css">
body {
font-size: 20px;
line-height: 200%;
}
/* p标签的行高为font-size * 200% = 40px */
p {
background-color: #ccc;
font-size: 16px;
}
</style>
2.4 响应式
1. rem是什么（rem常用于响应式布局）
相关的几个单位对比：
px: 绝对长度单位，最常用；
em：相对长度单位，是相对父元素，不常用；
rem：相对长度单位，相对于根元素，常用于响应式布局。
<head>
<title>rem 演示</title>
<style type="text/css">
html {
/* 根元素字体：100px */
font-size: 100px;
}
div {
background-color: #ccc;
margin-top: 10px;
font-size: 0.16rem;
}
</style>
</head>
<body>
<p style="font-size: 0.1rem">rem 1</p> /* 100px * 0.1 */
<p style="font-size: 0.2rem">rem 1</p>
<p style="font-size: 0.3rem">rem 1</p>
<div style="width: 1rem;">
this is div1
</div>
<div style="width: 2rem;">
this is div2
</div>
<div style="width: 3rem;">
this is div3
</div>
</body>
* rem的弊端：阶梯性
阶梯性：按理响应式应该根据屏幕的大小逐级递增，但如果使用媒体查询设置，结果呈现阶梯状，
在某一阶段，无法改变。
2. 响应式布局
<style type="text/css">
@media only screen and (max-width: 374px) {
/* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
/* 设置根元素像素 */
html {
font-size: 86px;
}
}
/* 375/374 等于 100/86 */
@media only screen and (min-width: 375px) and (max-width: 413px) {
/* iphone6/7/8 和 iphone x *
/* 设置根元素像素 */
html {
font-size: 100px;
}
}
/* 414/375 等于 110/100 */
@media only screen and (min-width: 414px) {
/* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
/* 设置根元素像素 */
html {
font-size: 110px;
}
}
body {
font-size: 0.16rem;
}
#div1 {
width: 1rem;
background-color: #ccc;
}
</style>
3. 网页视口尺寸
www.jianshu.com/p/e4dba71ec… 前端页面内的高度、位置简述
- window.screen.height //屏幕高度
- window.innerHeight //网页视口高度，屏幕高度减去上下工具栏，等于100vh
- document.body.clientHeight //body高度，随网页内容多少而变化
4. vw/vh
- vw: 网页视口高度的1/100
- vh: 网页视口宽度的1/100
- vmax: 取vh和vw中的较大值
