【前端】快速掌握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.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的知识点就整理完成啦，觉得博主写的不错的，记得给个三连哦！

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/97949.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Linux取经路】解析环境变量，提升系统控制力

【Linux取经路】解析环境变量，提升系统控制力

文章目录 一、进程优先级1.1 什么是优先级&#xff1f;1.2 为什么会有优先级&#xff1f;1.3 小结 二、Linux系统中的优先级2.1 查看进程优先级2.2 PRI and NI2.3 修改进程优先级2.4 进程优先级的实现原理2.5 一些名词解释 三、环境变量3.1 基本概念3.2 PATH&#xff1a;Linux系…
阅读更多...
k8s 常见面试题

k8s 常见面试题

前段时间在这个视频中分享了 https://github.com/bregman-arie/devops-exercises 这个知识仓库。 这次继续分享里面的内容&#xff0c;本次主要以 k8s 相关的问题为主。 k8s 是什么&#xff0c;为什么企业选择使用它 k8s 是一个开源应用&#xff0c;给用户提供了管理、部署、扩…
阅读更多...
Learning to Super-resolve Dynamic Scenes for Neuromorphic Spike Camera论文笔记

Learning to Super-resolve Dynamic Scenes for Neuromorphic Spike Camera论文笔记

摘要 脉冲相机使用了“integrate and fire”机制来生成连续的脉冲流&#xff0c;以极高的时间分辨率来记录动态光照强度。但是极高的时间分辨率导致了受限的空间分辨率&#xff0c;致使重建出的图像无法很好保留原始场景的细节。为了解决这个问题&#xff0c;这篇文章提出了Sp…
阅读更多...
idea2023 springboot2.7.5+mybatisplus3.5.2+jsp 初学单表增删改查

idea2023 springboot2.7.5+mybatisplus3.5.2+jsp 初学单表增删改查

创建项目 修改pom.xml 为2.7.5 引入mybatisplus 2.1 修改pom.xml <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.2</version></dependency><!--mysq…
阅读更多...
【STM32 学习】电源解析（VCC、VDD、VREF+、VBAT）

【STM32 学习】电源解析（VCC、VDD、VREF+、VBAT）

VCC电源电压GND电源供电负电压&#xff08;通常接地&#xff09;VDD模块工作正电压VSS模块工作负电压VREFADC参考正电压VREF-ADC参考负电压VBAT电池或其他电源供电VDDA模拟供电正电压VSSA模拟供电负电压 一、VCC&#xff08;供电电压&#xff09; VCC是指芯片的电源电压&#…
阅读更多...
MNIST手写数字数据集+7000张图片下载

MNIST手写数字数据集+7000张图片下载

MNIST手写数字图像数据集是一个经典的用于图像分类任务的数据集&#xff0c;其中包含了大量的手写数字图像样本 数据集点击下载&#xff1a; MNIST手写数字数据集7000张图片.rar
阅读更多...
函数栈帧理解

函数栈帧理解

本文是从汇编角度来展示的函数调用&#xff0c;而且是在vs2013下根据调试展开的探究&#xff0c;其它平台在一些指令上会有点不同&#xff0c;指令不多&#xff0c;简单记忆一下即可&#xff0c;在我前些年的学习中&#xff0c;学的这几句汇编指令对我调试找错误起了不小的作用…
阅读更多...
【令牌桶算法与漏桶算法】

【令牌桶算法与漏桶算法】

&#x1f4a7; 令牌桶算法与漏桶算法 \color{#FF1493}{令牌桶算法与漏桶算法} 令牌桶算法与漏桶算法&#x1f4a7; &#x1f337; 仰望天空&#xff0c;妳我亦是行人.✨ &#x1f984; 个人主页——微风撞见云的博客&#x1f390; &#x1f433; 《数据结构与算法》专…
阅读更多...
【前端｜JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏！

【前端｜JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏！

前言 贪吃蛇游戏是经典的小游戏&#xff0c;也是学习前端JS的一个很好的练习项目。在本教程中&#xff0c;我们将使用 JavaScript 来逐步构建一个贪吃蛇游戏。我们会从创建游戏区域开始&#xff0c;逐步添加蛇的移动、食物的生成以及游戏逻辑等功能。 &#x1f680; 作者简介&a…
阅读更多...
韦东山-电子量产工具项目：业务系统

韦东山-电子量产工具项目：业务系统

代码结构 所有代码都已通过测试跑通&#xff0c;其中代码结构如下&#xff1a; 一、include文件夹 1.1 common.h #ifndef _COMMON_H #define _COMMON_Htypedef struct Region {int iLeftUpX; //区域左上方的坐标int iLeftUpY; //区域左下方的坐标int iWidth; //区域宽…
阅读更多...
java八股文面试[java基础]——String StringBuilder StringBuffer

java八股文面试[java基础]——String StringBuilder StringBuffer

