老师：目前我的学习进度是跟不上的，我基础差，从JS开始已经跟不上了，不过我一定会认真学完每一课，做好每一次作业的，只是会做的慢一点。每一节课的知识量很大，我需要慢慢搞懂老师讲到的每一个概念。
7月5日直播课作业：
作业1-4可预览网址：
作业1：理解并写出外边距的三个特征: 同级塌陷,嵌套传递,自动挤压的案例;
（1）同级塌陷：
同级塌陷指的是同级元素呈上下排列的时候，两个元素的外边距会互相塌陷，只呈现出其中一个较大的外边距，但同级元素的左右外边距不会塌陷。实际运用中需要知道这个html特性，便于利用和操作。
（2）嵌套传递：
元素内容的外边距会直接传递给元素的外边距，导致外边距被撑大。实际运用中应该避免外边距的嵌套传递，而采用内边距来控制元素的内容。
（3）自动挤压：
通过设置元素的外边距为自动，浏览器会把尽可能多的空间分配给外边距，这样就会将元素尽可能往另一边的空间挤压过去，并且不管浏览器的宽度怎么变化，元素都能够一直保持这被羁押的状态。当左右外边距都设置为auto的时候，左右外边距都会对元素进行挤压，就会把元素寄到浏览器的居中位置了，善用改特性，能够在不居中是元素居中。
作业2：写案例,并分析内边距对盒中内容的影响,以及解决的三种方案是什么?
方法一：重设宽高
1、通过先撑大盒子，再重新设置盒子的宽度来使内容居中。
2、设置父盒子宽高为300，设置盒子的内边距为50，挤压内容使之居中，但由于设置内边距为50之后，父盒子会被随之撑大，需要重设父宽高为200，才能减去撑大的部分，使内容刚好居中。
3、这个方法并不好，不利于元素大小的调整，需要调节的参数会很多。
实例
.box1 {
background-color: aquamarine;
/*设置父盒子宽高为300，但由于设置内边距为50之后，需要重设宽高为200，才能减去撑大的部分，所以在这里直接设为200*/
width: 200px;
height: 200px;
/*设置盒子的内边距为50，挤压内容使之居中*/
padding: 50px;
}
/*将box2作为box1的内容*/
.neirong {
background-color: darksalmon;
width: 200px;
height: 200px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 <div> <div class="box1"> <div class="neirong"></div> </div> </div> 运行实例 » 点击 "运行实例" 按钮查看在线实例
方法二：宽度分离
1、在最外层再加上一个壳，相当于有三层，最里层为内容，最外层为壳，中间层为原来的父盒子。
2、在壳只设置宽度，此时壳有形却不可见，利用子盒子只继承父盒子宽度的原理，父盒子自动撑大，宽高变成跟壳一致，然后在父盒子设置内边距，使将内容刚好被挤压到居中的位置。
3、简洁好用。
实例
/*将box2作为box1的内容*/
.neirong {
background-color: darksalmon;
width: 200px;
height: 200px;
}
/*给父盒子再套一个壳*/
.ke {
width: 300px;
}
.box2 {
background-color: aquamarine;
padding: 50px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<div class="ke"> <div class="box2"> <div class="neirong"></div> </div> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
方法三：将父盒子的宽度设置到边框上
1、根据方法二的理解，只要在父盒子外增加一个外层，并将宽度设置在外层，父盒子就可以继承宽度，不会导致被撑大。此时，我们可以把父盒子的边框看做是外层，在边框上设置宽度，那么父盒子就被作为内容，继承了边框的宽度，而不需要另外设置一个外层。跟方法二有异曲同工之妙，却更加简洁优雅。
2、此方法会压缩内容的宽高，如果压缩后的内容区域小于内容的实际尺寸，内容的画面会被裁剪。
3、这个方法最好，多利用。
实例
.neirong {
background-color: darksalmon;
width: 200px;
height: 200px;
}
.box3 {
width: 300px;
height: 300px;
/*把父盒子的边框作为外壳，父盒子变成了内容，宽度设置在边框上就相当于设置在外层上，父盒子作为内容自动继承宽度*/
box-sizing: border-box;
background-color: aquamarine;
padding: 50px;
border: black 1px solid;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
作业3：浮动的实现原理与清除的技巧
（1）浮动：
浏览器的默认布局是文档流，不美也不受控制。为了控制布局，做到随心所欲的布局，元素必须脱离文档流，脱离浏览器的控制。脱离文档流的方法分为两种：一种是浮动，一种是定位。
元素浮动之后，不占据文档流的位置，会浮在文档流的上层，还在文档流中的元素将会前挪。浮动后的元素会左浮动或者右浮动，直到碰到边框或者另一个浮动元素的边缘，各个元素自动紧贴排列。
浮动元素只影响后面的元素，不影响前面的元素，如果前面的元素没有浮动，浮动的元素并不会盖住前面的元素，但后面的元素往上排列后会被浮动元素盖住。
浮动的适用场景是文字环绕效果，另外，浮动可以实现常规的多列布局，更适合实现自适应多列布局，比如左侧固定宽度，右侧根据父元素宽度自适应。
（2）清除浮动：
浮动会导致父元素高度坍塌。解决父元素高度坍塌的方式就是清除浮动，常规的方法是clear清除浮动和BFC清除浮动，推荐clearfix的方式。
作业4：相对定位与绝对定位的区别与联系,并实例演示
（1）相对定位（position: relative）：
没有脱离文档流，通常用来做为绝对定位的父级。定位的基准是元素在文档流中的原始位置为原点，父级不需要定位属性。
实例：
实例
.xddw {
/*position: relative;*/
width: 400px;
height: 400px;
border: coral solid 1px;
}
.xd1 {
position: relative;
width: 100px;
height: 100px;
background-color: aquamarine;
/*设置位置*/
top: 0;
left: 100px;
}
.xd2 {
position: relative;
width: 100px;
height: 100px;
background-color: darksalmon;
}
.xd3 {
position: relative;
width: 100px;
height: 100px;
background-color: lightgoldenrodyellow;
/*设置位置*/
top: -100px;
left: 100px;
}
.xd4 {
position: relative;
width: 100px;
height: 100px;
background-color: blueviolet;
/*设置位置*/
top: -200px;
left: 200px;
}
.xd5 {
position: relative;
width: 100px;
height: 100px;
background-color: lightseagreen;
/*设置位置*/
top: -200px;
left: 100px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<div class="xddw"> <div class="xd1">1</div> <div class="xd2">2</div> <div class="xd3">3</div> <div class="xd4">4</div> <div class="xd5">5</div> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
（2）绝对定位（position: absolute）：
脱离文档流，必须有定位父级，父级必须设有定位属性，且不能是静态定位。CSS中必须设置TOP等值，否则不能脱离文档流。定位的基准是以父级的左上角坐标（0,0）为原点。是大多数场景使用的布局。
实例：
实例
.jddw {
position: relative;
width: 400px;
height: 400px;
border: coral solid 1px;
}
.jd1 {
position: absolute;
width: 100px;
height: 100px;
background-color: aquamarine;
/*设置位置*/
top: 0;
left: 100px;
}
.jd2 {
position: absolute;
width: 100px;
height: 100px;
background-color: darksalmon;
/*设置位置*/
top: 100px;
left: 0;
}
.jd3 {
position: absolute;
width: 100px;
height: 100px;
background-color: lightgoldenrodyellow;
/*设置位置*/
top: 100px;
left: 100px;
}
.jd4 {
position: absolute;
width: 100px;
height: 100px;
background-color: blueviolet;
/*设置位置*/
top: 100px;
left: 200px;
}
.jd5 {
position: absolute;
width: 100px;
height: 100px;
background-color: lightseagreen;
/*设置位置*/
top: 200px;
left: 100px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<div class="jddw"> <div class="jd1">1</div> <div class="jd2">2</div> <div class="jd3">3</div> <div class="jd4">4</div> <div class="jd5">5</div> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
（3）固定定位（position: fixed）：
脱离文档流，以窗口为原点进行上下左右的定位，不随页面滚动，通常用语固定位置的浮动广告。（实例在作业5中体现）
作业5：模仿完成课堂上的二个定位案例:模拟php中文网登陆(遮罩+绝对定位)和固定定位广告的展示方式
作业中有一个疑问：按理绝对定位时必须有定位父级，但是我在设定遮罩和登录框时却没有定位父级，为何还能够正常显示呢？恳请老师解答。
作业5可预览网址：
实例
.back {
width: 1371px;
height: 526px;
margin: auto;
background-image: url("../image/back.png");
}
.foot {
width: 479px;
height: 108px;
margin: auto;
background-image: url("../image/foot.png");
}
.shade {
/* 遮罩绝对定位,并自动伸展到整个窗口 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* 将背景设置为纯黑,并通过透明度使背影内容透出来 */
background-color: black;
opacity: 0.5;
}
.login {
/* 遮罩绝对定位，定位到画面居中*/
position: absolute;
width: 349px;
height: 371px;
left: 50%;
top: 50%;
margin-left: -174px;
margin-top: -285px;
}
.ads {
position: fixed;
right: 0;
bottom: 25px;
width: 388px;
height: 491px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<h1>7月5日直播课作业5</h1> <hr> <!--作业5：模仿完成课堂上的二个定位案例:模拟php中文网登陆(遮罩+绝对定位)和固定定位广告的展示方式--> <h3>作业5：模仿完成课堂上的二个定位案例:模拟php中文网登陆(遮罩+绝对定位)和固定定位广告的展示方式</h3> <!--背景图--> <div class="back"></div> <div class="foot"></div> <div class="shade"></div> <div class="login"><img src="static/image/login.png" alt="" ></div> <div class="ads"> <div> <button onclick="this.parentNode.style.display = 'none'">X</button> <img src="static/image/kf.png" alt=""> </div> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
