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>