CSS3学习教程，从入门到精通，CSS3 盒子模型语法知识点及案例代码（13）
CSS3 盒子模型语法知识点及案例代码
CSS3 盒子模型概述
CSS3 盒子模型是用于控制网页元素布局和外观的重要工具。它包括标准盒子模型、IE 盒子模型以及 CSS3 引入的弹性盒子模型和网格布局模型。
一、标准盒子模型（Standard Box Model）
语法
selector {
width: value;
height: value;
padding: value;
border: value;
margin: value;
}
width和height：设置元素的内容区域的宽度和高度。padding：设置元素内容与边框之间的间距。border：设置元素的边框。margin：设置元素与其他元素之间的间距。
案例代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标准盒子模型示例title>
<style>
.box {
width: 200px; /* 内容区域宽度 */
height: 100px; /* 内容区域高度 */
padding: 20px; /* 内容与边框之间的间距 */
border: 5px solid #333; /* 边框样式 */
margin: 20px; /* 元素与其他元素之间的间距 */
background-color: #f0f0f0; /* 背景颜色 */
}
style>
head>
<body>
<div class="box">
这是一个使用标准盒子模型的盒子。
div>
body>
html>
二、IE 盒子模型（Internet Explorer Box Model）
语法
selector {
box-sizing: border-box;
width: value;
height: value;
padding: value;
border: value;
margin: value;
}
box-sizing: border-box：让元素的宽度和高度包括内容、内边距和边框。
案例代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IE 盒子模型示例title>
<style>
.box {
box-sizing: border-box; /* 使用 IE 盒子模型 */
width: 200px; /* 包括内容、内边距和边框的总宽度 */
height: 100px; /* 包括内容、内边距和边框的总高度 */
padding: 20px; /* 内容与边框之间的间距 */
border: 5px solid #333; /* 边框样式 */
margin: 20px; /* 元素与其他元素之间的间距 */
background-color: #f0f0f0; /* 背景颜色 */
}
style>
head>
<body>
<div class="box">
这是一个使用 IE 盒子模型的盒子。
div>
body>
html>
三、弹性盒子模型（Flexbox）
语法
.container {
display: flex; /* 或 inline-flex */
flex-direction: row | row-reverse | column | column-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: stretch | flex-start | flex-end | center | baseline;
flex-wrap: nowrap | wrap | wrap-reverse;
}
.item {
order: number;
flex-grow: number;
flex-shrink: number;
flex-basis: value;
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
display: flex：将容器设置为弹性盒子布局。flex-direction：设置主轴的方向。justify-content：设置主轴上项目的对齐方式。align-items：设置交叉轴上项目的对齐方式。flex-wrap：设置项目是否换行。order：设置项目的排列顺序。flex-grow：设置项目的放大比例。flex-shrink：设置项目的缩小比例。flex-basis：设置项目的初始主轴长度。align-self：设置单个项目的交叉轴对齐方式。
案例代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子模型示例title>
<style>
.container {
display: flex; /* 设置为弹性盒子布局 */
flex-direction: row; /* 主轴为水平方向 */
justify-content: space-between; /* 主轴上项目均匀分布 */
align-items: center; /* 交叉轴上项目居中对齐 */
flex-wrap: wrap; /* 项目换行 */
width: 400px;
height: 300px;
border: 1px solid #333;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: #f0f0f0;
text-align: center;
line-height: 100px;
}
.item:nth-child(1) {
order: 2; /* 设置排列顺序 */
}
.item:nth-child(2) {
order: 1; /* 设置排列顺序 */
}
.item:nth-child(3) {
order: 3; /* 设置排列顺序 */
}
style>
head>
<body>
<div class="container">
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
<div class="item">4div>
div>
body>
html>
四、网格布局模型（Grid Layout）
语法
.container {
display: grid; /* 或 inline-grid */
grid-template-columns: track-list;
grid-template-rows: track-list;
grid-column-gap: value;
grid-row-gap: value;
justify-items: stretch | start | end | center;
align-items: stretch | start | end | center;
}
.item {
grid-column: line;
grid-row: line;
justify-self: auto | start | end | center;
align-self: auto | start | end | center;
}
display: grid：将容器设置为网格布局。grid-template-columns和grid-template-rows：定义网格的列和行。grid-column-gap和grid-row-gap：设置网格列和行之间的间距。justify-items和align-items：设置网格项目在单元格中的对齐方式。grid-column和grid-row：设置项目在网格中的位置。justify-self和align-self：设置单个项目在单元格中的对齐方式。
五、案例代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格布局模型示例title>
<style>
.container {
display: grid; /* 设置为网格布局 */
grid-template-columns: 100px 100px 100px; /* 定义三列，每列宽度为 100px */
grid-template-rows: 100px 100px; /* 定义两行，每行高度为 100px */
grid-column-gap: 10px; /* 列之间的间距 */
grid-row-gap: 10px; /* 行之间的间距 */
width: 320px;
height: 220px;
border: 1px solid #333;
}
.item {
background-color: #f0f0f0;
text-align: center;
line-height: 100px;
}
.item:nth-child(1) {
grid-column: 1; /* 位于第一列 */
grid-row: 1; /* 位于第一行 */
}
.item:nth-child(2) {
grid-column: 2; /* 位于第二列 */
grid-row: 1; /* 位于第一行 */
}
.item:nth-child(3) {
grid-column: 3; /* 位于第三列 */
grid-row: 1; /* 位于第一行 */
}
.item:nth-child(4) {
grid-column: 1; /* 位于第一列 */
grid-row: 2; /* 位于第二行 */
}
.item:nth-child(5) {
grid-column: 2; /* 位于第二列 */
grid-row: 2; /* 位于第二行 */
}
.item:nth-child(6) {
grid-column: 3; /* 位于第三列 */
grid-row: 2; /* 位于第二行 */
}
style>
head>
<body>
<div class="container">
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
<div class="item">4div>
<div class="item">5div>
<div class="item">6div>
div>
body>
html>
以上是 CSS3 盒子模型的语法知识点及案例代码，涵盖了标准盒子模型、IE 盒子模型、弹性盒子模型和网格布局模型。
以下是CSS3盒子模型在实际开发中的一些具体案例，涵盖了布局定位、间距控制、响应式设计等常见应用场景：
一、布局定位
在网页布局中，常常需要将多个元素进行并排排列或者垂直居中。通过调整盒子的外边距和使用弹性盒子模型，可以轻松实现这些布局。
案例：导航栏布局
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏布局title>
<style>
.nav {
display: flex; /* 使用弹性盒子模型 */
justify-content: center; /* 主轴上居中对齐 */
background-color: #333;
padding: 10px;
}
.nav-item {
margin: 0 20px; /* 设置左右外边距 */
color: white;
text-decoration: none;
}
style>
head>
<body>
<nav class="nav">
<a href="#" class="nav-item">首页a>
<a href="#" class="nav-item">关于我们a>
<a href="#" class="nav-item">产品a>
<a href="#" class="nav-item">联系我们a>
nav>
body>
html>
在这个案例中，通过设置.nav的display: flex和justify-content: center，使导航项在水平方向上居中排列。同时，通过设置.nav-item的margin属性，控制导航项之间的间距。
二、间距控制
在设计网页内容时，需要合理控制元素之间的间距，以提高可读性和美观度。通过调整盒子的内边距和外边距，可以实现对间距的精确控制。
案例：图文列表
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图文列表title>
<style>
.item {
margin: 20px; /* 设置外边距 */
padding: 15px; /* 设置内边距 */
border: 1px solid #ddd; /* 设置边框 */
background-color: #f9f9f9;
}
.item img {
display: block; /* 图片块级显示 */
width: 100px;
height: 100px;
margin: 0 auto; /* 图片水平居中 */
}
.item p {
margin-top: 10px; /* 设置上外边距 */
text-align: center;
}
style>
head>
<body>
<div class="item">
<img src="image1.jpg" alt="图片1">
<p>这是第一张图片的描述p>
div>
<div class="item">
<img src="image2.jpg" alt="图片2">
<p>这是第二张图片的描述p>
div>
body>
html>
在这个案例中，通过设置.item的margin和padding属性，控制了每个图文项之间的间距以及内容与边框之间的间距。同时，通过设置图片的margin属性，使图片在水平方向上居中显示。
三、响应式设计
在现代网页开发中，需要确保网页在不同设备上都能良好地显示。通过结合媒体查询和百分比宽度/高度，以及盒子模型，可以实现响应式布局。
案例：响应式图片网格
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式图片网格title>
<style>
.grid {
display: flex; /* 使用弹性盒子模型 */
flex-wrap: wrap; /* 允许换行 */
}
.grid-item {
flex: 0 0 33.33%; /* 每个网格项占三分之一宽度 */
box-sizing: border-box; /* 使用IE盒子模型 */
padding: 10px; /* 设置内边距 */
}
.grid-item img {
width: 100%; /* 图片宽度占满容器 */
height: auto;
}
@media (max-width: 768px) {
.grid-item {
flex: 0 0 50%; /* 在小屏幕上每个网格项占一半宽度 */
}
}
@media (max-width: 480px) {
.grid-item {
flex: 0 0 100%; /* 在更小屏幕上每个网格项占满宽度 */
}
}
style>
head>
<body>
<div class="grid">
<div class="grid-item">
<img src="image1.jpg" alt="图片1">
div>
<div class="grid-item">
<img src="image2.jpg" alt="图片2">
div>
<div class="grid-item">
<img src="image3.jpg" alt="图片3">
div>
div>
body>
html>
在这个案例中，通过设置.grid的display: flex和flex-wrap: wrap，使图片网格可以换行显示。同时，通过设置.grid-item的flex属性和box-sizing: border-box，确保在不同屏幕宽度下，网格项能够自适应调整宽度，并且内边距不会影响实际内容区域的大小。媒体查询则用于在不同屏幕尺寸下调整网格项的宽度，实现响应式布局。