盒子模型

最新推荐文章于 2024-07-24 16:53:23 发布

Marlen_L

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量291

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_43777220/article/details/104459298

版权

CSS盒子模型

一、盒子模型

在html中所有的元素都可以看作为一个盒子，而所谓的CSS盒模型也就是一个盒子，从外到内分别是：外边距、边框、内填充、内容。

Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

二、外边距（margin）具体用法：

一般同级元素用margin，父子级元素在父级元素中添加padding，两者需要搞清楚

简写盒子左右居中：margin：0 auto；
外边距顺序：

两个值：margin：上下左右；
三个值：margin：上左右下；例子margin：10px 20px 30px；
四个值：margin：上右下左；例子margin：10px 20px 30px 20px;

具体样式：

上边距20像素： margin-top:20px;
左边距20像素：margin-left:20px;
右边距20像素：margin-right:20px;
下边距20像素：margin-bottom:20px;

margin有一个比较特别的地方：外边距合并！
我们给第一个盒子的下边距50px，第二个盒子上边距30px

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 200px;
            height: 100px;
            margin-bottom: 50px;
            background-color: green;
        }
        .box2{
            width: 240px;
            height:100px;
            margin-top: 30px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

第一个盒子下边距是50px 第二个盒子上边距是30px
两个盒子的外边距合并，取其中一个盒子的最大外边距即可，并不会相加外边距，BFC规定
想了解BFC其他规定，请点击

三、边框（border）具体用法：

例子：border：1px solid pink；
boder：边框像素边框线(实线，虚线) 边框颜色；

格式：border:10px solid blue;

边框的颜色可以设置为透明：transparent

属性分解：

border-width: 边框大小
border-color: 边框颜色
border-style: 边框类型

单独一个方向设置边框：
border-left:3px solid pink;
border-right:6px solid black;
border-top:9px solid orange;
border-bottom:12px solid green;

在这里插入图片描述

三、内填充（padding）具体用法

一般同级元素用margin，父子级元素在父级元素中添加padding，两者需要搞清楚

简写：padding
外边距顺序：

两个值：padding：上下左右；
三个值：padding：上左右下；例子margin：10px 20px 30px；
四个值：padding：上右下左；例子margin：10px 20px 30px 20px;

具体样式：

上填充20像素： padding-top:20px;
左填充20像素：padding-left:20px;
右填充20像素：padding-right:20px;
下填充20像素：padding-bottom:20px;
例子：

四、盒模型大小：

盒模型大小=“内容（content）+内填充（padding）+边框（border）+外边距（margin）”

Marlen_L

关注

0
点赞
踩
0

收藏

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

CSS盒子模型一、盒子模型在html中所有的元素都可以看作为一个盒子，而所谓的CSS盒模型也就是一个盒子，从外到内分别是：外边距、边框、内填充、内容。Margin(外边距) - 清除边框外的区域，外边距是透明的Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。...
复制链接

扫一扫