自学CSS盒子模型

最新推荐文章于 2024-07-15 20:47:50 发布

efangqi

最新推荐文章于 2024-07-15 20:47:50 发布

阅读量230

点赞数 4

文章标签：开发语言

本文链接：https://blog.csdn.net/efangqi/article/details/139773431

版权

CSS盒子模型
盒子模型即box madel，通常在设计和布局时使用，他的本质上是封装周围的HTML元素，包括：边框，边距，填充和实际内容，它允许我们在其他元素和周围元素边框之间的空间放置元素

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

元素的总宽度计算公式：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度计算公式：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

当俩个盒子模型靠在一起的时候，只会有一个外边距，这个外边距是俩个盒子之间最大的外间距，这种现象叫外边距塌陷

边距常用属性(margin)
margin是使盒子之间保持间隙，让网页更加美观，margin也属于CSS属性，margin的取值方法右：auto，像素(px)，比例(%)

在使用margin属性时，可能会遇到外边距合并的问题，即垂直方向与外边距相撞时，取较大值，例如：盒子在上下放的时候，上面盒子的margin为100px，下面盒子的margin为50px，那么俩个盒子之间的margin会取值100px（水平方向不会存在这个问题）

margin属性可以有一到四个值

margin:25px 30px 45px 50px;/*顺序：上右下左
margin:25px 30px 45px;/*顺序：上（左右）下
margin:25px 25px;/*顺序：上下左右
margin:25px;/*顺序：所有方向

填充常用属性(padding)
元素内容距离盒子边框的距离就是内边距，与margin的取值方法类似，用px和%，使用语法和简写方法与margin相同，不做过多解释

尤其注意：padding会撑大容器（盒子）

margin和padding结合使用例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内外边距</title>
    <!-- 
        1.浅提盒子模型
            组成部分
     -->
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-color: aquamarine;
            
            /* 1.外边距 */
            margin-top:50px;
            margin-bottom:50px;
            margin-left:50px;
            margin-right:50px;
 
            /* 外边距复合写法 一个值：上下左右 俩个值：上下和左右 三个值：上和左右和下 四个值：上右下左 */
            margin: 50px 60px 70px 80px;
 
            /* !!!通过外边距可以设置居中 auto */
            margin: auto;
 
            /* 2.外边距 */
            padding: 50px;
        }
        /* 去除body外边距，让其紧挨浏览器的上右边界 */
        *{
            margin: 0px;
        }
    </style>
</head>
<body>
    <div>这是添加的下一个元素内容</div>
</body>
</html>

efangqi

关注

4
点赞
踩
8

收藏

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

在使用margin属性时，可能会遇到外边距合并的问题，即垂直方向与外边距相撞时，取较大值，例如：盒子在上下放的时候，上面盒子的margin为100px，下面盒子的margin为50px，那么俩个盒子之间的margin会取值100px（水平方向不会存在这个问题）盒子模型即box madel，通常在设计和布局时使用，他的本质上是封装周围的HTML元素，包括：边框，边距，填充和实际内容，它允许我们在其他元素和周围元素边框之间的空间放置元素。总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距。
复制链接

扫一扫