先做个题目:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全等四宫格布局</title>
<style type="text/css">
* {margin: 0; padding: 0}
html,body { height: 100%}
.box {display: flex;
/*列布局，两个类名column的div纵向排列*/
flex-direction: column;
width: 100%;height: 100%; }
.column {
/*两个div都是占据剩余空间，所以纵向平分了*/
flex: 1;
/*设置column下面两个item也是弹性布局，flex-direction默认是row,即水平排列*/
display: flex;}
.column+.column {
/*上下两个column中第二个的上外边距是10px，*/
margin-top: 10px; }
.item {
/*两个item都占据剩余空间，所以水平平分。两个column都是。*/
flex: 1;
background: #009999;}
.item+.item {
/*左右两个item中的第二个item的左外边距是10px*/
margin-left: 10px;}
</style>
</head>
<body>
<div class="box">
<div class="column">
<span class="item">1</span>
<span class="item">2</span>
</div>
<div class="column">
<span class="item">3</span>
<span class="item">4</span>
</div>
</div>
</body>
</html>
HTML和CSS的学习也算是告了一个段落,后面就是JavaScript的学习了,在学习JS之前,把CSS布局总结一次
什么是布局呢?其实说白了,就是我们写的样式呈现给用户就是我们在文档中的布局,随着用户体验的提升,简单的样式不能满足用户的需求,所以需要我们对页面整体布局来提高用户体验
单列布局
- 一栏布局
- 实现方式:
定宽+水平居中
- 实现方式:
<title>单列布局</title>
<style>
.layout{
/* max-width:560px;用最大宽度,当宽度变小时会以浏览器真是宽度为基准*/
width: 560px; /* 定宽 */ /*用宽度,当宽度变小时会出现滚动条*/
margin: 0 auto; /* 水平居中 */
}
#header{
height: 60px; /* 高度,背景颜色 */
background: red;
}
#content{
position: relative; /* 父元素设置相对定位 */
}
#content .aside {
position: absolute;/* 子元素设置绝对定位 */
right: 0;
width: 100px;
height: 300px;
background: green;
}
#content .main {
margin-right: 110px; /* 盒模型距离左边110px; */
height: 500px;
background: pink;
}
#footer{
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<div class="layout">
<div id="header">头部</div>
<div id="content">
<div class="aside">aside</div>
<div class="main">main</div>
</div>
<div id="footer">尾部</div>
</div>
</body>
如果我们觉得多了一个div,嵌套比较麻烦,我们也可以用这个方法:
<title>单列布局2</title>
<style>
.layout{
width: 960px;
margin: 0 auto;
}
#header{
height: 60px;
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<div id="header" >头部</div>
<div id="content" class="layout">内容</div>
<div id="footer" class="layout">尾部</div>
</body>
- 一栏布局(通栏)
- 实现方式:
在头部和尾部元素加一个父元素div,设置div的颜色和尺寸来达到目的
- 实现方式:
<title>单列布局-通栏</title>
<style>
body{
/* min-width: 960px; 设置body最小宽度可以去掉滚动条*/
}
.layout{
width: 600px;/* 头部定宽 居中*/
margin: 0 auto;
border: 1px solid;
}
#header{
height: 60px; /* 父元素是块级元素,充满一行 */
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<div id="header">
<div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
</body>
多列布局
等分布局
定宽+自适应
-
float+margin- 优点:结构简单,容易懂
- 缺点:有一点兼容性问题
<title>定宽加自适应</title>
<style>
*{margin: 0;padding: 0; }
body{border: 2px solid #ccc;}
.left{
background: red;
float: left; /*别忘了清除浮动哦*/
width: 300px;
}
.right{
background: blue;
margin-left: 310px;/*因为left浮动,right: 会环绕着left,所以给个大于或者等于宽度的margin值*/
}
</style>
</head>
<body>
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</body>
-
float + margin + (fix)- 优点:兼容性特别好
- 缺点:样式比较麻烦
<title>多列布局</title>
<style type="text/css">
body{margin:20px;}
.parent{
border: 2px solid #ccc;
}
.clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
.left{
float: left; width: 100px;
position: relative; /*提升层级*/
background: red;
}
.right-fix{ /*解决IE6不兼容的问题产生的bug问题*/
float: right; width: 100%; /*右浮动因为宽度100%,所以会掉下去*/
margin-left: -100px; /*设置margin负边距,右浮动元素会上去*/
}
.right{
margin-left: 120px;
background: blue;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="left"><p>left</p></div>
<div class="right-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
</body>
-
float + overflow- 优点:样式简单
- 缺点:IE6不支持
<title>多列布局</title>
<style type="text/css">
body{margin:20px;}
.parent{
border: 5px solid #ccc;
}
.left{
float: left;
width: 100px;
margin-right: 20px;
background: red;
}
.right{
overflow: hidden; 会触发BFC(块级格式化文本)模式,bfc里面的容器跟外面隔离,外面的浮动不会影响里面的内容
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
-
table- 缺点:代码较多
<title>多列布局</title>
<style type="text/css">
body{margin:20px;}
*{margin: 0;padding: 0; }
.parent{
display: table; width: 100%; /*display:table;变成表格结构,设置成100%,是因为table宽度默认跟着内容走*/
table-layout: fixed; /* 1. 加速table的渲染 2. 实现了布局优先,要写上*/
border: 5px solid #ccc;
}
.left,.right{
display: table-cell; /* 变成水平排列单元格*/
}
.left{
width: 100px; /* table里每列的宽度之和等于表格,所以right是剩余的宽度*/
padding-right: 20px;
background: red;
}
.right{background: blue;}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
-
flex- 缺点:兼容性问题,性能可能有问题,做一些小范围布局
<title>多列布局</title>
<style type="text/css">
body{margin:20px;}
.parent{
display: flex; /* 弹性布局*/
}
.left{
width: 100px;
margin-right: 20px;
background: red;
}
.right{
flex: 1; /*分配剩余宽度*/
background: blue
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
不定宽加自适应
-
float + margin做不到- width变化,margin值也需要变化,所以不能跟着内容走
-
float + margin +(fix)做不到- 同上,width变化,margin也需要重新设置变化
-
float + overflow- 可以实现跟着内容走
<title>多列布局</title>
<style type="text/css">
body{margin:20px;}
.parent{
}
.left{
float: left;
margin-right: 20px;
background: red;
}
.right{
overflow: hidden;
background: blue;
}
.left p{width: 300px;} /* 不管宽度怎么变,右边的元素始终距离它20px自适应*/
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
-
table可以
<style type="text/css">
body{margin:20px;}
.parent{
display: table; width: 100%;
/*table-layout: fixed;*/ /*这句话需要去掉,因为它是布局优先,现在我们是内容优先*/
}
.left,.right{
display: table-cell;
}
.left{
width: 0.1%; /*宽度由内容决定,left单元格宽度设置非常小,0.1%兼容性考虑,*/
padding-right: 20px;
}
.left p{
width:200px; /*由内容撑开left*/
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
-
flex当然可以,就是有点兼容性问题
等分布局
我们先看一下原理
c是父容器宽度,w每一列宽度,g是每列中的宽度
)
我们来转化一下公式:
C = W * N + G * N -G
C = (W + G) * N - G
C + G = (W + G) * N,如果父元素增加一个G的宽度,等于后边的
-
float怎么弄?- 缺点:结构和样式有点耦合性, 兼容性有点问题
<title>等分布局</title>
<style type="text/css">
body{margin:20px;}
.parent{background:#ddd;color:#fff;}
.clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
p{background:#666;}
.parent{
margin-left: -20px;
}
.column{
float: left;
width: 25%;
padding-left: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
</body>
table怎么弄?
<title>等分布局</title>
<style type="text/css">
body{margin:20px;}
/*.parent{background:#ddd;color:#fff;}*/
.clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
p{background:#666;color: #fff;}
.parent-fix{ /*增加父容器的宽度*/
margin-left: -20px;
}
.parent{
display: table;
width:100%;
table-layout: fixed;
}
.column{
display: table-cell;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="parent-fix">
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
</div>
</body>
flex怎么做?
<title>等分布局</title>
<style type="text/css">
body{margin:20px;}
.parent{background:#ddd;color:#fff;}
.clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
p{background:#666;}
.parent{
display: flex;
}
.column{
flex: 1;
}
.column+.column{
margin-left:20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
</body>
最后来个DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title>
</head>
<body>
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.ct{
overflow:hidden;
width: 640px;
border:dashed 1px orange;
margin: 0 auto;
}
.ct .item{
float: left;
width:200px;
height:200px;
margin-right: 20px;
margin-top: 10px;
background: red;
}
.ct>ul{
margin-right: -20px;
}
</style>
<div class="ct">
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
</ul>
</div>
</body>
</html>
有些内容借鉴,不过每个内容我都在浏览器上跑了一遍,自己亲自用代码实现了一遍,如果有侵权的,请联系删除
