CSS基础(19)_绝对定位元素的水平或垂直布局

VIP文章风之舞_yjf

已于 2022-04-12 18:29:51 修改

阅读量939

点赞数 1

分类专栏： CSS 文章标签： css

于 2022-04-12 18:27:28 首次发布

本文链接：https://blog.csdn.net/no15870678621/article/details/124130407

版权

文档流中布局

一个元素在其父元素中，水平布局之前是要满足以下等式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区的宽度。

绝对定位元素布局

绝对定位元素的水平方向布局：
当我们开启了绝对定位后，此时脱离文档流相对于包含块布局，水平方向的布局等式就需要添加left和right两个值：left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块内容区的宽度。

绝对定位元素的垂直方向布局：
同理，垂直方向布局的等式也必须要满足:top+margin-top/bottom+padding-top/bottom+border-top/bottom+heigh=包含块内容区的高度。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/position_element_layout.css">
    <title>绝对定位元素的水平和垂直布局</title>
</head>