CSS的盒子模型

最新推荐文章于 2025-03-26 19:45:04 发布

手可摘星辰^v^

最新推荐文章于 2025-03-26 19:45:04 发布

阅读量271

点赞数 3

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/m0_72959685/article/details/126148285

版权

本文详细解读了网页布局中的关键概念——内容区、边框样式、内边距和外边距，通过实例演示如何设置宽度、高度、颜色、边框属性，并展示了简写方法。掌握这些，有助于提升HTML/CSS布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、盒子模型的四个元素

1.content内容区

元素中所有的子元素和文本内容都在内容区中排列

width 设置内容区的宽度

height 设置内容区的高度

background-color 设置内容区的颜se

p{
    width:25px;
    height:25px
    background-color:red;
}

2.border 设置边框

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

设置边框必须指定三个样式分别是颜色，大小，样式

例：border：2px solid red；

  p{
            width:350px ;
            height: 350px;
            background-color:white ;
            margin:0px ;
            padding: 0px;
            border: 5px solid red;
        }

border-color: ; 设置边框的颜色

有默认值，默认颜色是黑色

可以写多个颜色以空格隔开

4个上右下左

3个上左右下

2个上下左右

1个上下左右

也可以设置边框某一边的颜色

border-xxx-color xxx指的是它的某一边，可选值有top right bottom left

border-width：；设置边框的大小

边框大小的设置和边框颜色的设置是一致的

border-style: ; 设置边框的样式

none 默认值

solid 实线

dashed 虚线

dotted 点状虚线

double 双线

3.内边距（padding）：内边距是内容区到边框的距离

其实内边距的形式和边框的形式属于异曲同工

padding-top 上内边距

padding-right 右内边距

padding-bottom 下内边距

padding-left 左内边距

例：padding：30px 30px 30px 30px；

  p{
            width:350px ;
            height: 350px;
            background-color:white ;
            margin:0px ;
            padding：30px  30px  30px  30px；
            border: 5px solid red;
        }

也可以简写，简写的样式和border是一致的

4.margin（外边距）

margin 简写属性在一个声明中设置所有当前或者指定元素外边距属性。

该属性可以有 1 到 4 个值。

margin 属性可以单独改变元素的上，下，左，右边距。

也可以一次改变所有的属性。

margin也有简写方法，简写方式和padding、border是一致的

例：margin：30px ；

  p{
            width:350px ;
            height: 350px;
            background-color:white ;
            margin:30px ;
            padding：30px；
            border: 5px solid red;
        }