day5，简单学习了CSS的布局原理，布局主要是通过浮动和定位来实现的，设置元素浮动后，可以使得元素在水平位置上自由设置，定位包括相对定位relative，绝对定位absolute，和固定定位fixed。
作业一：实例演示如何消除子元素浮动造成父元素高度折叠的影响
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link rel="stylesheet" href="./css/index2.css">-->
<style>
.box2,.box3,.box4,.box5,.box6{
width: 200px;
border:dashed mediumvioletred 1px;
}
.box1{
width:inherit;
height:150px;
background: #f0c674;
float:left;
}
/*第一种解决方法：直接根据子元素高度修改父元素高度*/
.box3{height:150px;}
/*第二种解决方法：让父元素跟随子元素浮动*/
.box4{float:left;}
/*第三种解决方法：在子元素后面清除子元素的浮动影响*/
.clear{clear:both}
/*第四种解决方法：给父元素设置overflow:hidden属性*/
.box6{overflow:hidden;}
</style>
<title>消除子元素浮动造成父元素高度折叠的影响</title>
</head>
<body>
<!--实例演示如何消除子元素浮动造成父元素高度折叠的影响-->
<div class="box2">
<div class="box1"></div>
</div>
<hr class="clear">
<!--第一种解决方法：直接根据子元素高度修改父元素高度，但随着子元素的高度变化而修改父元素高度，在某些不太能实现-->
<div class="box3">
<div class="box1"></div>
</div>
<hr>
<!--第二种解决方法：让父元素跟随子元素浮动，当元素是多层嵌套的时候，就需要设置所有父元素浮动-->
<div class="box4">
<div class="box1"></div>
</div>
<hr class="clear">
<!--第三种解决方法：在子元素后面清除子元素的浮动影响，这种方法会使得文档结构过于复杂-->
<div class="box5">
<div class="box1"></div>
<div class="clear"></div>
</div>
<hr>
<!--第四种解决方法：给父元素设置overflow:hidden属性，此方法简单易用，兼容性强-->
<div class="box6">
<div class="box1"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业二：实例演示三列布局的实现原理
使用绝对定位来实现三列布局，绝对定位是针对于已经定位
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/index8.css"> <style> .header,.footer{ width: 1000px; height:200px; text-align: center; line-height: 200px; background: #f0c674; margin:0 auto; } .main{ min-height:500px; width: 1000px; background-color: #81a2be; margin: 10px auto; position: relative; } /*.content{ position: absolute; margin-top: 25px; }*/ /*强行计算三列宽度进行布局*/ /*.main-left{ position: absolute; width: 200px; min-height:500px; background-color: #f0c674; text-align: center; line-height: 500px; } .main-center{ position: absolute; width: 600px; min-height:500px; background-color: #008856; left: 200px; text-align: center; line-height: 500px; } .main-right{ position: absolute; width: 200px; min-height:500px; background-color: #f0c674; left:800px; text-align: center; line-height: 500px; }*/ /* 另一种简便方法直接设置左右两侧的样式后，通过margin将中间部分挤压出来*/ .main-left{ width: 200px; min-height: 500px; background-color:rebeccapurple; position: absolute; left: 0; top: 0; text-align: center; line-height: 500px; } .main-right{ width: 200px; min-height: 500px; background-color:rebeccapurple; position: absolute; right: 0; top: 0; text-align: center; line-height: 500px; } .main-center{ margin:0 200px; background-color: #f0c674; height: 500px; text-align: center; line-height: 500px; } </style> <title>绝对定位实现经典三列布局</title> </head> <body> <header class="header">这里是头部区域</header> <main class="main"> <!--<div class="content">--> <div class="main-left">主体部分左侧</div> <div class="main-center">主体部分中间</div> <div class="main-right">主体部分右侧</div> <!--</div>--> </main> <footer class="footer">这里是底部区域</footer> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
2.浮动定位
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link rel="stylesheet" href="./css/index9.css">-->
<style>
.header,.footer{
width: 1000px;
height:200px;
text-align: center;
line-height: 200px;
background: #f0c674;
margin:0 auto;
}
.main{
min-height:500px;
width: 1000px;
background-color: #81a2be;
margin: 10px auto;
overflow:hidden;
}
.main-left{
width:200px;
min-height:500px;
float:left;
background-color: mediumslateblue;
}
.main-center{
width: 600px;
min-height: 500px;
float: left;
background-color: fuchsia;
}
.main-right{
width:200px;
min-height:500px;
float:left;
background-color: mediumslateblue;
</style>
<title>绝对定位实现经典三列布局</title>
</head>
<body>
<header class="header">这里是头部区域</header>
<main class="main">
<div class="main-left">主体部分左侧</div>
<div class="main-center">主体部分中间</div>
<div class="main-right">主体部分右侧</div>
</main>
<footer class="footer">这里是底部区域</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
