课程内容
1 背景控制技术
2 内边距与元素居中技术
3 外边距的塌陷传递与挤压
4 浮动与定位原理
5 定位实战小案例
作业:
理解并写出外边距的三个特征:同级塌陷,嵌套传递,自动挤压的案例;
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style2-yan.css"> <title>捉摸不定的外边距(margin)</title> <style type="text/css"> /********** 同级塌陷 **********/ .box1 { width: 100px; height: 100px; background-color: lightblue; } .box2 { width: 100px; height: 100px; background-color: lightcoral; } /* .box1 添加下外边距 */ .box1 { margin-bottom: 30px; } /* .box2 添加上外边距 */ .box2 { margin-top: 30px; } /*通过修改box1的上下外边距发现一个问题,两个之间的距离由大的边距决定, 并不是他们之间的和决定,这个现象叫做"同级塌陷" */ /* 从而得出一个结论: 当二个盒子上下排列时,外边距会出现塌陷现象, 小的会陷到大的里面去,简称:"同级塌陷" */ /* 下面演示当二个盒子相互潜逃,为父子关系时,设置了margin会出现哪些问题? */ /********** 嵌套传递 **********/ .box3 { width: 200px; height: 200px; background-color: lightblue; } .box4 { width: 100px; height: 100px; background-color: lightcoral; } /* 我们的任务是:使box4离box3顶部之间有50px的间距,通过margin-top来实现 */ .box4 { margin-top: 50px; } /* 结果发现不对, 外边距跑到了外部盒子box3上面去了,这就是外边距的"嵌套传递"现象 */ /* 当给一个子盒子添加margin时,这个margin会自动传递到父级盒子上 */ /* 所以,正确的做法是,给父级盒子添加内边距来实现 */ /* 先复位 */ /*.box4 {*/ /*margin-top: 0;*/ /*}*/ /*.box3 {*/ /*padding-top: 50px;*/ /*!* 修改盒子高度,将撑开的50px的高度去掉 *!*/ /*height: 150px;*/ /*}*/ /* 下面演示margin的自动挤压,这是布局中使用非常广泛 */ /********** 自动挤压 **********/ .box5 { width: 100px; height: 100px; background-color: lightcoral; } .box5 { /*margin默认值为: auto*/ /*左侧添加auto,会尽可能将左侧空间分配给盒子左外边距,盒子被挤到最右边*/ /*margin-left: auto;*/ /*如果我让右边距也自动分配, 会出现什么呢, 会自相矛盾吗?不会的*/ /*margin-right: auto;*/ /*居然自动居中了?为什么, 这就是互不相让的结果, 达到了恐怖平衡,就像单行道上的二个车互不相让*/ /*因为左右边距的值完全相同,所以可以简写, 因为左右值必须写到第二个参数位置上, 所以这里假定上下为0*/ /*margin: 0 auto;*/ /*或者干脆全部交给浏览器去处理吧, 咱们不管了*/ margin: auto; } /* 这个"自动挤压"使盒子居中对齐的特征,在页面布局中应用非常多,非常重要,好好理解 */ </style> </head> <body> <!-- 1.同级塌陷 2.嵌套传递 3.自动挤压 --> <div class="box1">1</div> <div class="box2">2</div> <hr> <div class="box3"> <div class="box4"></div> </div> <hr> <div class="box5"></div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
2.写案例,并分析内边距对盒中内容的影响,以及解决的三种方案是什么?
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style1-yan.css">
<title>我的男神-内边距</title>
<style type="text/css">
/*针对外框是300px的盒子,里面的图片居中*/
/*方案一*/
.box1{
width: 300px;
background-color: green;
border: 1px solid red;
}
/*重新设置盒子的宽度*/
.box1{
width: 200px;
padding: 50px;
}
/*方法二*/
.warp {
width: 300px;
}
/*.box2现在就是wrap的内容*/
.box2 {
padding: 50px;
background-color: lightblue;
border: 1px solid black;
}
/*方法三利用box-sizing,内容不会撑开边框*/
.box3 {
width: 300px;
/*让宽度width作用到边框级,作用到内容级仍会撑开盒子的*/
/*box-sizing: content-box;*/
box-sizing: border-box;
background-color: lightpink;
border: 1px solid black;
/*内边距不会撑开盒子, 因为宽度作用到了边框级, 与内容无关*/
padding: 50px;
}
</style>
</head>
<body>
<div class="box1"><img src="static/images/girl.jpg" alt="小姐姐" width="200" > </div>
<hr>
<div class="warp">
<div class="box2">
<img src="static/images/girl.jpg" alt="小姐姐" width="200">
</div>
<hr>
<!-- 方法3: box-sizing-->
<div class="box3">
<img src="static/images/girl.jpg" alt="小姐姐" width="200">
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.浮动的实现原理与清除的技巧
浮动的实现原理:脱离文档流, 到浮动流,是此元素元素位于文档流之上,可以更好的编辑浮动元素.
清除有clear:both,清除之后从浮动流回到文档流,正常编辑.
4.相对定位与绝对定位的区别与联系,并实例演示
相对定位:相对定位一般是针对它前一个元素位置来定位的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style4-yan.css">
<title>定位与相对定位(position:relative)</title>
<style type="text/css">
.box1 {
width: 150px;
height: 150px;
background-color: lightblue;
}
.box2 {
width: 150px;
height: 150px;
background-color: lightgray;
}
.box3 {
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box4 {
width: 150px;
height: 150px;
background-color: lightcoral;
}
.box5 {
width: 150px;
height: 150px;
background-color: lightseagreen;
}
/*下面对每个区块进行相对定位完成目标*/
/* 相对定位 */
.box1 {
position: relative;
/* 第一个区块,向右移动150px即可 */
left: 150px;
}
.box2 {
/* 第二个区块不需要移动 */
}
.box3 {
position: relative;
/* 第三个区块: 先右移动300px, 再向上移动150px */
left: 300px;
top: -150px; /* 注: 这里必须使用负数才可以向反方向移动 */
}
.box4 {
position: relative;
/* 第四个区块: 先右移动150px, 再向上移动300px */
left: 150px;
top: -300px; /* 注: 这里必须使用负数才可以向反方向移动 */
}
.box5 {
position: relative;
/* 第五个区块与第三个区块操作完全相同: 先右移动150px, 再向上移动300px */
left: 150px;
top: -300px; /* 注: 这里必须使用负数才可以向反方向移动 */
}
</style>
</head>
<body>
<!--
定位:将元素在页面中重新排列,分为四类
1.静态定位: 浏览器默认方式, 即文档流中的位置
2.相对定位: 元素并未脱离文档流,只是相对于它原来的位置,做相对移动
3.绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
4.固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位
-->
<!--定位:元素有四种方式的定位:-->
<!--1.静态定位:浏览器默认的方式,及文档流中的位置-->
<!--2.相对定位:元素并未脱离文档流,只是相对于他原来的位置,做相对的移动-->
<!--3.决定定位:元素脱离文档流重新排列,不论元素之前是什么类型,全部转化成块元素,支持宽高设置-->
<!--4.固定定位:始终相对于浏览器的窗口做定位父级,进行定位-->
<!-- 相对定位小案例: 在页面中创建一个彩色十字架-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
决定定位是相对于他的父元素来定位的,一般对父元素和子元素都要设置定位.
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style5-yan.css">
<title>绝对定位小案例(position:absolute)</title>
<style type="text/css">
.parent {
position: relative;
/* 也可以使用绝对定位,但推荐使用相对定位,以防止一些兼容性问题 */
/*position: absolute;*/
border: 1px dashed gray;
width: 450px;
height: 450px;
}
.box1 {
width: 150px;
height: 150px;
background-color: lightblue;
}
.box2 {
width: 150px;
height: 150px;
background-color: lightgray;
}
.box3 {
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box4 {
width: 150px;
height: 150px;
background-color: lightcoral;
}
.box5 {
width: 150px;
height: 150px;
background-color: lightseagreen;
}
/*下面进行绝对定位*/
.box1 {
position: absolute;
/* 第一个区块只需要右移150px,即可 */
left: 150px;
}
.box2 {
position: absolute;
/* 第二个区块, left不用设置,只需要top=150px,将它从左上角顶下来即可 */
top: 150px;
}
.box3 {
position: absolute;
/* 第三个区块向右跨二个区块位置,并向下移一个区块位置 */
left: 300px;
top: 150px;
}
.box4 {
position: absolute;
/* 第四个区块,向右向下各移动一个区块位置 */
left: 150px;
top: 150px;
}
.box5 {
position: absolute;
/* 第五个区块,向右移动一个区块位置,向下移动二个区块位置 */
left: 150px;
top: 300px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.模仿完成课堂上的二个定位案例:模拟php中文网登陆(遮罩+绝对定位)和固定定位广告的展示方式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style6-yan.css">
<title>绝对定位之遮罩的使用</title>
<style type="text/css" >
body {
margin: 0;
background-image:url(../images/php.jpg);
background-size: cover;
}
/* 设置遮罩 */
.shade{
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.7;
}
.login img {
width: 380px;
height: 460px;
}
.login{
position: absolute;
left:50%;
top:50%;
background-color: #fff;
margin-left: -190px;
margin-top: -230px;
}
/* 设置登录窗口 */
</style>
</head>
<body>
<!-- 模拟php中文网的登录页面 -->
<!--第一个绝对定位的元素-->
<div class="shade"></div>
<!--第二个绝对定位的元素,两个元素如果都是绝对定位,下面的元素会覆盖上面的元素-->
<div class="login"><img src="static/images/login.jpg" alt="" ></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位小案例(position:fixed)</title>
<link rel="stylesheet" href="static/css/style7-yan.css">
<style type="text/css" >
body {
height: 2000px;
}
.ads{
width: 300px;
height: 300px;
padding: 10px;
background-color: rebeccapurple;
position: fixed;
right: 0;
bottom: 0;
}
button {
float: right;
margin-top: 10px;
margin-right: 20px;
border: none;
background: none;
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<h1>网站右下角弹框广告案例展示</h1>
<div class="ads">
<button onclick="this.parentNode.style.display = 'none'">X</button>
<h2>我们的世界,我们做主,但是</h2>
<h1>要学会臣服...</h1>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例