css 盒子模型应用

Posted 2022-02-18 kikyoqiang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 盒子模型应用相关的知识，希望对你有一定的参考价值。

盒子模型应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>盒子模型应用</title>
    <style type="text/css">
        * 
            margin: 0;
            padding: 0;
        

        .top 
            width: 100%;
            height: 50px;
            background-color: black;
        

        .top_content 
            width: 75%;
            height: 50px;
            margin: 0px auto;
            background-color: blue;
        

        .body 
            margin: 20px auto;
            width: 75%;
            height: 1500px;
            background-color: blanchedalmond;
        

        .body_img 
            width: 100%;
            height: 400px;
            background-color: darkorange;
        

        .body_content 
            width: 100%;
            height: 111px;
            background-color: blueviolet;
        

        .body_no 
            width: 100%;
            height: 50px;
            background-color: aqua;
        

        .footing 
            width: 75%;
            height: 400px;
            background-color: indigo;
            margin: 0px auto;
        

        .footing_content 
            width: 100%;
            height: 330px;
            background-color: darkseagreen;
        

        .footing_subnav 
            width: 100%;
            height: 70px;
            background-color: black;
        
    </style>
</head>
<body>
    <div class="top">
        <div class="top_content">
        </div>
    </div>
    <div class="body">
        <div class="body_img"></div>
        <div class="body_content">
            <div class="body_no"></div>
        </div>
    </div>
    <div class="footing">
        <div class="footing_content"> </div>
        <div class="footing_subnav"> </div>
    </div>
</body>
</html>

以上是关于css 盒子模型应用的主要内容，如果未能解决你的问题，请参考以下文章

CSS 盒子模型详解 IE盒子模型实际应用——把Border设置成不改变宽度高度的内边框

CSS盒子模型

CSS中的标准盒子模型和怪异盒子模型

css,关于盒子模型

请简述 css 盒子模型与css怪异盒模型

什么是css盒子模式（框模型）