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

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

news 文章来源：https://blog.csdn.net/weixin_47533244/article/details/132382821 2024/10/5 19:41:07

文章目录

      • 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

Android5:活动生命周期

创建项目Stopwatch activity_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayoutxmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"android:layout_w…...

编程日记 2023/8/21 1:21:17

第2章 数据结构和算法概述

2.3线性结构和非线性结构 数据结构包括: 线性结构和非线性结构 2.3.1线性结构 线性结构作为最常用的数据结构&#xff0c;其特点是数据元素之间存在一对一的线性关系线性结构有两种不同的存储结构&#xff0c;即顺序存储结构(数组)和链式存储结构(链表)。顺序存储的线性表称…...

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

WPF国际化的实现方法(WpfExtensions.Xaml)

https://blog.csdn.net/eyupaopao/article/details/120090431 resx资源文件实现 resx资源文件&#xff0c;实现的过程比第一种复杂&#xff0c;但resx文件本身编辑比较简单&#xff0c;维护起来比较方便。需要用到的框架&#xff1a;WpfExtensions.Xaml 为每种语言添加.resx资…...

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

【Linux】—— 进程程序替换

目录 序言 &#xff08;一&#xff09;替换原理 1、进程角度——见见猪跑 1️⃣ 认识 execl 函数 2、程序角度——看图理解 &#xff08;二&#xff09;替换函数 1、命名理解 2、函数理解 1️⃣execlp 2️⃣execv 3️⃣execvp 4️⃣execle 5️⃣execve 6️⃣execve…...

编程日记 2023/8/21 1:18:10

idea创建javaweb项目，jboss下没有web application

看看下图这个地方有没有web application...

编程日记 2023/8/21 1:17:07

广东灯具3D扫描抄数建模服务3D测绘出图纸三维逆向设计-CASAIM

灯具三维逆向建模是一种将实际物体转换为数字模型的过程。通过逆向工程技术&#xff0c;可以将现有的灯具进行3D扫描&#xff0c;然后利用专业的逆向设计软件将其转换为准确的三维模型。 以下是CASAIM实施灯具三维逆向建模的一般步骤图&#xff1a; 1. 扫描&#xff1a;三维扫…...

编程日记 2023/8/21 1:16:06

Nginx反向代理-负载均衡、webshell实践

目录 1.nginx反向代理-负载均衡 1&#xff09;搭建web项目 2&#xff09;修改 nginx.conf的配置 2.webshell 实践 1&#xff09;异或操作绕过 2&#xff09;取反绕过 3&#xff09;php语法绕过 1.nginx反向代理-负载均衡 1&#xff09;搭建web项目 首先通过SpringBoo…...

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

第六阶|见道明心的笔墨（上）从书法之美到生活之美——林曦老师的线上直播书法课

如果你有需要&#xff0c;可以找我的&#xff0c;我这边有老师的所有课程 如果你有需要&#xff0c;可以找我的&#xff0c;我这边有老师的所有课程...

编程日记 2023/8/21 1:14:04

nbcio-boot从3.0升级到3.1的出现用户管理与数据字典bug

