使用float或position属性进行页面布局的缺点
两个块区域是各自独立的,如果在其中一个区域加入一些内容,将会使两个元素的底部不对齐,导致页面多出一块空白区域。
如下例所示,第一个DIV中有图像元素,篇幅比较大:
多栏布局
使用多栏布局可以将一个元素中的内容分为两栏或多栏显示,并且确保各栏中内容底部对齐;
多栏布局的相关属性:
1)column-count:将一个元素中的内容分为多栏进行显示。
2)column-width:单独设置每一栏的宽度而不设定元素的宽度;(需要在元素外面单独设立一个容器元素,指定容器元素的宽度)
3)width:元素的宽度,即,多个栏目的总宽度;
4)column-gap:设定多栏之间的间隔距离;
5)column-rule:在栏与栏之间增加一条间隔线,并且设定该间隔线的宽度、颜色等;
以上的各个属性,在Firefox浏览器中要添加前缀 “-moz-”;
在Safair、chrome或Opera浏览器中需要添加前缀 “-webkit-”;
在IE浏览器中,不需要添加浏览器供应商前缀;
<style type="text/css">
div#container{
width:42em;
}
div#div1{
/* 栏数 */
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
/*每栏宽度 column-width需要有容器元素并设置宽度 */
column-width:20em;
-moz-column-width:20em;
-webkit-column-width:20em;
/* 栏与栏之间的距离 */
column-gap:2em;
-moz-column-gap:2em;
-webkit-column-gap:2em;
/* 栏的间隔线 */
column-rule: 1px dashed blue;
-moz-column-rule: 1px dashed blue;
-webkit-column-rule: 1px dashed blue;
}
div#div3{
width:100%;
background-color:yellow;
height:200px;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">
<img src="test.jpg">
<p>示例文字1。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。</p>
<p>示例文字2。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。</p>
</div>
<div id="div3">
页面中其他内容
</div>
</div>
运行结果如下:
盒布局
同样可以解决页面布局时底面不对齐的问题;
通过box属性来使用盒布局,在Firefox浏览器中,需要书写成:“-moz-box”,在Safari、Chrome、Opera浏览器中需要书写成:“-webkit-box”;
<style type="text/css">
#container{
display: box;
display: -moz-box;
display: -webkit-box;
}
#left-sidebar{
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
box-sizing: border-box;
}
</style>
运行结果如下:
盒布局与多栏布局的区别:
① 使用多栏布局时,各个栏宽度必须是相等的,在指定每栏宽度时,只能为所有的栏指定一个统一的宽度,栏与栏之间的宽度不可能是不一样的;
② 使用多栏布局,不可能具体指定什么栏中显示什么内容;
因此,多栏布局适合用于在显示文章内容的时候,不适合安排整个网页中各个元素组成的网页结构。
弹性盒布局
只要使用flex属性就可以使盒布局变为弹性布局了,即,元素的高度与宽度具有自适应性;
1)order:改变个元素的显示顺序,属性值为整数,浏览器的显示顺序根据这个序号从小到大排;
2)flex-direction:改变元素的排列方向
属性值有: row(横向) row-reverse(横向反向排列) column(纵向) column-reverse(纵向反向排序)
3)flex:使元素的高度和宽度自动扩大;填补容器中的空白部分;
使用盒布局的时候,元素的高度与宽度具有自适应;即,元素的高度与宽度根据排列方向的改变而改变;
当为横向时:宽度与元素中的内容相等,高度等于容器高度;
当为纵向时:高度为元素内容的高度,宽度为容器的宽度;
看如下代码 的演示效果:
<style type="text/css">
#container{
/* flex属性 变成弹性盒布局 */
display: flex;
border: solid 5px blue;
/* 排列方向 */
flex-direction:column;
/* flex-direction:row; */
width: 400px;
height: 200px;
}
#text-a{
/* 显示顺序 */
order: 2;
background-color: orange;
}
#text-b{
order: 3;
background-color: yellow;
}
#text-c{
order: 1;
background-color: limegreen;
}
#text-a, #text-b, #text-c{
box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="text-a">示例文字A</div>
<div id="text-b">示例文字B</div>
<div id="text-c">示例文字C</div>
</div>
横向排列 纵向排列
以上例子的盒布局中,元素的高度与宽度具有一定的适应性,但是容器中总是还会留出一大片空白的区域,如何消除这块空白区域?
利用flex属性,使得盒布局变成弹性的,使得参与排列的元素的总宽度和高度等于容器的总宽度与高度;
即在,容器的子元素的样式代码中加入flex属性;
#text-a{
/* 显示顺序 */
order: 2;
flex: 1;
background-color: orange;
}
运行结果如下:
4)对多个元素使用flex属性
flew属性实质上是对于空白区域的一个划分分配规则;
#container{
/* flex属性 变成弹性盒布局 */
display: flex;
border: solid 5px blue;
/* 排列方向 */
flex-direction:column;
/* flex-direction:row; */
width: 400px;
height: 200px;
}
#text-a{
/* 显示顺序 */
order: 2;
flex: 1;
background-color: orange;
}
#text-b{
order: 3;
background-color: yellow;
flex: 1;
}
#text-c{
order: 1;
flex: 2;
background-color: limegreen;
}
#text-a, #text-b, #text-c{
box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
在以上样式代码中,a、b、c三个div中的flex值分别为1,1,2,其实就是相当于把空白部分分成4份,a、b各占1份,c占2份;
上面例子中,三个div元素的高度是由div元素内容决定的,我们也可以指定它们的高度或宽度;
5)指定元素的高度或宽度;
当元素的排列方向为横向:元素的总宽度小于容器的宽度,使用flex-grow属性;
元素的总宽度大于容器的宽度,使用flex-shrink属性;
当元素排列的方向为纵向:元素的总高度小于容器的高度,使用flex-grow属性;
元素的总高度小于容器的高度,使用flex-shrink属性;
① flex-grow:
以下面的例子来说明该属性的特性:
<style type="text/css">
#container{
display: flex;
border: solid 5px blue;
flex-direction:row;
width:600px;
height: 300px;
}
#text-a, #text-b, #text-c{
box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
width:150px;
flex-grow:1;
}
#text-a{
background-color: orange;
}
#text-b{
background-color: yellow;
flex-grow:3;
}
#text-c{
background-color: limegreen;
}
</style>
当使用flex-grow属性计算元素的宽度时,首先先计算出元素所占的总宽度:150*3=450px;剩余的空白宽度为150px;接着计算flex-grow属性值的总和为:1+1+3=5;所以增值单位为30px;所以第一和第三个div元素的宽度为150+30=180px;第二个div的宽度为150+90=240px;
② flex-shrink:
以下面的例子来说明该属性的特性:
#container{
display: flex;
border: solid 5px blue;
flex-direction:row;
width:600px;
height: 300px;
}
#text-a, #text-b, #text-c{
box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
width:250px;
flex-shrink:1;
}
#text-a{
background-color: orange;
}
#text-b{
background-color: yellow;
flex-shrink:3;
}
#text-c{
background-color: limegreen;
}
使用flex-shrink属性计算元素宽度时,计算过程如下:
① 250*3-600=150px;
② 150/5=30px;
③ 第一和第三个div元素的宽度为:250-30=220px;
④ 第三个div元素的宽度为:250-90=160px;
6)flex-basis:指定调整前的子元素宽度,该样式属性与width样式属性的作用完全相同;
7)控制换行方式
flex-wrap:指定单行布局或多行布局;
属性值如下:nowrap(不换行) wrap(换行) wrap-reverse:虽然换行,但是换行方向与使用wrap样式属性值时的换行方向相反。
8)指定水平方向与垂直方向的对其方式
① 弹性盒布局的专业术语介绍:
② justify-content属性
当flex-grow不为0时,容器被填满,此属性无效;
该属性功能:该属性有效时,对空白区域的布局方式; (针对的是所有的子元素)
#container{
display: flex;
border: solid 5px blue;
flex-direction:row;
width:300px;
height: 30px;
justify-content:flex-start;
/* justify-content:flex-end;
justify-content:center;
justify-content:space-between;
justify-content:space-around; */
}
#text-a{
background-color: orange;
width:50px;
}
#text-b{
background-color: yellow;
width:100px;
}
#text-c{
background-color: limegreen;
width:50px;
}
设置为flex-start时 设置为flex-end时
设置为center时
设置为space-between时 设置为space-around时
③ align-items属性
定义:指所有子元素在cross axis轴方向上的对齐方式(横向布局时cross axis轴方向为垂直方向,纵向布局时cross axis轴方向为水平方向),具有多个属性值:
#container{
display: flex;
border: solid 5px blue;
flex-direction:row;
width:350px;
align-items:flex-start;
/* align-items:flex-end;
align-items:center;
align-items:baseline;
align-items:stretch; */
}
当设置为flex-start时 设置为flex-end时
设置为center
设置为baseline时 设置为stretch时,同一行中所有的自元素都被调到最大
④ align-self属性
定义:被用于单独指定某些子元素的对齐方式;
属性值:auto:继承父元素的align-items属性值;
其他可指定属性值同align-items属性值的可指定属性值;
⑤ align-content属性
align-content属性用于指定行对齐方式,而align-items属性用于指定子元素的对齐方式。
#container{
display: flex;
border: solid 5px blue;
flex-direction:row;
flex-wrap:wrap;
width:300px;
height: 400px;
align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-between;
align-content:space-around;
}
设置为flex-start时 设置为flex-end时
设置为center 设置为space-between时
设置为space-around时
cale方法
这个方法用来自动计算元素的宽度、高度等数值类型的样式属性值。
最常用:用来对各种不同的计数单位进行混合运算,例如开发者可以在指定元素高度时将em单位与px单位进行结合运算;
#container{
height:cale(10em+3px);
}