1)定位:
position:static——默认值,元素为普通布局;
position:relative——元素位置相对于普通位置定位;
position:absolute——元素相对于position值不为static的第一位祖先元素来定位;
position:fixed——元素相对于浏览器窗口来定位;
left、right、top、bottom——为定位元素设置偏移量;
z-index——设定定位元素的层叠顺序;
2)创建多列布局:(目前浏览器除了oprea及IE10以上支持外,其它需要加前缀-moz-或-webkit-,IE9以下不支持)
column-count——指定列数;
column-fill——指定内容在列与列之间的分布方式(balance、auto);
column-gap——指定列之间的距离;
column-rule——在一条声明中设置column-rule-*的简写属性(<宽度><样式><颜色>);
column-rule-color——设置列之间的颜色规则;
column-rule-style——设置列之间的样式规则;
column-rule-width——设置列之间的宽度;
columns——设置column-span和column-width的简写属性;
column-span——指定元素横向能跨多少列;
column-width——指定列宽;
3)创建弹性盒布局(目前浏览器的支持不够统一,标准仍在变化中,以下属性均需加浏览器前缀)
box-align——如果内容元素的高度小于容器的高度,告诉浏览器如何处理多余的空间;
box-flex——指定元素的可伸缩性,应用于弹性盒容器内的元素;
box-pack——如果伸缩元素达到最大尺寸,告诉浏览器如何分配空间;
4)创建表格布局
display:table——类似table元素;
display:inline-table——类似table元素,但是创建一个行内元素;
display:table-caption——类似caption元素;
display:table-column——类似col元素;
display:table-column-group——类似colgroup元素;
display:table-header-group——类似thead元素;
display:table-row-group——类似tbody元素;
display:table-footer-group——类似tfooter元素;
display:table-row——类似tr元素;
display:table-cell——类似td元素;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海远地资产管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<style type="text/css">
/**position
img{
top:50px;
left: 150px;
border: medium double black;
}
*/
/**z-index
img{
border: medium double black;
background-color: lightgray;
position: fixed;
}
#sohu{
z-index: 1;
top:15px;
left:150px;
}
#china{
z-index: 2;
top:25px;
left: 120px;
}
*/
p{
column-count: 3;
column-width: 10em;
column-fill: balance;
column-rule: medium solid black;
column-gap: 1.5em;
}
img{
float: left;
border:medium double black;
background-color: lightgray;
padding: 2px;
margin: 2px;
}
</style>
</head>
<body>
<p>
远地本着“构筑诚信,永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
远地将通过自身的专业优势和有效的信息交流平台,为资金富裕方和资金需求方打造一个专业,诚信,共赢,睿智的服务平台,
帮助客户实现稳定、安全的财富增值,帮助更多优秀的中小型企业融资成功。
<img src="images/xw_sohu.png" id="sohu">
远地本着“构筑诚信,永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
远地将通过自身的专业优势和有效的信息交流平台,为资金富裕方和资金需求方打造一个专业,诚信,共赢,睿智的服务平台,
帮助客户实现稳定、安全的财富增值,帮助更多优秀的中小型企业融资成功。
<img src="images/xw_sohu.png" id="sohu">
远地本着“构筑诚信,永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
远地将通过自身的专业优势和有效的信息交流平台,为资金富裕方和资金需求方打造一个专业,诚信,共赢,睿智的服务平台,
帮助客户实现稳定、安全的财富增值,帮助更多优秀的中小型企业融资成功。
远地本着“构筑诚信,永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
远地将通过自身的专业优势和有效的信息交流平台,为资金富裕方和资金需求方打造一个专业,诚信,共赢,睿智的服务平台,
帮助客户实现稳定、安全的财富增值,帮助更多优秀的中小型企业融资成功。
</p>
<img src="images/xw_sohu.png" id="sohu">
<p>
远地本着“构筑诚信,永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
远地将通过自身的专业优势和有效的信息交流平台,为资金富裕方和资金需求方打造一个专业,诚信,共赢,睿智的服务平台,
帮助客户实现稳定、安全的财富增值,帮助更多优秀的中小型企业融资成功。
</p>
<img src="images/xw_sohu.png" id="sohu">
<img src="images/xw_china.png" id="china">
<p>
远地本着“构筑诚信,永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
远地将通过自身的专业优势和有效的信息交流平台,为资金富裕方和资金需求方打造一个专业,诚信,共赢,睿智的服务平台,
帮助客户实现稳定、安全的财富增值,帮助更多优秀的中小型企业融资成功。
</p>
<p>
<button>Static</button>
<button>Relative</button>
<button>Absolute</button>
<button>Fixed</button>
</p>
<!--position
<script>
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(e){
document.getElementById("sohu").style.position= e.target.innerHTML;
}
}
</script>
-->
</body>
</html>