当前位置： 首页 > news >正文

【前端】快速掌握HTML+CSS核心知识点

news 2026/2/10 21:50:31

文章目录

      • 1.HTML核心基础知识
        • 1.1.编写第一个HTML网页
        • 1.2.超链接a标签和路径
        • 1.3.图像img标签的用法
        • 1.4.表格table标签用法
        • 1.5.列表ul、ol、dl标签用法
        • 1.6.表单form标签用法
        • 1.7.区块标签和行内标签用法
      • 2.CSS核心基础知识
        • 2.1.CSS标签选择器+viewport布局
        • 2.2.CSS样式的几种写法
        • 2.3.CSS常⻅选择器的使用
        • 2.4.CSS特殊选择器的使用
        • 2.5.CSS基本概念之盒⼦模型
        • 2.6.CSS中的常⽤属性
      • 3.CSS进阶之布局定位
        • 3.1.CSS中布局前置知识
        • 3.2.CSS中的float布局
        • 3.3.CSS中的flex布局
        • 3.4.CSS中的position定位
        • 3.5.CSS之三栏布局实现
        • 3.6.CSS之⽔平垂直居中
        • 3.7.CSS⾼级知识点之BFC
      • 4.CSS3常用属性讲解
        • 4.1. CSS3边框样式
        • 4.2.CSS3渐变样式
        • 4.3.CSS3文本效果
        • 4.4.CSS3网格布局

1.HTML核心基础知识

1.1.编写第一个HTML网页

<!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>
</head>
<body><span>我是lx，我喜欢java</span><br/><span>我喜欢唱，跳，rap，篮球</span><br/>
</body>
</html>
  • 快捷键生成html模板
    在这里插入图片描述
!+回车
  • 标签含义
标签名定义说明
HTML标签页面中最大的标签，根标签
文档头部注意在head标签中我们必须设置的标签是title
文档标题让页面拥有一个属于自己的标题
文档主体元素包含文档的所有内容，页面内容

1.2.超链接a标签和路径

（1）a标签用法

  • a是HTML语言标签。
  • a标签定义超链接，用于从一个页面链接到另一个页面。
  • a元素最重要的属性是href属性，它指定链接的目标。
跳转：<a href="xxx">链接文本</a>
锚点：<a href="#xxx"></a>

<!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>
</head>
<body><a href="https://www.baidu.com">百度</a>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

（2）路径

  • 根据资源的类型判断，⼀般站外资源⽤绝对路径，站内资源⽤相对路径
  • 绝对路径：从磁盘开始一直到这个文件的整个路径
  • 相对路径：相对当前这个文件的路径
    • ./ 代表当前⽬录
    • …/ 代表的上⼀级⽬录
<!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>
</head>
<body><a href="D:\vscodeProject\1.HTML核心基础知识\1.编写第一个html网页.html">绝对路径</a><a href="./1.编写第一个html网页.html">相对路径</a>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

  • 它们都可以跳到1的页面。

1.3.图像img标签的用法

  • 常⽤属性
    • src
      • 图片路径
    • alt
      • 图⽚加载失败或加载时显示的⽂字
    • title
      • 悬浮在图片上面显示的文字
  • 图片的来源
    • 本地图片：稳定
    • 线上图片：图片容易丢失
    • Base64图片
      • 优点：小图片占用内存小，不请求服务器，降低服务器资源与访问
      • 缺点：大图片增大了数据库服务器的压力
<!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>
</head>
<body><img src="./1.png" alt = "图片显示失败" title="图片"/>
</body>
</html>
  • 将图片放在同级的目录下

在这里插入图片描述
在这里插入图片描述

1.4.表格table标签用法

  • 表格的基本结构
    • 由⼀⾏或者多⾏的单元格数据组成
姓名性别年龄
张三男18
李四女18

  • 在HTML中怎么表示

    • table：HTML 表格

    • tr：元素定义表格行

    • th：数据中的表头单元格

    • td：表示单元格

  • table元素⾥常⽤的属性

    • border(边框)
    • cellspacing(规定单元格之间的空白)
    • cellpadding(规定单元边沿与其内容之间的空白)
    • colspan(⽤于合并列)
    • rowspan(⽤于合并⾏)

  • 先初始化一个表格

<!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>
</head>
<body><table><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>李祥</td><td>男</td><td>18</td></tr><tr><td>张三</td><td>男</td><td>18</td></tr></table>
</body>
</html>

在这里插入图片描述

  • 设置一个边框
    <table border="1"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>李祥</td><td>男</td><td>18</td></tr><tr><td>张三</td><td>男</td><td>18</td></tr></table>

在这里插入图片描述

  • 规定单元格之间的空白 cellspacing
		<table border="1" cellspacing = "0"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>李祥</td><td>男</td><td>18</td></tr><tr><td>张三</td><td>男</td><td>18</td></tr></table>

在这里插入图片描述

  • 规定单元边沿与其内容之间的空白 cellpadding
		<table border="1" cellspacing = "0" cellpadding = "7"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>李祥</td><td>男</td><td>18</td></tr><tr><td>张三</td><td>男</td><td>18</td></tr></table>

