概述
image.png
image.png
image.png
image.png
概要
image.png
CSS基础布局
image.png
image.png
- 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layout</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.con{
width: 980px;
margin: 0 auto;
}
.header{
height: 150px;
background-color: orange;
}
.footer{
height: 150px;
background-color: yellow;
}
.content{
height: 300px;
background-color: green;
}
.content .left{
height: 300px;
background-color: aquamarine;
float: left;
width: 20%;
}
.content .right{
height: 300px;
background-color: coral;
float: right;
width: 10%;
}
.middle{
height: 300px;
background-color: red;
}
.fx{
clear: both;
}
</style>
</head>
<body>
<div class="con">
<div class="header">
我是header
</div>
<div class="content">
<!-- 如果是中间的内容比较重要的话需要放到前面这样在渲染时先渲染出来 这样的话就需要在 浮动同级的最后面加上一个 div.fx 清除浮动了 -->
<div class="middle">
中间
</div>
<div class="left">
左
</div>
<div class="right">
右
</div>
<div class="fx"></div>
</div>
<div class="footer">
版权信息
</div>
</div>
</body>
</html>
- 在浏览器中展现的效果，上面将 .content 的高度设置为了 300px 才会出现下面这样的情况，请接着看下面的 【圣杯布局】 演示
image.png
image.png
圣杯布局
image.png
- 这里还是照着上面的基础布局的基础上进行代码的修改
- 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layout</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.con{
width: 980px;
margin: 0 auto;
}
.header{
height: 150px;
background-color: orange;
}
.footer{
height: 150px;
background-color: yellow;
}
.content{
height: 300px;
background-color: green;
padding-left: 100px;
padding-right: 150px;
}
.content .left{
height: 300px;
background-color: aquamarine;
float: left;
width: 100px;
margin-left: -100%;
position: relative;
left: -100px;
}
.content .right{
height: 300px;
background-color: coral;
float: left;
width: 150px;
margin-left: -150px;
position: relative;
left: 150px;
}
.middle{
height: 300px;
background-color: red;
float: left;
width: 100%;
}
.fx{
clear: both;
}
</style>
</head>
<body>
<div class="con">
<div class="header">
我是header
</div>
<div class="content">
<!-- 如果是中间的内容比较重要的话需要放到前面这样在渲染时先渲染出来 这样的话就需要在 浮动同级的最后面加上一个 div.fx 清除浮动了 -->
<div class="middle">
中间
</div>
<div class="left">
左
</div>
<div class="right">
右
</div>
<div class="fx"></div>
</div>
<div class="footer">
版权信息
</div>
</div>
</body>
</html>
- 整个的步骤
.middle{float:left;width:100%;}.left{width:100px;margin-left:-100%;}.right{float:left;width:150px;margin-left:-150px;}- 再给容器
.content加了padding-left:100px;padding-right:150px; .left{position:relative;left:-100px;}.right{position:relative;left:150px;}
- 在浏览器中的效果图
image.png
双飞翼布局
image.png
- 这里是照着上面的圣杯布局的基础上进行代码的修改
- 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layout</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.con{
width: 980px;
margin: 0 auto;
}
.header{
height: 150px;
background-color: orange;
}
.footer{
height: 150px;
background-color: yellow;
}
.content{
height: 300px;
background-color: green;
/*padding-left: 100px;
padding-right: 150px;*/
}
.content .left{
height: 300px;
background-color: aquamarine;
float: left;
width: 100px;
margin-left: -100%;
/*position: relative;
left: -100px;*/
}
.content .right{
height: 300px;
background-color: coral;
float: left;
width: 150px;
margin-left: -150px;
/*position: relative;
left: 150px;*/
}
.middle{
height: 300px;
background-color: red;
float: left;
width: 100%;
}
.middle .inner{
margin-left: 100px;
margin-right: 150px;
}
.fx{
clear: both;
}
</style>
</head>
<body>
<div class="con">
<div class="header">
我是header
</div>
<div class="content">
<!-- 如果是中间的内容比较重要的话需要放到前面这样在渲染时先渲染出来 这样的话就需要在 浮动同级的最后面加上一个 div.fx 清除浮动了 -->
<div class="middle">
<div class="inner">
中间
</div>
</div>
<div class="left">
左
</div>
<div class="right">
右
</div>
<div class="fx"></div>
</div>
<div class="footer">
版权信息
</div>
</div>
</body>
</html>
- 在浏览器中的效果图
image.png
- 整个的步骤
- 将
.left和.right中的position属性全都去掉，将.content的padding也都去掉 - 之后再在
.middle元素中增加一个div.inner元素 - 给这个元素设置样式 .middle .inner{margin-left:100px;magin-right:150px;}
- 将
扩展
- 还是参照着上面最后完成的【双飞翼】布局的源码，如果说
.left .right .inner这三个元素不设置固定的高度，就会出现下面的问题，这里我给.inner设置了一个背景颜色blueviolet
image.png
- 接下来我们要实现的就是如何使三列布局可以等高
- 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layout</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.con{
width: 980px;
margin: 0 auto;
}
.header{
height: 150px;
background-color: orange;
}
.footer{
height: 150px;
background-color: yellow;
}
.content{
height: 300px;
background-color: green;
/*padding-left: 100px;
padding-right: 150px;*/
overflow: hidden;
}
.content .left{
/*height: 300px;*/
background-color: aquamarine;
float: left;
width: 100px;
margin-left: -100%;
/*position: relative;
left: -100px;*/
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.content .right{
/*height: 300px;*/
background-color: coral;
float: left;
width: 150px;
margin-left: -150px;
/*position: relative;
left: 150px;*/
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.middle{
/*height: 300px;*/
background-color: red;
float: left;
width: 100%;
}
.middle .inner{
margin-left: 100px;
margin-right: 150px;
background-color: blueviolet;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.fx{
clear: both;
}
</style>
</head>
<body>
<div class="con">
<div class="header">
我是header
</div>
<div class="content">
<!-- 如果是中间的内容比较重要的话需要放到前面这样在渲染时先渲染出来 这样的话就需要在 浮动同级的最后面加上一个 div.fx 清除浮动了 -->
<div class="middle">
<div class="inner">
中间
</div>
</div>
<div class="left">
左
</div>
<div class="right">
右
</div>
<div class="fx"></div>
</div>
<div class="footer">
版权信息
</div>
</div>
</body>
</html>
- 在浏览器中的效果图，这样就完美的实现了等高的需求了
image.png
-
整个的步骤
- 给
.left .right .inner都加上两个样式padding-bottom:9999px;margin-bottom:-9999px; - 再给
.content加上overflow:hidden;
- 给
上面的 padding 是增加了元素的高度，margin 是变相的将增加的高度给减去了，尽管在视觉上市一样的效果，这个 margin 是必须要加上的，这样值相互抵消使得元素也就是这个盒子模型中的内容还是在原来的位置上
