HTML/CSS -- 利用定位进行布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wust_cyl/article/details/85255582

1：实现高度已知，左宽度固定，右自适应

    <section>
        <style>
            .part2-content-wrap{
                position: relative;
            }
            .part2-content-wrap div{
                height: 100px;
            }
            .part2-content-left {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 300px;
                background: red;
            }
            .part2-content-right {
                 width: 100%;
                 padding-left: 300px;
                 box-sizing: border-box;
                 background: green;
                 text-align: center;
            }
        </style>
        <article>
            <div class = 'part2-content-wrap'>
                <div class  = "part2-content-left" ></div>
                <div class  = "part2-content-right" >
                    <h1>利用定位解决</h1>
                    <p>实现高度已知，左宽度固定，右自适应</p>
                </div>
            </div>
        </article>
    </section>

同理实现高度已知，右宽度固定，左自适应

2：实现高度已知，左右宽度固定，中间自适应

    <section>
        <style>
            .part1-content-wrap{
                position: relative;
            }
            .part1-content-wrap div{
                height: 100px;
            }
            .part1-content-left {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 300px;
                background: red;
            }
            .part1-content-right {
                position: absolute;
                top: 0px;
                right: 0px;
                width: 300px;
                background: yellow;
            }
            .part1-content-center {
                width: 100%;
                background:green;
                box-sizing: border-box;
                padding: 0 300px;
                text-align: center;
            }
        </style>
        <article>
            <div class = 'part1-content-wrap'>
                <div class  = "part1-content-left" ></div>
                <div class  = "part1-content-center" >
                    <h1>利用定位解决</h1>
                    <p>实现高度已知，左右宽度固定，中间自适应</p>
                </div>
                <div class  = "part1-content-right" ></div>
            </div>
        </article>
    </section>

3：实现宽度已知，上下高度度固定，中间自适应

      <style>
            .part3-content-wrap {
                position: relative;
                height: 100%;
            }
            .part3-content-wrap div {
                width: 300px;
            }
            .part3-content-top {
                position: absolute;
                top: 0px;
                height: 100px;
                background: red;
            }
            .part3-content-bottom {
                position: absolute;
                bottom: 0px;
                height: 100px;
                background: yellow;
            }
            .part3-content-center {
                 height: 100%;
                 padding: 100px 0 100px 0;
                 box-sizing: border-box;
                 background: green;
                 text-align: center;
            }
        </style>
    
        <div class = "part3-content-wrap" >
            <div class = "part3-content-top" ></div>
            <div class = "part3-content-center" >
                <h1>利用定位解决</h1>
                <p>实现宽度已知，上下高度度固定，中间自适应</p>
            </div>
            <div class = "part3-content-bottom" ></div>
        </div> 

通过relative和absolute我们可以方便的进行定位。

缺点也有，绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。当dom节点比较深的时候，绝对定位大大降低了页面的扩展性和维护性