Web开发初探:网页布局盒子模型

最新推荐文章于 2025-03-04 11:59:10 发布

五彩大铁猿

最新推荐文章于 2025-03-04 11:59:10 发布

阅读量2.1k

点赞数 5

分类专栏： web 文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/weixin_47314602/article/details/126195989

版权

web 专栏收录该内容

8 篇文章

订阅专栏

网页布局盒子模型

所有的HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用的。CSS盒模型本质上是一个盒子，封装周围的Html元素，它包括：边距、边框、填充和实际内容。和模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下图说明了盒子模型（Box Model）：

不同部分说明：

Margin（外边距）：清除边框外的区域，外边距是透明的。

Border（边框）：围绕在内边距和内容外的边框。

Padding（内边距）：清除内容周围的区域，内边距是透明的。

Content（内容）：盒子的内容，显示文本和图像。

Margin（外边距）例子：

我们以box_1样式为例

#box_1{

border: 10px solid blue;/*solid实心的*/

width: 250px;

height: 250px;

margin: 30px;

float: left;

}

在这边直接设置margin得到的效果是box_1的四周外边距皆为50px

效果：

如果我们要实现外边距单边又该如何做呢？

可以看到里面有多种选择可选，根据自己需求选择。

例子：margin-left: 30px;（左边外边距）

效果：

Border（边框）例子：

还是以Box_1为例子，上面我们所看到的的图形蓝、粉、黑这三种颜色就是在border中设置的。

#box_1{

border: 10px solid blue;/*solid实心的*/

width: 250px;

height: 250px;

margin: 30px;

float: left;

}

Padding（内边距）例子：

继续以Box_1为例子

#box_1{

border: 10px solid blue;/*solid实心的*/

width: 250px;

height: 250px;

margin: 30px;

float: left;

padding: 10px;

}

我们可以看到设置完padding（内边距）后，我们的hello就没有顶着格子，整体看起来也会舒服很多，这就是我们内边距的作用。

效果：

同样的padding也可以单独设置一边，按自己的需求选择。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Box_Model</title>
    <style type="text/css">
        #box_1{
            border: 10px solid blue;/*solid实心的*/
            width: 250px;
            height: 250px;
            margin: 30px;
            float: left;
            padding: 10px;

        }
        #box_2{
            border: 10px solid palevioletred;/*solid实心的*/
            width: 250px;
            height: 250px;
            float: left;

        }
        #box_3{
            border: 10px solid black;/*solid实心的*/
            width: 250px;
            height: 250px;
            float: left;
       
        }
    </style>
</head>

<body>
    <div id="box_1">
     <p>hello</p>
    </div>
    <div id="box_2">
        <p>welcome</p>
       </div>
    <div id="box_3">
        <p>hi</p>
       </div>
</body>
</html>

补充知识点float：

float属性解释为浮动，那么究竟是什么意思呢？

float是一种定位机制，css有3中定位（普通流、float浮动、position定位）
float可以使块状元素脱离文档流，在布局中浮动起来，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘，文档的普通流中的元素表现的就像浮动元素不存在一样.

float属性值有以下几种用法。

CSS语法：

float：left/right/none/inherit;

属性值：

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并显示在其文本中出现的位置
inherit	规定应该从父元素继承float属性的值

float:left 应该理解为：在自己本身的位置上脱离文档流，元素从包含框的右边缘向左移动，直到碰到包含框的左边缘或者其他浮动元素框停下，当空间不足以绘制自己则另起一行。

float:right 应该理解为：在自己本身的位置上脱离文档流，元素从包含框的左边缘向右移动，直到碰到包含框的右边缘或者其他浮动元素的框停下，当空间不足以绘制自己则另起一行。

小结：创作不易，如果觉得有用的话点赞收藏一下，不然下次找不到了哟。