【web前端开发 | CSS】页面布局之盒子模型

最新推荐文章于 2024-07-15 09:39:28 发布

-4444x-

最新推荐文章于 2024-07-15 09:39:28 发布

阅读量1.3k

点赞数 2

分类专栏：移动与web前端开发文章标签： css css3 1024程序员节

本文链接：https://blog.csdn.net/qq_43490212/article/details/109202567

版权

移动与web前端开发专栏收录该内容

41 篇文章 3 订阅

订阅专栏

思维导图

文章目录

- 思维导图

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容

1：边框

border：border-width | border-style | border-color；

        div {
            /* 实线  虚线  点线 */
            border-style: solid;
            border-style: dashed;
            border-style: dotted;
        }

注：
○也可以单独加上下左右的边框
○边框会影响到盒子的大小
○细线边框：border-collapse: collapse;（相邻的边框合并在一起）

【叽叽歪歪】举个例子吧

    <style>
        table {
            border-collapse: collapse;
        }

        table,
        td {
            border: 1px solid black;
        }
    </style>

<body>
    <div>
        <table>
            <tr>
                <td>你好吗</td>
                <td>你好吗</td>
                <td>你好吗</td>
            </tr>
            <tr>
                <td>你好吗</td>
                <td>你好吗</td>
                <td>你好吗</td>
            </tr>
        </table>
    </div>
</body>

hou
以后设置表格，就不用必须在table里面加border，cellpadding=“20px” cellspacing=“0”…

2：边框的复合写法(举例：宽窄为1px的红色的实线)

border：1px solid red;

2:内边距

padding 属性用于设置内边距，即边框与内容之间的距离

属性	描述
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

四种写法：

属性	描述
padding：5px	上下左右四个方向内边距都为5px
padding:5px 10px	上下5px 左右10px
padding:5px 10px 15px	上5px 左右10px 下15px
padding:5px 10px 15px 20px	上5px 右10px 下15px 左20px

注：
当我们给盒子指定 padding 值之后，发生了 2 件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
padding内边距可以撑开盒子, 有时候,也会让我们去修改宽度
如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3：外边距

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	描述
margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	左外边距

复合写法和padding一致

❤
外边距的几种应用

让盒子水平居中
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。

width:1220px;
margin:0 auto;

常见的写法，以下三种都可以：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注：：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可， line-height的值等于盒子height的值就可以垂直居中。

来源：96编辑器

外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

相邻块元素垂直外边距的合并
嵌套块元素垂直外边距的塌陷

1. 相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
图片解释注：尽量只给一个盒子添加 margin 值

2. 嵌套块元素垂直外边距的塌陷

【叽叽歪歪】概念好奇的话先自己去查一下，想自己像上面一个画图解释，但没描述出来。
解决方案：

给父盒子加边框，设成透明色
给父盒子设置内边距，但不可以是0px，给盒子内容减加的内边距
父盒子设置overflow：hidden；

在这里插入图片描述

以后写代码，先清除内外边距：

        * {
            padding: 0;
            margin: 0;
        }

在这里插入图片描述

-4444x-

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录