在这里插入图片描述

  • 合并列colspan
		<table border="1" cellspacing = "0" cellpadding = "7"><tr><th colspan = "2">姓名</th><th>年龄</th></tr><tr><td>李祥</td><td>男</td><td>18</td></tr><tr><td>张三</td><td>男</td><td>18</td></tr></table>

在这里插入图片描述

  • 合并⾏rowspan
		<table border="1" cellspacing = "0" cellpadding = "7"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td rowspan = "2">李祥</td><td>男</td><td>18</td></tr><tr><td>男</td><td>18</td></tr></table>

在这里插入图片描述

1.5.列表ul、ol、dl标签用法

  • 有序列表
<!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>
</head>
<body><ol><li>手机数码</li><li>生活用品</li><li>水果生鲜</li><li>绝味零食</li></ol>
</body>
</html>

在这里插入图片描述

  • 无序列表
<!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>
</head>
<body><ul><li>手机数码</li><li>生活用品</li><li>水果生鲜</li><li>绝味零食</li></ul>
</body>
</html>

在这里插入图片描述

  • 自定义列表
<!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>
</head>
<body><dl><dt>手机数码</dt><dd>iphone14</dd><dd>macbook pro</dd><dd>huawei 14</dd><dt>生活用品</dt><dd>米</dd><dd>醋</dd><dd>西红柿</dd></dl>
</body>
</html>

在这里插入图片描述

1.6.表单form标签用法

  • 核⼼元素input (核⼼元素)
<body><form><input type="text"></form>
</body>

在这里插入图片描述

  • label (提⾼交互体验的)
<body><form><input type="checkbox" id = "isagree"><label for="isagree">同意</label></form>
</body>

在这里插入图片描述

  • select(下拉框)
<body><form><select><option value="1">男</option><option value="2">女</option></select></form>
</body>

在这里插入图片描述

  • textarea(⽂本域)
<body><form><textarea>文本域</textarea></form>
</body>

在这里插入图片描述

  • button(按钮)
<body><form><button>提交</button></form>
</body>

在这里插入图片描述

  • form(表单元素，提交每个表单项内容)

1.7.区块标签和行内标签用法

  • div元素

    • div 元素是块级元素，它可用于组合其他 HTML 元素的容器。
    • div 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行
    • 如果与 CSS 一同使用，div 元素可用于对大的内容块设置样式属性。
    • div 元素的另一个常见的用途是文档布局

  • span元素

    • span 元素是行内元素，可用作文本的容器
    • span 元素也没有特定的含义。
    • 当与 CSS 一同使用时，span 元素可用于为部分文本设置样式属性。

  • 块级元素

    • 块级元素在浏览器显示时，通常会以新行来开始（和结束）

      <h1>, <p>, <ul>, <table>,<div>

  • 行内元素

    • 行内元素在显示时通常不会以新行开始

      <b>, <td>, <a>, <img>,<span>

<style>.lixiang{color: blue;}.zhangsan{color: brown;}.wangwu{color: chartreuse;}
</style>
<body><div><span class="lixiang">李祥</span></div><div><span class="zhangsan">张三</span></div><div><span class="wangwu">王五</span></div>
</body>

在这里插入图片描述

2.CSS核心基础知识

2.1.CSS标签选择器+viewport布局

（1）什么是标签选择器

  • 标签选择器主要针对的是页面中某个标签中的样式设置，它的作用范围是这个页面内所有写在该标签内的内容，标签选择器可以定义多个标签的样式。
  • 语法
    <style>标签名{属性:属性值;}</style>
  • 案例
<style>div{width: 200px;height: 200px;background-color: burlywood;}</style>
<body><div></div>
</body>

在这里插入图片描述

（2）什么是viewport布局

  • 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽。
  • 这样就不用把每个网页挤到很小的窗口中，也不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的不同部分。
  • 移动版的 Safari 浏览器最新引进了viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

在这里插入图片描述
在这里插入图片描述

2.2.CSS样式的几种写法

  • 写法

    • 内部样式表

      • 写在元素的style标签⾥⾯的
      <style>div{width: 200px;height: 200px;background-color: burlywood;}</style>
<body><div></div>
</body>

    • 内联样式表

      • 写在styles属性⾥⾯的
      <body><div style="width: 100px; height: 100px; background-color: azure;"></div>
</body>

    • 外部样式表

      • link标签将css资源引⼊
      <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><link rel="stylesheet" href="./css/index.css">
</head>
<style>
</style>
<body><div></div>
</body>
</html>

      div{width: 200px;height: 200px;background-color: burlywood;
}

  • 为什么选择外部样式表

    • 解决⻚⾯当中样式重复的问题
    • 代码分离，利于代码维护和阅读
    • 浏览器会缓存起来，提⾼⻚⾯响应速度变快了

2.3.CSS常⻅选择器的使用

（1）元素（标签）选择器

  • 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
  • 如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
  • html {color:black;} h1 {color:blue;} h2 {color:silver;} 可以将某个样式从一个元素切换到另一个元素。
div{width: 200px;height: 200px;background-color: burlywood;
}

（2）组合选择器

  • 页面元素比较复杂，存在多个嵌套。为了更加灵活选择页面中的元素，CSS中还提供了组合选择器。
  • 组合选择器就是将多个基本选择器通过一定的规则连接起来组成一个复杂选择器。
h1,p
{color:red;
}

