HTML 盒子模型初级使用

最新推荐文章于 2023-07-12 20:20:41 发布

爱睡觉的小馨

最新推荐文章于 2023-07-12 20:20:41 发布

阅读量1.2k

点赞数 4

分类专栏： HTML与CSS5网页设计

本文链接：https://blog.csdn.net/qq_45696288/article/details/108454515

版权

HTML与CSS5网页设计专栏收录该内容

21 篇文章 7 订阅

订阅专栏

为什么引入盒子模型？

首先，为什么要引进盒子模型呢？
先看一下前面我说举的一个例题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        
        <style>
            
            h2{
                    color: sienna;
            }

            h4{
                color:skyblue;
            }

            span{
                color: skyblue;
                
            }

            nobr{
                color: tomato;
                font-size: 22px;
            }

            div{
                color: sienna; font-size: 22px;
            }

        </style>

</head>

<body>

        <img src="images/coffee.jpg"  alt = "Web前端开发工程师"   hspace = "30"   align = "left" />

        <h2> Web前端开发工程师 </h2>

        <h4>技术要求:</h4>

        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;了解常用的一些Js框架，如jQuery、YUI等，掌握最基本的JavaScript计算方法编写﹔
            对目前互联网流行的网页制作方法(Web2.o)HTML+SS，以及各大浏览器兼容性有较多的了解﹔基本掌握前沿技术（HTML5+CSS3)。
            <span><u><em>Web前端技术</em></u></span>你究竟掌握了多少...
        </p>
        <p>
            <span>
                更新时间：2019年05月19日20点（已有<nobr>323</nobr>人点赞）
            </span>
        </p>

        <hr>

        <div>
            相关技术文章<nobr>8</nobr>篇
        </div>
    
</body>

</html>

结果的显示：
在这里插入图片描述
你看到的结果虽然很正确，很好，但是，当缩放页面的时候排版就会出现问题：（如下：）

如何引用并使用盒子模型（初）：

设置镶嵌的 class 类进行分块：
例如：

<body>
    
    <div class="box">

    <div class="left">
            <img src="images/coffee.jpg" alt="">
    </div>

    <div class="right">
            <h2>Web前端开发工程师</h2>
            <h4>技术要求:</h4>

            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;了解常用的一些Js框架，如jQuery、YUI等，掌握最基本的JavaScript计算方法编写﹔
                对目前互联网流行的网页制作方法(Web2.o)HTML+SS，以及各大浏览器兼容性有较多的了解﹔基本掌握前沿技术（HTML5+CSS3)。
                <span><u><em>Web前端技术</em></u></span>你究竟掌握了多少...
            </p>
            <p>
                <span>
                    更新时间：2019年05月19日20点（已有<nobr>323</nobr>人点赞）
                </span>
            </p>
    
            <hr>
    
            <p style="color: sienna; font-size: 22px;">
                相关技术文章<nobr>8</nobr>篇
              </p>
    </div>

    </div>

</body>

在上面的body标签中，使用了三个类
最外面的class类是设置一个最大的容器（最大的块元素）
然后再在最大的块元素内设置不同的小块元素
这样将文字图片放到块元素内，就会保证缩放页面的时候不会出现排版乱序的问题了

在这里插入图片描述

整体运行的结果和最上面的例题是同样的结果，只不过这个不会随着页面的缩放而发生排版的乱序问题。
说明：

上面的属性中，如果是margin的话，就是距离上下左右的像素距离
而margin-top是距离上面的像素距离
补充
在这里插入图片描述
上面表示，当margin属性内写的元素个数不同的时候，按照顺序分别表示距离哪个方向的距离
说明：
padding 属性设置元素的内边距。
padding 属性定义元素边框与元素内容之间的空间。
注意：
padding属性内写的元素的个数代表的什么含义和上面的margin属性的含义相同

在这里插入图片描述

因为有的浏览器已经设置了自己的样式，自己的方向的距离，所以可以先用这几行代码将原本浏览器自带的边距样式进行清除。

盒子模型小测验：

在这里插入图片描述
在网页中设置上图的样式，其中给出图片：
解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=S, initial-scale=1.0">
    <title>Document</title>

            <style>

                    .all{
                        width: 150px;;
                        height: 278px;
                        margin: 50px auto;
                        font-family: "微软雅黑" ;
                        font-size: 16px;
                        /* background: aqua; */
                    }

                    .down p{
                        width: 20;
                        height: 33x;
                        /* background: darkgoldenrod; */
                        border: 1px solid rgb(0, 0, 0);
                        margin-top: 2px;
                        padding-left: 10px;
                        line-height: 30px;
                    }

            </style>    

</head>

<body>

    <div class="all">

            <div class="up">
                    <img src="images/user.jpg">
            </div>

            <div class="down">
                    <p>用户姓名：</p>
                    <p>学习进度：</p>
                    <p>兴趣爱好：</p>
                    <p>参与的群：</p>
            </div>

    </div>
    
</body>

</html>

在这里插入图片描述

爱睡觉的小馨

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 盒子模型初级使用

为什么引入盒子模型？首先，为什么要引进盒子模型呢？先看一下前面我说举的一个例题：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>.
复制链接

扫一扫