HTML--CSS--盒子模型

最新推荐文章于 2024-08-25 18:26:48 发布

零时搞学习

最新推荐文章于 2024-08-25 18:26:48 发布

阅读量616

点赞数 7

分类专栏： HTML学习文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_44517278/article/details/135599295

版权

HTML学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在CSS模型中，所有元素都可以看做是一个盒子，这个盒子的组成部分：

content 内容，文本或者图片
padding 内边距，定义内容到边框的距离
margin 外边距，定义当前元素与其他元素之间的距离
border 边框，定义元素的边框

范例：

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        div
        {
            padding: 20px;
            margin: 10px;
            border: 2px solid red;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <p>内块</p>
        </div>
        <h1>外块</h1>
    </div>
</body>
</html>

效果：
在这里插入图片描述

content 内容区

内容区有三个属性：

width 宽度
hight 高度
overflow 指定内容超过范围后的处理方式

内边距

属性就是，上右下左顺时针综合设定：

padding-top
padding-bottom
padding-left
padding-right
padding

如例：

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        div
        {
            padding: 20px 40px 60px 80px;
            margin: 10px;
            border: 2px solid red;
            background-color: aqua;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <p>内块</p>
        </div>
    </div>
</body>
</html>

效果：
应该可以看到综合设定的四个位置：padding: 20px 40px 60px 80px;
是从内边距的上，右，下，左顺时针参照的吧
在这里插入图片描述

外边框

属性：(外边框定义为负值就是反向移动，可以产生重叠，听说这就是“负margin技术”)

margin-top
margin-bottom
margin-left
margin-right
margin

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #a
        {
            padding: 20px 100px 150px 200px;
            margin: 10px;
            border: 2px solid red;
            background-color: aqua;
            overflow: hidden;
        }
        #b
        {
            margin: 30px 30px 30px 30px;
            border: 2px solid black;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <div id="a">
        <div id="b">
            <p>内块</p>
        </div>
    </div>
</body>
</html>

效果：不过负margin还没搞明白在这里插入图片描述

边框

属性：

border-width 边框宽度
border-color 边框颜色
border-style 边框类型

零时搞学习

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML--CSS--盒子模型

在CSS模型中，所有元素都可以看做是一个盒子，这个盒子的组成部分：content 内容，文本或者图片padding 内边距，定义内容到边框的距离margin 外边距，定义当前元素与其他元素之间的距离border 边框，定义元素的边框
复制链接

扫一扫

专栏目录