一:课上笔记
1)固定定位
1. 固定定位与绝对定位是双胞胎,唯一的区别是定位父级不同.
2. 绝对定位是相对于它最近的有定位属性的父级区块进行定位;
3. 固定定位永远相对于当前的窗口进行定位(body)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
position:fixed;
bottom:0px;
right:0px;
}
body{
height:2000px;
margin: 0;
padding:0;
}
.closeAds{
position: absolute;
color: red;
right:10px;
top:2px;
font-size:30px;
}
</style>
</head>
<body>
<div class="box1">
<a href="http://www.baidu.com" target="_blank"> <img src="https://img.php.cn/upload/article/000/000/003/5b596217c2850304.jpg" alt=""></a>
<span class="closeAds" onclick="javascript:this.parentNode.style.display='none'">×</span>
</div>
</body>
<
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2)浮动的原理与清除浮
1-前面二个元素浮动,后面一个不浮动的效果
一个盒子一旦浮动,就脱离了文档流,下面的盒子会顶替这个盒子,二个盒子会叠加
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动的原理和清除浮动</title>
</head>
<style>
.box1{
width:200px;
height: 200px;
background: red;
float: left;/*一个盒子一旦浮动,就脱离了文档流,下面的盒子会顶替这个盒子,二个盒子会叠加*/
}
.box2{
width:220px;
height: 220px;
background: green;
float: left;
}
.box3{
width:240px;
height: 240px;
background: blue;
}
</style>
<body style="border:1px dashed blueviolet;">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2-1.浮动元素之前的元素将不会受到影响(关掉.box1的浮动试试看),只对浮动元素后面的元素有影响
多个浮动元素只能沿着水平方向排列,一行排不下自动换行
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动的原理和清除浮动</title>
</head>
<style>
.box1{
width:200px;
height: 200px;
background: red;
/*一个盒子一旦浮动,就脱离了文档流,下面的盒子会顶替这个盒子,二个盒子会叠加*/
}
.box2{
width:220px;
height: 220px;
background: green;
float: left;
}
.box3{
width:240px;
height: 240px;
background: blue;
}
</style>
<body style="border:1px dashed blueviolet;">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.清除浮动的 clear:left clear:right clear:both
1.清除左右元素的浮动属性,窗口调整到一定大小才会看到左右区块都回到文档流中
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动的原理和清除浮动</title>
</head>
<style>
.box1{
width:200px;
height: 200px;
background: red;
float:left;
}
.box2{
width:220px;
height: 220px;
background: green;
float: right;
}
.box3{
width:240px;
height: 240px;
background: blue;
/*clear:left;*/
/*clear: right;*/
clear: both;
}
</style>
<body style="border:1px dashed blueviolet;">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.行内默认不支持宽高
添加的float属性支持宽高*
浮动元素子只对后面的元素有影响
浮动使元素脱离了文档流,同时使行内元素也支持了宽高,表现出与块级元素一样的特征
可以看出该文本块已在不在body中了,脱离了文档流,说明浮动的确仅影响到后面的元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动的原理和清除浮动</title>
</head>
<style>
.box1{
width:200px;
height: 200px;
background: red;
float:left;
}
.box2{
width:220px;
height: 220px;
background: green;
float: right;
}
.box3{
width:240px;
height: 240px;
background: blue;
/*clear:left;*/
/*clear: right;*/
clear: both;
}
.test{/*默认不支持宽高的*/
width:200px;
height:200px;
background-color:blueviolet;
float:left;/*这里添加的float属性支持宽高*/
}
</style>
<body style="border:1px dashed blueviolet;">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<span class="test">行内元素的测试</span>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 流式布局中,子块高度撑开父块
子块浮动后,脱离文档流,父块失去高度限制,自动折叠,出现高度塌陷
解决方案有三种:
问题:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塌陷问题</title>
<style>
.box1{
border:5px dotted blue;
/*overflow: hidden;*/
}
.box2{
width:200px;
height:200px;
background-color:lightgreen;
float:left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
方案一:给父级区块加高度,优点是简单,缺点是不能自适应子块高度变化*/
/*height: 400px; !*父块加高度的方案不推荐*!*/
方案二:父级区块加:overflow: hidden;(溢出隐藏)*/
/*overflow: hidden; !*部分浏览器可能会存在兼容性,例如IE,可能会出现 滑动条*!*/
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塌陷问题</title>
<style>
.box1{
border:5px dotted blue;
overflow: hidden;
}
.box2{
width:200px;
height:200px;
background-color:lightgreen;
float:left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3)方案三: 给父级区块添加伪类元素解决(这种方案最好)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塌陷问题</title>
<style>
.box1{
border:5px dotted blue;
}
.box1:after{
content:"";
display: block;
clear:both;
}
.box2{
width:200px;
height:200px;
background-color:lightgreen;
float:left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4)方案四: 添加附加空区块,仅仅用来清除前面元素的浮动属性
不推荐,因为后端进行数据绑定时会遇到麻烦:例如循环输出数据,需要对它单独处理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塌陷问题</title>
<style>
.box1{
border:5px dotted blue;
}
.box2{
width:200px;
height:200px;
background-color:lightgreen;
float:left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div style="clear:both"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四.图文混编练习
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文混编</title>
<style>
h2,p{
padding: 0;
margin:0;
}
h2{
text-align: center;
margin:10px 0;
}
.box1{
margin:0 auto;
width: 700px;
}
img {
float:left;
margin-right: 10px;
border-radius: 5px;
}
p{
text-indent: 2rem;
line-height: 1.9rem;
}
</style>
</head>
<body>
<div class="box1">
<h2>《PHP中文网第三期培 训班》</h2>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534742600463&di=e68f5f0242d1af26343920a9ffb849b2&imgtype=0&src=http%3A%2F%2Fimg.deyilife.cn%2F201209%2F20%2F230723ecm8bhn6q38mhqdb.jpg" width="300px" alt="">
<p>为了第三期的培训，我们18位老师和同事历经3月精心准备。每一个PPT，每一行代码，每一个实战案例都是经过
我们老师和同事们反复讨论，反复打磨敲定！我们追求完美，力求每一节课程都是精品！
为了这次课程，我们的培训老师也是在一起相互试听，不断改进教学风格，坚持幽默，深入浅出，
力求每一个学员都能听得懂，学得会！我们的辅导老师也是早早准备好！跟进监督每位学员的作业
（避免光学不练空架子），及时解答学员的问题，更有回答某些学员的生活上的私人问题~~默默的奉献！
PHP中文网第三期线上培 训班_前端基础学习内容: HTML5,CSS3,JavaScript,jQuery,Vue.js入门,
Bootstrap,页面布局实战 《网站管理后台》的模板开发(综合应用以上所学知识)
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五.绝对布局实现三列布局
绝对定位三列布局的基本思路:
1. 先创建一个定位父级区块:relative
2. 左右侧边栏,采用约定定位
3. 中间主体使用margin外边距进行挤压形成
4. 如果定位父级定宽,中间区域就是定宽,否则自适应
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位实现三列布局</title>
<style type="text/css">
/*先给最简单的头部和底部设置基本的样式*/
.header, .footer {
/*宽度为窗口的宽度,自适应变化*/
width: 100%;
/*为了简化,头部与尾部高度统一设置为60px*/
height: 60px;
/*参考背景色:浅灰*/
background-color: lightgray;
}
/*设置头部和底部的中间内容区的基本样式*/
.content {
/*先设置总的宽度,这步很重要*/
width: 1000px;
/*高度直接引用父区块值*/
min-height: 100%;
/*设置参考色:灰色*/
background-color: gray;
/*使自己水平居中*/
margin: auto;
/*使其内部的文本水平垂直居中*/
text-align: center;
line-height: 60px;
}
.main {
/*main区块是定位父级区块,必须设置定位属性*/
position: relative;
/*设置宽高*/
width: 1000px;
height: 650px;
/*设置左右水平居中*/
margin: auto;
/*参考背景色:黄;*/
background-color: yellow;
}
/*绝对定位实现左侧布局*/
.left {
/*绝对定位到左侧起始点*/
position: absolute;
top:0;
left:0;
/*设置宽高*/
width: 200px;
/*高度与父级一致*/
min-height: 100%;
/*背景参考色:浅绿*/
background-color: lightskyblue;
}
/*绝对定位实现右侧布局*/
.right {
/*绝对定位到右侧起始点*/
position: absolute;
top:0;
right: 0;
/*设置宽高*/
width: 200px;
min-height: 100%;
/*参考背景色:浅绿*/
background-color: lightgreen;
}
/*设置中间内容区块的基本样式:重点*/
.center {
/*使用外边距的方法,将中间的内容区挤压出来,左右值要大于或等于左右区块*/
margin: 0 210px;
/*与前面一样,高度与父级一致*/
min-height: 100%;
/*参考背景色:小麦色*/
background-color: wheat;
}
</style>
</head>
<body>
<!-- DOM结构 -->
<!-- 头部 -->
<div class="header">
<div class="content">网站头部</div>
</div>
<!-- 主体 -->
<div class="main">
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">网站底部</div>
</div>
<pre>
绝对定位三列布局的基本思路:
1. 先创建一个定位父级区块:relative
2. 左右侧边栏,采用约定定位
3. 中间主体使用margin外边距进行挤压形成
4. 如果定位父级定宽,中间区域就是定宽,否则自适应
</pre>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六.经典的三列双飞翼布
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>经典的双飞燕布局</title>
<style type="text/css">
.header,.footer{
width:100%;
height: 60px;
background-color: lightgray;
}
.content{
width:1000px;
min-height: 100%;
background-color: lightgreen;
margin: auto;
text-align: center;
line-height: 60px;
}
.container{
width:1000px;
margin:auto;
background-color: #efb21a;
overflow: hidden;
}
.wrap{
width:100%;
background-color: #CC0000;
float:left;
}
/*主体内容区域*/
.main{
height: 600px;
background-color: #ffff48;
margin:0 210px;/*从左右的帮中间的区块的内容挤出来*/
}
.left{
width:200px;
height: 600px;
background-color: olive;
float:left;
margin-left: -100%;/*这里设置-1000因为主体宽带是1000*/
}
.right{
width:200px;
height: 600px;
background-color: lightcoral;
float:left;
margin-left: -200px;
}
</style>
</head>
<body>
<!--双飞翼布局的dom结构-->
<div class="header">
<div class="content">header</div>
</div>
<!--主体内容区域-->
<div class="container">
<div class="wrap">
<div class="main">主体内容</div>
</div>
<div class="left">主体左边</div>
<div class="right">主体右边</div>
</div>
<div class="footer">
<div class="content">footer</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七.圣杯布局
具体实现的步骤
第一步: 创建DOM结构:
基本原则是:
1.头 + 中 + 底 三部分,其中中部区域是页面主体,用三列布局完成;
2.中间三列中,中间为显示主体,必须放在前面,优先渲染,提升用户体验;
1.头部:
<div class="header">
<div class="content">header</div>
</div>
2.中间主体:
<div class="container">
<div class="main">主要内容区</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
3.底部:
<div class="footer">
<div class="content">footer</div>
</div>
-----------------------------------------------------------
第二步: 将页面头部和尾部公共样式写出来[写在当前文档<style>标签中]:
.header, .footer {
width: 100%;
height: 60px;
background-color: #aaa;
}
.content {
width: 1000px;
min-height: 100%;
margin: auto;
text-align: center;
line-height: 60px;
background-color: #eee;
}
详解:
1.先设置头部与底部的共同样式:
(1)width:100%; 宽度与页面等宽为: 100%,将会自动延展;
(2)height:60px; 高度暂设为60像素,不够还可以再调整;
(3)background-color: #aaa; 设置背景参考色,可以根据需要决定是否保留;
2.设置头部与底部内容区的样式:
(1)width:1000px; 将公共内容区变化较小,设置为固定宽度,便于内容填充;
(2)min-height:100%; 设置最小高度以保证页面布局完整,自动使用父级度高60px;
(3)margin: auto; 公共内容区content也是一个块,将它在父级容器中居中,要使用margin;
(4)text-align:center; 内部文本水平居中;
(5)line-height: 60%; 内部单行文本垂直居中;
(6)background-color:#eee; 设置背景参考色,根据情况确定是否保留;
-----------------------------------------------------------------------------
第三步: 设置中间主体容器的样式:
.container {
width: 600px;
margin: auto;
overflow: hidden;
padding: 0 200px;
background-color: yellow;
}
详解:
1.width: 600px;
设置三列布局的父容器总宽度600px,为什么是600像素,因为我的页面总宽度为1000px,左右二侧宽度为200px,
所以中间部分为600px,这里将容器总宽度设置为600px有二个作用:1,是给中间区块继承用,二是可以通过padding来扩展,
所以不必担心600px,包不住三列内容;
2.margin: auto; 将父容器在当前窗口中居中显示;
3.overflow: hidden; 因为后面的三列内容我要用到浮动,为了让父容器包住子块,不会出现高度塌陷,这里要设置溢出隐藏;
4.padding: 0 200px;
该语句有二个作用:
(1)设置内边距padding,可以让当前容器左右二边的宽度各扩大200px,即400px,此时容器总宽度为1000px;
(2)容器宽度扩展后的空间,实际上就是给后面的左右二列侧边栏预留的空间,否则左右二栏显示不出来;
5.background-color: yellow; 设置背景参考色,用来查看当前三列布局情况,最终会被删除或改变;
-----------------------------------------------------------------------------
第四步: 设置三列中的中间内容区
.main {
width: 100%;
min-height: 650px;
background-color: #6CF;
float:left;
}
详解:
1.width: 100%; 中间宽度为100%,实际上就是600px,占据当前容器全部内容区空间(不包括padding的400px);
2.min-height: 650px; 设置一个最小高度,当内容不多时,仍能显示出足够的高度,不影响页面的整体美观与用户体验;
3.background-color: #6cf; 设置参考背景色,根据需要决定最终是否保留;
4.float: left; 至关重要,将中间区块浮动起来,脱离文档流,并占据全部内容区,此时左右区块会自动补位上移;
-----------------------------------------------------------------------------
第五步: 设置左列的显示样式
.left {
width: 200px;
min-height: 650px;
background-color: #FD6FCF;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
}
详解:
1.width: 200px; 左列宽度为200px,与容器中预留的padding宽度相同;
2.min-height: 650px; 宽度与中间列保持一致,当然你也可以不一致;
3.background-color: #fd6fcf; 背景参考色,根据情况决定最终是否保留;
4.float: left; 很重要,浮动起来脱离文档流,因中间块宽度为100%,所以会被挤压到下面;
5.margin-left: -100%; 将左列通过设置负外边距方式移动到父容器预留的左侧padding中;
注意-100%,等价于: -600px,因为目前父容器.container宽度就是600,设置负值,就是向反方向拉元素
但此时,左列会占据了中间内容区的左边的200px位置;
6.position: relative; 设置左列的元素定位方式为:相对定位,相对于原来的位置,仍在文档流中.
7.left: -200px; 负值是向左移动,,将左列移动到容器container的padding-left区内,注意,
如果没有设置容器container的padding,你会看不到左列的.
-----------------------------------------------------------------------------
第六步: 设置右列的显示样式
.right {
width: 200px;
min-height: 650px;
background-color: #FC0107;
float:left;
margin-left: -200px;
position: relative;
right: -200px;
}
1.right: 200px; 宽度与左列相同,均为200px;
2.min-height: 650px; 最小高度与左列一致;
3.background-color: #fc0107; 设置参考背景色;
4.float: left; 设置左浮动,脱离文档流后,对它重新进行排列;
5.margin-left: -200px; 向反方向上移200px,其实就是与中间列并排显示;
6.position: relative; 设置相对定位
7.right: -200px; 将右列移动到容器的padding-right区域内
圣杯布局一知半解
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
.header,.footer{
width:100%;
height: 60px;
background-color: lightgray;
}
.content{
width:1000px;
min-height: 100%;
background-color: lightgreen;
margin: auto;
text-align: center;
line-height: 60px;
}
.container{
width:600px;
margin:auto;
padding: 0 200px;
background-color: #efb21a;
overflow: hidden;
}
/*主体内容区域*/
.main{
width: 100%;
min-height:650px
background-color: #ffff48;
float: left;
}
.left {
width: 200px;
min-height: 650px;
background-color: #FD6FCF;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
min-height: 650px;
background-color: #FC0107;
float:left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<!--双飞翼布局的dom结构-->
<div class="header">
<div class="content">header</div>
</div>
<!--主体内容区域-->
<div class="container">
<div class="main">主体内容</div>
<div class="left">主体左边</div>
<div class="right">主体右边</div>
</div>
<div class="footer">
<div class="content">footer</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业一:
qq在线 客 服
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
position:fixed;
bottom:0px;
right:0px;
}
body{
height:2000px;
margin: 0;
padding:0;
}
.closeAds{
position: absolute;
color: red;
right:40px;
top:69px;
font-size:30px;
}
</style>
</head>
<body>
<div class="box1">
<a href="http://www.baidu.com" target="_blank"> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4246295046,239139934&fm=27&gp=0.jpg" alt=""></a>
<span class="closeAds" onclick="javascript:this.parentNode.style.display='none'">×</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业二:手写圣杯布局和双飞翼布局的区别