在这里插入图片描述

（3）类选择器

  • 结合标签选择器
h1.lixiang
{color:red;
}

在这里插入图片描述

  • 多类选择器
  • 两个类的样式全部生效
<style>.lixiang{color:red;}.background{background-color: blueviolet;}
</style>
<body><div class="lixiang background"></div>
</body>

在这里插入图片描述

  • 链接多个类选择器
.xiaodi.background
{color:red; background-color:black
}

在这里插入图片描述在这里插入图片描述

（4）id选择器

声明：#important{} 属性：id="important注意：一个id选择器的属性值在html文档中只能出现一次，避免写js获取id时出现混淆

<style>#lixiang{color: greenyellow;background-color: cornsilk;}
</style>
<body><div id="lixiang">李祥</div>
</body>

在这里插入图片描述

（5）通配符选择器

通配符选择器使用*来定义，表示选区页面中所有的标签。优先级最低，一般是在页面初始化的时候才使用，或者某些特殊情况下例如清除页面内外边距。

    *{margin: 0;padding: 0;}

在这里插入图片描述

（6）派⽣选择器

  • 后代选择器，h1下的p标签才会变成红色
<style>h1 p{color: red;}</style>
<body><h1><p>张三</p></h1><p>李祥</p>
</body>

在这里插入图片描述

  • ⼦元素选择器，选择h1下的p标签
<style>h1>p{color: gray;}</style>
<body><h1><p>张三</p></h1>
</body>

在这里插入图片描述

  • 相邻选择器（兄弟）
h1+p{background-color:pink;
}

2.4.CSS特殊选择器的使用

  • 不改变任何DOM内容。只是插入了一些修饰类的元素

（1）:first-child {} 第一项

<style>li:first-child{color: red;}</style>
<body><ul><li>李祥</li><li>张三</li><li>王五</li></ul>
</body>

在这里插入图片描述

（2）:last-child {} 最后一项

<style>li:last-child{color: red;}</style>
<body><ul><li>李祥</li><li>张三</li><li>王五</li></ul>
</body>

在这里插入图片描述

（3）:nth-child(n) {} 第n项

<style>li:nth-child(2){color: red;}</style>
<body><ul><li>李祥</li><li>张三</li><li>王五</li></ul>
</body>

在这里插入图片描述

（4）:nth-child(2n+1){} 奇数项

<style>li:nth-child(2n+1){color: red;}</style>
<body><ul><li>李祥</li><li>张三</li><li>王五</li></ul>
</body>

在这里插入图片描述

（5）:nth-child(2n) {} 偶数项

<style>li:nth-child(2n){color: red;}</style>
<body><ul><li>李祥</li><li>张三</li><li>王五</li></ul>
</body>

在这里插入图片描述

（6）:not() 否定伪类 除了第n项

<style>li:not(nth-child(2n)){color: red;}</style>
<body><ul><li>李祥</li><li>张三</li><li>王五</li></ul>
</body>

在这里插入图片描述

（7）::first-letter 第一个

    <style>p::first-letter{color: red;}</style><body><p>我是李祥。<br/>我来自中国。<br/>我喜欢编程。</p></body>

在这里插入图片描述

（8）::first-line 第一行 只能用于块级元素

<style>p::first-line{color: red;}</style><body><p>我是李祥。<br/>我来自中国。<br/>我喜欢编程。</p></body>

在这里插入图片描述

（9）::before 在开始位置加入内容

    <style>p::before{content: '开头';color: red;}</style><body><p>我是李祥。<br/>我来自中国。<br/>我喜欢编程。</p></body>

在这里插入图片描述

（10）::after 在结束位置加入内容

<style>p::after{content: '结尾';color: red;}</style><body><p>我是李祥。<br/>我来自中国。<br/>我喜欢编程。</p></body>

在这里插入图片描述

2.5.CSS基本概念之盒⼦模型

（1）什么是盒⼦模型

  • 在CSS⾥⾯，所有的HTML元素你都可以看成是⼀个盒⼦

（2）盒⼦的内容(content)

  • 元素的大小

（3）盒⼦的内边距(padding)

padding-left:10px   //左边距10pxpadding-top:10px    //上边距10pxpadding-right:10px  //右边距10pxpadding-bottom:10px //下边距10%，相对于父级元素的widthpadding:10px 10px 10px 10% //等同于上面四行 百分比是对应父标签的大小padding:5px 10px    //上下边距5px、左右边距10pxpadding:5px 10px 20px  //上边距 左右边距 下边距padding:10px        //上下左右边距10px

（4）盒⼦的边框(border)

border-left:3px solid #000  //左边距10px dotted dashedborder-top:3px solid #000 //上边距10pxborder-right:3px solid #000 //右边距10pxborder-bottom:3px solid #000  //下边距10%，相对于父级元素的widthborder:3px solid #000 //等同于上面四行

（5）盒⼦的外边距(margin)

margin-left:10px  //左边距10pxmargin-top:10px   //上边距10pxmargin-right:10px //右边距10pxmargin-bottom:10% //下边距10%，相对于父级元素的widthmargin:10px 10px 10px 10% //等同于上面四行margin:5px 10px   //上下边距5px、左右边距10pxmargin:10px       //上下左右边距10px