String类型定义&#xff1a; final String 不可以继承 final char [] 不可以修改 String不可变的好处&#xff1a; hash值只需要算一次&#xff0c;当String作为map的key时&#xff0c; 不需要考虑hash改变 天然的线程安全 知识来源&#xff1a; 【基础】String、StringB…
阅读更多...
Python web实战之细说 Django 的单元测试

Python web实战之细说 Django 的单元测试

关键词&#xff1a; Python Web 开发、Django、单元测试、测试驱动开发、TDD、测试框架、持续集成、自动化测试 大家好&#xff0c;今天&#xff0c;我将带领大家进入 Python Web 开发的新世界&#xff0c;深入探讨 Django 的单元测试。通过本文的实战案例和详细讲解&#xff…
阅读更多...
ubuntu安装Microsoft Edge并设置为中文

ubuntu安装Microsoft Edge并设置为中文

1、下载 edge.deb 版本并安装 sudo dpkg -i microsoft-edg.deb 2. 设置默认中文显示 如果是通过.deb方式安装的&#xff1a; 打开默认安装路径下的microsoft-edge-dev文件&#xff0c;在文件最开头加上: export LANGUAGEZH-CN.UTF-8 &#xff0c;保存退出。 cd /opt/micr…
阅读更多...
PHP8的字符串操作3-PHP8知识详解

PHP8的字符串操作3-PHP8知识详解

今天继续分享字符串的操作&#xff0c;前面说到了字符串的去除空格和特殊字符&#xff0c;获取字符串的长度&#xff0c;截取字符串、检索字符串。 今天继续分享字符串的其他操作。如&#xff1a;替换字符串、分割和合成字符串。 5、替换字符串 替换字符串就是对指定字符串中…
阅读更多...
【算法系列篇】滑动窗口

【算法系列篇】滑动窗口

文章目录 前言什么是滑动窗口1.长度最小的子数组1.1 题目要求1.2 做题思路 1.3 Java代码实现2.无重复字符的最长子串2.1 题目要求2.2 做题思路2.3 Java代码实现 3.最大连续1的个数 III3.1 题目要求3.2 做题思路3.3 Java代码实现 4.将x减到0的最小操作数4.1 题目要求4.2 做题思路…
阅读更多...
【仿写框架之仿写Tomact】四、封装HttpRequest对象（属性映射http请求报文）、HttpResponse对象（属性映射http响应报文）

【仿写框架之仿写Tomact】四、封装HttpRequest对象（属性映射http请求报文）、HttpResponse对象（属性映射http响应报文）

文章目录 1、创建HttpRequest对象2、创建HttpResponse对象 1、创建HttpRequest对象 HttpRequest对象中的属性与HTTP协议中的内容对应&#xff0c;用于后序servlet从request中获取请求中的参数。 参照http请求报文&#xff1a; import java.io.BufferedReader; import java…
阅读更多...
配置使用Gitee账号认证登录Grafana

配置使用Gitee账号认证登录Grafana

三方社会化身份源 集成gitee第三方登录 第三方登录的原理 所谓第三方登录&#xff0c;实质就是 OAuth 授权。用户想要登录 A 网站&#xff0c;A 网站让用户提供第三方网站的数据&#xff0c;证明自己的身份。获取第三方网站的身份数据&#xff0c;就需要 OAuth 授权。 举例来…
阅读更多...
ubuntu上使用osg3.2+osgearth2.9

ubuntu上使用osg3.2+osgearth2.9

一、介绍 在ubuntu上使用osgearth加载三维数字地球&#xff0c;首先要有osg和osgearth的库&#xff0c;这些可以直接使用apt-get下载安装&#xff0c;但是版本有些老&#xff0c;如果需要新版本的就需要自己编译。 #查看现有版本 sudo apt-cache madison openscenegraph #安装…
阅读更多...
Python写一个创意五子棋游戏

Python写一个创意五子棋游戏

前言 在本教程中&#xff0c;我们将使用Python写一个创意五子棋游戏 &#x1f4dd;个人主页→数据挖掘博主ZTLJQ的主页 个人推荐python学习系列&#xff1a; ☄️爬虫JS逆向系列专栏 - 爬虫逆向教学 ☄️python系列专栏 - 从零开始学python 首先 GomokuGame 类的构造函数 __ini…
阅读更多...
小程序 CSS-in-JS 和原子化的另一种选择

小程序 CSS-in-JS 和原子化的另一种选择

小程序 CSS-in-JS 和原子化的另一种选择 小程序 CSS-in-JS 和原子化的另一种选择 介绍快速开始 pandacss 安装和配置 0. 安装和初始化 pandacss1. 配置 postcss2. 检查你的 panda.config.ts3. 修改 package.json 脚本4. 全局 css 注册 pandacss5. 配置的优化与别名 weapp-pand…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发