第八章 网页常用布局
学习目标：
会使用float属性排版网页元素
使用display属性
使用position属性
掌握左右布局
左中右三栏布局
响应式布局
a 标签可以嵌套块级标签 里面不能再嵌套a标签
目录
8.1 标准文档流
8.2浮动8.3案例
<title>浮动</title>
<style type="text/css">
.b1{
border: deeppink dotted 1px;
}
.float-1{
width: 1000px;
min-height: 200px;
}
.float-1>div{
width: 300px;
}
.float-1>div:nth-of-type(1){
float: left;
background-color: cornflowerblue;
}
.float-1>div:nth-of-type(2){
float: left;
background-color: gold;
}
.float-1>div:nth-of-type(3){
float: left;
background-color:#ffff70;
}
</style>
</head>
<body>
<div class="float-1 b1">
<div class="b1">第一个层</div>
<div class="b1">第二个层</div>
<div class="b1">第三个层</div>
</div>
<style type="text/css">
article{
width: 960px;
margin: 0 auto;
}
article>img{
width: 50%;
float: left;
margin-right: 30px;
}
article>p{
line-height: 2.2;
text-indent: 2em;/*空出两个字体的尺寸，即空两格*/
font-size: 20px;
}
/*首字下沉效果*/
article>p:first-letter{
float: left;
line-height: 1.2;
font-size: 1.5em;
margin-right: 4px;
margin-top: 5px;
}
</style>
<h1>图文混排示例</h1>
<article class="float-2 b1" >
<img src="images/img.png"/>
<p>
三体人在利用科技锁死了地球人的科学之后，出动庞大的宇宙舰队直扑太阳系，面对地球文明前所未有的危局，人类组建起同样庞大的太空舰队，同时（PDC）利用三体人思维透明的致命缺陷，制订了“面壁计划”。
出乎意料地，社会学教授罗辑被选出作为四位“面壁者”之一，展开对三体人的秘密反击。</p>
<p>虽然三体人自身无法识破人类的计谋，却依靠由地球人中的背叛者挑选出的“破壁人”与“面壁者”进行智慧博弈。
在这场你死我活的文明生存竞争中，罗辑由一开始的逃避和享乐主义逐渐意识到自己的责任，想到了一个对抗三体文明入侵的办法。
科研军官章北海试图借一场陨石雨干涉飞船推进形式的研究方向。近二百年后，获选增援未来的他在人类舰队被“水滴”清除殆尽前，成功抢夺战舰逃离。
此时罗辑证实了宇宙文明间的黑暗森林法则，任何暴露自己位置的文明都将很快被消灭。</p>
<p>借助于这一发现，他以向全宇宙公布三体世界的位置坐标相威胁，暂时制止了三体对太阳系的入侵，使地球与三体建立起脆弱的战略平衡</p>
</article>
</body>8.4clear属性8.5解决父级边框塌陷的方法
<title>清除浮动</title>
<style type="text/css">
.son-1,.son-2,.son-3{
width: 300px;
height: 200px;
float: left;
border: black dotted 1px;
}
.b1{
border: deeppink dotted 1px;
}
.clear{
clear: both;
}
/*不允许自己的左侧有浮动的元素 本质是margin-top*/
.son-2{
clear: left;
}
</style>
</head>
<body>
<div class="parent b1">
<div class="son-1">1</div>
<div class="son-2">2</div>
<div class="son-3">3</div>
<!--内层隔墙的方式解决父容器高度塌陷问题，
因为浮动已经脱离文档流，父容器已经检测不到子容器-->
<div class="clear"></div>
</div>
<!--解决父容器边框塌陷的方法小结-->
<!--
方案1：直接给浮动元素的父容器设置高度
在实际开发中，比较推荐的方法是把高度设置为自适应auto,让子元素自动撑大父容器
优点：简单粗暴有效
缺点：必须手动设置高度，如果网页的内容高度发生变化，就会出现留白问题
-->
<!--
方案2：内墙元素隔离法（很多大公司使用的方法）
缺点：JS在后面添加时，该层就不是最后的层
-->
<!--
方案3：伪元素法（从方案二升级过来的，要添加在父元素的样式中）推荐使用！
.clearfix::after{/*在父元素的最后添加一个文字节点，默认是行级元素，需要改成块级元素*/
display:block;以块级元素的方式显示
/*display:table;*/
content:"";
clear:both;//清除两侧浮动 强制撑大父元素
/*让用户不看见*/
*zoom:1//ie6浏览器清除浮动的方式，*只有IE6和IE7认识，其他浏览器会自动忽略
line-height:0//让文字不显示出来
visibility:hidden;//隐藏
}
-->
<!--<div class="clearfix"></div>-->
<!--
方案4：双伪元素
.clear:after,.clear:before{//浏览器兼容一个冒号
display:table;
content:"";
}
.clear:after{
clear：both；
}
.clear{
*zoom；1；
}
-->
<!--
方案5：overflow:hidden//直接给父元素设置
设置父容器的内容溢出时的处理方式为隐藏溢出的内容
这是浏览器渲染机制的副作用：会重新计算父容器的高度
使用这个属性需要注意：在内容较多的时候，有可能引起内容的截断
-->
</body>8.6 overflow属性
<title>处理内容的溢出</title>
<style type="text/css">
p.content{
width: 500px;
height: 200px;
line-height: 30px;
font-size: 24px;
border:orange dotted 1px;
/* hidden的好处会导致浏览器重新渲染当前元素，使用可以用来解决父容器边框塌陷的问题*/
/*overflow: hidden;!*隐藏溢出内容*!*/
/*overflow: scroll;!*浏览器会显示纵向和横向的滚动条*!*/
overflow: auto;/*浏览器会根据当前的内容显示滚动条*/
}
</style>
</head>
<body>
<p class="content">
虽然三体人自身无法识破人类的计谋，却依靠由地球人中的背叛者挑选出的“破壁人”与“面壁者”进行智慧博弈。
在这场你死我活的文明生存竞争中，罗辑由一开始的逃避和享乐主义逐渐意识到自己的责任，想到了一个对抗三体文明入侵的办法。
科研军官章北海试图借一场陨石雨干涉飞船推进形式的研究方向。近二百年后，获选增援未来的他在人类舰队被“水滴”清除殆尽前，成功抢夺战舰逃离。
此时罗辑证实了宇宙文明间的黑暗森林法则，任何暴露自己位置的文明都将很快被消灭。
</p>
</body>8.7dispaly属性
<title>display属性</title>
<style type="text/css">
.display-1:after{
content: "";
display: block;
clear: both;
}
.display-1{
width: 800px;
margin-top: 50px;
border: deeppink dotted 1px;
}
.display-1>span{
/*给一个行级元素设置block,就将行级元素设置成块级元素*/
display: block;
width: 150px;
height: 50px;
border: deeppink dotted 1px;
}
.display-1>p{
display: inline;
}
.display-1>button{
/*当给一个行级元素设置浮动后，这个元素自动被转换成了块级元素*/
width: 150px;
height: 50px;
float: left;
}
</style>
</head>
<body>
<!--
display：none； 在浏览器中消除该元素，不占屏幕的空间
visibility：hidden; 隐藏该元素，但是他还是占有这块空间
-->
<!--
none 元素不会被显示
block 元素显示为块级元素，元素的前后都带有换行符
inline 元素显示为行内元素，元素前后没有换行符
默认情况下，img和input为行级元素
inline-block 行级的块元素，在css2.1中新增的
-->
<div class="display-1">
<p>块级元素p</p>
<p>块级元素p</p>
<span>行级元素：span</span>
<button>行级元素：button</button>
<strong>行级元素：strong</strong>
</div>
<style type="text/css">
.display-2{
width: 800px;
margin-top: 50px;
border: deeppink dotted 1px;
}
.display-2>p,.display-2>span{
display: inline-block;
border: deeppink dotted 1px;
}
</style>
<!--
解决元素和元素空格的bug方案1：代码中去掉换行即可
-->
<div class="display-2">
<p>块级元素p</p><span>行级元素：span</span>
</div>
<!--
解决元素和元素空格的bug方案2：使用跨行的注释
-->
<div class="display-2">
<p>块级元素p</p><!--
--><span>行级元素：span</span>
</div>
<!--
解决元素和元素空格的bug方案3：设置margin-left为负值，不推荐
-->
<div class="display-2">
<p>块级元素p</p>
<span>行级元素：span</span>
</div>
<!--
解决元素和元素空格的bug方案4：给父元素添加font-size:0
-->
<style type="text/css">
.display-4{
width: 800px;
margin-top: 50px;
border: deeppink dotted 1px;
font-size: 0;
}
.display-4>p,.display-4>span{
display: inline-block;
/*元素记得改为初始的值*/
font-size: medium;
border: deeppink dotted 1px;
}
</style>
<div class="display-4">
<p>块级元素p</p>
<span>行级元素：span</span>
</div>
<!--
解决元素和元素空格的bug方案5：给父元素添加letter-spacing为负值
-->
<style type="text/css">
.display-5{
width: 800px;
margin-top: 50px;
border: deeppink dotted 1px;
letter-spacing: -100px;
}
.display-5>p,.display-5>span{
display: inline-block;
font-size: medium;
border: deeppink dotted 1px;
/*元素记得改为初始的值*/
letter-spacing: 0px;
}
</style>
<div class="display-5">
<p>块级元素p</p>
<span>行级元素：span</span>
</div>
<!--
list-item: 元素作为列表显示
table： 元素作为表格显示，类似<table>
table-row: <tr>
table-row-group： <tbody>
-->
<style type="text/css">
.display-table{
width: 450px;
border:orange solid 1px;
}
div.display-table{
display: table;
}
.display-table>h3{
display: table-caption;
}
.display-table>p{
display: table-row;
}
.display-table>div{
/*table-cell相当于<td> <th>*/
display: table-cell;
color: red;
}
</style>
<div class="display-table">
<h3>表格的标题</h3>
<p>
<div>第一个单元格</div>
<div>第一个单元格</div>
<div>第一个单元格</div>
</p>
<p>
<div>第二个单元格</div>
<div>第二个单元格</div>
<div>第二个单元格</div>
</p>
<p>
<div>第三个单元格</div>
<div>第三个单元格</div>
<div>第三个单元格</div>
</p>
</div>8.8position属性
Position属性
Position-relative 属性
Position-absolute属性
Position-fixed 属性
<title>position属性</title>
<style type="text/css">
.parent{
padding: 10px;
margin-top: 200px;
border: red dotted 1px;
}
.parent>div{
width: 200px;
height: 60px;
}
.box-1{
background-color: #ffff70;
/*设置left top 可以改变相对盒子的位置，但是对其他盒子没有影响*/
position: relative;
top:-200px;
left: 20px;
}
.box-2{
background-color:pink;
/*如果父元素是relative 那么本元素的left、top等属性就默认相当于父元素*/
/*如果父元素不是relative，那么就会继续向上查找，最后找到根元素body */
/*
在本例中，box-2的定位不是relative，所以可以通过js在当前页面中自由移动,随便动
*/
position: absolute;
top:500px;
}
.box-3{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="box-1">1</div>
<div class="box-2">2</div>
<div class="box-3">3</div>
</div>
<script type="text/javascript">
(function (){
let box2 = document.querySelector(".box-2");
setInterval(function (){
let left = box2.offsetLeft;
let top=0;
left +=1;
top=Math.sin(left/15)*100+500;
box2.style.left=left+"px";
box2.style.top=top+"px";
},50)
})()
</script>
<style type="text/css">
body{
height: 200vh;
margin: 0;
padding: 0;
}
.bottom-banner{
position: fixed;/*固定*/
bottom: 0;/*距离底部为0*/
width: 100%;
height: 100px;
background-color: rgba(1,10,18,0.9);
/*实现一个抽屉的效果，鼠标经过时*/
transition: height 0.3s ease-in-out 0s;
}
.bottom-banner:hover{
height: 200px;
}
</style>
<h1>实现一个在页面最底部的banner</h1>
<section class="bottom-banner">
</section>
</body>8.9常见页面布局（左中右先加载中）
<title>圣杯布局</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div{
min-height: 800px;
}
.main{
width: 100%;
background-color: wheat;
}
.side-left{
width: 240px;
background-color: pink;
}
.side-right{
width: 300px;
background-color: cornflowerblue;
}
/*步骤一：设置三个层为浮动*/
/*缺点：中间main的宽度不能小于左侧宽度*/
.main,.side-right,.side-left{
float: left;
}
/*步骤二：让left移动到main的左侧（爬升）
让right移动本身边框的距离*/
.side-left{
margin-left:-100%;
}
.side-right{
margin-left: -300px;
}
/*步骤三：设置定位方式，给main腾出位置*/
.container{
padding: 0 300px 0 240px;
}
.side-left{
position: relative;
left: -240px;
}
.side-right{
position: relative;
right: -300px;
}
</style>
</head>
<body>
<div class="container">
<!--
最终目的：
首先加载中间层内容，再加载其他层，而且还是呈现左中右布局
-->
<div class="main">main</div>
<div class="side-left">side-left</div>
<div class="side-right">side-right</div>
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
