CSS 盒子模型(box model)

本文详细解释了CSS盒模型的概念,包括元素如何被视作一个包含内容、内边距、边框和外边距的盒子。作者通过生活中的快递比喻,阐述了内边距、边框和外边距的作用,以及如何通过CSS属性精确控制元素在页面上的位置和间距。
摘要由CSDN通过智能技术生成

概念


所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin),边框(border),内边距(padding),和实际内容(content)。

蓝色的是一个盒子,这是一个元素,这个元素包含内边距padding,边框和外边距。就像快递,易碎品外面套一层泡沫,然后再到外层包裹一个箱子,层层包裹 。每个盒子就是为了让你在布局的时候变的更加好看。

就是让元素在页面上面摆放的时候更容易的调整位置和间距,因为内容和内容之间是需要间距的。

一个元素由自身,内边距和边框和外边距组成,来摆放蓝色框在页面中的位置了。

如果把盒子模型看作是一个生活中的快递,那么内容部分等同于你买的实物,内边距等同于快递盒子中的泡沫,边框等同于快递盒子,外边距等同于两个快递盒子之间的距离。

Content(内容)          盒子的内容,显示文本和图像 

内容文字图片是实物,然后内边距,边框,外边距。 

    <style>
        /*宽度和高度就是自身的大小,也就是实际内容的大小*/
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
<div>
</div>

这个是页面中100*100的方块,这个就是内容的实际大小。

Padding(内边距 到div边的距离)   撑大自己给元素空隙  设置里面内容的位置(子标签到div的距离)

设置padding之后盒子变大了,之前盒子多出来的部分就做内边距的空隙。如果盒子里面没有内容可以通过宽高来设定。

    <style>
        /*宽度和高度就是自身的大小,也就是实际内容的大小*/
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
<div>
</div>

 如果盒子里面有内容,就需要考虑摆放的样式了。

    <style>
        /*宽度和高度就是自身的大小,也就是实际内容的大小*/
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
<div>
    xxxxxxxxxxxx
</div>

    <style>
        /*宽度和高度就是自身的大小,也就是实际内容的大小*/
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px
        }
    </style>
</head>

<body>
<div>
    xxxxxxxxxxxx
</div>

盒子虽然变大了但是内容在往中间挤,中间的内容还是在盒子的左上角,剩下的是内边距帮你填充的。为了是好看,不让内容贴着左上角去显示。内边距是撑大自身大小来给元素一些空隙,这样可以更加好的展示(离上边 下边 左边 右边 都是相应的扩大面积)。

内容在盒子100px*100px的左上角,如果不希望有这样的空隙,那么就不需要设置内边距。

内边距主要作用是把自身撑大,但是本身的自身只有100px*100px。只是看起来像变大了

padding一般分为两个值。上下是一个值,左右是一个值。上下是50px,左右是10px,按照双值来设定,上下为50px,第二个值为左右。

        div{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px 10px;
        }
    </style>
</head>

<body>
<div>
    xxxxxxxxxxxx
</div>

Border(边框)            围绕在内边距和内容外的边框 

        div{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px 10px;
            border: 5px solid;
        }
    </style>
</head>

<body>
<div>
    xxxxxxxxxxxx
</div>

 Margin(外边距)        元素之间的边距  影响div和div之间的距离

    <style>
        /*宽度和高度就是自身的大小,也就是实际内容的大小*/
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px 10px;
            border: 5px solid;
            margin: 100px;
        }
    </style>
</head>

<body>
<div>
    xxxxxxxxxxxx
</div>

<style>
        /*宽度和高度就是自身的大小,也就是实际内容的大小*/
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px 10px;
            border: 5px solid;
            margin: 100px;
        }
    </style>
</head>

<body>
<div>
    xxxxxxxxxxxx
</div>
哈哈

当前内容的上下左都是100px ,因为右边没有元素效果是没有的。这个也是元素与元素这件的空隙,也是让元素好看。 

两个并没有挨宰一起,中间也有空隙,就是通过外边距处理的。margin也一样,有两个值,上下,左右,也可以指定一个方向的值。

  • 21
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值