Html布局笔记

来源：互联网发布：里诺软件编辑：程序博客网时间：2024/05/22 15:03

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>

效果如下

这里写图片描述

0 0