Css盒子模型及属性

最新推荐文章于 2024-05-19 17:21:21 发布

qq_53667037

最新推荐文章于 2024-05-19 17:21:21 发布

阅读量86

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_53667037/article/details/125879046

版权

盒子模型是网页设计的一种思维模式，有四个部分组成，由内到外内容区、外边距、边框，外边距，网页中每一个元素都可以看成一个盒子模型。

内容区/网页元素

内容区是盒子模型的中心，是网页中存放网页主要元素的地方，元素包括了“文本”，“图片”等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 100px;
        height: 200px;
        background-color: aquamarine;
        overflow: visible;
    }


</style>
<body>
    <div>实际上，我脑海里有关主旋律电影的回忆，大多都是几十个人坐在班级里，拿出两节自习课的时间“完成任务”式观影。
        但近几年的主旋律电影制作越来越用心，《革命者》除了讲述故事，电影的光影、镜头都极富诗意，
        比如监狱中的一个镜头，在即将赴死的最后时刻，李大钊从容地坐在椅子上，
        缓缓地转过身，昏暗的牢笼中打下一束光，落在大钊先生身上，将开头的“背黑暗而向光明”做了直接的影像化表达，
        张颂文饰演的大钊先生此时眼神中的不屈和从容也着实有着打动人心的力量。
    </div>
</body>
</html>

当内容信息过多时，超出内容区设置的范围时，可以使用overflow属性设置溢出内容的处理方式overflow的属性：hidden （隐藏溢出部分）visable （显示溢出部分）scroll（添加滚动条） auto（由浏览器自行决定）

内边距

内边距是内容区与边框之间的空间，我们可以通过padding-top、padding-left、padding-right padding-bottom以及padding设置内容区与边框之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 100px;
        height: 200px;
        background-color: aquamarine;
        overflow: visible;
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
</style>
<body>
    <div>实际上，我脑海里有关主旋律电影的回忆，大多都是几十个人坐在班级里，拿出两节自习课的时间“完成任务”式观影。
        但近几年的主旋律电影制作越来越用心，《革命者》除了讲述故事，电影的光影、镜头都极富诗意，
        比如监狱中的一个镜头，在即将赴死的最后时刻，李大钊从容地坐在椅子上，
        缓缓地转过身，昏暗的牢笼中打下一束光，落在大钊先生身上，将开头的“背黑暗而向光明”做了直接的影像化表达，
        张颂文饰演的大钊先生此时眼神中的不屈和从容也着实有着打动人心的力量。
    </div>
</body>
</html>

边框

边框是环绕内容区和内边距的边界，可以使用border-width、boder-style 、border-color以及border来设置外边框的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 100px;
        height: 200px;
        background-color: aquamarine;
        overflow: visible;
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 50px;
        padding-bottom: 50px;
        border-width: 20px;
        border-style: dashed;
        border-color: red;
    }
</style>
<body>
    <div>实际上，我脑海里有关主旋律电影的回忆，大多都是几十个人坐在班级里，拿出两节自习课的时间“完成任务”式观影。
        但近几年的主旋律电影制作越来越用心，《革命者》除了讲述故事，电影的光影、镜头都极富诗意，
        比如监狱中的一个镜头，在即将赴死的最后时刻，李大钊从容地坐在椅子上，
        缓缓地转过身，昏暗的牢笼中打下一束光，落在大钊先生身上，将开头的“背黑暗而向光明”做了直接的影像化表达，
        张颂文饰演的大钊先生此时眼神中的不屈和从容也着实有着打动人心的力量。
    </div>
</body>
</html>

外边距

外边距是盒子模型最外围，是边框之外的空间，使用margin-top、margin-left 、margin-right、margin-bottom，以及margin来设置外边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 100px;
        height: 200px;
        background-color: aquamarine;
        overflow: visible;
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 50px;
        padding-bottom: 50px;
        border-width: 20px;
        border-style: dashed;
        border-color: red;
        margin-top: 50px;
        margin-left: 50px;
        margin-right: 50px;
        margin-bottom: 50px;
    }
</style>
<body>
    <div>实际上，我脑海里有关主旋律电影的回忆，大多都是几十个人坐在班级里，拿出两节自习课的时间“完成任务”式观影。
        但近几年的主旋律电影制作越来越用心，《革命者》除了讲述故事，电影的光影、镜头都极富诗意，
        比如监狱中的一个镜头，在即将赴死的最后时刻，李大钊从容地坐在椅子上，
        缓缓地转过身，昏暗的牢笼中打下一束光，落在大钊先生身上，将开头的“背黑暗而向光明”做了直接的影像化表达，
        张颂文饰演的大钊先生此时眼神中的不屈和从容也着实有着打动人心的力量。
    </div>
</body>
</html>