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

思维导图

文章目录

思维导图
- 1：边框
- 2:内边距
- 3：外边距
- - 外边距合并
  - - 1. 相邻块元素垂直外边距的合并
    - 2. 嵌套块元素垂直外边距的塌陷

所谓盒子模型：就是把 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>

以后设置表格，就不用必须在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的值就可以垂直居中。

外边距合并

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

主要有两种情况:

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

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

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

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

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

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

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

        * {padding: 0;margin: 0;}