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

缺乏、安全感 2022-04-02 08:25 272阅读 0赞

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

![20181225230523783.png][]

<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：实现高度已知，左右宽度固定，中间自适应

![20181225230834573.png][]

<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：实现宽度已知，上下高度度固定，中间自适应

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

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

[20181225230523783.png]: /images/20220402/cec55d8b0b10473c8ee3d4b8cef2e57f.png
[20181225230834573.png]: /images/20220402/3a44a19aae3c48fba47e263701257cb0.png