Heureka's blog

Appearance

05. 盒模型与布局 ​

理解 CSS 盒模型和布局机制是前端开发的核心，它们决定了元素在页面中的显示方式。

一、盒模型（Box Model） ​

盒模型结构 ​

┌─────────────────────────────────┐
│         Margin（外边距）         │
│  ┌───────────────────────────┐  │
│  │      Border（边框）       │  │
│  │  ┌─────────────────────┐  │  │
│  │  │   Padding（内边距） │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │  Content     │  │  │  │
│  │  │  │  （内容区域） │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

box-sizing 属性 ​

1. content-box（默认值） ​

css
.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;

    /* 实际宽度 = width + padding + border */
    /* 实际宽度 = 200 + 40 + 10 = 250px */
}

2. border-box（推荐） ​

css
.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;

    /* 实际宽度 = width */
    /* 内容区域宽度 = width - padding - border */
    /* 内容区域宽度 = 200 - 40 - 10 = 150px */
}

全局设置（推荐） ​

css
* {
    box-sizing: border-box;
}

/* 或者 */
*, *::before, *::after {
    box-sizing: border-box;
}

二、外边距 Margin ​

单独设置 ​

css
/* 四个边 */
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 30px;

/* 简写（顺时针：上右下左） */
margin: 20px 30px 20px 30px;

/* 上 右 下=上 左=右 */
margin: 20px 30px;

/* 上下 左右 */
margin: 20px 30px 20px;

/* 四个方向相同 */
margin: 20px;

/* 自动（水平居中 */
margin: 0 auto;

外边距塌陷 ​

css
/* 父子元素外边距塌陷 */
.parent {
    overflow: hidden; /* 方案1：触发 BFC */
    padding-top: 1px; /* 方案2：添加内边距 */
    border-top: 1px solid transparent; /* 方案3：添加边框 */
}

/* 兄弟元素外边距塌陷（取最大值） */
.sibling1 {
    margin-bottom: 20px;
}
.sibling2 {
    margin-top: 30px; /* 实际间距 30px */
}

负外边距 ​

css
/* 元素重叠 */
.element {
    margin-left: -20px;
}

/* 特殊布局效果 */
.card {
    margin-top: -10px;
    /* 元素向上移动 */
}

三、内边距 Padding ​

css
/* 四个边 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

/* 简写 */
padding: 10px 20px 10px 20px;
padding: 10px 20px;
padding: 10px 20px 10px;
padding: 10px;

四、边框 Border ​

css
/* 简写 */
border: 1px solid black;

/* 四个边 */
border-top: 2px dashed red;
border-right: 2px dotted blue;
border-bottom: 2px double green;
border-left: 2px solid yellow;

/* 独立属性 */
border-width: 1px 2px 3px 4px;
border-style: solid dashed dotted double;
border-color: black white black white;

/* 圆角 */
border-radius: 5px;
border-radius: 5px 10px 15px 20px;
border-radius: 50%; /* 圆形 */
border-radius: 10px 20px; /* 左上/右下 右上/左下 */

/* 轮廓（不占据空间） */
outline: 2px solid blue;
outline-offset: 5px;

五、定位 Position ​

1. static（默认值） ​

css
.element {
    position: static;
    /* 正常文档流 */
}

2. relative（相对定位） ​

css
.element {
    position: relative;
    top: 10px;
    left: 20px;
    /* 相对于自身原位置偏移 */
    /* 仍占据原位置空间 */
}

3. absolute（绝对定位） ​

css
.element {
    position: absolute;
    top: 20px;
    left: 30px;
    /* 相对于最近的已定位祖先元素 */
    /* 不占据文档流空间 */
}

/* 居中定位 */
.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4. fixed（固定定位） ​

css
.element {
    position: fixed;
    top: 0;
    right: 0;
    /* 相对于视口永远固定 */
    /* 固定导航栏、回到顶部按钮 */
}

5. sticky（粘性定位） ​

css
.element {
    position: sticky;
    top: 20px;
    /* 滚动到阈值时固定 */
    /* 粘性表头、侧边栏 */
}

六、浮动 Float ​

css
.element {
    float: left;
    /* float: right; */
    /* 元素脱离文档流 */
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 或者 */
.clear {
    clear: both;
}

.clear-left {
    clear: left;
}

.clear-right {
    clear: right;
}

七、显示 Display ​

css
/* 块级元素 */
display: block;

/* 行内元素 */
display: inline;

/* 行内块 */
display: inline-block;

/* 隐藏 */
display: none;

/* Flex 布局 */
display: flex;

/* Grid 布局 */
display: grid;

/* 表格 */
display: table;
display: table-cell;
display: table-row;

/* 其他 */
display: inline-flex;
display: inline-grid;

八、堆叠上下文 Z-Index ​

css
/* z-index 只对已定位元素生效 */
.element {
    position: relative;
    z-index: 10;
}

/* z-index 值越大，层级越靠上 */
/* 默认值：auto（等同于 0） */

/* 负值，可以藏在父元素后面 */
.element {
    z-index: -1;
}

/* 新建堆叠上下文的条件 */
/* 1. position: relative/absolute/fixed 且 z-index 不为 auto */
/* 2. position: sticky 且 z-index 不为 auto */
/* 3. 不为 none 的 opacity */
/* 4. transform: translate(0) */
/* 5. filter: blur(0) */
/* 6. 其他... */

九、溢出 Overflow ​

css
/* 内容溢出处理 */
overflow: visible; /* 默认：可见 */
overflow: hidden;  /* 隐藏 */
overflow: scroll;  /* 显示滚动条 */
overflow: auto;    /* 必要时显示滚动条 */

/* 单独控制 */
overflow-x: auto;
overflow-y: auto;

/* 文本溢出省略 */
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多行文本省略 */
.multi-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

十、可见性 Visibility ​

css
/* 隐藏元素，但仍占据空间 */
element {
    visibility: hidden;
}

/* 显示元素 */
element {
    visibility: visible;
}

/* 折叠（主要用于表格） */
element {
    visibility: collapse;
}

/* display: none 与 visibility: hidden 的区别 */
/* display: none: 不占据空间，不响应事件 */
/* visibility: hidden: 占据空间，不响应事件 */

十一、实际案例 ​

1. 垂直居中 ​

css
.parent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}

/* 或者 */
.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 或者 */
.parent {
    line-height: 300px;
}
.element {
    display: inline-block;
    vertical-align: middle;
}

2. 水平居中 ​

css
/* 块级元素 */
.element {
    margin: 0 auto;
}

/* Flex */
.parent {
    display: flex;
    justify-content: center;
}

/* 绝对定位 */
.element {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

3. 三列布局 ​

css
.container {
    display: flex;
}

.left {
    width: 200px;
}

.center {
    flex: 1;
}

.right {
    width: 200px;
}

总结 ​

掌握盒模型和定位布局是前端开发的核心，理解各个属性的作用和使用场景对于构建复杂的页面布局至关重要。