（6）盒子怪异模型

  • W3C标准的盒子模型（标准盒模型 )
boxWidth=contentWidth
  • IE标准的盒子模型（怪异盒模型）
box-sizing:border-box //声明
boxWidth=contentWidth+border+padding

（7）外边距折叠

  • 上下两个兄弟盒子的margin都为正取大，都为负取小，一正一负相加

  • 父子元素盒子的margin（假设没有内边距或边框把外边距分隔开），也会合并；

    只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

解决父子边距合并：父元素{overflow:auto;}父元素::before{display: table;content: "";}

2.6.CSS中的常⽤属性

（1）盒⼦的位置和⼤⼩

  • 尺寸
宽度 width: ⻓度|百分⽐|auto
⾼度 height
边界 margin padding 上右下左|上下左右
  • 布局
浮动：float
定位：position
弹性布局：flex
盒⼦内容超出部分：overflow：hidden | scroll | auto

（2）外观，⻛格

background-image：属性设置一个或多个背景图像
background-repeat：属性设置如何平铺背景图像
background-size：属性规定背景图像的尺寸
background-position：属性设置背景图像的起始位置
background-color：属性设置元素的背景颜色

（3）⽂字属性

字体⼤⼩：font-size
是否加粗：font-weight
是不是斜体：font-style
字体是什么：font-family

3.CSS进阶之布局定位

3.1.CSS中布局前置知识

（1）正常元素怎么布局

  • 默认，⼀个块级元素的内容宽度就是其⽗元素的100%，他的⾼度和其内容⾼度⼀致
  • ⾏内元素它的宽度和⾼度都是根据内容决定的(⽆法设置⾏内元素的宽⾼)
    • 可设置display属性，定义元素的类型(css3定义布局)

例如：<span>标签,行级元素

<!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>span{width: 20px;height: 20px;}</style>
</head>
<body><span>我叫李祥。</span>我是一名IT工程师。
</body>

即使我们给他设置了高宽的大小，也没有显示。

在这里插入图片描述

想要让span标签变成块级元素，需设置display属性。

        span{width: 100px;height: 100px;display: block;}

在这里插入图片描述

（2）元素之间⼜是如何相互影响的呢

  • 正常的⽂档布局流
    • 每个块级元素会在上个元素下⾯另起⼀⾏
    • ⾏内元素不会另起⼀⾏

3.2.CSS中的float布局

使用浮动

float: none;  //默认值，元素不浮动
float: left;	//元素像左浮动
float: right; //元素像右浮动

特点：

  • 浮动元素会脱离文档流，不再占据文档流空间
  • 浮动元素彼此之间是从左往右排列，宽度超过一行自动换行
  • 在浮动元素前面元素不浮动时，浮动元素无法上移
  • 块级元素和行内元素浮动之后都变成行内块级元素
  • 浮动元素不会盖住文字，可以设置文字环绕效果

清除浮动

clear:both;
content:'';
display:block;

（1）两个div，让下方的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>Document</title><style>.div1{width: 100px;height: 100px;background-color: blue;float: left;}.div2{width: 100px;height: 100px;background-color: brown;float: left;}</style>
</head>
<body><div class="div1"></div><div class="div2"></div>
</body>
</html>

在这里插入图片描述

（2）两个div，让下方的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>Document</title><style>.div1{width: 100px;height: 100px;background-color: blue;float: right;}.div2{width: 200px;height: 200px;background-color: brown;float: right;}</style>
</head>
<body><div class="div1"></div><div class="div2"></div>
</body>
</html>

在这里插入图片描述

（3）两个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>Document</title><style>.div1{width: 100px;height: 100px;background-color: blue;float: left;}.div2{width: 200px;height: 200px;background-color: brown;}</style>
</head>
<body><div class="div1"></div><div class="div2"></div>
</body>
</html>

在这里插入图片描述

3.3.CSS中的flex布局

W3C提出了一种新的方案—Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

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

测试代码：

<!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>.f{width: 400px;height: 400px;background-color: blanchedalmond;}.a1{width: 100px;height: 100px;background-color: gold;}.a2{width: 100px;height: 100px;background-color: gray;}.a3{width: 100px;height: 100px;background-color: aqua;}</style>
</head>
<body><div class="f"><div class="a1"></div><div class="a2"></div><div class="a3"></div></div>
</body>
</html>

在这里插入图片描述

父元素容器的属性

（1）flex-direction属性

flex-direction属性有4个值：

  • row（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）
  • row-reverse：主轴为水平方向，起点在右端（项目从右往左排列）
  • column：主轴为垂直方向，起点在上沿（项目从上往下排列）
  • column-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）
/* 决定主轴的方向（即项目的排列方向）*/
flex-direction: row | row-reverse | column | column-reverse;

在这里插入图片描述

（2）flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap属性有3个值：

  • nowrap（默认）：不换行（列）。
  • wrap：主轴为横向时：从上到下换行。主轴为纵向时：从左到右换列。
  • wrap-reverse：主轴为横向时：从下到上换行。主轴为纵向时：从右到左换列。

测试代码：

