Html+CSS基础知识（一）

已于 2022-11-01 18:38:02 修改
阅读量867 收藏 7
点赞数
文章标签： html css 前端
于 2022-10-22 14:43:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42330641/article/details/126359292
版权

1 前端常识

1.1 HTML的作用

  • 定义网页结构；

1.2 CSS的作用

  • 修饰网页结构和样式；

1.3 javascript

  • 定义网页之间的交互

2 HTML基础

2.1 什么是HTML

  • HTML是一种超文本标记语言，是一种标记语言；

2.1 HTML页面基本解释

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
</head>

<body>
    静夜思 李⽩ 床前明⽉光 疑是地上霜 举头望明⽉ 低头思故乡
</body>

</html>
  • !DOCTYPE html 表示该文档是用的HTML5编写
  • meta标签
    • 是一个自闭合标签；
    • 提供网页的相关信息，源数据；
    • charset=“utf-8” 中文网站设置格式；
    • name=“keywords” content=“test,test1” 提供搜索网页的关键字；
    • name=“description” content=“这个练习使用的标签” 提供网站的描述信息；

2.2 闭合标签和注释

  • 常用的闭合标签：
    • meta
    • img
    • input
    • link
    • hr
  • 注释
<--注释的格式-->

2.3 常用语义化标签

  • 什么是语义化标签：简单的来说就是标签的用途；
  • 每一个语义化标签都有它的作用；
    • 网站标题标签：title
    • 网页内容标题：h
    • 段落标签：p
    • 强调标签：Strong
    • 头部标签：header
    • 导航标签：nav
    • 主要内容：main
  • 为什么要定义语义化标签：
    • 在没有css的修饰下也有较为完整的结构；
    • 增加关键字，增加seo的搜索权重，在网站中搜索比较靠前；

2.4 常用标签

2.4.1 超链接标签a的使用

  • 锚点：用户可以标记一个位置，用户可以根据这个标记位置跳转到指定的位置；
    • 标记格式：<a name="标记001" > 文本 </a>
    • 跳转格式：<a href="#标记001"> 文本 </a>
    • 标记格式一般是使用name进行标记，为了提交精确度也可以加上id；
    • 跳转其他页面的锚点是格式是：<a href="路径/adc.html#标记001"> 文本 </a>
    • 示例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
</head>

<body>
    <a href="#001">跳转举头望明⽉</a> 静夜思 李⽩ 床前明⽉光 疑是地上霜 举头望明⽉ 1
    <br/> 1<br/> 1<br/> 1 <br/>1<br/> 1 <br/>1 <br/>1<br/>1 <br/>1<br/>1<br/> 
    1<br/>1 <br/>1 <br/>1<br/> 1<br/>1 <br/>1 <br/>1<br/> 1<br/> 1<br/>1<br/> 
    1<br/> 1<br/> 1 <br/>1<br/>1<br/>1<br/> 1<br/>1<br/>1<br/>1<br/>1<br/> 
    1<br/> 1<br/>1 <br/>
    <a name="001"> 举头望明⽉</a>
    低头思故乡
</body>

</html>
  • 跳转
    • 跳转格式：<a href="www.baidu.com"> 文本</a>
    • 属性brank 打开新的浏览器标签：target=“brank”
  • 路径
    • 使用站外资源一般使用绝对路径；
    • 站内资源使用相对路径；
      示例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
</head>

<body>
    <a href="https://www.baidu.com" target="brank">跳转到百度</a>
</body>
</html>

2.4.2 图像标签 img

  • 常用属性
    • src 图片的路径；
    • ait 图片加载失败的提示；
    • title 鼠标放在图片上面的展示的文字；
  • 图片源
    • 本地图片 稳定；
    • 线上图片 容易丢失；
    • base64图片；
      • 小图片 占用的内存小，减少了网站对本地资源访问；
      • 大图片 占用的内存大，增加了图片服务器的压力；
  • 应用
    • 点击图片跳转
    • 示例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
</head>

<body>

    <a href="https://www.baidu.com">
        <img title="小狗图片" src="
        https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.15lu.com%2Fdedecms%2Fuploads%2Fallimg%2F200327%2F1-20032G05H0-50.jpg&refer=http%3A%2F%2Fwww.15lu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663223045&t=6d8cc86961a97ee93a1b413bc1a1a4ea"
            alt="加载失败"/>
    </a>
</body>

</html>

2.4.3 表格

  • 在网页中生成一个表格
  • table标签的常用元素：
    • th 表头；
    • tr 表的行；
    • td 表的单元格；
  • table的常用属性
    • broder 设置边框；
    • cellspacing 设置单元格之间空白的距离；
    • cellpadding 设置内容和单元格之间的距离；
  • td的属性
    • rowspan 跨行合并；
    • colspan 跨列合并；
    • 示例
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
</head>

<body>
    <table border="5" cellpadding="10">
        <th>姓名</th>
        <th>科目</th>
        <th>分数</th>

        <tr>
            <td>小赵</td>
            <td>数学</td>
            <td>125</td>
        </tr>

        <tr>
            <td>小钱</td>
            <td>英语</td>
            <td>100</td>
        </tr>

        <tr>
            <td>小曾</td>
            <td>语文</td>
            <td>100</td>
        </tr>
    </table>

    <table border="1" cellpadding="20">

        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>分数</th>

        </tr>

        <tr>
            <td>小赵</td>
            <td>数学</td>
            <td rowspan="2">125</td>
        </tr>
        <tr>
            <td>小赵</td>
            <td>数学</td>
        </tr>

    </table>


    <table border="1" cellpadding="20">

        <tr>
            <th>姓名</th>
            <th>科目</th>
        </tr>

        <tr>
            <td colspan="2">小赵</td>
        </tr>
        <tr>
            <td>小赵</td>
        </tr>
    </table>
</body>

</html>

2.4.4 列表

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
</head>

<body>

    <!-- 有序列表 -->
    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
    <!-- 自定义列表 -->
    <dl>
        <!-- 定义列表项dt -->
        <dt>姓名：</dt>
        <dd>张三</dd>
    </dl>


