CSS3-创建布局

CSS3-创建布局

<!--	定位内容	-->
<!--	position 设置定位方法	-->
<!--	left	 为定位元素设置偏移量	-->
<!--	right							-->
<!--	top								-->
<!--	bottom							-->
<!--	z-index	设置定位元素的层叠顺序	-->


<!-- position 属性 :		-->
<!--	static 默认,普通布局 -->
<!--	relative	元素位置相对于普通定位 -->
<!--    absolute	根据position值不是static的最近祖宗元素定位	   -->
<!--	fixed		元素相对于浏览器	   -->
<style type = "text/css">
	img {
		position: fixed;
		right: 100px;
		top: 100px;
	}
</style>


<!-- 设置元素的层叠顺序 -->
<!-- z-index -->
<style type = "text/css">
	img {
		z-index: 1;
	}
</style>


<!-- 创建多列布局	-->
<!--	column-count 指定列数	-->
<!--	column-fill	指定内容在列与列之间的分布方式 -->
<!--	column-gap	指定列之间的距离	-->
<!--	column-rule	简写				-->
<!--	column-rule-color	设置列之间的颜色规则	-->
<!--	column-rule-style	设置列之间的样式规则	-->
<!--	column-rule-width	设置列之间的宽度		-->
<!--	columns		column-span和column-width 的简写 -->
<!--	column-span 指定元素横向能跨多少列			-->
<!--	column-width	指定列宽					-->
<style type = "text/css">
	p {
		column-count: 3;
		column-fill: balance;
		column-rule: medium solid black;
		column-gap: 1.5em;
	}
</style>


<!-- 创建弹性盒布局	-->
<!--	标准仍在变化,此处为标准的早期草案	-->
<!-- flex-align		flex-direction	flex-order	flex-pack	-->
<!-- box-align	box-flex	box-pack	-->


<!-- 创建简单的和模型	-->
<!--	display: -webkit-box;	-->
<!--	display: -webkit-box-flex: 1 告诉浏览器如何分配元素之间的未使用空间-->
<style type = "text/css">
	p.class1 {
		display: -webkit-box;
	}
	p.class2 {
		-webkit-box-flex: 1;
	}
</style>

<!-- 伸缩多个元素	-->
<style type = "text/css">
	p.class1 {
		display: -webkit-box;
	}
	p.class2 {
		-webkit-box-flex: 1;
	}
	p.class3 {
		-webkit-box-flex: 3;
	}
</style>


<!--	处理垂直空间	-->
<!--	box-align		-->
<!--	可用属性:		-->
<!--		start  元素沿容器的顶边放置,任何空空间都在其下方显示 -->
<!--		end  元素沿容器的底边放置,任何空空间都在其上方显示 -->
<!--		center	多余的空间被平分为两部分,分别显示在元素的上方和下方 -->
<!--		strech	调整元素的高度,以填充可用空间 -->
<style type = "text/css">
	p.class1 {
		display: -webkit-box;
		-webkit-box-direction: reverse;
		-webkit-box-align: end;
	}
	p.class2 {
		-webkit-box-flex: 1;
	}
</style>


<!--	处理最大尺寸	-->
<!--	box-pack		-->
<!--	可用属性:		-->
<!--		start  元素从左边界开始放置,任何未分配空间显示在最后一个元素右边 -->
<!--		end  元素从右边界开始放置,任何未分配空间显示到第一个元素左边 -->
<!--		center	多余空间平均分配到第一个元素的左边和最后一个元素的右边 -->
<!--		justify	多余空间均匀分配到各个元素之间 -->
<style type = "text/css">
	p.class1 {
		display: -webkit-box;
		-webkit-box-direction: reverse;
		-webkit-box-align: end;
		-webkit-box-pack: justify;
	}
	p.class2 {
		-webkit-box-flex: 1;
	}
</style>


<!--	创建表格布局	-->
<!--	display			-->
<!--		可用属性    -->
<!--		table	类似table元素		-->
<!--		inline-table	类似table元素,但是创建一个行内元素 -->
<!--		table-caption	-->
<!--		table-column	-->
<!--		table-column-group	-->
<!--		table-header-group	-->
<!--		table-row-group	-->
<!--		table-footer-group	-->
<!--		table-row	-->
<!--		table-cell	类似于 td-->
<style type = "text/css">
	#table {
		display: table;
	}
	div.row {
		display: table-row;
	}
	p {
		display: table-cell;
	}
</style>