(十五)CSS盒模型01

最新推荐文章于 2024-10-07 19:39:47 发布

cdxsc2015

最新推荐文章于 2024-10-07 19:39:47 发布

阅读量68

点赞数

分类专栏： 0基础学前端文章标签： css

本文链接：https://blog.csdn.net/cdxsc2015/article/details/119392856

版权

0基础学前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

盒模型的组成

（1）width 宽
（2）height 高
（3）boder 边框
（4）padding 内边距
（5）margin 外边距

书写元素的区域

区域：width+height区域内

盒子可实体化区域

区域：width +height +border +padding

盒子实际占位的区域

区域：width +height +padding +border+margin

在这里插入图片描述

宽度width

作用：设置可以添加元素内容的区域的宽度
属性值：
（1）px 像素
（2）% 设置为父元素宽度的百分之多少
（3）auto 采用默认值，浏览器会计算出实际的宽度
注意：
（1）如果一个元素不设置宽度，那么该元素width为auto
（2）如果是块级元素，例如div这种，独占一行的元素，auto时，会是父级元素宽度100%
（3）如果是行内元素，例如span auto时，会根据元素内部的内容决定其宽度
（4）body的宽度是随浏览器窗口大小的改变而改变的

高度height

作用：设置可以添加元素内容的区域的高度
属性值：
（1）px 像素
（2）% 设置为父元素高度的百分之多少
（3）auto 采用默认值，浏览器会计算出实际的高度
注意：
（1）如果一个元素不设置高度，那么该元素height为auto
（2）元素的高度自适应元素内部内容的高度

内边距 padding

作用：设置元素内容的边框内部到内容宽度高度之间的距离
特点：可以去加载背景，不能书写嵌套的内容
属性值：
（1）常用px为单位的数值
注意：
（1）padding 是一个复合属性，可以设置左右上下四个内边距
（2）根据不同的需求，书写方式有所差异
上下左右分别设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #ccc;
            padding-left: 10px;
            padding-right: 20px;
            padding-top: 30px;
            padding-bottom: 40px;
        }
    </style>
</head>
<body>
    <div class="box">这是一个div盒子</div>
</body>
</html>

4个值：上右下左顺时针

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #ccc;
            padding: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div class="box">这是一个div盒子</div>
</body>
</html>

3个值：上左右下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #ccc;
            padding: 10px 30px 40px;
        }
    </style>
</head>
<body>
    <div class="box">这是一个div盒子</div>
</body>
</html>

2个值：上下左右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #ccc;
            padding: 10px 40px;
        }
    </style>
</head>
<body>
    <div class="box">这是一个div盒子</div>
</body>
</html>

1个值：上下左右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #ccc;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div class="box">这是一个div盒子</div>
</body>
</html>