（一）HTML 整体布局

最新推荐文章于 2024-09-04 18:16:53 发布

安卓学吧

最新推荐文章于 2024-09-04 18:16:53 发布

阅读量874

点赞数

分类专栏： JavaEE基础

本文链接：https://blog.csdn.net/android_bar/article/details/57920451

版权

本文详细介绍了HTML中的盒子模型，包括为什么需要盒子模型、盒子模型的各个属性（margin, border, padding）以及它们的计算方式。进一步讨论了盒模型的层次关系，并通过实例解释了如何实现页面元素的水平和垂直居中。此外，还探讨了浮动属性float的重要性和使用，以及如何利用float实现元素的并排布局，并讲解了clear属性用于清除浮动的效果。" 135882229,1270972,Modern C++ std::shared_ptr线程安全分析：reset()与中间状态,"['C++', '开发语言', '内存管理', '多线程']

摘要由CSDN通过智能技术生成

1、为什么需要盒子模型？

    网页可以看成由一个个"盒子"组成，如图：


    由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，
    中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个
    的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来

2、盒子模型的相关属性

margin（外边距/边界）
border（边框）
padding（内边距/填充）

     我们看图理解一下各属性作用：



     以上属性又分为上、右、下、左四个方向

     问题：页面元素的宽度width、高度height如何计算？
     答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度

3、盒模型的层次关系

    我们通过一个经典的盒模型3D立体结构图来理解，如图：


     从上往下看，层次关系如下：

     第1层：盒子的边框(border)，
     第2层：元素的内容(content)、内边距(padding)
     第3层：背景图(background-image)
     第4层：背景色(background-color)
     第5层：盒子的外边距(margin)

     从这个层次关系中可以看出，当同时设置背景图和背景色时，背景图将在背景色的上方显示

4、margin外边距

    可统一设置或四边分开设置，如图：





5、水平居中和垂直居中

    水平居中包含两种情况：
        块组件的水平居中：margin:0px auto;
        行内组件的水平居中：text-align: center;

    垂直居中：
        常见的单行文字的垂直居中可设置文字所在行的height与
        行高样式属性一致，比如：
        div{
            width: 400px;
            height: 400px;
            line-height: 400px;/*行高与div高度一致*/
        }

6、案例的首页布局分析

         只保留DIV的布局分析：



7、首页布局CSS + DIV代码分析

    HTML结构代码：
    <div id="Container">
            <div id="header">顶部（header）</div>
            <div id="main">主体部分（main）</div>
            <div id="footer">底部（footer）</div>
    </div>

    CSS样式代码：
    /*主面板样式*/
    #container {
        width:980px;
        margin:0px auto;/*主面板DIV居中*/
    }
   /*顶部面板样式*/
    #header {
        width:100%;
        height:150px;
        border:1px #F00 solid;
    }
    /*中间部分面板样式*/
    #main {
        width:100%;
        height:400px;
        border:1px #F00 solid;
    }
    /*底部面板样式*/
    #footer {
        width:100%;
        height:100px;
        border:1px #F00 solid;
    }

8、为什么需要float浮动属性？

    我们来看看下图：



    问题：如何让商品分类DIV、内容DIV和右侧DIV并排放置？