<!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>.f{width: 400px;height: 400px;background-color: blanchedalmond;display: flex;flex-direction:row;}.a1{width: 100px;height: 100px;background-color: gold;}.a2{width: 100px;height: 100px;background-color: gray;}.a3{width: 100px;height: 100px;background-color: aqua;}.a4{width: 100px;height: 100px;background-color: green;}.a5{width: 100px;height: 100px;background-color: red;}.a6{width: 100px;height: 100px;background-color: silver;}.a7{width: 100px;height: 100px;background-color: hotpink;}</style>
</head>
<body><div class="f"><div class="a1">a1</div><div class="a2">a2</div><div class="a3">a3</div><div class="a4">a4</div><div class="a5">a5</div><div class="a6">a6</div><div class="a7">a7</div></div>
</body>
</html>

在这里插入图片描述

/* 是否换行 */
flex-wrap: nowrap | wrap | wrap-reverse;

在这里插入图片描述

（3）flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: <flex-direction> <flex-wrap>;

（4）justify-content属性

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

justify-content属性有5个值：

  • flex-start（默认）：与主轴的起点对齐。
  • flex-end：与主轴的终点对齐。
  • center：与主轴的中点对齐。
  • space-between：两端对齐主轴的起点与终点，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
/* 定义水平方向对齐方式 */
justify-content: flex-start | flex-end | center | space-between | space-around;

在这里插入图片描述

（5）align-items属性

align-items属性定义项目在交叉轴上如何对齐。纵向交叉轴始终自上而下，横向交叉轴始终自左而右。

align-items属性有5个值：

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，项目将占满整个容器的高度。
/* 定义垂直方向对齐方式 */
align-items: flex-start | flex-end | center | baseline | stretch;

在这里插入图片描述

（6）align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content属性有6个值：

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：主轴线占满整个交叉轴。

子元素容器的属性

（1）order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

/* 定义子元素的排列顺序，默认为0 */
order: -10 | -1 | 0 | 1 | 10;

在这里插入图片描述

（2）flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

/* 定义子元素的放大比例，默认为0 */
flex-grow: 0 | 1 | 2 | 3;

在这里插入图片描述

（3）flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

/* 定义了在分配多余空间之前，项目占据的主轴空间 */
flex-basis: <length> | auto;

（4）flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;

选择float布局 or flex布局？

推荐是使用flex布局，flex布局易用，布局全面。float的创建初衷只是为了达到文字环绕的效果，另外需要清除浮动。现在几乎所有公司的产品使用场景都在浏览器ie9以上。

3.4.CSS中的position定位

（1）static:默认值，静态定位，表示没有定位，元素会按照正常的位置显示，此时 top、bottom、left 和 right 4 个定位属性也不会被应用。
（2）relative：相对定位，即相对于元素的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。

（3）absolute：绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
（4）fixed：固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。

（5）sticky：粘性定位，它是 relative 和 fixed 的结合体，能够实线类似吸附的效果，当滚动页面时它的效果与 relative 相同，当要滚动到屏幕之外时则会自动变成 fixed 的效果。

测试代码：

<!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>.a1{width: 200px;height: 200px;background-color: red;}.a2{width: 200px;height: 200px;background-color: green;}.a3{width: 200px;height: 200px;background-color: blue;}.a22{width: 50px;height: 50px;background-color: black;}</style>
</head>
<body><div class="a1"></div><div class="a2"><div class="a22"></div></div><div class="a3"></div>
</body>
</html>

在这里插入图片描述

（1）让黑块跑到绿块的最右边
在这里插入图片描述在这里插入图片描述

（2）设置一个悬浮的窗口
在这里插入图片描述
在这里插入图片描述

（3）粘性定位案例

在这里插入图片描述在这里插入图片描述

3.5.CSS之三栏布局实现

（1）float实现

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}
.left {width: 200px;height: 300px;background-color: red;float: left;
}.right {width: 200px;height: 300px;background-color: blue;float: right;
}.center {height: 300px;background-color: green;margin: 0 200px;
}
</style>
</head><body><div class="father"><div class="left"></div><div class="right"></div><div class="center"></div></div>
</body>
</html>

（2）position实现

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}
.left {width: 200px;height: 300px;background-color: red;position: absolute;left: 0;
}.right {width: 200px;height: 300px;background-color: blue;position: absolute;right: 0; 
}.center {height: 300px;background-color: green;margin: 0 200px;
}
</style>
</head><body><div class="father"><div class="left"></div><div class="right"></div><div class="center"></div></div>
</body></html>

（3）flex实现

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}
.left {width: 200px;height: 300px;background-color: red;
}.right {width: 200px;height: 300px;background-color: blue;
}.center {flex: 1;height: 300px;background-color: green;
}
.father {display: flex;
}
</style>
</head><body><div class="father"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body></html>

效果演示：

在这里插入图片描述

3.6.CSS之⽔平垂直居中

（1）⾏内块元素

通过line-height、text-align: center实现。

<!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>
</head><style>span{width: 200px;height: 200px;background-color: cadetblue;display: inline-block;text-align: center;line-height: 200px;font-size: 30px;}
</style><body><span>李祥</span>
</body>
</html>

通过display: flex、 justify-content: center、align-items: center实现。

<!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>
</head><style>span{width: 200px;height: 200px;background-color: cadetblue;display: flex;justify-content: center;align-items: center;font-size: 30px;}
</style><body><span>李祥</span>
</body>
</html>