</body>
</html>

2.4.5 表单

  • 作用：收集用户提交到服务端；

  • form表单的常用的元素有：

    • input元素：
      • type=“text”;
        • text 文本框；
      • type=“radio”;
        • radio 是单选框；
      • type=“submit”
        • submit 提交按钮；
      • type=“password”
        • password 密码框；
      • type=“checkbox”
        • checkbox 复选框
    • Action 属性
      • action 属性定义在提交表单时执行的动作。
      • 向服务器提交表单的通常做法是使用提交按钮。
      • 通常，表单会被提交到 web 服务器上的网页
    • label 元素
      • 增加用户的体验性；
      • 作用点击文字也可以选定按钮
    • select 元素
      • select 是设置下拉框；
      • select 的元素option是选项的内同；
    • button 元素
      • 按钮；

  • 示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
</head>

<body>
    <form action="">
        <p>请输入姓名</p>
        <input type="text">
        <p>请选择你的性别：</p>
        <!-- 使用label使点击文字同样可以选定 -->
        <label for="001">男生</label>
        <label for="002">女生</label>
        <input type="radio" name="sex" value="男" id="001">
        <input type="radio" name="sex" value="女" id="002">
        <br>
        <!-- 使用复选框选择科目-->
        <input type="checkbox" name="0011" value="语文">语文
        <input type="checkbox" name="0012" value="数学">数学
        <input type="checkbox" name="0013" value="英语">英语
        <input type="checkbox" name="0014" value="科技">科技
        <input type="checkbox" name="0015" value="种果树">种果树
        <input type="checkbox" name="0016" value="养猪">养猪
        <br>
        <p>选择一个兴趣爱好</p>
        <select name="habby">
            <option value="跑步">跑步</option>
            <option value="唱歌">唱歌</option>
            <option value="跳舞">跳舞</option>
            <option value="打游戏">打游戏</option>
        </select>

        <br>
        <p>请输入密码提交</p>
        <input type="password" name="0017">密码
        <input type="submit" name="00181">
    </form>






</body>

</html>

2.4.6 区块标签和行内标签

  • div
    • 作为区块标签，可以作为其他html元素的容器；
    • div没有特殊的含义，作为区块标签在网页的前后端会换行；
    • 和css使用，div元素可以对大的内容块设置样式；
    • div的作用是进行文档布局；
  • spn
    • 作为行内标签，可以作为文本的容器
    • 本身没有特殊的含义；
    • 与css使用，可以设置文本属性的样式；
  • 块级元素
    • 块级元素在浏览器显示时，通常会以新⾏来开始（和结束）
    • <h1>, <p>, <ul>, <table>,<div>
  • 行内元素
    • ⾏内元素在显示时通常不会以新⾏开始
    • <b>, <td>, <a>, <img>,<span>

3 CSS基础常识

  • css即层叠样式表,它是一种用来表现html或xml等文件样式的计算机语言；

3.2 CSS常用的几种写法

  • 内部样式表：css代码写入到head标签里面style标签里面
    • 格式：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>今天不学习，明天变垃圾</p>
</body>
</html>
  • 内联样式表： css代码作为属性写入
    • 格式：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">

</head>

<body>
    <p style="color: red;">今天不学习，明天变垃圾</p>
</body>

</html>
  • 外部样式表：通过link将css资源写入；
    • 后定义的会把先定义的覆盖掉；
    • 优点：
      • css和html分离有利于维护和阅读；
      • 解决页面样式重复的问题；
      • 页面缓存，提高了加载速度；
    • 格式：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <link rel="stylesheet" href="CSS文件的路径">
</head>
<body>
    <p >今天不学习，明天变垃圾</p>
</body>

</html>

3.3 常用的几种选择器

3.3.1 元素(标签)选择器

  • 通过标签名来获取元素；
  • 这种选择器的范围广，一般放在层级选择器中；
  • 示例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /* 单个标签使用 */
        
        p {
            color: rgb(211, 29, 90);
        }
        /* 多个标签组合 */
        
        ul,table {
            color: rgb(34, 121, 92);
        }
    </style>

</head>

<body>
    <p>今天不学习，明天变垃圾</p>
    <ul>
        <li>小黄</li>
        <li>小绿</li>
        <li>小狗</li>
        <li>小王</li>
    </ul>

    <table border="5px">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>22</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>23</td>
        </tr>


    </table>

</body>

</html>

3.3.2 类选择器

  • 通过类class定位选择器，一个元素可以有多个类，一个类也可以应用多个元素；
  • 单个类选择器；
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*单个类使用的选择器*/
        .abc {
            color: rgb(46, 21, 231);
        }
    </style>
</head>

<body>
    <p class="abc">今天不学习，明天变垃圾</p>
    <ul>
        <li>小黄</li>
        <li>小绿</li>
        <li>小狗</li>
        <li>小王</li>
    </ul>

    <table border="5px">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>22</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>23</td>
        </tr>

    </table>

</body>

</html>
  • 组合标签选择器
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*标签结合类使用的选择器*/
        p.study {
            color: rgb(46, 21, 231);
        }
    </style>
</head>
<body>
    <p class="study">今天不学习，明天变垃圾第二版</p>
    <p class="abc">今天不学习，明天变垃圾</p>
</body>
</html>
  • 多类选择器
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style type="text/css">
        /*链接多个选择器*/
        
        .adv.adf {
            color: red;
            background-color: black
        }
    </style>
</head>

<body>
    <div class="adv">
        <p>今天不学习，明天变垃圾第二版</p>
    </div>
    <div class="adf">
        <p>今天不学习，明天变垃圾</p>
    </div>

</body>
</html>```

* 链接多个类选择器

```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style type="text/css">
        /*链接多个选择器*/
        
        .adv.adf {
            color: red;
            background-color: black
        }
    </style>
</head>

<body>
    <div class="adv">
        <p>今天不学习，明天变垃圾第二版</p>
    </div>
    <div class="adf">
        <p>今天不学习，明天变垃圾</p>
    </div>

