Html布局笔记

text-align:center
相当于TextView中的gravity=”center-horizontal”,当前标签内容水平居中。
vertical_align:middle
垂直居中,使用是有条件的:

1、display:inline-block;
2、line-height:200px /行高为当前标签的高度/

padding-bottom
app中常常用到weight权重来布局适配手机,同样,在html中,我们同样可以相似的使用padding-bottom来做,当padding-bottom取值%时,看文档有“% 定义基于父元素宽度的百分比下内边距。”的说明。

<style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .parent {
            width: 50%;
            padding-bottom: 20%;
            margin-left: 25%;
            float: left;
            background-color: #cccccc;
            padding: 10px;
        }

        .box1 {
            width: 50%;
            padding-bottom: 20%;
            float: left;
            background: #897642;
        }

        .box2 {
            width: 50%;
            padding-bottom: 10%;
            float: right;
            background: #1E8977;
        }

        .box3 {
            width: 50%;
            padding-bottom: 10%;
            float: right;
            background: #6B2590;
        }
    style>
------------------------------------------------
<body>
<div class="parent">
    <div class="box1">div>
    <div class="box2">div>
    <div class="box3">div>
div>
body>

效果如下

Html布局笔记_第1张图片

你可能感兴趣的:(Html5,html,布局)