盒子模型
看透网页布局的本质
网页布局过程:
- 先准备好相关的网页元素，网页元素基本都是盒子Box
- 利用CSS设置好盒子样式，然后摆放到相应位置（最核心）
- 往盒子里面装内容
网页布局核心：利用CSS摆盒子。
提示
现代网页布局推荐使用Flexbox和Grid布局系统，但盒子模型仍是基础
盒子模型（Box Model）
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容。
盒子的四个组成部分
盒子的四个组成部分
盒子边框（border）
border可以设置元素的边框。边框有三部分组成：边框宽度(粗细)、边框样式、边框颜色。
基础语法
css
border: border-width || border-style || border-color;| 属性 | 作用 | 常用值 |
|---|---|---|
| border-width | 定义边框粗细，单位是px | 1px, 2px, 3px等 |
| border-style | 边框样式 | solid(实线), dashed(虚线), dotted(点线) |
| border-color | 边框颜色 | 颜色名称、HEX、RGB等 |
代码示例
html
<head>
<style>
div {
width: 300px;
height: 200px;
border-width: 5px;
border-style: dotted;
border-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>边框的复合写法（简写）
简写语法
css
border: 1px solid red;/* 无顺序要求 */单边设置
css
border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double purple;层叠性应用
html
<head>
<style>
div {
width: 200px;
height: 200px;
border: 5px solid blue;
border-top: 5px solid red;/* 覆盖上边框 */
}
</style>
</head>
<body>
<div></div>
</body>透明边框技巧
html
<head>
<style>
.box {
border: 3px solid red;
border-left: 3px solid transparent;
margin: 100px;
}
.box:hover {
border-left: 3px solid green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>警告
透明边框会占据空间，适合用于实现悬停效果而不影响布局
表格细线边框
border-collapse属性
css
border-collapse: collapse;/* 合并相邻边框 */表格示例
html
<head>
<style>
table, td, th {
border: 1px solid pink;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<table>
<!-- 表格内容 -->
</table>
</body>边框对盒子尺寸的影响
边框会额外增加盒子的实际大小。解决方案：
- 测量时不包含边框尺寸
- 如果包含边框，需在width/height中减去边框宽度
提示
使用box-sizing: border-box可以更简单地解决这个问题
内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离。
单边设置
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
复合写法
| 值的个数 | 表达意思 |
|---|---|
| padding:5px; | 四边相同 |
| padding:5px 10px; | 上下 | 左右 |
| padding:5px 10px 20px; | 上 | 左右 | 下 |
| padding:5px 10px 20px 30px; | 上 | 右 | 下 | 左 (顺时针) |
padding对盒子的影响
会撑大盒子的情况
html
<head>
<style>
div {
width: 160px;
height: 160px;
padding: 20px;/* 最终尺寸200×200 */
}
</style>
</head>不会撑大盒子的情况
html
<head>
<style>
div p {
/* 未指定宽度，padding不会撑大 */
padding: 30px;
}
</style>
</head>外边距（margin）
margin属性用于设置外边距，即控制盒子和盒子之间的距离。
单边设置
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
块级元素水平居中
css
.container {
width: 900px;
margin: 0 auto;/* 水平居中 */
}外边距合并问题
相邻元素合并
上下相邻元素的垂直外边距会合并为较大的值
嵌套元素塌陷
父元素和子元素的上外边距会合并
解决方案
- 添加透明边框
- 添加内边距
- 使用overflow: hidden
清除默认边距
常用重置样式
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}警告
行内元素尽量只设置左右边距
CSS3新特性
圆角边框
css
border-radius: 10px;/* 统一圆角 */
border-radius: 50%;/* 圆形 */
border-radius: 10px 20px;/* 对角设置 */盒子阴影
css
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: inset 0 0 10px #000;/* 内阴影 */文字阴影
css
text-shadow: 1px 1px 2px #000;