27-自适应

2019-09-06 18:53:36 作者：互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            height: 60px;
            margin-left: 200px;
            margin-right: 100px;
            background: pink;
        }
        .left{
            /*position: absolute;*/
            /*top: 0;*/
            /*left: 0;*/
            float: left;
            width: 200px;
            height: 60px;
            background-color: yellow;
        }
        .right{
            /*position: absolute;*/
            /*top: 0;*/
            /*right: 0;*/
            float: right;
            width: 100px;
            height: 60px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="wrap"></div>
<div class="left"></div>
<div class="right"></div>
<!--
    当浏览器宽度变化时  没有设置宽度
        wrap在自身宽度发生变化的同时
        始终保持和浏览器左边200px  右边100px的距离
-->
</body>
</html>

标签：27,60px,height,适应,right,background,margin,left
来源： https://www.cnblogs.com/zhangyu666/p/11477499.html