</body>
</html>

3.3.3 id 选择器

  • 使用id选择元素
  • 示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*使用id定位元素*/
        #adc {
            color: rgb(55, 208, 68);
        }
    </style>
</head>
<body>
    <p id="adc">今天不学习，明天变垃圾</p>
</body>
</html>

3.3.4 通配符选择器

  • 格式：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*使用通配符定位元素*/
       
        * {
            color: rgb(55, 208, 68);
        }
    </style>
</head>
<body>
    <p id="adc">今天不学习，明天变垃圾</p>
    <p id="adc">今天不学习，明天变垃圾第二版</p>
</body>
</html>

3.3.5 派生选择器

  • 后代派生器
    • 第一个参数和第二个参数之间无论有多少层级都不会影响
    • 格式：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*后代派生器*/
        /* 这点会取 div下的后代strong无论中间间隔多少代都会取到 */
        div strong {
            color: rgb(55, 208, 68);
        }
    </style>
</head>

<body>
    <div>
        <h1>今天不学习，明天变垃圾<strong>加粗1</strong></h1>
        <p>今天不学习，明天变垃圾第二版</p>
        <strong>加粗2</strong>
        <strong>加粗3</strong>
    </div>

</body>

</html>
  • 子选择器
    • 两个子元素中间用一个大于号>连接。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /**/
        /* 这点会取 div下的后代p标签 不会隔代取值 距离table下的table标签就不会被取值*/
        
        div>p {
            color: rgb(55, 208, 68);
        }
    </style>
</head>

<body>
    <div>
        <h1>今天不学习，明天变垃圾<strong>加粗1</strong></h1>
        <p>今天不学习，明天变垃圾第二版</p>
        <strong>加粗2</strong>
        <strong>加粗3</strong>
       <table>
        <tr>
      <td>
        <p>今天不学习，明天变垃圾第二版</p>
      </td>
    </tr>
       </table>
      




    </div>

</body>
</html>
  • 相邻兄弟选择器
    • 相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级 ；
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /* 这点会取p的相邻兄弟标签Strong */
        
        p+strong {
            color: rgb(55, 208, 68);
        }
    </style>
</head>

<body>
    <div>
        <h1>今天不学习，明天变垃圾<strong>加粗1</strong></h1>
        <p>今天不学习，明天变垃圾第二版</p>
        <strong>加粗2</strong>
        <strong>加粗3</strong>
    </div>

</body>
</html>

3.4 特殊的几种选择器

3.4.1 伪类选择器

  • 描述元素的特殊的一种状态；
3.4.1.1动态伪类选择器
  • link:匹配未被点击的超链接；
  • visited 匹配已经被点击过超链接；
  • hover 鼠标悬浮在某个元素上；
  • active 鼠标点击某个元素；
  • foucs 聚集某个焦点；
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        a:link {
            color: rgb(158, 214, 38);
        }
        
        a:visited {
            color: bisque;
        }
        
        h1:hover {
            color: aqua;
        }
        
        h2:active {
            color: blue;
        }
        
        input:focus {
            color: rgb(234, 11, 11);
        }
    </style>
</head>

<body>
    <a href="https://blog.csdn.net/" target="blank">我的博客</a>
    <h1>第一标题</h1>
    <h2>第二标题</h2>
    <h3>第三标题</h3>

    <form>
        <input type="text">
    </form>
</body>
</html>
3.4.1.2 UI元素伪类选择器
  • UI元素状态伪类选择器主要是针对于HTML中的Form元素进行操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type=“checkbox”"有"checked"和"unchecked"两种状态。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        input[type="text"]:disabled {
            color: rgb(242, 13, 13);
            font-size: 50px;
        }
        
        input[type="text"]:enabled {
            color: rgb(124, 242, 13);
            font-size: 50px;
        }
        
        input[type="checkbox"]:unchecked {
            color: rgb(242, 13, 13);
        }
    </style>
</head>

<body>
    <form>
        <input type="text" name="姓名" value="小王" disabled>
        <input type="text" name="姓名" value="小李" enabled>
        <br> 选修科目
        <input type="checkbox" name="kemu" value="语文" checked="unchecked">语文
        <input type="checkbox" name="kemu" value="语文" checked="unchecked">数学
        <input type="checkbox" name="kemu" value="语文" checked="unchecked">外语
    </form>
</body>

</html>
3.4.1.3 结构伪类选择器
  • 结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素；
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /* 参数n为选择的第几行 */
        
        p:nth-child(5) {
            color: aqua;
        }
        /* 匹配第一行参数 */
        
        p:first-child {
            color: rgb(167, 57, 57);
        }
        /* 匹配奇数项 */
        
        p:nth-child(2n+1) {
            color: rgb(54, 28, 207);
        }
        /* 匹配到偶数项 */
        
        p:nth-child(2n) {
            color: aquamarine;
        }
        /* 匹配到最后一项 */
        
        p:last-child {
            color: rgb(13, 116, 82);
        }
    </style>
</head>
<body>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <p>第四段</p>
    <p>第五段</p>
    <p>第六段</p>
</body>

</html>

3.4.2 伪元素选择器

  • 伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
    • ::first-letter 匹配第一个汉字或者第一个字母；
    • ::first-line 在区块中匹配第一行；
    • seletion 用户选中的高亮显示；
    • before：匹配被选元素的内容前面插入内容，可以与 content 配合使用
    • after：匹配被选元素的内容后前面插入内容，可以与 content 配合使用
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        p::first-letter {
            color: rgb(74, 219, 55);
        }
        
        p::first-line {
            color: rgb(137, 55, 219);
        }
        
        p::selection {
            color: rgb(219, 55, 55);
        }
        
        p::after {
            color: rgb(219, 55, 55);
            content: "领着我们上前去";
        }
        
        p::before {
            color: rgb(159, 55, 219);
            content: "盼望着，盼望着";
        }
    </style>
</head>