运行效果：

在这里插入图片描述

（2）块级元素

position + transform实现

<!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>.a1 {width: 500px;height: 500px;background-color: cadetblue;position: relative;}.a2 {width: 100px;height: 100px;background-color: brown;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}</style>
</head>
<body><div class="a1"><div class = "a2"></div></div>
</body>
</html>

flex实现

<!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>.a1 {width: 500px;height: 500px;background-color: cadetblue;display: flex;justify-content: center;align-items: center;}.a2 {width: 100px;height: 100px;background-color: brown;}</style>
</head>
<body><div class="a1"><div class = "a2"></div></div>
</body>
</html>

运行效果：

在这里插入图片描述

3.7.CSS⾼级知识点之BFC

  • 定义

    • 块格式化上下⽂（Block Formatting Context，BFC）是Web⻚⾯的可视化CSS渲染的⼀部分，是块盒⼦的布局过程发⽣的区域，也是浮动元素与其他元素交互的区域。
    • 即：形成了⼀块封闭的区域，能检测到区域内脱离⽂档流的元素

  • 特点

    • css中隐含的属性，开启后不会被浮动的元素覆盖
    • BFC元素可以包含浮动元素
    • BFC元素的子元素和父元素外边距不重叠

  • 开启（都会有副作用）

    • 设置元素浮动 float：left
    • 设置为行内块元素 display：inline-block
    • overflow：hidden（推荐）

  • 作⽤

    • 清除浮动带来的影响
    • 解决边距塌陷问题(外边距折叠（Margin collapsing）也只会发⽣在属于同⼀BFC的块级元素之间)

4.CSS3常用属性讲解

4.1. CSS3边框样式

（1）圆角边框

border-radius:为元素添加圆角边框

四个值时：border-radius:30px 20px 30px 10px;(每个数值表示的是圆角的半径值，将每个角的水平和垂直半径都设置为对应的数值)
左上（10px）,右上（20px），右下（30px）,左下（10px）

<!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>
</head>
<style>div{width: 200px;height: 200px;margin: 0 auto;border: 3px solid red;border-radius: 10px;}
</style>
<body><div></div>
</body>
</html>

运行效果：

在这里插入图片描述

（2）盒阴影
box-shadow 属性接受值最多由五个不同的部分组成。

box-shadow: offset-x offset-y blur spread color position;

对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }

不像其它的属性，比如 border，它们的接受值可以被拆分为一系列子属性，box-shadow 属性没有子属性。这意味着记住这些组成部分的顺序更加重要，尤其是那些长度值。

<!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>
</head>
<style>div{width: 200px;height: 200px;margin: 0 auto;background-color: cadetblue;box-shadow: 2px 2px 10px black;}
</style>
<body><div></div>
</body>
</html>

在这里插入图片描述

（3）边界图片

border-image属性可以通过一些简单的规则，将一副图像划分为 9 个单独的部分，浏览器会自动使用相应的部分来替换边框的默认样式。

<!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>
</head>
<style>div{width: 200px;height: 200px;margin: 0 auto;border: 20px solid red;border-image: url('https://gw.alicdn.com/imgextra/i3/O1CN01iyYdem1GQd1yGgA0a_!!6000000000617-0-tps-2500-600.jpg');}
</style>
<body><div></div>
</body>
</html>

在这里插入图片描述

4.2.CSS3渐变样式

linear-gradient() 函数用于创建一个线性渐变的图像。

语法： background: linear-gradient(direction, color-stop1, color-stop2, …);

direction： 用角度值指定渐变的方向。

  • 方向值：常用的是to top，to bottom，to left，to right,to right top等等。
  • 角度值：常用的是0deg、180deg等等。

coler： 使用关键字red、rgba等颜色值（透明也可以设置）。

stop： 是这个颜色块终止位置，换句话说就是这块颜色占的区域。

（1）从上到下渐变（默认情况下）

background: linear-gradient(#e66465, #9198e5);

<!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>
</head>
<style>div{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(#e66465, #9198e5);}
</style>
<body><div></div>
</body>
</html>

在这里插入图片描述

（2）从左到右渐变

background: linear-gradient(to right, red , yellow);

<!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>
</head>
<style>div{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(to right, red , yellow);}
</style>
<body><div></div>
</body>
</html>

在这里插入图片描述

（3）对角渐变

background: linear-gradient(to bottom right, red, yellow);

<!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>
</head>
<style>div{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(to bottom, red , yellow);}
</style>
<body><div></div>
</body>
</html>

在这里插入图片描述

（4）角度从上到下

background: linear-gradient(180deg, red, yellow); 

<!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>
</head>
<style>div{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(180deg, red, yellow);}
</style>
<body><div></div>
</body>
</html>

在这里插入图片描述

（5）角度从左到右

background: linear-gradient(90deg, red, yellow);

<!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>
</head>
<style>div{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(90deg, red, yellow);}
</style>
<body><div></div>
</body>
</html>

在这里插入图片描述

（6）透明度设置

background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));

<!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>
</head>
<style>div{width: 200px;height: 200px;margin: 0 auto;background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));}
</style>
<body><div></div>
</body>
</html>

在这里插入图片描述

（7）设置重复的渐变区域

