android 布局引用布局引用模型

转载

云中谁寄锦书来 2023-06-27 21:16:43

文章标签 android 布局引用垂直居中块状元素 Chrome 文章分类 Android 移动开发

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

模型有三种形式：

1、绝对定位(position: absolute)：

相对于父块而言，如果没有就是相对body元素
定位元素加入absolute

2、相对定位(position: relative)

相对于元素之前所在的位置而言
参照定位必须加入relative

3、固定定位(position: fixed)

位置是固定的

水平居中设置-行内元素

text-align:center

水平居中设置-定宽块状元素（设置width属性值）

margin:20px auto;
/* margin-left 与 margin-right 设置为 auto */

不定宽度（比如分页）的块状元素有三种方法居中（这三种方法目前使用的都很多）：

加入 table 标签,设置margin左右为auto属性
设置 display: inline 方法：与第一种类似，显示类型设为行内元素，然后使用 text-align:center 来实现居中效果
设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

垂直居中-父元素高度确定的单行文本

是通过设置父元素的 height 和 line-height 高度一致来实现的

<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>
<div class="container">
    hi,imooc!
</div>

垂直居中-父元素高度确定的多行文本（方法一）

<style>
table td{
    height:500px;
    background:#ccc;
}
</style>

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

说明：

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，

垂直居中-父元素高度确定的多行文本（方法二）

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：