CSS的布局属性

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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值