background: repeating-linear-gradient(red, yellow 10%, green 20%);

<!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>
</head>
<style>div{width: 200px;height: 200px;margin: 0 auto;background: repeating-linear-gradient(red, yellow 10%, green 20%);}
</style>
<body><div></div>
</body>
</html>

在这里插入图片描述

4.3.CSS3文本效果

（1）文本阴影

text-shadow: 5px 5px 5px #FF0000;

<!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>
</head>
<style>span{font-size: 50px;text-shadow: 5px 5px 5px #FF0000;}
</style>
<body><span>李祥</span>
</body>
</html>

在这里插入图片描述

（2）文本溢出超过1行省略

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; 

<!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>
</head>
<style>div{width: 100px;height: 100px;font-size: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
</style>
<body><div>晚风吹人醒，万事藏于心</div>
</body>
</html>

在这里插入图片描述

（3）文本溢出超过2行省略

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

<!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>
</head>
<style>div{width: 100px;height: 100px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
</style>
<body><div>晚风吹人醒，万事藏于心</div>
</body>
</html>

在这里插入图片描述

4.4.CSS3网格布局

网格布局，顾名思义就是像网一样有一个个格子一样的布局。在一个容器里面，我们可以切割成很多行很多列，形成一个个网格，从而对这些网格进行规则性的排序，使用，达到我们复杂的页面布局效果。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

类似哔哩哔哩首页这种网格状的排版。

在这里插入图片描述

直接上代码，采用Grid实现。

<!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>
</head>
<style>.box{width: 800px;height: 400px;background-color: cadetblue;display: grid;grid-template-columns: 25% 25% 25% 25%;grid-template-rows: 50% 50%;}.child{width: 200px;height: 200px;background-color: darkgoldenrod;border: 1px solid yellow;box-sizing: border-box;}
</style>
<body><div class="box"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div></div>
</body>
</html>

运行效果：

在这里插入图片描述

OK，至此Html+CSS的知识点就整理完成啦，觉得博主写的不错的，记得给个三连哦！

在这里插入图片描述

相关文章：

【前端】快速掌握HTML+CSS核心知识点

文章目录 1.HTML核心基础知识1.1.编写第一个HTML网页1.2.超链接a标签和路径1.3.图像img标签的用法1.4.表格table标签用法1.5.列表ul、ol、dl标签用法1.6.表单form标签用法1.7.区块标签和行内标签用法 2.CSS核心基础知识2.1.CSS标签选择器viewport布局2.2.CSS样式的几种写法2.3.…...

编程日记 2023/8/21 1:43:05

二叉树算法的框架套路总结

二叉树算法的框架套路总结 总结 本文主要来源于Leetcode用户&#xff1a;https://leetcode.cn/u/labuladong/&#xff0c;感谢写了这么好的文章作者&#xff1a;labuladong 链接&#xff1a;https://leetcode.cn/problems/same-tree/solutions/6558/xie-shu-suan-fa-de-tao-l…...

编程日记 2023/8/21 1:42:03

【ARM 嵌入式 编译 Makefile 系列 2 - Makefile 如何打印信息】

文章目录 Makefile 打印信息方法介绍Makefile 打印信息方法介绍 在Makefile中，我们可以使用echo命令来打印信息。这种方法适用于大多数的 UNIX shell，包括bash、sh、ksh、zsh等。 在 Makefile 中的规则部分，你可以添加 echo 命令来打印一些信息。例如： all: echo "…...

编程日记 2023/8/21 1:41:02

re学习（34）攻防世界-csaw2013reversing2(修改汇编顺序)

参考文章&#xff1a; re学习笔记&#xff08;27&#xff09;攻防世界-re-csaw2013reversing2_Forgo7ten的博客-CSDN博客攻防世界逆向入门题之csaw2013reversing2_沐一 林的博客-CSDN博客 三种做法 1、ida静态分析修改指令 main函数反编译的代码 由于运行之后的是乱码&…...

编程日记 2023/8/21 1:40:01

centos 7.9 部署django项目

1、部署框架 主要组件&#xff1a;nginx、uwsgi、django项目 访问页面流程&#xff1a;nginx---》uwsgi---》django---》uwsgi---》nginx 2、部署过程 操作系统&#xff1a;centos 7.9 配置信息&#xff1a;4核4G 50G 内网 eip &#xff1a;10.241.103.216 部署过程&…...

编程日记 2023/8/21 1:38:56

12 正则表达式 | HTTP协议相关介绍

文章目录 正则表达式re模块最基础操作&#xff08;匹配开头&#xff09;匹配单个字符匹配多个字符匹配开头结尾匹配分组对于group的理解r的作用re 模块高级用法compilesearchfindall易错点 sub直接替换函数替换 split 根据匹配进行切割字符串&#xff0c;并返回一个列表 python…...

编程日记 2023/8/21 1:37:55

【C语言】数组概述

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;C语言 &#x1f525;该篇将带你了解 一维数组&#xff0c;二维数组等相关知识。 目录&#xff1a; &#x1f4d8;前言&#xff1a;&#x1f…...

编程日记 2023/8/21 1:36:52

8. 实现业务功能--用户注册

目录 1. 顺序图 2. 参数要求 3. 接口规范 4. 创建扩展 Mapper.xml 5. 修改 DAO 6. 创建 Service 接口 7. 实现接口 8. 测试接口 9. 实现 Controller 9.1 密码加密处理 10. 实现前端界面 业务实现过程中主要的包和目录及主要功能&#xff1a; model 包&#xff1a;实体对象 d…...

编程日记 2023/8/21 1:35:51

深入浅出Pytorch函数——torch.nn.init.eye_

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…...

编程日记 2023/8/21 1:34:49

版本控制工具Git集成IDEA的学习笔记（第一篇Gitee）

目录 一、Gitee的使用 1、注册网站会员 2、用户中心 3、创建远程仓库 4、配置SSH免密登录 二、集成IDEA&#xff0c;Git项目搭建 1、本地仓库搭建 1&#xff09;创建一个新项目 2&#xff09;打开终端&#xff0c;在当前目录新建一个Git代码库 3&#xff09;忽略文件 …...

编程日记 2023/8/21 1:33:47

【链表】 61. 旋转链表

61. 旋转链表 解题思路 首先计算出链表长度将链表长度进行取余遍历链表 对链表进行分割 得到两个子链表重新连接两个链表比如1 2 3 4 5 k 2 进行分割得到 1 2 3 和 4 5两个子链表 /*** Definition for singly-linked list.* public class ListNode {* int val;* Lis…...

编程日记 2023/8/21 1:32:45

深入浅出Pytorch函数——torch.nn.init.kaiming_uniform_

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…...

编程日记 2023/8/21 1:31:43

查询Oracle和MySQL数据库中当前所有连接信息

查询Oracle当前所有连接信息&#xff1a; SELECTs.sid AS 会话ID,s.serial# AS 序列号,s.username AS 用户名,s.osuser AS 操作系统用户,s.machine AS 客户端机器,s.program AS 客户端程序,s.status AS 会话状态,s.sql_id AS 正在执行的SQL_ID,t.sql_text AS 正在执行的SQL文本…...

编程日记 2023/8/21 1:29:32

Android glide框架及框架涉及到的设计模式

目录 原文链接Android glide框架 简单使用介绍Glide 框架整体结构设计Glide 框架的优点基本使用&#xff1a;Glide占位符 Android glide框架涉及到的设计模式 原文链接 Android glide框架 简单使用介绍 Glide&#xff1a;快速高效的Android图片加载库&#xff0c;可以自动加载…...

编程日记 2023/8/21 1:28:31

使用yolov5进行安全帽检测填坑指南

参考项目 c​​​​​​​​​​​​​​GitHub - PeterH0323/Smart_Construction: Base on YOLOv5 Head Person Helmet Detection on Construction Sites&#xff0c;基于目标检测工地安全帽和禁入危险区域识别系统&#xff0c;&#x1f680;&#x1f606;附 YOLOv5 训练自己的…...

编程日记 2023/8/21 1:27:29

【BASH】回顾与知识点梳理（三十二）

【BASH】回顾与知识点梳理 三十二 三十二. SELinux 初探32.1 什么是 SELinux当初设计的目标&#xff1a;避免资源的误用传统的文件权限与账号关系&#xff1a;自主式访问控制, DAC以政策规则订定特定进程读取特定文件&#xff1a;委任式访问控制, MAC 32.2 SELinux 的运作模式安…...

编程日记 2023/8/21 1:26:24

vscode远程调试PHP代码

目录 一、准备工作 二、ssh连接和xdebug配置 1.ssh连接 2.xdebug配置 三、xdebug调试&#xff0c;访问 一、准备工作 1.安装vscode里面的两个扩展 2.安装对应PHP版本的xdebug 去xdebug官方&#xff0c;复制自己的phpinfo源码到方框里&#xff0c;再点击Analyse Xdebug: …...

编程日记 2023/8/21 1:25:23

flink1.17 实现 udf scalarFunctoin get_json_object 支持 非标准化json

特色 相比官方的json_value,该函数支持非标准化json,比如v是个object,但是非标准json会外套一层引号,内部有反引号. eg: {"kkkk2": "{\"kkkk1\":\"vvvvvvv\"}" } 支持value为 100L 这种java格式的bigint. {"k":999L…...

编程日记 2023/8/21 1:24:22

基于VUE3+Layui从头搭建通用后台管理系统（前端篇）九：自定义组件封装下

一、本章内容 续上一张，本章实现一些自定义组件的封装，包括文件上传组件封装、级联选择组件封装、富文本组件封装等。 1. 详细课程地址： 待发布 2. 源码下载地址： 待发布 二、界面预览 三、开发视频 基于VUE3+Layui从头搭建通用后台管...

编程日记 2023/8/21 1:23:20

设计模式详解-装饰器模式

类型&#xff1a;结构型模式 实现原理&#xff1a;装饰器模式通过将对象包装在装饰器类中&#xff0c;并在保持类方法签名完整性的前提下&#xff0c;提供额外功能 作用&#xff1a;动态地给一个对象添加一些额外的职责。增加功能方面&#xff0c;装饰器模式比生成子类更灵活…...

编程日记 2023/8/21 1:22:19

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/2/8 20:43:02

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/2/5 1:30:05

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2026/1/26 14:19:52

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2026/1/28 8:25:28

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34