零基础学前端（四）重点讲解 CSS：盒子模型、样式选择器、flex布局

蔚落 2024-04-22 15:18 79阅读 0赞

> 1. 该篇适用于从零基础学习前端的小白
> 
> 2. 初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识
> 
> 3. 初学者切忌，不要眼花缭乱，不要四处找其它文档，要坚定一个教授者的方式，将其学通透，才是好的学习方式。  
>   
> 4. 本篇css我不会讲具体样式如何写，因为这些小细节，你只需搜索自己便可以学会。我侧重于css的核心概念
> 
> （盒子模型---认识元素的构成、选择器---找到被操作的元素、flex布局---操作元素位置摆放）

## 一、CSS概念 ##

它名字叫 层叠样式表(英文全称：Cascading Style Sheets)是用来设计HTML表现的。

我们最重要的是明白它的“层叠”的意义，也就是样式之间可以覆盖。

## 二、盒子模型 ##

> 盒子模型的概念有助于我们认识元素的基本构成

### 1. 盒子模型的基本组成 ###

![59dab4075d404cd282a36392d4c27b97.jpeg][]

我们把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

> 宽度(width) = content宽度 + padding-left(左内边距) + padding-right(右内边距) +
> 
> borde-left + border-right + margin-left + margin-right
> 
> =》高度组成同理

###  ###

### 2. 使用chrome的开发者工具查看元素结构 ###

> 使用chrome的开发者工具，查看css样式、网络请求是常用的开发手段，可以方便开发者快速定位到问题，目前我只介绍查看css样式

![20c35ac9f44c44bb9286eedc0fcfe981.png][]

当然也可以直接按f12，有的电脑可能需要按Fn + F12才可以打开开发者工具

![bc4701f6ccfc48e8bbee5e13add60e6b.png][]

## 三、CSS 的常用选择器：class(类选择器) 、id 、标签选择器 ##

> 选择器的意义就是帮助开发者找到要被操作的元素

### 1. class 和 标签选择器的使用 ###

经过之前的实践你应该至少使用过 class 和 标签选择器。如下代码

### 2. id 选择器的使用方法 ###

### 3. 层叠样式，就是样式之间可以覆盖 ###

接下来我们样式，假设id、class 两个选择器，都对同一个元素赋值了样式，效果会如何

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          #head{
            color: green;
          }
          .head2{
            color: red;
          }
        </style>
      </head>
    
      <body>
          <div id="head" class="head2">我到底是什么颜色</div>
      </body>
    </html>

![5b94040572554694a7676a8aad568b80.png][]

经过实我们看到 id 选择器，大于 class选择器，剩下初学者自己实践就好。

## 四、flex布局（重点） ##

### 1、为什么学习flex布局 ###

> 1. 简单好用：比传统布局 display属性 + position属性 + float属性语法更简单
> 
> 2. 适用性强：因为在pc端、App、小程序都是统一支持Flex布局的，一劳永逸。

### 2、什么是flex布局 ###

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
      display: flex;
    }

行内元素也可以使用 Flex 布局

.box{
      display: inline-flex;
    }

注意：设为 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效。

### 3、定义一个flex容器，添加一个flex项目 ###

> 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

下面div类名为box就是容器，而类名为item的div就是项目

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>flex布局</title>
        <style>
            *{
              padding: 0;
              margin: 0;
            }
            body{
              background-color: cadetblue;
            }
            .box{
              height: 400px;
              background-color: #000;
              display: flex;                 /*将该容器设置为弹性盒子---flex容器*/
              flex-direction: row;           /*横向方向排列*/
              justify-content: flex-start; 
            }
            .item{
              width: 60px;
              height: 60px;
              border-radius: 50%; /*让它变成一个圆形*/
              background-color: #fff;
            }
        </style>
      </head>
      <body>
          <div class="box">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
          </div>
      </body>
    </html>

## ![fd7997283bd14e689a3c2301c07bdb06.png][] ##

## 五、flex容器的常用属性 ##

容器有一下6个属性，暂时只拿最常用的来讲

>  *  flex-direction 设置主轴方向（就是容器元素排列方向）
>  *  justify-content 主轴方向属性
>  *  align-items 非主轴方向
>  *  flex-wrap 元素换行属性

### 1. 设置flex容器内元素的排列方向 flex-direction ###

`flex-direction`属性决定主轴的方向（即项目的排列方向）。

.box {
      flex-direction: row | row-reverse | column | column-reverse;
    }

>  *  `row`（默认值）：主轴为水平方向，起点在左端。
>  *  `row-reverse`：主轴为水平方向，起点在右端。
>  *  `column`：主轴为垂直方向，起点在上沿。
>  *  `column-reverse`：主轴为垂直方向，起点在下沿。

![d6c46a5ced3548e99e87545c301e2a8e.png][]

### 2. justify-content 属性定义了项目在主轴上的对齐方式。 ###

.box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }

>  *  `flex-start`（默认值）：左对齐
>  *  `flex-end`：右对齐
>  *  `center`： 居中
>  *  `space-between`：两端对齐，项目之间的间隔都相等。
>  *  `space-around`：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

