css 盒子模型

最新推荐文章于 2025-07-03 11:04:06 发布

sun_smile1

最新推荐文章于 2025-07-03 11:04:06 发布

阅读量223

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sun_smile1/article/details/71271785

本文详细介绍了CSS盒子模型的各个组成部分，包括内容、填充、边框和边界等关键属性。讲解了如何通过设置这些属性实现元素的布局调整和美化，如圆角边框和阴影效果。

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

盒子模型的属性：内容（content）、填充（padding）、边框（border）、边界（margin）

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现元素的背景，边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡后面的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默认值为零。但是，元素样式默认的设置了外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。这可以分别进行，也可以通过使用通用选择器对所有元素进行设置：

*{
    margin: 0;
    padding: 0;
}-----清除了浏览器所有元素的默认设置的边距

提示：在CSS中，width和height指的是内容区域的宽度和和高度。增加内边距、边框和外边距不会影响

内容区域的尺寸，但是会增加元素框的总尺寸。

1.margin----边界，最外的空白边。默认值为0。

margin为复合属性，可以使用下列任何一个属性来只设置相应的外边距，而不会直接影响所有其他外边

距：margin-top、margin-right、margin-bottom、margin-left

也可以通过使用复合属性margin来设置,

p{margin：10px 20px 30px 40px；}

当有四个值时，顺序为上 右 下 左

当有三个值时，顺序为上值  左右值 下值 
当有两个值时，顺序为上下值 左右值
当有一个值时，顺序为上下左右都为一个值
margin也可以设置为auto（自动）
p{margin：0 auto}   表示为居中显示
2.border------边框，规定元素边框的样式 宽度 颜色

复合元素，可以使用下列任何一个属性来只设置相应的外边距，而不会直接影响所有其他外边距：border-top、border-right、border-bottom、border-left
也可以通过border-top-width设置上边框的宽度等。
div{border：1px solid red}表示边框宽度为1px，样式为实心，颜色为颜色
例：
div{
    width: 100px;
    height: 100px;
    background-color: #ff6600;
    /*宽度  样式   颜色*/
    border: 1px solid red;
    border-top: 10px groove yellow;
}

3.padding-----填充，元素边框与元素内容之间的空白区域。

内边距。padding属性接受长度值或百分比值，但不允许使用负值。

且与margin一样为复合属性，可以使用下列任何一个属性来只设置相应的外边距，而不会直接影响所有其他外边距：padding-top、padding-right、padding-bottom、padding-left
也可以通过使用复合属性padding来设置,
p{padding：10px 20px 30px 40px；}
当有四个值时，顺序为上 右 下 左
当有三个值时，顺序为上值  左右值 下值 
当有两个值时，顺序为上下值 左右值
当有一个值时，顺序为上下左右都为一个值

4.盒子弧度----border-radius
通过设置值来实现圆角边框。与margin一样为复合属性，设置四个值顺序为上右下左。
以下例子为设置值来实现的圆形。
<style>
    
    .a1{
        width: 200px;
        height: 200px;
        background-color: #4d2e83;
        border-radius:100px;
    }
    .a2{
        width: 400px;
        height: 400px;
        background-color: yellow;
        /*overflow   hidden与margin配合，居中*/
        overflow: hidden;
        border-radius: 200px;
    }
    .a3{
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 0 auto;
        margin-top: 100px;
        border-radius: 100px;
    }
</style>
<body>
<div class="a1"></div>
<div class="a2">
    <div class="a3"></div>
</div>
</body>

5.盒子阴影-----box-shadow
复合属性，1：x方向的偏移    2：y方向的偏移   3：阴影模糊程度
        4：阴影模糊半径    5：阴影颜色
实例
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: #FF6500;
        /*阴影  1：x方向的偏移    2：y方向的偏移
               3：阴影模糊程度    4：阴影模糊半径
               5：阴影颜色*/
        box-shadow: 10px 20px 10px 5px red;
    }
</style>
<body>
<div></div>
</body>