盒子模型的概念以及盒子的属性

13 iug^

于 2024-10-11 11:09:57 发布

阅读量311

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/2401_87197766/article/details/142795410

版权

一、概念

1、在CSS视角下，所有HTML元素可以看作盒子。所谓的盒子在HTML中就是一个盛装元素内容的容器。盒子由内容区（content）,内边距（padding）,边框（border），外边距（margin）组成。

2、盒子的尺寸：总宽度（左外边距+边框+左内边距+右外边距+边框+右内边距）和总高度（上外边距+边框+上内边距+下外边距+边框+下内边距）

二、盒子的属性

1、内容区：宽width,高height

块级元素可以直接通过CSS设置宽高，但是行内元素默认情况下不可以。如果要设置行内元素的宽高，需在CSS代码中添加display:bolock;

<head>
    <style>
        #img1{
            /* 设置盒子内容物的宽高 */
            width:200px;
            height: 200px;
            border: 1px burlywood solid;
        }
        #ins1{
            width: 300px;
            height: 20px;
            border: 1px greenyellow solid;
            display: block;


        }
    </style>
</head>
<body>
    <img src="C:\Users\cloud\Desktop\盒子\风景.jpg" id="img1">
    <ins id="ins1">我是下划线文本：行内元素</ins>
</body>

2、边框：

（1）border:四边宽度样式颜色；（border-width border-style border-color）

 <style>
        #img{
            border: 2px solid red;
        }
 </style>

（2）border-top：上边框宽度样式颜色；border-right：右边框宽度样式颜色；

border-bottom：下边框宽度样式颜色；border-left：左边框宽度样式颜色；

<style>
        #img1{
            border-top: 2px solid yellow;
            border-right: 3px solid green;
            border-bottom: 4px solid gray;
            border-left: 5px solid red;
        }
 </style>

（3）CSS新增属性：圆角边框（border-radius）

 border-radius: 10px;

3、内边距

（1）padding:四个方向内边距；(四个方向一起设置)

<style>
        #img2{
            padding: 10px;
        }
</style>

（2）padding-top：上内边距；padding-right：右内边距；padding-bottom：下内边距；padding-left：左内边距；

<style>
        #img3{
            /* 设置上内边距 */
            padding-top: 10px;
             /* 设置下内边距 */
            padding-bottom: 20px;
             /* 设置左内边距 */
            padding-left: 30px;
             /* 设置右内边距 */
            padding-right: 40px;
        }
 </style>

4、外边距

（1）margin:四个方向外边距；(四个方向一起设置)

<style>
        #img4{
            margin: 50px;
        }
</style>

（2）margin-top：上外边距；margin-right：右外边距；margin-bottom：下外边距；margin-left：左外边距；

 <style>
        #img5{
            /* 设置上外边距 */
            margin-top: 10px;
            /* 设置下外边距 */
            margin-bottom: 20px;
            /* 设置左外边距 */
            margin-left: 30px;
            /* 设置右外边距 */
            margin-right: 40px;
        }
  </style>

注意：外边距始终是透明的（不受背景填充颜色影响）。