<body>

    <h5>春</h5>
    <p>盼望着，盼望着，东风来了，春天的脚步近了。 一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。 小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。 桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的。
        “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，跟轻风流水应和着。牛背上牧童的短笛，这时候也成天嘹亮地响着。 雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟，树叶儿却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；地里还有工作的农民，披着蓑戴着笠。他们的房屋，稀稀疏疏的在雨里静默着。
        天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份儿事去，“一年之计在于春”；刚起头儿，有的是工夫，有的是希望。 春天像刚落地的娃娃，从头到脚都是新的，它生长着。 春天像小姑娘，花枝招展的，笑着，走着。 春天像健壮的青年，有铁一般的胳膊和腰脚，领着我们上前去。
    </p>


</body>

</html>

3.5 盒子模型

3.5.1 什么是盒子模型

  • 所有的html元素都可以看作是一个盒子
  • 盒子的组成：
    • content 盒子的内容；
    • padding 盒子的内边距，内容和边框之间的距离；
    • border 盒子的边框指的是边框的宽度；
    • margin 盒子的外边距，最外界和边框的距离；
  • 盒子的大小：
    设置内边距
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        div {
            /* 设置背景颜色 */
            background-color: aqua;
            /* 设置内边距一种方式*/
            /* padding-left: 50px;
            padding-right: 50px;
            padding-top: 60px;
            padding-bottom: 60px; */
            /* 设置边距的第二种方式  顺时针方式 上 左 下 右*/
            /* padding: 10px 20px 30px 40px; */
            /* 设置边距的第三种方式  上下 左右*/
            /* padding: 10px 20px; */
            /* 设置边距的第四种方式  上 左右  下*/
            /* padding: 10px 20px 10px; */
            /* 设置边距的第五种方式 */
            padding: 60px;
        }
    </style>
</head>

<body>
    <div>
        朱自清
    </div>
</body>

</html>

设置边框

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        div {
            /* 设置背景颜色 */
            background-color: aqua;
            /* 设置边框一种方式*/
            /* border-left: 50px solid rgb(226, 9, 63);
            border-right: 50px solid rgb(226, 9, 63);
            border-top: 60px solid rgb(226, 9, 63);
            border-bottom: 60px solid rgb(226, 9, 63); */
            /* 设置边框的第二种方式 */
            border: 60px solid rgb(226, 9, 63);
        }
    </style>
</head>

<body>
    <div>
        朱自清
    </div>
</body>

</html>

设置外边距

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        div {
            /* 设置背景颜色 */
            background-color: aqua;
            /* 设置外边距一种方式*/
            /* margin-left: 50px;
            margin-right: 50px;
            margin-top: 60px;
            margin-bottom: 60px; */
            /* 设置外边距的第二种方式  顺时针方式 上 左 下 右*/
            /* margin: 10px 20px 30px 40px; */
            /* 设置外边距的第三种方式  上下 左右*/
            /* margin: 10px 20px; */
            /* 设置外边距的第四种方式  上 左右  下*/
            /* margin: 10px 20px 10px; */
            /* 设置外边距的第五种方式 */
            margin: 60px;
        }
    </style>
</head>

<body>
    <div>
        朱自清
    </div>
</body>
</html>

3.5.2 怪异盒子模型

  • 标准盒子模型’：采用的W3C标准，盒子的width宽度和height高度的content内容决定，添加padding内边距或border外边框后，宽高都会进行相应增长；
  • 怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。
  • 标准盒子和怪异盒子的转换
    • box-sizing:content-box; 盒模型设置为w3c标准盒子模型
    • box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        div.abc {
            /* 设置背景颜色 */
            background-color: aqua;
            padding: 60px;
            border: 70px;
            margin: 80px;
        }
        
        .ibox1 {
            background-color: rgb(255, 166, 0);
            padding: 60px;
            border: 70px;
            margin: 200px;
            box-sizing: content-box
        }
        
        .ibox2 {
            background-color: rgb(89, 0, 255);
            padding: 60px;
            border: 70px;
            margin: 80px;
            box-sizing: border-box
        }
    </style>
</head>

<body>
    <div class="abc">
        <div class="ibox1">小曾</div>
        <div class="ibox2">小李</div>


    </div>
</body>
</html>

3.5.3 外边距重叠

3.5.3.1外边距重叠演示
  • 什么是外边距重叠：外边距重叠又叫外边距塌陷，设置外边距时，两条垂直的外边距重合，外边距的长度取两条重合的外边距长的外边距（外边距取长的，两边都为负取小的，一正一负相加）
  • 代码演示外边距重叠1
    • 首先建立2个盒子
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>
</html>

在这里插入图片描述

  • 代码演示外边距重叠2
    • 给子盒子增加外边距50px可以看到父盒子和子盒子同时下移了50px，实际上是我需要的是父盒子不移动，子盒子下移50px；
      代码：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>

在这里插入图片描述

3.5.3.2 解决方法
  • 第一种方法给子元素或者父元素添加display
    • 代码：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>
</html>

在这里插入图片描述

  • 第二种方法：给父元素设置边框
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            border: 50px solid transparent;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>

在这里插入图片描述

  • 第三种方法：给父元素设置内边距
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            padding: 100px;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>

在这里插入图片描述

  • 第四种方法：给父元素加上overflow：hidden
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>

在这里插入图片描述

  • 第五种方法：给父级或者子级设置position
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>

在这里插入图片描述

  • 第六种方法：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            background-color: aqua;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        
        #two::before {
            display: table;
            content: "";
        }
        
        #two {
            background-color: rgb(16, 53, 242);
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="first">
        <div id="two"></div>
    </div>

</body>

</html>

在这里插入图片描述

3.6 CSS的常用属性

