牛客网CSS布局

理解CSS盒模型：从content-box到fixed定位

最新推荐文章于 2025-12-03 09:54:23 发布

原创

最新推荐文章于 2025-12-03 09:54:23 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文深入探讨了CSS盒模型的不同类型，从标准的content-box模型到CSS2的border-box模型，再到CSS3的外边距折叠、浮动、定位（static, relative, absolute, fixed）等概念。通过实例代码展示了如何使用这些特性来控制元素的布局和位置，以及在实际应用中如何利用z-index实现层叠效果。同时，文章还介绍了flexbox和grid布局，以及它们在创建单列、双列和三列布局中的应用，最后提到了一些经典的布局技巧如圣杯布局和双飞翼布局。

CSS1 盒模型 - content-box

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div class="content-box"></div>
    </body>
</html>

CSS2 盒模型 - border-box

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
    	<div class="border-box"></div>
    </body>
</html>

CSS3 盒模型- 外边距折叠

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <section class="top"></section>
        <section class="bottom"></section>
    </body>
</html>

CSS4 浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
    	<div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </body>
</html>

CSS5 浮动 - 清除

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .media {
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
    	<section>
            <div class="media"></div>
            <p>hello</p>
            <p class="clear-left">universe</p>
        </section>
    </body>
</html>

CSS6 定位 - static

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            section {
                width: 100px;
                height: 100px;
                background-color: black;
            }
        </style>
    </head>
    <body>
    	<section></section>
    </body>
</html>

CSS7 定位 - inherit

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .outer {
                width: 100px;
                height: 100px;
                background-color: black;
            }
            .inner {
                width: 80px;
                height: 80px;
                background-color: red;
            }
        </style>
    </head>
    <body>
    	<section class="outer">
            <section class="inner">
                
            </section>
        </section>
    </body>
</html>

CSS8 定位 - absolute

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .outer {
                width: 100px;
                height: 100px;
            }
            .middle {
                width: 100px;
                height: 100px;
            }
            .inner {
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
    	<div class="outer">
            <div class="middle">
                <div class="inner">
                    
                </div>
            </div>
        </div>
    </body>
</html>

CSS9 定位 - absolute - 评注

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            article {
                margin-left: 10rem;
            }
            aside {
                width: 5rem;
                padding: 1rem;
                color: white;
                background-color: pink;
                border-radius: 0.5rem;
            }
            aside:after {
                content: '';
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border: 0.5rem solid pink;
                border-bottom-color: transparent;
                border-right-color: transparent;
                right: -1rem;
                top: 0.5rem;
            }
            .note {
                color: green;
                text-decoration-line: underline;