CSS盒子模型

最新推荐文章于 2024-11-12 22:56:44 发布

Komorebi⁼

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量659

点赞数 18

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2302_81659011/article/details/142794008

版权

一、盒子模型

1、盒子模型的概念

在CSS视角下，所有HTML元素可以看作盒子、所谓的盒子在HTML中就是一个盛装元素内容的容器。

2、盒子模型

盒子由内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成。

二、盒子的属性

1、内容区

内容区的宽高使用width和height属性来设置盒子内容区域的大小

取值：数字＋px（像素）

#img1{
        width: 200px;
        height: 200px;
      }

2、边框

（1）单个属性

设置边框粗细、边框样式、边框颜色效果、

border-width：设置边框的粗细，数字+px
border-style：设置边框的样式（线型）

实线solid、虚线dashed、点线dotted

border-color：设置边框的颜色

#img1{
        border-width:10px ;
        border-color:red ;
        border-style:dashed ;
      }

（2）连写

使用border属性依次写出边框粗细、边框样式、边框颜色，取值之间用空格隔开，不用按顺序书写

 #img1{

         border: 3px red dashed;
        }

快捷键：bd+tab

3、内边距

（1）padding

设置边框与内容区域之间的距离，padding:10px;。

（2）border-radius

设置圆盒子边框四个角的弧度，border-radius: 10px;设置四个角的弧度。

想单独控制边框四个角的弧度，直接写就行（顺时针：左上角、右上角、右下角、左下角），border-radius: 0px 0px 30px 0px ;

 #img1{
           border-radius: 10px;
            border-radius: 0px 0px 30px 0px ;
            padding: 20px ;
        }

4、外边距

使用margin设置盒子外边距的大小 ,默认8px外边距，若要设置25外边距，应减去8

 #img1{
       margin: 22px ;
        }

可单独设置盒子的一边外边距，使用 margin-bottom、 margin-left等属性即可调整。

 #img1{
       margin-bottom: 50px;
       margin-left: 17px;
        }

以上内容举例：

<head>
    <style>
#img1{ background-color: gray ;
width: 200px;
height: 200px;
border: 3px red dashed;
border-radius: 0px 0px 30px 0px ;
padding: 20px ;
margin: 22px ;
}
    </style>
    
</head>
<body>
    <img src="../图片/日照金山.jpg" id="img1">
</body>
</html>

运行结果如下：

5、补充

在前面讲行内元素时，我们直到行内元素的宽高等属性是无法修改的，为了可以自由修改文本的宽高，我们可以将行内元素变成块元素。

属性名： display: block;

<head>
    <style>
 #p1{
            width: 300px;
            height: 30px;
            color: blue;
            background-color: red;
            display: block;
            margin: 55px;
        }
    </style>
    </style>
    
</head>
<body>
    <p id="p1">行内元素宽高的改变</p>
</body>
</html>

运行结果如下：