3.6.1 文字属性
  • font-size 文字的大小；
  • font-weight 加粗，常用值bold、bolder、normal或者设置参数值100-900；
  • font-family 设置字体；
  • font-style 设置斜体，italic、oblique、normal；
  • text-align设置水平对齐方式：
    • center 居中；
    • left 居左；
    • right 居右；
    • justify 两端对齐
  • text-decoration 文字修饰 underline下划线，overline上划线，line-thought删除线；
  • text-spacing 字间距；
  • text-transform 大小写转换：
    • capitalize 首字母大写；
    • lowercase 小写；
    • uppercase 大写；
  • text-indent 首行缩进；
  • line-weight 行高；
  • font 缩写 font-style，font-weight，font-size/line-weight font-family
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        #first {
            font-size: larger;
            font-family: 'Courier New', Courier, monospace;
            color: rgb(240, 11, 11);
            font-style: oblique;
            font-weight: 600;
            text-align: justify;
            text-decoration: underline;
            text-transform: capitalize;
            text-indent: 2em;
            letter-spacing: 0cm;
        }
    </style>
</head>

<body>
    <div id="first">
        adc燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：如今（现在 [2] ）又到了哪里呢？ [3] 我不知道他们给了我多少日子，但我的手确乎（1）是渐渐空虚（2）了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔（3）而泪潸潸（4）了。 去的尽管去了，来的尽管来着；去来的中间，又怎样地匆匆呢？早上我起来的时候，小屋里射进两三方斜斜的太阳。太阳他有脚啊，轻轻悄悄地挪移了；我也茫茫然跟着旋转。于是——洗手的时候，日子从水盆里过去；吃饭的时候，日子从饭碗里过去；默默时，便从凝然的双眼前过去。我觉察他去的匆匆了，伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐俐（5）地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。
        在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊（6）罢了（7），只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝（8）样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？ 你聪明的，告诉我，我们的日子为什么一去不复返呢？ [4-5]
    </div>

</body>

