CSS3布局相关样式

最新推荐文章于 2023-11-23 14:31:09 发布

Z_ikCoffee

最新推荐文章于 2023-11-23 14:31:09 发布

阅读量601

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/z983002710/article/details/76423035

版权

CSS3布局相关样式：网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性进行页面的简单布局，但是它们也存在有缺点，比如在两栏或者多栏布局的时候，会出现元素的内容高度不一致，那么导致底部很难对齐，在CSS3中追加了一些新的布局方式。

一、多栏布局：

1、column-count属性：

（1）在CSS3中可以通过column-count属性来进行多栏布局，这个属性的含义是将一个元素中的内容分成多栏进行显示；

（2）写法：column-count:栏目数;

（3）兼容性写法：-webkit-column-count:栏目数;、-moz-column-count:栏目数;

（4）需要注意的是，在使用多栏布局的时候，要将元素的宽度设置成多个栏目的总宽度；

2、column-width属性：

（1）在CSS3中可以通过column-width属性来指定栏目的宽度来生成分栏；

（2）兼容性写法：-webkit-column-width、-moz-column-width;

3、column-gap属性：在CSS3中可以通过column-gap属性指定栏目与栏目之间的距离；

4、column-rule属性：

（1）在CSS3中可以通过column-rule属性栏目与栏目之间增加一条分割线；

（2）兼容性写法：-webkit-column-rule、-moz-column-rule;

5、多栏布局的应用：

（1）HTML代码：

<div id="div1">
	CSS3布局相关样式：网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等
	各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性
	进行页面的简单布局，但是它们也存在有缺点，比如在两栏或者多栏布局的时候，会出现元
	素的内容高度不一致，那么导致底部很难对齐，在CSS3中追加了一些新的布局方式：CSS3布局相关样式：
	网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等
	各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性
	进行页面的简单布局，但是它们也存在有缺点，比如在两栏或者多栏布局的时候，会出现元
	素的内容高度不一致，那么导致底部很难对齐，在CSS3中追加了一些新的布局方式：CSS3布局相关样式：
	网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等
	各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性
	进行页面的简单布局，但是它们也存在有缺点，比如在两栏或者多栏布局的时候，会出现元
	素的内容高度不一致，那么导致底部很难对齐，在CSS3中追加了一些新的布局方式：CSS3布局相关样式：
	网页布局是指在页面中如何对标题、导航栏、主要内容、页脚、表单等
	各种构成要素进行一个合适的编排。在使用CSS3之前主要使用float属性或者position属性
	进行页面的简单布局，但是它们也存在有缺点，比如在两栏或者多栏布局的时候，会出现元
	素的内容高度不一致，那么导致底部很难对齐，在CSS3中追加了一些新的布局方式：
</div>

（2）CSS代码：

#div1{
	width: 100%;
	-webkit-column-count: 5;
	-moz-column-count: 5;
	/*-webkit-column-width: 200px;
	-moz-column-width: 200px;*/
	-webkit-column-gap: 50px;
	-moz-column-gap: 50px;
	-webkit-column-rule: 2px solid #ccc;
	-moz-column-rule: 2px solid #ccc;
}

（3）效果图如下：

1）使用column-count属性时的效果图：

2）使用column-width属性时的效果图：

二、盒布局：

1、使用float属性与position属性时的缺点：在CSS3中除了多栏布局之外，还可以使用盒布局来解决使用float属性和position属性时多栏布局底部不能对齐的缺点；

2、使用盒布局：在CSS3中使用box属性来进行盒布局，在Firefox中要把box写成"-moz-box"的形式，在chrome浏览器中写成"-webkit-box"的形式；

3、盒布局与多栏布局的区别：多栏布局的栏目宽度必须相等，指定栏目的宽度的时候也只能统一指定，栏目的宽度不可能全都一样，所以多栏布局比较适合在文字内容页面使用，并不适合整个网页编排时使用；

4、盒布局的应用：

（1）使用float属性和position属性进行多栏布局：

1）HTML代码：

<div class="content">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

2）CSS代码：

.content{
	width: 1000px;
	margin: 0px auto;
	background-color: khaki;
}
.left{
	width: 300px;
	height: 400px;
	float: left;
	background-color: lawngreen;
}
.center{
	width: 400px;
	height: 200px;
	float: left;
	background-color: lightcoral;
}
.right{
	width: 300px;
	height: 400px;
	float: right;
	background-color: lightblue;
}

3）效果图如下：

（2）使用box属性来进行盒布局：

1）HTML代码：

<div class="content">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

2）CSS代码：

