CSS 布局概念与技术教程

2024-05-16
福建
本文字数：10643 字
阅读完需：约 35 分钟

引言

欢迎来到 CSS 教程！如果你已经掌握了 HTML 的基础知识，那么你即将进入一个全新的世界，通过学习 CSS（Cascading Style Sheets，层叠样式表），你将能够赋予网页丰富的视觉效果和布局。CSS 是前端开发中不可或缺的一部分，它可以将你的 HTML 页面变得更加美观、整洁和用户友好。

1.什么是 CSS？

CSS 是用于描述 HTML 或 XML（包括各种基于 XML 的语言，如 SVG、MathML）的显示样式的语言。与 HTML 用于构建网页的内容结构不同，CSS 则负责定义内容的呈现方式。通过使用 CSS，你可以控制网页的颜色、字体、布局、间距、尺寸、背景图像及其他视觉效果。

2.CSS 的基本语法

在开始使用 CSS 之前，了解 CSS 的基本语法是非常重要的。CSS 的规则由选择器和声明块组成，选择器用于指定要应用样式的 HTML 元素，而声明块则包含一个或多个声明，每个声明由属性和值组成。

示例：

selector {  property: value;}

复制代码

例如，下面的 CSS 规则会将所有<p>元素的文字颜色设置为蓝色，字体大小设置为 16 像素：

p 为 选择器 大括号里面为 声明块

p {  color: blue;  font-size: 16px;}

复制代码

3.常见的选择器

选择器是 CSS 的核心部分，它用于选择需要应用样式的 HTML 元素。以下是几种常见的选择器：

元素选择器：直接选中 HTML 标签，如p、div、h1等。例如：

p {  color: red;}

复制代码

上述选择器会将所有<p>元素的文字颜色设置为红色。

类选择器：通过类名选择元素，使用.表示。例如：

.example {  font-size: 20px;}

复制代码

上述选择器会将所有具有example类的元素的字体大小设置为 20 像素。

ID 选择器：通过 ID 选择唯一元素，使用#表示。例如：

#header {  background-color: yellow;}

复制代码

上述选择器会将 ID 为header的元素背景颜色设置为黄色。

4.CSS 布局

学习 CSS 布局是掌握网页设计的关键部分。以下是几种常见的布局方式及其特点：

盒模型：这是 CSS 布局的基础概念，所有的 HTML 元素都可以看作一个矩形盒子，盒模型定义了元素内容、内边距（padding）、边框（border）和外边距（margin）之间的关系。
浮动布局：通过使用float属性，可以让元素向左或向右浮动，使其旁边的元素环绕着它。浮动布局常用于创建多列布局。
弹性盒子（Flexbox）：Flexbox 是一种一维布局模型，主要用于解决在不同屏幕尺寸上的对齐问题。它可以轻松地控制元素在容器中的排列和分布。
网格布局（Grid）：Grid 是一种二维布局模型，允许你创建复杂的布局结构。通过定义行和列，Grid 可以实现更加灵活和精确的布局。
响应式设计：响应式设计是一种使网页在不同设备和屏幕尺寸上都有良好显示效果的方法。使用媒体查询（Media Queries）和灵活的布局单元（如百分比和视口单位），可以创建适应各种设备的网页。

5.开始你的 CSS 学习之旅

通过本教程，你将逐步掌握 CSS 的基本概念、各种布局技术以及实际应用。我们将从最基础的 CSS 语法和选择器开始，逐步介绍盒模型、浮动布局、Flexbox、Grid 布局以及响应式设计，最终通过实践项目帮助你巩固所学知识。

无论你是初学者还是有一定基础的开发者，本教程都将帮助你提升 CSS 技能，打造出更加精美和专业的网页设计。让我们开始这段 CSS 学习之旅吧！

一、CSS 基础

1.CSS 概述

（1）什么是 CSS:

CSS（Cascading Style Sheets，层叠样式表）是一种用来描述 HTML 或 XML 文档外观和格式的样式表语言。通过 CSS，可以控制网页的布局、颜色、字体、背景等各种样式，使网页设计和内容分离，提高了开发效率和网页的可维护性。