</html>
3.6.2 CSS的列表属性
  • list-style-type 列表的标记：dis实心圆；circle空心圆；square正方体；none去除标记；
  • list-style-image 以图片为列表标记，格式list-style-image:url();
  • list-style-position:outside 项目标记在项目外；
  • list-style-position:inside 项目标记在项目内；
    示例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /* 列表项是石心圆 */
        
        ul.test1 {
            list-style-type: disc;
        }
        /* 列表项是空心圆 */
        
        ul.test2 {
            list-style-type: circle;
        }
        /* 列表项是正方形 */
        
        ul.test3 {
            list-style-type: square;
        }
        /*无列表项 */
        
        ul.test4 {
            list-style-type: none;
        }
        /*列表项标记在表格外*/
        
        ul.test5 {
            list-style-position: outside;
        }
        /*列表项标记在表格内*/
        
        ul.test6 {
            list-style-position: inside;
        }
        /*列表项标记在表格内*/
        
        ul.test7 {
            list-style-image: url(https://photo.16pic.com/00/13/41/16pic_1341625_b.jpg);
        }
    </style>
</head>

<body>
    <ul class="test1">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>

    <ul class="test2">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>

    <ul class="test3">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>

    <ul class="test4">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>
    <ul class="test5">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>
    <ul class="test6">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>
    <ul class="test7">
        <li>小王</li>
        <li>小明</li>
        <li>小红</li>
    </ul>
</body>

</html>
3.6.3 背景属性
  • background-color 背景颜色；
  • background-repeat 背景平铺；
    • 参数值：
      • repeat 图片平铺；
      • no-repeat 图片不平铺；
      • repeat-x 图片沿着x轴平铺；
      • repeat-y 图片沿着y轴平铺；
  • background-image
    • 参数值：
      • url(‘’);
      • none；
  • background-position
    • 参数值：
      • 精确数值定位x轴 y轴第一个数值为 x 第二个数值为y的坐标，如果只有一个数值第一个是x的坐标，第二个为默认居中对齐；
      • 方位值：top bouttom right left center；
      • 数值和方位混合使用 第一个值x的坐标，第二个值为y坐标；
  • background-attachment 背景图像固定
    • fixed 背景图像固定不会随着内容；
    • scroll 背景图像随着内容一起滑动；
  • 简写： background：图像背景颜色，图像背景地址，图像铺平，图像固定，图像位置；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        div.test1 {
            background-color: rgba(0, 0, 0, 0.5);
            ;
            padding: 500px;
            margin: 500px;
            background-image: url('https://img0.baidu.com/it/u=1692311172,2998053149&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500');
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <div class="test1">
    </div>
</body>
</html>
3.6.4 css层叠和选择器优先级
3.6.4.1 css层叠
  • css层叠：一个属性被多次定义的时候，会根据优先级和定义的顺序来计算使用什么样式。
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test1 {
            padding: 100px;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .test1 {
            padding: 100px;
            background-color: rgba(241, 20, 20, 0.5);
        }
    </style>
</head>

<body>
    <div class="test1">
        <p>测试测试</p>
    </div>
</body>
</html>
3.6.4.2 css选择器的优先级
  • 选择器顺序高低(从高到底)
    • !important 最高级，一般不使用；
    • 行内样式；
    • id选择器；
    • 类选择器；
    • 标签选择器；
    • 通配符选择器；
  • 代码是按照从上到下执行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--按照选择器的等级最后的字体一定是黑色-->

    <style>
        /*通配符选择器*/
    * {
    color:red;
    }
        /*标签选择器*/
     p{
        color:black !important;
     }
        /*类选择器*/
      .test{
          color:green;
      }
      id选择器
    #002{
        color:palegoldenrod;
    }

    </style>
</head>
<body>
<!--行内选择器-->
<p class="test" id="002"  style="color:lightcoral">HtmlStudy</p>
</body>
</html>

3.6.5 css的可继承的属性

  • 什么是继承：是继承父类的属性，简化代码，利于维护；
  • 常继承的属性
    • 文件属性 文本属性 行高 对齐
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    div.accordion002{
        color:palegoldenrod;
        font-family: Calibri;
        font-size: 100px;
        font-weight: bolder;
        font-style:italic;
        text-align: justify;
        text-decoration: underline;
        text-ident:20px;
        text-spece:20px;
        text-transform: capitalize;
    }
    </style>
</head>
<body>
   <div class="accordion002">
       第一层
       <div>第二层
           <div>第三层</div>
       </div>
   </div>
</body>
</html>

3.7 CSS 布局

3.7.1 CSS布局的前置知识
  • 块级元素的宽度和父级元素的宽度相同，其高度由内容决定；
  • 行内元素的高度和宽度都由内容决定，不能设置高度和宽度，但是可以加上属性display：‘‘bloack’’ ；
  • 什么是文档流：块级元素占一行按照窗口按照顺序从上到下排列，行内元素按照从左往右的方式排列，一行满后自动换行；
  • 什么是行内块级元素：拥有行内元素和块级元素的特性，不换行但是可以设置宽度；
3.7.2 folat 布局
3.7.2.1 folat格式
float: none; //默认值，元素不浮动
float: left; //元素像左浮动
float: right; //元素像右浮动
3.7.2.2 特点
  • 特点一：浮动的元素的不会占用文档流；
  • 特点二：浮动的元素会按照从左到右依次排列；
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*特点一：悬浮的元素的不会占用文档流*/
        div.test1{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        div.test2{
            background: red;
            width: 200px;
            height: 200px;
            /*float: left;*/
        }
        /*特点二：悬浮的元素会按照从左到右依次排列*/
        div.test4{
            background: red;
            width: 600px;
            height: 200px;
            float: left;
        }
        div.test5{
            background: red;
            width: 600px;
            height: 200px;
            float: left;
        }
        div.test6{
            background: red;
            width: 600px;
            height: 200px;
            float: left;
        }

    </style>
</head>

<body>
<!--特点一：浮动的元素的不会占用文档流-->
    <p>特点一<p>
    <div class="test1"></div>
    <div class="test2"></div>
<!--特点二：浮动的元素会按照从左到右依次排列-->
    <p>特点二<p>
    <div class="test4"></div>
    <div class="test5"></div>
    <div class="test6"></div>

</body>

</html>

在这里插入图片描述

  • 特点三：前面的元素的不为浮动元素，浮动元素无法上移；
  • 特点四：块级元素和行内元素被浮动属性修饰后，会变成块级元素；
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*特点`三：前面的元素的不为浮动元素，浮动元素无法上移*/
        div.test1{
            background: green;
            width: 100px;
            height: 100px;
        }
        div.test2{
            background: red;
            width: 200px;
            height: 200px;
            float: left;
        }
        /*特点四：块级元素和行内元素被浮动属性修饰后，会变成块级元素；*/
        spn.test3{
            width: 300px;
            height: 300px;
            float: left;
            background: greenyellow;
        }


    </style>
</head>

<body>
<!--特点一：前面的元素的不为浮动元素，浮动元素无法上移-->
    <p>特点三<p>
    <div class="test1"></div>
    <div class="test2"></div>
<!--特点二：浮动的元素会按照从左到右依次排列-->
    <p>特点四<p>
    <spn class="test3">学习学习学习学习学习学习学习学习学习学习</spn>
</body>
</html>

在这里插入图片描述

  • 特点五：悬浮标签不会遮挡文字会可以设置文字环绕；
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        /*特点五：前面的元素的不为浮动元素，浮动元素无法上移*/
        div.test1{
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }

    </style>
</head>

<body>
<!--特点五：前面的元素的不为浮动元素，浮动元素无法上移-->
    <p>特点五<p>
    <div class="test1"></div>
    <spn>盼望着，盼望着，东风来了，春天的脚步近了。 一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。 小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。 桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在花丛里，像眼睛，像星星，还眨呀眨的</spn>
</body>

</html>

在这里插入图片描述

3.7.2.3 清除float浮动
  • 为什么要清理float浮动布局：高度坍塌（拥有多级层级标记，父元素的高度自适应，没有设置高度，子元素浮动，浮动标签不占用文档流，就会导致父标签被压缩成一条线）；
    示例：高度坍塌
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
            .test1 {
            background-color: rgba(0, 0, 0, 0.5);
            border: 10px solid red;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            float: left;
    </style>
</head>

<body>
    <div class="test1">
        <div class="test2"></div>
    </div>
</body>

</html>

在这里插入图片描述

  • 清除浮动
    *使用伪元素选择器
clear:"both"；
display:"block"；
content:""；

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test1 {
            background-color: rgba(0, 0, 0, 0.5);
            border: 10px solid red;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            float: left;
        }
        
        .test1::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="test1">
        <div class="test2"></div>
    </div>
</body>
</html>
3.7.2 flex布局
3.7.2.1 flex的基本概念
  • flex全称是flexible box 是弹性布局；
  • 使用flex的元素的标签，被称为flex容器(flex container ),flex容器下的子元素是称为flex的项目；
  • 声明方式：
块级元素的声明flex
display:flex;
行内块级元素声明flex
display：online-flex；
使用webkit内核浏览器声明flex
  • 在flex容器中存在着一条水平轴（main axis）和交叉轴（cross axis） 水平轴和边框的交点起始位置称为main start 结束位置称为main end,交叉轴和边框的交叉点成为起始位置cross start 结束位置cross end ，按照水平轴排列的项目称为main size,按照交叉轴排列的顺序为cross size。
3.7.2.2 容器的属性
3.7.2.2.1 flex-dirtection：项目在轴的排列方式
  • row 按照水平轴的方向从左往右排列；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 100px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
        <div class="test4">盒子4</div>
    </div>
</body>

</html>

在这里插入图片描述

  • row-reverse按照水平轴的方向从右往左排列；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-direction: row-reverse;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 100px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
        <div class="test4">盒子4</div>
    </div>
</body>

</html>

在这里插入图片描述

  • colum 按照交叉轴的方式从上到下排列；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-direction: column;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 100px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
        <div class="test4">盒子4</div>
    </div>
</body>

</html>

在这里插入图片描述

  • colum-resever 按照交叉轴的方向从下到上排列；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-direction: column-reverse;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 100px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
        <div class="test4">盒子4</div>
    </div>
</body>

</html>

在这里插入图片描述

3.7.2.2.2 flex-wrap 项目在水平轴上的一行，排列不下的换行方式
  • nowrap 默认不换行；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-wrap: nowrap;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test5 {
            width: 200px;
            height: 100px;
            background: rgb(19, 218, 122);
        }
        
        .test6 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test7 {
            width: 200px;
            height: 100px;
            background: rgb(129, 12, 145);
        }
        
        .test8 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 68);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
        <div class="test4">盒子4</div>
        <div class="test5">盒子5</div>
        <div class="test6">盒子6</div>
        <div class="test7">盒子7</div>
        <div class="test8">盒子8</div>
    </div>
</body>

</html>

在这里插入图片描述

  • wrap 换行；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-wrap: wrap;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test5 {
            width: 200px;
            height: 100px;
            background: rgb(19, 218, 122);
        }
        
        .test6 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test7 {
            width: 200px;
            height: 100px;
            background: rgb(129, 12, 145);
        }
        
        .test8 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 68);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
        <div class="test4">盒子4</div>
        <div class="test5">盒子5</div>
        <div class="test6">盒子6</div>
        <div class="test7">盒子7</div>
        <div class="test8">盒子8</div>
    </div>
</body>

</html>

在这里插入图片描述

  • wrap-reverse 换行倒立换行；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-wrap: wrap-reverse;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
        
        .test4 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test5 {
            width: 200px;
            height: 100px;
            background: rgb(19, 218, 122);
        }
        
        .test6 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 29);
        }
        
        .test7 {
            width: 200px;
            height: 100px;
            background: rgb(129, 12, 145);
        }
        
        .test8 {
            width: 200px;
            height: 100px;
            background: rgb(240, 6, 68);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
        <div class="test4">盒子4</div>
        <div class="test5">盒子5</div>
        <div class="test6">盒子6</div>
        <div class="test7">盒子7</div>
        <div class="test8">盒子8</div>
    </div>
</body>

</html>

在这里插入图片描述

3.7.2.2.3 justify-content 水平轴的对齐方式
  • flex-start 左对齐；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            justify-content: flex-start;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

  • flex-end 右对齐
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            justify-content: flex-end;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

  • center 居中
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            justify-content: center;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

  • space-between 两端对齐；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            justify-content: space-between;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

  • space-around 项目之间的间隔相等，项目之间的间隔是边框的2倍；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            justify-content: space-around;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

3.7.2.2.4 align-items 交叉轴的对齐方式；
  • flex-start 以交叉轴的起点排列
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 800px;
            height: 800px;
            display: flex;
            align-items: flex-start;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

  • flex-end从交叉轴的终点排列
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 800px;
            height: 800px;
            display: flex;
            align-items: flex-end;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

  • center 交叉轴的中点对齐；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 800px;
            height: 800px;
            display: flex;
            align-items: center;
        }
        
        .test1 {
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

  • baseline 按照文档流基准线排列
    基准线概念：https://blog.csdn.net/weixin_44653329/article/details/108172478
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 800px;
            height: 800px;
            display: flex;
            align-items: baseline;
        }
        
        .test1 {
            
            line-height: 50px;
            width: 200px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>
</html>

在这里插入图片描述

  • stretch 在项目没有设置高度的情况，子项目的高度会被拉伸到窗口一致；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 800px;
            height: 800px;
            display: flex;
            align-items: stretch;
        }
        
        .test1 {
            width: 200px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 200px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 200px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

3.7.2.2.5 align-content 用来设置在自由盒内各个项目的垂直排列方式；
  • 使用条件:
必须在父元素上设置(只有多行才能展示效果)：
display:flex;
flex-direction:row;
flex-wrap:wrap;
  • flex-start 去除项目因为换行的空白交叉轴的起点垂直排列；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

  • flex-end 去除项目之间的空白，以交叉轴终点垂直排列;
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-end;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述
*center 去除项目之间的空白 以交叉轴的中点垂直排列；

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

  • space-around按照交叉轴垂直排列，项目之间的距离是是边框之间的距离的2倍；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-around;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

  • space-between以交叉轴多行两端对齐
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-between;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

  • Stretch 以交叉轴方向拉伸项目，向容器底部方向拉伸；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: stretch;
        }
        
        .test1 {
            /* width: 300px; */
            /* height: 100px; */
            background: yellowgreen;
        }
        
        .test2 {
            /* width: 300px; */
            /* height: 100px; */
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            /* width: 300px; */
            /* height: 100px; */
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

3.7.2.3 项目属性
3.7.2.3.1 order 项目的排列顺序，数值越小排列越靠前；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500px;
            height: 500px;
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
            order: 2;
        }
        
        .test2 {
            width: 300px;
            height: 100px;
            background: rgb(68, 50, 205);
            order: 1;
        }
        
        .test3 {
            width: 300px;
            height: 100px;
            background: rgb(205, 50, 179);
            order: 0;
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>
</html>

在这里插入图片描述

3.7.2.3.2 flex-grow项目扩大至剩余的空间
  • 0 默认，不扩大 ；1 扩大至2倍；
  • 如果容器没有空间则不扩大；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            flex-grow: 1;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

3.7.2.3.3 flex-shrink 设置项目在容器缩小；
  • 0 默认 不缩小；1 缩小；
  • 只有空间不足的才会缩小；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 400px;
            height: 100px;
            background: yellowgreen;
            flex-shrink: 1;
        }
        
        .test2 {
            width: 400px;
            height: 100px;
            background: rgb(68, 50, 205);
            flex-shrink: 1;
        }
        
        .test3 {
            width: 400px;
            height: 100px;
            background: rgb(205, 50, 179);
            /* flex-shrink: 1; */
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

3.7.2.3.4 flex-basis设置项目的宽度；
  • 如果basis和width同时设置basis的优先级比width高；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            flex-basis: 200px;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
            flex-shrink: 1;
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
            /* flex-shrink: 1; */
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>
</html>

在这里插入图片描述

3.7.2.3.5 flex 是flex-grow 、flex-shrink、flex-basis 的简写
flex：1,1,100px;
3.7.2.3.6 align-self 设置子项目与其他项目不同的对齐方式;
  • 参数和父属性的align-items一致；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            align-self: center;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
            flex-shrink: 1;
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
            /* flex-shrink: 1; */
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

李大哥1
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html+CSS学习杂记
weixin_42369852的博客
04-05 203
#笔记 ##页内元素跳转链接–锚点链接跳转 将<a href="#跳转元素的id">即可 ##base 设置页面打开方式,放在head中则设置全局打开方式 如<base target="blank">base是单标签 ##**target="blank"很危险! ** 通过target="blank"打开的页面能够直接使用window.opener来访问来源页面的wind...
HTML+CSS基础（CSS篇下）
Panda_Program的博客
09-03 619
CSS格式化排版 === ##1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。 body{font-family:"宋体";}这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字
JS 入门
qq_44503730的博客
10-20 723
J S 基础入门笔记 基本语法 输入输出语句 浏览器弹出输入框，用户可以输入 prompt(‘这里是输入框’); 浏览器弹出警示框 alert(‘这里是弹出的输出框’); 浏览器控制台打印输出信息 console.log(‘这是程序员看到的’); 变量 白话：变量就是一个装东西的盒子 通俗的说变量就是存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。 本质：变量是程序在内存中申请的一块用来存放数据的空间。 //变量声明 var age; //声明一个名称为age的变量 var age=18; /
web前端——HTML+CSS
m0_64378422的博客
02-10 3292
web前端——HTML+CSS
大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站
最新发布
...
06-22 1919
HTML+CSS+JS【旅游网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
HTML与CSS详细介绍
weixin_44454512的博客
11-28 1万+
HTML 与 CSS 1. 主要内容 2. HTML HTML（HyperText Markup Language）就是超⽂本标记语⾔。"超⽂本"就是表示⻚⾯内可以包含⾮⽂字元素，如：图⽚、链接、⾳乐等等。 它是⼀种建⽴⽹⻚⽂件的语⾔，通过标记式的指令（Tag），将影像、声⾳、图⽚、⽂字等链接显示出来。这种标记性语⾔是因特⽹上⽹⻚的主要语⾔。 HTML ⽹⻚⽂件可以使⽤记事本、写字板、HBuilder、Sublime 等编辑⼯具来编写，以 .htm 或 .html 为⽂件后缀名保存。将 HTML ⽹⻚⽂件
Web 前端—HTML+CSS系列
molecule_9的博客
10-20 7584
HTML+CSS
前端学习笔记（一）：HTML+CSS基础
憬淮的博客
11-16 1911
前端笔记01，web端html+css基础
web前端基础（一）——HTML+CSS
热门推荐
广龙宇的博客
08-18 13万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
HTML+CSS+JS基础知识
01-08
对于学习html的学习，更多的就是记住这些标签的含义以及会使用即可，这是前端最重要的知识。 注释的语句为： 整个HTML页面主要分为两个部分：头部head 身体body. 下面我们来介绍标签：标签分为单标签和双标签，单...
html+css基础代码
06-16
本资料包“html+css基础代码”显然是为了帮助初学者理解这两门语言的基础知识。 HTML是一种标记语言，它使用一系列预定义的标签来告诉浏览器如何呈现网页内容。例如，`<html>`标签定义整个HTML文档的开始，`<head>`...
html+css基础知识总结
06-07
能快速准确的看出html+css基础标签和样式的作用
HTML+CSS基础知识点.pdf
06-17
HTML+CSS 基础知识点总结 HTML+CSS 是前端开发的基础技术，掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结： 1. HTML 是网页内容的载体，内容就是网页制作者放在页面上想要让...
HTML5+CSS3入门基础知识
12-29
HTML5+CSS3入门基础知识 HTML5 是下一代的 HTML 标准，旨在提高网页的可读性、可访问性和可维护性。CSS3 是最新的样式表语言标准，...通过本节课程，读者将掌握 HTML5 和 CSS3 的基础知识，并能够快速地创建一个网页。
HTML +CSS 语法
CSSAJBQ_的博客
03-04 3054
HTML 1.html基本结构 <!DOCTYPE html> 声明当前的html文档是 html5 <html></html> 根标签（根节点） 一个网页中只有一个 <head></head> 头部标签 放页面的一些描述信息 <meta> 描述 charset="UTF-8" 告诉浏览器这个文档编码格式是UTF-8 <title></title> 告诉浏览器 当前网页的标题
html+css
qq_56743396的博客
07-02 730
结构 html：对网页元素进行整理和分类表现 css：设计网页元素的版式、颜色、大小等外观样式行为
html+css notes (ongoing 20/4/12)
weixin_45743001的博客
03-03 547
HTML+CSS 笔记 注释 <!-- 注释内容 --> 元素 <a>内容</a> 超链接 <a href="https://www.baidu.com" title="baidu">百度</a> 属性的种类 全局属性：title 局部属性: 元素的种类 空元素：没有结束标记 <meta charset="UTF-8">...
零基础HTML+CSS到入门
weixin_51356295的博客
07-10 1900
付款方式支付宝微信银行卡
HTML+CSS(基础)
奋斗
05-28 2062
HTML+CSS HTML 决定页面的结构,主要就是学习一些标签 注释: <!-- 内容 --> 标题标签 <h3>三级标题</h3> 当然同理还有1-6级标题 段落标签 <p>段落标签</p> (此时的首行并未缩进2个字符,这个功能需要借助于CSS) 换行标签 <br> 在html中只有遇到块级元素才会换行(没弹性布局的情况下),此时就需要我们手动换行 格式化标签 <strong>这是加粗&
HTML+CSS基础知识详解：从入门到精通
本资源摘要信息涵盖了HTML和CSS的基础知识，旨在帮助读者从入门到精通HTML和CSS技术。 **HTML基础知识** * HTML（Hypertext Markup Language）是超文本标记语言，用于创建网页。 * HTML文件的基本结构由 `<HTML>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值