一.css布局
1.盒模型
/*如下代码，请问div1的offsetWidth是多大？*/
/*答案：offsetWidth=width+padding+border=122px：*//*扩展：如果让offsetWidth=100px,该如何做？*/
2.margin纵向重叠问题这个以前知道会重叠但是不知道空标签也会重叠
/*如下代码，AAA和BBB之间的距离是多少？*/
AAA
BBB
/*
答案：15px。
解释：相邻的margin-top和margin-bottom会发生重叠；
空白的也会重叠。
*/3.margin负值问题
- margin-top和margin-left负值，元素向上、向左移动；
- margin-right负值，右侧元素移动，自身不受影响；
- margin-bottom负值，下方元素移动，自身不受影响。4.BFC的理解和应用
什么是BFC?如何应用？
BFC：
block format context 块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件：
float：不是none
position：absolute/fixed
overflow:部位visible
display:inline-block,flex等
BFC常见应用
清除浮动5.如何实现圣杯布局和双飞翼布局
圣杯布局和双飞翼布局的目的
三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页
圣杯布局和双飞翼布局的技术总结
使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding一个用margin圣杯布局
Document
header
center
left
right
双飞翼布局
Document
header
center
left
right
6.手写clearfix
/* 手写clearfix */
.clearfix:after{
content: '';
display: table;
clear: both;
}
.clearfix{
*zoom:1;
}7.flex实现一个三点的色子
flex常用语法回顾：
flex-direction：方向
justify-content：元素在主轴的对齐方式
align-items：元素在交叉轴的对齐方式
flex-wrap：换行
align-self:子元素在交叉轴的对齐方式 align-self这个其实我一直没仔细看啥意思，现在学习回顾了是怼子元素起作用的
Document
二.css定位
1.absolute和relative分别依据什么定位？
relative依据自身定位
absolute依据最近一层的定位元素定位
定位元素：absolute，relative，fixed
body2.居中对齐有哪些实现方式？
水平居中
1. inline元素：text-align:center
2. block元素：margin:auto
3. absolute元素：left50%+margin-left负值
4. flex元素：display: flex; jusitity-content: center;
垂直居中
1. inline元素：line-height的值等于height的值
2. absolute元素1：top50%+margin-top负值
3. absolute元素2：transform:translate(-50%,-50%)
4. absolute元素3：top,bottom,left,right=0+margin:auto
可以实现元素水平垂直居中，既保证兼容性又不必知道子元素的长度。
5. flex元素：display: flex; align-items: center;
Document
水平居中
inline元素
block元素
absolute
flex元素
垂直居中
inline元素
absolute
absolute2
transform
flex元素
三.css图文样式
1.line-height:如何继承
如下代码，p的行高将会是多少？
AAA
答案：40px（font-size * line-height）=20*200%=40我也不知道写百分比继承的是计算出来的值，以前都没有用过百分比这种line-height
写具体值，如30px，则继承该值（比较好理解）
写比例，如2/1.5，则继承该值(比较好理解)
写百分比，如200%，则继承计算出来的值（考点）四.CSS响应式
1.rem是什么？
rem是一个长度单位
px：绝对长度单位，最常用
em：相对长度单位，相对于父元素，不常用
rem：相对长度单位，相对于根元素，常用于响应式布局2.响应式布局的常见方案？
media-query:根据不同的屏幕宽度设置根元素font-size
rem:基于根元素的相对单位3.vw/vh
rem&media-query弊端：阶梯性
网页视口尺寸：
window.screen.height:屏幕高度
window.innerHeight:网页视口高度
document.body.clientBody:body高度
vw/vh:
vh:网页视口高度1/100
vw:网页视口宽度1/100
vmax取两者最大值，vmin取两者最小值
window.innerHeight=100vh
window.innerwidth=100vw