（2）CSS 的语法和结构:

CSS 规则由选择器和声明块组成。选择器用于指定要应用样式的 HTML 元素，声明块包含一个或多个声明，每个声明由属性和值组成。

示例:

selector {  property: value;}

复制代码

例如：

p {  color: blue;  font-size: 16px;}

复制代码

上述 CSS 规则会将所有<p>元素的文字颜色设置为蓝色，并且字体大小设置为 16 像素。

2.选择器

（1）基本选择器：

元素选择器：

选择 HTML 文档中的所有指定元素。
示例：

p {  color: red;}

复制代码

该选择器会将所有<p>元素的文字颜色设置为红色。

类选择器：

选择所有具有指定类属性的元素。
使用.表示类选择器。
示例：

.example {  font-size: 20px;}

复制代码

该选择器会将所有类名为example的元素字体大小设置为 20 像素。

ID 选择器：

选择具有指定 ID 属性的唯一元素。
使用#表示 ID 选择器。
示例：

#header {  background-color: yellow;}

复制代码

该选择器会将 ID 为header的元素背景颜色设置为黄色。

（2）组合选择器：

后代选择器：

选择位于某元素后代（子孙）的所有指定元素。
示例：

div p {  color: green;}

复制代码

该选择器会将所有位于<div>元素内部的<p>元素文字颜色设置为绿色。

子代选择器：

选择位于某元素直接子代的指定元素。
使用>表示子代选择器。
示例：

ul > li {  list-style-type: none;}

复制代码

该选择器会将所有<ul>元素的直接子代<li>元素的列表样式设置为无。

相邻兄弟选择器：

选择紧接在指定元素后的兄弟元素。
使用+表示相邻兄弟选择器。
示例：

h1 + p {  margin-top: 0;}

复制代码

该选择器会将紧接在<h1>元素后的第一个<p>元素的上外边距设置为 0。

通用兄弟选择器：

选择位于指定元素之后的所有兄弟元素。
使用~表示通用兄弟选择器。
示例：

h1 ~ p {  color: orange;}

复制代码

该选择器会将位于<h1>元素之后的所有<p>元素的文字颜色设置为橙色。

（3）属性选择器：

选择具有指定属性的元素。
示例：

