布局模型

最新推荐文章于 2021-06-03 13:49:12 发布

万寺院的和尚

最新推荐文章于 2021-06-03 13:49:12 发布

阅读量330

点赞数

分类专栏：网页基础

本文链接：https://blog.csdn.net/bjnihao/article/details/51850852

版权

网页基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在网页中，元素有三种布局模型：
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 个句之一：

position : absolute
float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

万寺院的和尚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局模型

在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer）模型有三种形式：1、绝对定位(position: absolute)：相对于父块而言，如果没有就是相对body元素定位元素加入absolute2、相对定位(position: relative) 相对于元素之前所在的位置而言参照定位必须加入relative
复制链接

扫一扫