一.css布局
1.盒模型
/*如下代码，请问div1的offsetWidth是多大？*/
<style>
#div1{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
}
</style>
<div id="div1"></div>
/*答案：offsetWidth=width+padding+border=122px：*//*扩展：如果让offsetWidth=100px,该如何做？*/
<style>
#div1{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
box-sizing:border-box; /*设置盒模型*/
}
</style>
<div id="div1"></div>2.margin纵向重叠问题这个以前知道会重叠但是不知道空标签也会重叠
/*如下代码，AAA和BBB之间的距离是多少？*/
<style>
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>
/*
答案：15px。
解释：相邻的margin-top和margin-bottom会发生重叠；
空白的<p></p>也会重叠。
*/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圣杯布局
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<style>
.header{
width: 100%;
height: 50px;
background: red;
}
/* 2.padding两边留白 */
.content{
padding: 0 200px 0 200px;
background: yellow;
}
/* 1.浮动布局 */
.content .col{
float: left;
}
.content .main{
width: 100%;
height: 50px;
background: blue;
}
/* 3.左 margin-left: -100%;*/
.content .left{
width: 200px;
height: 50px;
background: #eee;
margin-left: -100%;
position: relative;
right: 200px;
}
/* 4.右 margin-right: -200px; */
.content .right{
width: 200px;
height: 50px;
background: peru;
margin-right: -200px;
}
.footer{
width: 100%;
height: 50px;
background: green;
}
/* 手写clearfix */
.clearfix:after{
content: '';
display: table;
clear: both;
}
.clearfix{
*zoom:1;
}
</style>
<div class="header">header</div>
<div class="content clearfix">
<div class="main col">center</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>双飞翼布局
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<style>
.header{
width: 100%;
height: 50px;
background: red;
}
.content{
width: 100%;
background: yellow;
}
/* 1.浮动布局 */
.content .col{
float: left;
}
.content .main{
width: 100%;
height: 50px;
background: blue;
}
/* 2.margin留白 */
.content .main-wrap{
margin: 0 200px 0 200px;
}
/* 3.左 margin-left: -100%;*/
.content .left{
width: 200px;
height: 50px;
background: #eee;
margin-left: -100%;
}
/* 4.右 margin-left: -200px; */
.content .right{
width: 200px;
height: 50px;
background: peru;
margin-left: -200px;
}
.footer{
width: 100%;
height: 50px;
background: green;
}
/* 手写clearfix */
.clearfix:after{
content: '';
display: table;
clear: both;
}
.clearfix{
*zoom:1;
}
</style>
<div class="header">header</div>
<div class="content clearfix">
<div class="main col">
<div class="main-wrap">center</div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>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这个其实我一直没仔细看啥意思，现在学习回顾了是怼子元素起作用的
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #333;
/* flex布局 */
display: flex;
justify-content: space-between;
}
.point{
width: 50px;
height: 50px;
background-color: #666;
border-radius: 50%;
}
.point:nth-child(2){
align-self: center;
}
.point:nth-child(3){
align-self: flex-end;
}
</style>
<div class="box">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</body>
</html>二.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;<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<h1>水平居中</h1>
<style>
.shuiping{
border:1px solid #333;
padding: 20px;
}
.shuiping .container {
background: #666;
margin-bottom: 10px;
height: 50px;
}
.shuiping .inline{
text-align: center;
}
.shuiping .inline .content{
background: green;
}
.shuiping .block{
}
.shuiping .block .content{
width: 300px;
margin: 10px auto;
background: green;
}
.shuiping .absolute{
position: relative;
}
.shuiping .absolute .content{
width: 200px;
height: 40px;
position: absolute;
background: green;
left: 50%;
margin-left: -100px;
}
.shuiping .flex{
display: flex;
justify-content: center;
}
.shuiping .flex .content{
background: green;
}
</style>
<div class="shuiping">
<div class="container inline"><span class="content">inline元素</span></div>
<div class="container block">
<div class="content">block元素</div>
</div>
<div class="container absolute">
<div class="content">absolute</div>
</div>
<div class="container flex">
<div class="content">flex元素</div>
</div>
</div>
<h1>垂直居中</h1>
<style>
.cz{
border:1px solid #333;
padding: 20px;
}
.cz .container {
background: #666;
margin-bottom: 10px;
height: 50px;
}
.cz .inline{
}
.cz .inline .content{
line-height: 50px;
background: green;
}
.cz .absolute{
position: relative;
}
.cz .absolute .content{
width: 200px;
height: 40px;
position: absolute;
background: green;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -20px;
}
.cz .absolute2{
position: relative;
}
.cz .absolute2 .content{
width: 200px;
height: 40px;
position: absolute;
background: green;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.cz .transform{
position: relative;
}
.cz .transform .content{
background: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
.cz .flex{
display: flex;
justify-content: center;
align-items: center
}
.cz .flex .content{
background: green;
}
</style>
<div class="cz">
<div class="container inline"><span class="content">inline元素</span></div>
<div class="container absolute">
<div class="content">absolute</div>
</div>
<div class="container absolute2">
<div class="content">absolute2</div>
</div>
<div class="container transform">
<div class="content">transform</div>
</div>
<div class="container flex">
<div class="content">flex元素</div>
</div>
</div>
</body>
</html>三.css图文样式
1.line-height:如何继承
如下代码，p的行高将会是多少？
<style>
body{
font-size:20px;
line-height:200%
}
p{
font-size:16px;
}
</style>
<body>
<p>AAA</p>
</body>
答案：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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。