input[type="text"] {  border: 1px solid #000;}

复制代码

该选择器会将所有type属性为text的<input>元素的边框设置为 1 像素实线黑色。

（4）伪类和伪元素选择器：

伪类选择器：

选择某种状态的元素。
常见伪类选择器示例：

a:hover {  color: red;}

复制代码

该选择器会将鼠标悬停在<a>元素上的文字颜色设置为红色。

伪元素选择器：

选择文档中特定部分的元素。
常见伪元素选择器示例：

p::first-line { font-weight: bold; }

复制代码

该选择器会将所有<p>元素的首行文字设置为粗体。

这些基础知识是学习 CSS 布局的起点，理解并掌握这些内容将帮助你在后续学习中更好地运用 CSS 进行网页设计。

二、盒模型

1. 盒模型概述

(1) 内容（Content）

内容是盒子内部实际显示的内容部分，例如文本、图片等。

(2) 内边距（Padding）

内边距是内容与边框之间的空间。通过设置内边距，可以控制内容与边框之间的距离。
示例：

div {  padding: 10px;}

复制代码

上述代码会在<div>元素内容周围设置 10 像素的内边距。

(3) 边框（Border）

边框是包围在内容和内边距外的可见线条。可以设置边框的宽度、样式和颜色。
示例：

div {  border: 2px solid black;}

复制代码

上述代码会在<div>元素周围设置 2 像素宽的黑色实线边框。

(4) 外边距（Margin）

外边距是盒子与其他元素之间的距离。通过设置外边距，可以控制盒子与其他元素之间的空间。
示例：

div {  margin: 20px;}

复制代码

上述代码会在<div>元素周围设置 20 像素的外边距。

2. 盒模型的应用

(1) 盒模型的宽度和高度计算

元素的总宽度和高度计算公式为：
总宽度 = 内容宽度 + 左右内边距 + 左右边框宽度 + 左右外边距
总高度 = 内容高度 + 上下内边距 + 上下边框高度 + 上下外边距
示例：

div {  width: 200px;  height: 100px;  padding: 10px;  border: 5px solid black;  margin: 20px;}

复制代码

上述代码中，<div>元素的总宽度 = 200px（内容宽度） + 20px（内边距） + 10px（边框宽度） + 40px（外边距） = 270px。总高度 = 100px（内容高度） + 20px（内边距） + 10px（边框高度） + 40px（外边距） = 170px。

(2) `box-sizing`属性

box-sizing属性用于控制盒模型的计算方式。常见的取值有content-box和border-box。
content-box（默认值）：宽度和高度只包含内容区域，不包括内边距和边框。
border-box：宽度和高度包含内容区域、内边距和边框。
示例：

div {  width: 200px;  padding: 10px;  border: 5px solid black;  box-sizing: border-box;}

复制代码

上述代码中，<div>元素的总宽度为 200px（内容、内边距和边框的总和），因为box-sizing属性设置为border-box。

理解和掌握盒模型对于进行精确的布局和控制元素间距非常重要。在后续的 CSS 布局学习中，盒模型是一个非常基础且关键的概念。

三、布局方式

1. 块级元素与行内元素

（1）区别和应用

块级元素（Block Elements）通常占据其父容器的全部宽度，独占一行。可以设置宽度、高度、内边距、边框和外边距。常见块级元素有：<div>、<p>、<h1>、<ul>、<li>等。
行内元素（Inline Elements）只占据其内容的宽度，不会独占一行。不能设置宽度和高度，但可以设置左右内边距和外边距。常见行内元素有：<span>、<a>、<img>、<strong>、<em>等。

2. 浮动布局

（1）浮动的概念

浮动（Float）用于将元素从文档的正常流中取出，使其向左或向右浮动，直到碰到包含框或其他浮动元素。
示例：

.float-left {  float: left;}.float-right {  float: right;}

复制代码

上述代码会使元素向左或向右浮动。

（2）清除浮动的方法

清除浮动（Clear）用于防止浮动元素影响后续元素的布局。
常见方法：
在浮动元素后添加一个具有clear属性的元素：

<div class="float-left">浮动元素</div><div class="clear-both"></div>

复制代码

.clear-both {  clear: both;}

复制代码

使用伪元素清除浮动：

.clearfix::after {  content: "";  display: block;  clear: both;}

复制代码

（3）浮动布局的应用

浮动布局常用于创建多列布局、图片环绕文本等。
示例：

<div class="column float-left">列1</div><div class="column float-left">列2</div><div class="clearfix"></div>

复制代码

.column {  width: 45%;  margin: 2.5%;}

复制代码

3. 定位

（1）静态定位（Static Positioning）

默认的定位方式，元素按照正常的文档流进行排列。
示例：

.static {  position: static;}

复制代码

（2）相对定位（Relative Positioning）

元素相对于其正常位置进行偏移，仍占据原有空间。
示例：

.relative {  position: relative;  top: 10px;  left: 20px;}

复制代码

（3）绝对定位（Absolute Positioning）

元素相对于最近的已定位祖先元素进行偏移，不占据原有空间。
示例：

.absolute {  position: absolute;  top: 50px;  left: 100px;}

复制代码

（4）固定定位（Fixed Positioning）

元素相对于视口进行偏移，不随页面滚动而改变位置。
示例：

.fixed {  position: fixed;  top: 0;  left: 0;}

复制代码

（5）粘性定位（Sticky Positioning）

元素在正常文档流中滚动，当到达指定位置时变为固定定位。
示例：

.sticky {  position: sticky;  top: 20px;}

复制代码

理解这些布局方式可以帮助你更好地控制网页元素的位置和排列方式，从而实现各种复杂的网页布局。

四、弹性盒子（Flexbox）

1. Flexbox 概述

（1）Flex 容器和 Flex 项目

Flex 容器（Flex Container）
通过设置display: flex;或display: inline-flex;将一个元素定义为 Flex 容器。
示例：

.container {  display: flex;}

复制代码

Flex 项目（Flex Items）
Flex 容器内的直接子元素成为 Flex 项目。

2. Flex 容器属性

（1）`display: flex;`

定义一个 Flex 容器，使其内部的子元素成为 Flex 项目。
示例：

.container {  display: flex;}

复制代码

（2）`flex-direction`

定义 Flex 项目在 Flex 容器中的排列方向。
取值：
row（默认值）：从左到右排列。
row-reverse：从右到左排列。
column：从上到下排列。
column-reverse：从下到上排列。
示例：

.container {  flex-direction: row;}

复制代码

（3）`flex-wrap`

定义 Flex 项目是否换行。
取值：
nowrap（默认值）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
示例：

.container {  flex-wrap: wrap;}

复制代码

（4）`justify-content`

定义 Flex 项目在主轴（横轴）方向上的对齐方式。
取值：
flex-start（默认值）：从主轴起点对齐。
flex-end：从主轴终点对齐。
center：居中对齐。
space-between：两端对齐，项目之间间距相等。
space-around：项目之间间距相等，项目两侧间距为项目间距的一半。
示例：

.container {  justify-content: center;}

复制代码

（5）`align-items`

定义 Flex 项目在交叉轴（纵轴）方向上的对齐方式。
取值：
flex-start：从交叉轴起点对齐。
flex-end：从交叉轴终点对齐。
center：居中对齐。
baseline：项目的基线对齐。
stretch（默认值）：如果项目未设置高度或设为 auto，将占满容器高度。
示例：

.container {  align-items: stretch;}

复制代码

（6）`align-content`

定义多根轴线的对齐方式。如果只有一根轴线，该属性不起作用。
取值：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：轴线之间的间隔平均分布，轴线两端间隔为间隔的一半。
stretch（默认值）：轴线将占满整个交叉轴。
示例：

.container {  align-content: space-between;}

复制代码

3. Flex 项目属性

（1）`order`

定义 Flex 项目的排列顺序。数值越小，排列越靠前，默认值为 0。
示例：

.item {  order: 1;}

复制代码

（2）`flex-grow`

定义 Flex 项目的放大比例。默认值为 0，即如果存在剩余空间，也不放大。
示例：

.item {  flex-grow: 1;}

复制代码

（3）`flex-shrink`

定义 Flex 项目的缩小比例。默认值为 1，即如果空间不足，该项目将缩小。
示例：

.item {  flex-shrink: 1;}

复制代码

（4）`flex-basis`

定义 Flex 项目的初始大小。默认值为auto。
示例：

.item {  flex-basis: 100px;}

复制代码

（5）`align-self`

允许单个 Flex 项目有与其他项目不同的对齐方式，可覆盖align-items属性。默认值为auto。
取值与align-items相同：
auto
flex-start
flex-end
center
baseline
stretch
示例：

.item {  align-self: center;}

复制代码

Flexbox 布局方式非常灵活，适用于创建各种复杂的网页布局。理解和掌握这些属性，可以帮助你更好地设计和实现响应式布局。

五、网格布局（Grid）

1. Grid 概述

（1）网格容器和网格项目

网格容器（Grid Container）

通过设置display: grid;或display: inline-grid;将一个元素定义为网格容器。
示例：

.container {  display: grid;}

复制代码

网格项目（Grid Items）
网格容器内的直接子元素成为网格项目。

2. Grid 容器属性

（1）`display: grid;`

定义一个网格容器，使其内部的子元素成为网格项目。
示例：

.container {  display: grid;}

复制代码

（2）`grid-template-columns`

定义网格容器的列结构。
示例：

.container {  grid-template-columns: 100px 200px 100px;}

复制代码

（3）`grid-template-rows`

定义网格容器的行结构。
示例：

.container {  grid-template-rows: 50px 150px;}

复制代码

（4）`grid-template-areas`

定义网格区域，用命名的区域简化布局。
示例：

.container {  grid-template-areas:    'header header header'    'main main sidebar'    'footer footer footer';}.header {  grid-area: header;}.main {  grid-area: main;}.sidebar {  grid-area: sidebar;}.footer {  grid-area: footer;}

复制代码

（5）`grid-column-gap` 和 `grid-row-gap`

定义网格项目之间的间距。
示例：

.container {  grid-column-gap: 20px;  grid-row-gap: 10px;}

复制代码

（6）`grid-auto-flow`

控制自动布局算法，定义自动放置网格项目的顺序。
取值：
row（默认值）：按行放置。
column：按列放置。
dense：尽量填满空格。
示例：

.container {  grid-auto-flow: row;}

复制代码

3. Grid 项目属性

（1）`grid-column`

定义网格项目在网格容器中的列起始和结束位置。
示例：

.item {  grid-column: 1 / 3;}

复制代码

（2）`grid-row`

定义网格项目在网格容器中的行起始和结束位置。
示例：

.item {  grid-row: 2 / 4;}

复制代码

（3）`grid-area`

定义网格项目的位置和跨越的区域，可以与grid-template-areas属性配合使用。
示例：

.item {  grid-area: header;}

复制代码

（4）`justify-self`

定义网格项目在单元格内的水平对齐方式。
取值：
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：居中对齐。
stretch（默认值）：拉伸占满单元格宽度。
示例：

.item {  justify-self: center;}

复制代码

（5）`align-self`

定义网格项目在单元格内的垂直对齐方式。
取值：
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：居中对齐。
stretch（默认值）：拉伸占满单元格高度。
示例：

.item {  align-self: end;}

复制代码

（6）`place-self`

简写属性，结合了justify-self和align-self。
示例：

.item {  place-self: center end;}

复制代码

理解和掌握网格布局，可以帮助你实现更复杂和精确的网页布局。网格布局提供了一种强大且灵活的方式来创建二维的布局结构。

六、响应式设计

1. 媒体查询

（1）媒体查询的语法

媒体查询（Media Queries）用于针对不同的设备和屏幕尺寸应用不同的 CSS 样式。
基本语法：

@media (媒体特性) {  /* CSS规则 */}

复制代码

常见媒体特性：
max-width：最大宽度
min-width：最小宽度
max-height：最大高度
min-height：最小高度
示例：

@media (max-width: 600px) {  .container {    background-color: lightblue;  }}

复制代码

（2）使用媒体查询进行响应式布局

响应式布局（Responsive Layout）是指根据不同设备的屏幕尺寸调整布局和样式，以提供良好的用户体验。
示例：

.container {  width: 100%;  padding: 20px;}
@media (max-width: 768px) {  .container {    width: 100%;    padding: 10px;  }}
@media (max-width: 480px) {  .container {    width: 100%;    padding: 5px;  }}

复制代码

2. 弹性布局

（1）使用百分比和视口单位

使用百分比设置元素的宽度和高度，使其相对于父容器进行调整。
示例：

.container {  width: 50%;  height: 50%;}

复制代码

使用视口单位（Viewport Units）设置元素的尺寸，使其相对于视口进行调整。
vw：视口宽度的百分比
vh：视口高度的百分比
vmin：视口宽度和高度中较小值的百分比
vmax：视口宽度和高度中较大值的百分比
示例：

.container {  width: 50vw;  height: 50vh;}

复制代码

（2）灵活图片和媒体

使用百分比或视口单位设置图片和媒体的尺寸，使其在不同设备上自适应。
示例：

img {  max-width: 100%;  height: auto;}

复制代码

该规则会确保图片在容器宽度变小的时候自动缩放，并保持其宽高比。
使用object-fit属性可以更好地控制图片和媒体的显示方式：
cover：保持宽高比缩放图片，覆盖整个容器。
contain：保持宽高比缩放图片，使其完全适应容器。
示例：

.image-container {  width: 100%;  height: 300px;}
.image-container img {  width: 100%;  height: 100%;  object-fit: cover;}

复制代码

掌握响应式设计的技巧，可以使你创建的网页在各种设备上都有良好的显示效果和用户体验。

七、 CSS 框架

1. CSS 框架概述

（1）常见的 CSS 框架（Bootstrap、Foundation 等）

Bootstrap 由 Twitter 开发，提供了一系列预定义的 CSS 和 JavaScript 组件。特点：响应式设计、易用的栅格系统、丰富的组件库。官方网站：Bootstrap
Foundation 由 ZURB 开发，强调响应式设计和移动优先。特点：灵活的布局系统、丰富的 UI 组件、兼容性强。官方网站：Foundation
其他常见框架：BulmaTailwind CSSSemantic UI

2. 使用 CSS 框架进行布局

（1）框架的栅格系统

栅格系统（Grid System）是 CSS 框架中用于创建响应式布局的核心组件，通过将页面划分为列和行，简化布局设计。
Bootstrap 的栅格系统
基本结构：

<div class="container">  <div class="row">    <div class="col-md-4">列1</div>    <div class="col-md-4">列2</div>    <div class="col-md-4">列3</div>  </div></div>

复制代码

关键类名：
.container：定义一个固定宽度的容器。
.row：定义一行。
.col-：定义列，后接尺寸前缀（如-md-）和列数（如-4）。

响应式列类名：
.col-xs-：超小屏幕（<576px）
.col-sm-：小屏幕（≥576px）
.col-md-：中等屏幕（≥768px）
.col-lg-：大屏幕（≥992px）
.col-xl-：超大屏幕（≥1200px）

Foundation 的栅格系统
基本结构：

<div class="grid-container">  <div class="grid-x grid-padding-x">    <div class="cell small-4">列1</div>    <div class="cell small-4">列2</div>    <div class="cell small-4">列3</div>  </div></div>

复制代码

关键类名：
.grid-container：定义一个固定宽度的容器。
.grid-x：定义一行。
.cell：定义列，后接尺寸前缀（如-small-）和列数（如-4）。

（2）自定义框架样式

大多数 CSS 框架允许你自定义默认样式，以便根据项目需求进行调整。
Bootstrap 自定义
使用 Sass 变量自定义 Bootstrap 样式：

$primary-color: #ff5733;@import "bootstrap";

复制代码

在线定制工具：Bootstrap Customize
Foundation 自定义
使用 Sass 变量自定义 Foundation 样式：

$primary-color: #ff5733;@import "foundation";

复制代码

在线定制工具：Foundation Customize

使用 CSS 框架可以大大提高开发效率，减少重复劳动，同时确保设计的一致性。

八、高级布局技术

1. CSS Grid 与 Flexbox 结合

（1）何时使用 Grid，何时使用 Flexbox

Grid 布局
适用于创建二维布局（同时处理行和列）。
适用于需要精确控制整体布局结构的场景。
示例：网页主结构布局、复杂的表格布局。

.container {  display: grid;  grid-template-columns: 1fr 2fr 1fr;  grid-template-rows: auto;}.header {  grid-column: 1 / 4;}.main {  grid-column: 2 / 3;}.sidebar {  grid-column: 1 / 2;}.footer {  grid-column: 1 / 4;}

复制代码

Flexbox 布局

适用于创建一维布局（处理行或列）。
适用于需要对元素进行动态分布和对齐的场景。
示例：导航栏、工具栏、单行或单列的内容对齐。

.container {  display: flex;  justify-content: space-between;}.item {  flex: 1;}

复制代码

结合使用

可以在项目中同时使用 Grid 和 Flexbox，分别用于不同部分的布局。
示例：使用 Grid 布局网页主结构，使用 Flexbox 布局导航栏。

.container {  display: grid;  grid-template-columns: 1fr 3fr;  grid-template-rows: auto;}.nav {  display: flex;  justify-content: space-between;}

复制代码

2. CSS 变量和预处理器

（1）使用 CSS 变量

CSS 变量（Custom Properties）允许你在 CSS 中定义变量，并在多个地方重复使用这些变量。
定义变量：

:root {  --primary-color: #3498db;  --secondary-color: #2ecc71;  --font-size: 16px;}

复制代码

使用变量：

body {  color: var(--primary-color);  font-size: var(--font-size);}.button {  background-color: var(--secondary-color);}

复制代码

（2）常见的 CSS 预处理器（Sass、LESS）

Sass
Sass（Syntactically Awesome Stylesheets）是一种 CSS 预处理器，提供了变量、嵌套、混合宏和函数等功能，增强了 CSS 的可维护性和灵活性。
基本语法：

$primary-color: #3498db;$secondary-color: #2ecc71;
body {  color: $primary-color;  font-size: 16px;}
.button {  background-color: $secondary-color;  @include border-radius(5px);}
@mixin border-radius($radius) {  border-radius: $radius;}

复制代码

使用工具：可以通过安装node-sass或使用 GUI 工具（如 Koala）进行编译。

LESS
LESS（Leaner Style Sheets）是一种 CSS 预处理器，提供了变量、嵌套、混合宏和函数等功能，简化了 CSS 编写。
基本语法：

@primary-color: #3498db;@secondary-color: #2ecc71;
body {  color: @primary-color;  font-size: 16px;}
.button {  background-color: @secondary-color;  .border-radius(5px);}
.border-radius(@radius) {  border-radius: @radius;}

复制代码

使用工具：可以通过安装less或使用 GUI 工具进行编译。

掌握这些高级布局技术和工具，可以大大提高你在实际项目中的开发效率和代码维护性。

九、实践项目

1. 基本网页布局

（1）创建一个简单的页面布局

目标：创建一个包含头部、内容区和底部的基本网页布局。
步骤：

创建 HTML 结构：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基本网页布局</title><link rel="stylesheet" href="styles.css"></head><body><header>头部</header><main>内容区</main><footer>底部</footer></body></html>

复制代码

添加 CSS 样式：

body {  display: flex;  flex-direction: column;  min-height: 100vh;  margin: 0;}
header, footer {  background-color: #333;  color: #fff;  text-align: center;  padding: 1em;}
main {  flex: 1;  padding: 1em;}

复制代码

2. 复杂网页布局

（1）创建一个多列布局的复杂页面

目标：使用 CSS Grid 和 Flexbox 创建一个包含头部、侧边栏、主内容区和底部的复杂布局。
步骤：

创建 HTML 结构：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复杂网页布局</title><link rel="stylesheet" href="styles.css"></head><body><div class="container">  <header>头部</header>  <aside>侧边栏</aside>  <main>主内容区</main>  <footer>底部</footer></div></body></html>

复制代码

添加 CSS 样式：

.container {  display: grid;  grid-template-areas:    "header header"    "sidebar main"    "footer footer";  grid-template-rows: auto 1fr auto;  grid-template-columns: 200px 1fr;  min-height: 100vh;}
header {  grid-area: header;  background-color: #333;  color: #fff;  text-align: center;  padding: 1em;}
aside {  grid-area: sidebar;  background-color: #f4f4f4;  padding: 1em;}
main {  grid-area: main;  padding: 1em;}
footer {  grid-area: footer;  background-color: #333;  color: #fff;  text-align: center;  padding: 1em;}

复制代码

3. 响应式网页

（1）创建一个响应式页面，适应不同设备尺寸

目标：使用媒体查询和灵活布局创建一个响应式页面，使其适应不同的设备尺寸。
步骤：

创建 HTML 结构：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式网页</title><link rel="stylesheet" href="styles.css"></head><body><header>头部</header><main>内容区</main><footer>底部</footer></body></html>

复制代码

添加 CSS 样式：

body {  display: flex;  flex-direction: column;  min-height: 100vh;  margin: 0;}
header, footer {  background-color: #333;  color: #fff;  text-align: center;  padding: 1em;}
main {  flex: 1;  padding: 1em;}
@media (max-width: 768px) {  header, footer {    padding: 0.5em;  }
  main {    padding: 0.5em;  }}
@media (max-width: 480px) {  header, footer {    padding: 0.25em;  }
  main {    padding: 0.25em;  }}

复制代码

通过这些实践项目，你可以逐步掌握从基础到复杂的网页布局设计，并学会如何创建适应不同设备的响应式网页。

文章转载自：孤飞
原文链接：https://www.cnblogs.com/ranxi169/p/18191670
体验地址：http://www.jnpfsoft.com/?from=infoq

发布于: 刚刚阅读数: 5

不在线第一只蜗牛

关注

还未添加个人签名 2023-06-19 加入

还未添加个人简介

发布

暂无评论

创作场景

CSS 布局概念与技术教程

引言

1.什么是 CSS？

2.CSS 的基本语法

3.常见的选择器

4.CSS 布局

5.开始你的 CSS 学习之旅

一、CSS 基础

1.CSS 概述

（1）什么是 CSS:

（2）CSS 的语法和结构:

2.选择器

（1）基本选择器：

（2）组合选择器：

（3）属性选择器：

（4）伪类和伪元素选择器：

二、 盒模型

1. 盒模型概述

(1) 内容（Content）

(2) 内边距（Padding）

(3) 边框（Border）

(4) 外边距（Margin）

2. 盒模型的应用

(1) 盒模型的宽度和高度计算

(2) box-sizing属性

三、 布局方式

1. 块级元素与行内元素

（1）区别和应用

2. 浮动布局

（1）浮动的概念

（2）清除浮动的方法

（3）浮动布局的应用

3. 定位

（1）静态定位（Static Positioning）

（2）相对定位（Relative Positioning）

（3）绝对定位（Absolute Positioning）

（4）固定定位（Fixed Positioning）

（5）粘性定位（Sticky Positioning）

四、 弹性盒子（Flexbox）

1. Flexbox 概述

（1）Flex 容器和 Flex 项目

2. Flex 容器属性

（1）display: flex;

（2）flex-direction

（3）flex-wrap

（4）justify-content

（5）align-items

（6）align-content

3. Flex 项目属性

（1）order

（2）flex-grow

（3）flex-shrink

（4）flex-basis

（5）align-self

五、 网格布局（Grid）

1. Grid 概述

（1）网格容器和网格项目

2. Grid 容器属性

（1）display: grid;

（2）grid-template-columns

（3）grid-template-rows

（4）grid-template-areas

（5）grid-column-gap 和 grid-row-gap

（6）grid-auto-flow

3. Grid 项目属性

（1）grid-column

（2）grid-row

（3）grid-area

（4）justify-self

（5）align-self

（6）place-self

六、 响应式设计

1. 媒体查询

（1）媒体查询的语法

（2）使用媒体查询进行响应式布局

2. 弹性布局

（1）使用百分比和视口单位

（2）灵活图片和媒体

七、 CSS 框架

二、盒模型

(2) `box-sizing`属性

三、布局方式

四、弹性盒子（Flexbox）

（1）`display: flex;`

（2）`flex-direction`

（3）`flex-wrap`

（4）`justify-content`

（5）`align-items`

（6）`align-content`

（1）`order`

（2）`flex-grow`

（3）`flex-shrink`

（4）`flex-basis`

（5）`align-self`

五、网格布局（Grid）

（1）`display: grid;`

（2）`grid-template-columns`

（3）`grid-template-rows`

（4）`grid-template-areas`

（5）`grid-column-gap` 和 `grid-row-gap`

（6）`grid-auto-flow`

（1）`grid-column`

（2）`grid-row`

（3）`grid-area`

（4）`justify-self`

（5）`align-self`

（6）`place-self`

六、响应式设计

八、高级布局技术

九、实践项目