CSS布局基本概念和样式入门

🕗2024-05-16👁️0

如果你已经掌握了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 Shee

ts，层叠样式表）是一种用来描述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？

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）灵活图片和媒体

二、盒模型

(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`

六、响应式设计