position 包含块

position 包含块

1. 定位元素参照于包含块来定位

2. 什么是初始包含块

3. left top right bottom width height 默认值 auto

4. margin padding 默认值 0

5. 百分比参照于谁？width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 400px;
            height: 300px;
            margin: 100px;
            padding: 100px;
            background: deeppink;
        }
        #inner{
            width: 50%;
            height: 50%;
            margin: 10%;
            padding: 10%;
            background: pink;
            /*margin: 100px 100px;*/
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="inner">

    </div>
</div>
</body>
</html>

 

 

 

posted @ 2021-02-10 10:02  xiluhua  阅读(65)  评论(0)  编辑  收藏  举报