.content{
	width: 1000px;
	margin: 0px auto;
	display: -moz-box;
	display: -webkit-box;
}
.left{
	width: 300px;
	height: 400px;
	background-color: lawngreen;
}
.center{
	width: 400px;
	height: 200px;
	background-color: lightcoral;
}
.right{
	width: 300px;
	height: 400px;
	background-color: lightblue;
}
.left,.center,.right{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

3）效果图如下：

三、弹性盒布局：

1、使用自适应窗口的弹性盒布局：

（1）在CSS3中使用box-flex属性即可使得盒布局变成弹性盒布局；

（2）兼容性写法：-webkit-box-flex、-moz-box-flex;(其后的值会影响盒子的宽度和高度)

2、改变元素的显示顺序：

（1）使用弹性盒布局的时候，可以通过box-ordinal-group属性来改变各个元素的显示顺序，在每个元素中加入box-ordinal-group属性，这个属性使用一个表示序号的正数属性值，浏览器在显示的时候根据序号从小到大来显示这些元素；
（2）兼容性写法：-webkit-box-ordinal-group、-moz-box-ordinal-group;

3、改变元素的排列方向：

（1）在使用弹性盒布局的时候，可以通过box-orient来指定多个元素的排列方向；

（2）可能的取值：

1）horizontal：在水平行中从左到右排列子元素；

2）vertical：从上向下垂直排列子元素；

（3）兼容性写法：-webkit-box-orient:vertical;、-moz-box-orient:vertical;

4、元素的宽度与高度自适应：

（1）在使用盒布局的时候，元素的宽度和高度具有自适应性，就是元素的宽度与高度可以根据排列的方向的改变而改变；

（2）元素的宽度与高度自适应的应用：

1）HTML代码：

<div class="content">
	<div class="left">left</div>
	<div class="center">center</div>
	<div class="right">right</div>
</div>

2）CSS代码：

.content{
	width: 500px;
	height: 400px;
	background-color: khaki;
	display: -moz-box;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
}
.left{
	background-color: lightblue;
}
.center{
	background-color: lightcoral;
	
}
.right{
	background-color: lightgreen;
}
.left,.center,.right{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
}

3）效果图如下：

5、使用弹性盒布局来消除空白：其方法就是给子div中加入一个box-flex属性；

6、对多个子元素使用box-flex属性：使得浏览器或容器中的元素的总宽度或者总高度都等于浏览器或容器的高度；

7、指定水平方向与垂直方向的对齐方式：

（1）使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中的文字、图像以及子元素的水平方向或者垂直方向上的对齐方式；

（2）兼容性写法：
-webkit-box-pack:值;
-moz-box-pack:值;
-webkit-box-align:值;
-moz-box-pack:值;

（3）box-pack属性的取值：

取值	属性值描述
start	对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）
end	对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）
center	均等地分割多于空间，其中一半空间被置于首个子元素前，另一半被置于最后一个元素后
justify	在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）

（4）box-align属性的取值：

取值	属性值描述
start	对于正常方向的框，每个子元素的上边缘沿着框的顶边放置对于反方向的框，每个子元素的下边缘沿着框的底边放置
end	对于正常方向的框，每个子元素的下边缘沿着框的底边放置对于反方向的框，每个子元素的上边缘沿着框的顶边放置
center	均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下
baseline	如果box-orient是inline-axis或horizontal，所有子元素均与其基线对齐
stretch	拉伸子元素以填充包含块

（5）指定水平方向与垂直方向的对齐方式的应用：

1）HTML代码：

<div>指定水平方向与垂直方向的对齐方式</div>

2）CSS代码：

div{
	width: 300px;
	height: 200px;
	background: lightblue;
	display: -moz-box;
	display: -webkit-box;
	-moz-box-pack: center;
	-webkit-box-pack: center;
	/*-moz-box-pack: start;
	-webkit-box-pack: start;*/
	/*-moz-box-pack: end;
	-webkit-box-pack: end;*/
	/*-moz-box-pack: justify;
	-webkit-box-pack: justify;*/
	
	-moz-box-align: center;
	-webkit-box-align: center;
	/*-moz-box-align: start;
	-webkit-box-align: start;*/
	/*-moz-box-align: end;
	-webkit-box-align: end;*/
	/*-moz-box-align: baseline;
	-webkit-box-align: baseline;*/
	/*-moz-box-align: stretch;
	-webkit-box-align: stretch;*/
}

3）效果图如下：

①box-pack: center;时的效果图：

②box-pack: start;时的效果图：

③box-pack: end;时的效果图：

④box-pack: justify;时的效果图：

⑤box-align: center;时的效果图：

⑥box-align: start;时的效果图：

⑦box-align: end;时的效果图：

⑧box-align: baseline;时的效果图：

⑨box-align: stretch;时的效果图：

8、弹性盒布局的应用：

（1）HTML代码：

<div class="content">
	<div class="left">left</div>
	<div class="center">center</div>
	<div class="right">right</div>
</div>

（2）CSS代码：

.content{
	background-color: khaki;
	display: -moz-box;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
}
.left{
	height: 200px;
	background-color: lightpink;
	-webkit-box-ordinal-group: 3;
	-moz-box-ordinal-group: 3;
}
.center{
	height: 200px;
	background-color: lightcoral;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
}
.right{
	height: 200px;
	background-color: lightblue;
}
.left,.center,.right{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

（3）效果图如下：