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

    1. 该篇适用于从零基础学习前端的小白

    2. 初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识

    3. 初学者切忌，不要眼花缭乱，不要四处找其它文档，要坚定一个教授者的方式，将其学通透，才是好的学习方式。

    4. 本篇css我不会讲具体样式如何写，因为这些小细节，你只需搜索自己便可以学会。我侧重于css的核心概念

    （盒子模型---认识元素的构成、选择器---找到被操作的元素、flex布局---操作元素位置摆放）

    一、CSS概念

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

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

    二、盒子模型

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

    1. 盒子模型的基本组成 

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

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

    宽度(width) = content宽度 + padding-left(左内边距) + padding-right(右内边距) +

    borde-left + border-right + margin-left + margin-right

    =》高度组成同理

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

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

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

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

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

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

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

    1.  
    2.     <style>
    3.         /* class 类选择器 */
    4.         .leftTopBox{  
    5.           
    6.         }
    7.           /* 标签选择器：它表示leftTopBox这个类选择器，下面的所有li标签 */
    8.         .leftTopBox li{
    9.  
    10.         }
    11.     style>
    12.  
    13. <body>
    14.     <ul class="leftTopBox">
    15.         <li>新闻li>
    16.         <li>hao123li>
    17.         <li>地图li>
    18.         <li>贴吧li>
    19.         <li>视频li>
    20.         <li>图片li>
    21.         <li>网盘li>
    22.         <li>更多li>
    23.     ul>
    24. body>

    2. id 选择器的使用方法

    1.  <style>
    2.     /*id选择器*/
    3.       #head{
    4.         color: aquamarine;
    5.       }
    6.     style>
    7.  
    8.   <body>
    9.       <div id="head">div>
    10.   body>

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

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

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <style>
    9.       #head{
    10.         color: green;
    11.       }
    12.       .head2{
    13.         color: red;
    14.       }
    15.     style>
    16.   head>
    17.  
    18.   <body>
    19.       <div id="head" class="head2">我到底是什么颜色div>
    20.   body>
    21. html>

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

    四、flex布局（重点）

    1、为什么学习flex布局

    1. 简单好用：比传统布局  display属性 + position属性 + float属性语法更简单 

    2. 适用性强：因为在pc端、App、小程序都是统一支持Flex布局的，一劳永逸。

    2、什么是flex布局

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

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

    1. .box{
    2.   display: flex;
    3. }

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

    1. .box{
    2.   display: inline-flex;
    3. }

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

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

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

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

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>flex布局title>
    8.     <style>
    9.         *{
    10.           padding: 0;
    11.           margin: 0;
    12.         }
    13.         body{
    14.           background-color: cadetblue;
    15.         }
    16.         .box{
    17.           height: 400px;
    18.           background-color: #000;
    19.           display: flex;                 /*将该容器设置为弹性盒子---flex容器*/
    20.           flex-direction: row;           /*横向方向排列*/
    21.           justify-content: flex-start; 
    22.         }
    23.         .item{
    24.           width: 60px;
    25.           height: 60px;
    26.           border-radius: 50%; /*让它变成一个圆形*/
    27.           background-color: #fff;
    28.         }
    29.     style>
    30.   head>
    31.   <body>
    32.       <div class="box">
    33.         <span class="item">span>
    34.         <span class="item">span>
    35.         <span class="item">span>
    36.       div>
    37.   body>
    38. html>

     五、flex容器的常用属性

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

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

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

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

    1. .box {
    2.   flex-direction: row | row-reverse | column | column-reverse;
    3. }
    • row（默认值）：主轴为水平方向，起点在左端。
    • row-reverse：主轴为水平方向，起点在右端。
    • column：主轴为垂直方向，起点在上沿。
    • column-reverse：主轴为垂直方向，起点在下沿。

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

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

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

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>flex布局title>
    8.     <style>
    9.         *{
    10.           padding: 0;
    11.           margin: 0;
    12.         }
    13.         body{
    14.           background-color: cadetblue;
    15.         }
    16.         .box{
    17.           height: 400px;
    18.           background-color: #000;
    19.           display: flex;                 /*将该容器设置为弹性盒子---flex容器*/
    20.           flex-direction: row;           /*横向方向排列*/
    21.           justify-content: space-around; 
    22.         }
    23.         .item{
    24.           width: 60px;
    25.           height: 60px;
    26.           border-radius: 50%; /*让它变成一个圆形*/
    27.           background-color: #fff;
    28.         }
    29.     style>
    30.   head>
    31.   <body>
    32.       <div class="box">
    33.         <span class="item">span>
    34.         <span class="item">span>
    35.         <span class="item">span>
    36.       div>
    37.   body>
    38. html>

     

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

    1. .box {
    2.   align-items: flex-start | flex-end | center | baseline | stretch;
    3. }
    • flex-start：交叉轴的起点对齐。
    • flex-end：交叉轴的终点对齐。
    • center：交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

     

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>flex布局title>
    8.     <style>
    9.         *{
    10.           padding: 0;
    11.           margin: 0;
    12.         }
    13.         body{
    14.           background-color: cadetblue;
    15.         }
    16.         .box{
    17.           height: 400px;
    18.           background-color: #000;
    19.           display: flex;                 /*将该容器设置为弹性盒子---flex容器*/
    20.           flex-direction: row;           /*横向方向排列*/
    21.           justify-content: space-around; 
    22.           align-items: center;
    23.         }
    24.         .item{
    25.           width: 60px;
    26.           height: 60px;
    27.           border-radius: 50%; /*让它变成一个圆形*/
    28.           background-color: #fff;
    29.         }
    30.     style>
    31.   head>
    32.   <body>
    33.       <div class="box">
    34.         <span class="item">span>
    35.         <span class="item">span>
    36.         <span class="item">span>
    37.       div>
    38.   body>
    39. html>

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

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

    它可能取三个值 

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

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

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

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>flex布局title>
    8.     <style>
    9.         *{
    10.           padding: 0;
    11.           margin: 0;
    12.         }
    13.         body{
    14.           background-color: cadetblue;
    15.         }
    16.         .box{
    17.           width: 282px;
    18.           background-color: #000;
    19.           display: flex;
    20.           flex-direction: row;
    21.           justify-content: flex-start;
    22.           flex-wrap: wrap;
    23.         }
    24.         .item{
    25.           width: 60px;
    26.           height: 60px;
    27.           border-radius: 50%; /*让它变成一个圆形*/
    28.           background-color: #fff;
    29.         }
    30.     style>
    31.   head>
    32.   <body>
    33.       <div class="box">
    34.         <span class="item">span>
    35.         <span class="item">span>
    36.         <span class="item">span>
    37.         <span class="item">span>
    38.         <span class="item">span>
    39.         <span class="item">span>
    40.       div>
    41.   body>
    42. html>

    六、结束语

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

    1. 模仿百度网站首页

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

    2. 模仿QQ官网首页

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

  • 相关阅读:
    Android [SPI,AutoSerivce,ServiceLoader]
    uniapp使用uv-vi组件创建表单，收集信息
    【服务器数据恢复】RAID5强制上线后又被格式化的数据恢复案例
    离线量化（后量化）算法研究-----脉络梳理
    已解决java.nio.charset.CoderMalfunctionError: 编码器故障错误的正确解决方法，亲测有效！！！
    在线零售多用户多门店连锁商城系统
    如何合理估算 Java 线程池大小
    CentOS7 NTP客户端的时间同步详解
    mfc140u.dll丢失的解决方法，以及针对每个解决mfc140u.dll丢失办法的优缺点
    即时通讯WebSocket
  • 原文地址：https://blog.csdn.net/tengyuxin/article/details/133020773