布局技巧与实践：从静态到固定定位-优快云博客

本文链接：https://blog.youkuaiyun.com/bboyjoe/article/details/46863127

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>

CSS的布局属性