升级后出现 系统管理里的用户管理出现下面问题 2023-08-17 09:44:38.902 [http-nio-8080-exec-4] [1;31mERROR[0;39m [36mo.jeecg.common.exception.JeecgBootExceptionHandler:69[0;39m - java.lang.String cannot be cast to java.lang.Long java.lang.ClassCastException:…...

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

Curson 编辑器

Curson 汉化与vacode一样 Curson 自带chat功能 1、快捷键ctrlk(代码中编辑) 2、快捷键ctrll 右侧打开窗口...

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

Shell编程学习之函数的应用

Shell编程中的函数&#xff1a;伪代码表示&#xff1a; function 函数名(){函数体}注意事项&#xff1a; 1.函数无参数&#xff1b; 2.函数无返回值类型&#xff1b; 3.function可以不写&#xff1b; 4.函数不被调用&#xff0c;就不会执行&#xff1b; 5.函数名不能使用…...

编程日记 2023/8/21 1:10:59

Fork/Join框架

是什么 Fork/Join框架是Java 7提供的一个用于并行执行任务的框架&#xff0c;是一个把大任务分割成若干个小任务&#xff0c;最终汇总每个小任务结果后得到大任务结果的框架。 Fork: 把一个大任务切分为若干子任务并行的执行 Join: 合并这些子任务的执行结果&#xff0c;最后…...

编程日记 2023/8/21 1:09:58

LeetCode_字符串_中等_468.验证 IP 地址

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 给定一个字符串 queryIP。如果是有效的 IPv4 地址&#xff0c;返回 “IPv4” &#xff1b;如果是有效的 IPv6 地址&#xff0c;返回 “IPv6” &#xff1b;如果不是上述类型的 IP 地址&#xff0c;返回 “Nei…...

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

ABAP Der Open SQL command is too big.

ABAP Der Open SQL command is too big. DBSQL_STMNT_TOO_LARGE CX_SY_OPEN_SQL_DB 应该是选择条件中 维护的条件值条数太多了...

编程日记 2023/8/21 1:07:54

QChart类用来 管理 图表的：数据序列（series）、图例（legend）和坐标轴（axis）

QChart类用来 管理 图表的&#xff1a;数据序列&#xff08;series&#xff09;、图例&#xff08;legend&#xff09;和坐标轴&#xff08;axis&#xff09; 1、数据序列类 继承关系 2、坐标轴类 的继承关系 3、图例类 什么是图例&#xff1f; 图例&#xff1a;是集中于地图…...

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

Servlet+JDBC实战开发书店项目讲解第10篇：在线客服功能实现

在线客服功能实现 实现思路 要实现在线客服功能&#xff0c;您可以考虑以下步骤&#xff1a; 创建一个用于存储客户消息和回复的数据库表。您可以使用JDBC连接到数据库&#xff0c;并使用SQL语句创建表格。 在您的Servlet中&#xff0c;创建一个用于处理客户消息和回复的POS…...

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

CVE-2023-21292 AMS框架层高危漏洞分析

文章目录 前言漏洞细节故事起源漏洞利用漏洞修复 总结 前言 本周在分析 Google 官方发布的 Android 2023 年8 月安全公告 涉及的漏洞补丁的时候&#xff0c;遇到一个有意思的漏洞&#xff1a;CVE-2023-21292。 之所以说它有意思是因为这个漏洞早在去年年底就在某平台上被国外…...

编程日记 2023/8/21 1:04:50

cuda、cuDNN、深度学习框架、pytorch、tentsorflow、keras这些概念之间的关系

当讨论CUDA、cuDNN、深度学习框架、pytorch、tensorflow、keras这些概念的时候&#xff0c;我们讨论的是与GPU加速深度学习相关的技术和工具。 CUDA&#xff08;Compute Unified Device Architecture&#xff09;&#xff1a; CUDA是由NVIDIA开发的一种并行计算平台和编程模型&…...

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

第二讲：BeanFactory的实现

BeanFactory的实现 1. 环境准备2. 初始化DefaultListableBeanFactory3. 手动注册BeanDefinition4. 手动添加后置处理器5. 获取被依赖注入的Bean对象6. 让所有的单例bean初始化时加载7. 总结 Spring 的发展历史较为悠久&#xff0c;因此很多资料还在讲解它较旧的实现&#xff0c…...

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

vue2+Spring Boot2.7 大文件分片上传

之前我们文章 手把手带大家实现 vue2Spring Boot2.7 文件上传功能 将了上传文件 但如果文件很大 就不太好处理了 按正常情况甚至因为超量而报错 这里 我弄了个足够大的文件 我们先搭建 Spring Boot2.7 环境 首先 application.yml 代码编写如下 server:port: 80 upload:path:…...

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

Vite更新依赖缓存失败，强制更新依赖缓存

使用vitets开发一段时间了&#xff0c;感觉并不是想象中的好用&#xff0c;特别是出现些稀奇古怪的问题不好解决&#xff0c;比如下面这个问题 上午9:50:08 [vite] error while updating dependencies: Error: ENOENT: no such file or directory, open E:/workspace-dir/node…...

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

Linux命令200例：tail用来显示文件的末尾内容（常用）

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…...

编程日记 2023/8/21 0:59:38

【Unity每日一记】进行发射，位置相关的方法总结

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…...

编程日记 2023/8/21 0:58:37

MISRA 2012学习笔记(3)-Rules 8.4-8.7

文章目录 Rules8.4 字符集和词汇约定(Character sets and lexical conventions)Rule 4.1 八进制和十六进制转译序列应有明确的终止识别标识Rule 4.2 禁止使用三字母词(trigraphs) 8.5 标识符(Identifiers)Rule 5.1 外部标识符不得重名Rule 5.2 同范围和命名空间内的标识符不得重…...

编程日记 2023/8/21 0:57:33

centos7组件搭建

Linux&#xff08;包括centos&#xff09; 如何查看服务器内存、CPU su - root 切换用户 centos 密码 空格 https://blog.csdn.net/weixin_45277161/article/details/131524555 CentOS 7 安装 Docker 的详细步骤 https://blog.csdn.net/qq_39997939/article/details/13100…...

编程日记 2023/8/21 0:56:32

webpack5和webpack4的一些区别

自动清除打包目录 webpack4 // bash npm i clean-webpack-plugin -D //webpack.config.js const {CleanWebpackPlugin} require(clean-webpack-plugin); module.exports {plugins: [new CleanWebpackPlugin()} } webpack5 module.exports {output: {clean: true} } topLevel…...

编程日记 2023/8/21 0:55:28

攻防世界-fileclude

原题 解题思路 直接展示源码了&#xff0c;flag.php应该存放了flag&#xff0c;在file1与file2都不为空且file2是“hello ctf”时file1将被导入。接下来做法很明显&#xff0c;让file为flag.php&#xff0c;file2为“hello ctf”。“?file1php://filter/readconvert.base64-en…...

编程日记 2023/8/21 0:54:27

深度学习的“前世今生”

1、“感知机”的诞生 20世纪50年代&#xff0c;人工智能派生出了这样两个学派&#xff0c;分别是“符号学派”及“连接学派”。前者的领军学者有Marvin Minsky及John McCarthy&#xff0c;后者则是由Frank Rosenblatt所领导。 “符号学派”的人相信对机器从头编程&#xff0c…...

编程日记 2023/8/21 0:53:26

第一百一十九回 如何通过蓝牙设备读写数据

文章目录 概念介绍实现方法示例代码经验总结我们在上一章回中介绍了如何获取蓝牙状态相关的内容，本章回中将介绍 如何通过蓝牙设备读写数据。闲话休提，让我们一起Talk Flutter吧。 概念介绍 通过蓝牙设备读写数据有两种方法： 一种是读写Characteristics；一种是读写Descri…...

编程日记 2023/8/21 0:52:23

linux:Temporary failure in name resolutionCouldn’t resolve host

所有域名无法正常解析。 ping www.baidu.com 等域名提示 Temporary failure in name resolution错误。 rootlocalhost:~# ping www.baidu.com ping: www.baidu.com: Temporary failure in name resolution rootlocalhost:~# 一、ubuntu/debian&#xff08;emporary failure i…...

编程日记 2023/8/21 0:51:21