![bd68218672214cd6b8ee46402fbb9e73.png][]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>flex布局</title>
        <style>
            *{
              padding: 0;
              margin: 0;
            }
            body{
              background-color: cadetblue;
            }
            .box{
              height: 400px;
              background-color: #000;
              display: flex;                 /*将该容器设置为弹性盒子---flex容器*/
              flex-direction: row;           /*横向方向排列*/
              justify-content: space-around; 
            }
            .item{
              width: 60px;
              height: 60px;
              border-radius: 50%; /*让它变成一个圆形*/
              background-color: #fff;
            }
        </style>
      </head>
      <body>
          <div class="box">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
          </div>
      </body>
    </html>

![970244fc64ef4178a6a650c7e173920c.png][]

### 3. align-items属性定义项目在交叉轴上如何对齐 ###

.box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }

>  *  `flex-start`：交叉轴的起点对齐。
>  *  `flex-end`：交叉轴的终点对齐。
>  *  `center`：交叉轴的中点对齐。
>  *  `baseline`: 项目的第一行文字的基线对齐。
>  *  `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

![2ec0b4af20d2416aa3fb86749c43ea88.png][]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>flex布局</title>
        <style>
            *{
              padding: 0;
              margin: 0;
            }
            body{
              background-color: cadetblue;
            }
            .box{
              height: 400px;
              background-color: #000;
              display: flex;                 /*将该容器设置为弹性盒子---flex容器*/
              flex-direction: row;           /*横向方向排列*/
              justify-content: space-around; 
              align-items: center;
            }
            .item{
              width: 60px;
              height: 60px;
              border-radius: 50%; /*让它变成一个圆形*/
              background-color: #fff;
            }
        </style>
      </head>
      <body>
          <div class="box">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
          </div>
      </body>
    </html>

![828d8183bfde4aa493a74d91827897b7.png][]

### 4. `flex-wrap`属性定义，如果一条轴线排不下，如何换行 ###

![5ea9b5623b1c48ca9a4ad8d7390307e2.png][]

.box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

它可能取三个值

（1）`nowrap`（默认）：不换行。

![a0e2969006b44d41bc3ab1e10169a7e7.png][]

（2）`wrap`：换行，第一行在上方。

![6e7e5f4f18564dcea20c235f2ec4cdcc.png][]

（3）`wrap-reverse`：换行，第一行在下方。

![e803b9f56ee1471a8b3556e5cab94139.png][]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>flex布局</title>
        <style>
            *{
              padding: 0;
              margin: 0;
            }
            body{
              background-color: cadetblue;
            }
            .box{
              width: 282px;
              background-color: #000;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              flex-wrap: wrap;
            }
            .item{
              width: 60px;
              height: 60px;
              border-radius: 50%; /*让它变成一个圆形*/
              background-color: #fff;
            }
        </style>
      </head>
      <body>
          <div class="box">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
          </div>
      </body>
    </html>

![1d1c4ccba655491992037384da7a1b17.png][]

## 六、结束语 ##

概念虽然不难理解，但最后都需要落到一个实际的结果上。我们必须实际写代码、开发页面，只有这样才能掌握好知识。接下来有两个实战页面。

1. 模仿百度网站首页

[零基础学前端（五）HTML+CSS实战：模仿百度网站首页\_tengyuxin的博客-CSDN博客][HTML_CSS_tengyuxin_-CSDN]

2. 模仿QQ官网首页

[零基础学前端（六）HTML+CSS实战：模仿QQ官网首页-CSDN博客][HTML_CSS_QQ_-CSDN]

[59dab4075d404cd282a36392d4c27b97.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e5466ad4022349c2a39b5558a272d998.jpeg
[20c35ac9f44c44bb9286eedc0fcfe981.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5d9510dc19f242efa5662cc5206d715e.png
[bc4701f6ccfc48e8bbee5e13add60e6b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/44a2defb72204c9db8deb4ad4bfefb6e.png
[5b94040572554694a7676a8aad568b80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/98e5c5552f0340b49fdfe069cac63a01.png
[fd7997283bd14e689a3c2301c07bdb06.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/6d6dd0e3e37a4acab1f545b11d5c06a5.png
[d6c46a5ced3548e99e87545c301e2a8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/ff71f31368e94514b4808109be7f6c8b.png
[bd68218672214cd6b8ee46402fbb9e73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/883d5ddcf3ad42239b7428455c991b95.png
[970244fc64ef4178a6a650c7e173920c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e74c1d339b354970bfcfebff23ddb363.png
[2ec0b4af20d2416aa3fb86749c43ea88.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/c47f4a0eb41a46b4a562d8978ac4f1df.png
[828d8183bfde4aa493a74d91827897b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/55e9f2a9f9d440fa8e7616fe3f32b5cf.png
[5ea9b5623b1c48ca9a4ad8d7390307e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/adf9d5c7d3c84528873cabbb8b49afaa.png
[a0e2969006b44d41bc3ab1e10169a7e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/401fe13ee8a6425695ee026624648371.png
[6e7e5f4f18564dcea20c235f2ec4cdcc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/9a8ce70747fc42c09875c85eef0cf88e.png
[e803b9f56ee1471a8b3556e5cab94139.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/783f772648f04370b8e7d42743402cab.png
[1d1c4ccba655491992037384da7a1b17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/983c27b0846445669616ea88da8f379b.png
[HTML_CSS_tengyuxin_-CSDN]: https://blog.csdn.net/tengyuxin/article/details/133021039
[HTML_CSS_QQ_-CSDN]: https://blog.csdn.net/tengyuxin/article/details/133083069