CSS盒子模型

最新推荐文章于 2022-08-28 15:25:52 发布

小栗子的普

最新推荐文章于 2022-08-28 15:25:52 发布

阅读量83

点赞数 2

分类专栏： CSS 文章标签：盒子模型 CSS

本文链接：https://blog.csdn.net/weixin_43885459/article/details/84675261

版权

CSS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

CSS 中 Box Model叫做盒子模型，Box Model规定了元素框处理元素内容，内边距，外边距和边框的方式。在HTML文档中，每个元素都有盒子模型
下图中的盒子模型即含有元素，内边距，边框及外边距
在这里插入图片描述

-内边距padding

例：在div中创建一个小div 内边距为20
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .div{
        border: 1px solid red;
        width: 300px;
        height: 300px;
        padding: 20px;

    }
        .div div{
            width: 100px;
            height: 100px;
            background-color: green;

        }
    </style>
</head>
<body>
<div class="div">
    <div></div>
</div>

</body>
</html>

结果如下
在这里插入图片描述

-边框border

定义一个边框

例：

<div style="width:200px;height: 200px;border: 1px solid blue;"></div>

结果如下
在这里插入图片描述

第一个参数代表边框的粗细（也可以写成border-width）
第二个参数代表边况是实线(也可以写成border-style)
第三个是边框的颜色（也可以写成border-color）

如果想给div单独加一个上边框，代码如下

<div style="width:200px;height: 200px;border-top: 1px solid blue;"></div>

效果如下
在这里插入图片描述

-边框圆角：border-radius

例：建立一个圆形的div，代码如下

<div style="width:100px;height: 100px;border: 1px solid blue;border-radius: 200px"></div>

结果如下
在这里插入图片描述

想要圆形，只需border-radius的值大于div的宽高即可
border-radius:20px 20px 30px 30px
以上写法四个值分别指左上右上右下左下

外边距margin

-margin-left 左外边距
-margin-right 右外边距
-margin-top 上外边距
-margin-bottom 下外边距

例 div的左外边距为100px
代码如下

<div style="width: 100px;height: 100px;background-color: red;margin-left: 100px"></div>

结果如下
在这里插入图片描述

小栗子的普

关注

2
点赞
踩
0

收藏

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

CSS 中 Box Model叫做盒子模型，Box Model规定了元素框处理元素内容，内边距，外边距和边框的方式。在HTML文档中，每个元素都有盒子模型下图中的盒子模型即含有元素，内边距，边框及外边距-内边距padding例：在div中创建一个小div 内边距为20代码如下&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&g...
复制链接

扫一扫

专栏目录