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

CSS核心样式-02-盒模型属性及扩展应用

news 文章来源：https://blog.csdn.net/m0_48670609/article/details/131462285 2024/11/2 4:36:55

目录

三、盒模型属性

 常见盒模型区域

盒模型图

盒模型五大属性

1. 宽度 width

2. 高度 height

3. 内边距 padding

四值法

三值法

二值法

单值法

案例

4. 边框 border

按照属性值的类型划分为三个单一属性

①线宽 border-width

②线型 border-style

 ③边框颜色 border-color

根据边框的方向划分为四个单一属性

根据方向和类型综合划分

5. 外边距 margin

四个单一属性

复合属性的四种值的写法

四、盒模型扩展应用

1. 清除默认样式

①清除盒模型的内外边距

标签选择器的并集方式

通配符方式

②清除 ul 和 ol 两种列表的默认前缀

③清除 a 标签默认样式

④清除默认加粗效果

⑤设置初始化的公共样式

2. height 应用

情况一：必须设置高度

溢出盒子

overflow解决溢出问题

情况二：必须不设置高度

3. 居中

① 文本水平居中

② 文本垂直居中

单行文本垂直居中

多行文本垂直居中

③ 元素垂直居中

④ 元素水平居中

4. 父子盒模型

父元素的width ≥ 所有子元素width + padding + border + margin

特殊情况：盒模型自动内减

5. margin 塌陷现象

同级元素塌陷

父子元素塌陷

解决 margin 塌陷问题的方法

同级元素

父子元素

三、盒模型属性

盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距 padding、 边框 border、外边距 margin。

 常见盒模型区域

盒模型的属性中，根据不同属性的效果，可以划分区域：

• 书写元素内容区域：width+height

• 盒子可以实体化的区域（也就是可以添加颜色显示出来的区域）：width+height+padding+border

• 盒子实际占位的位置：width+height+padding+border+margin

盒模型图

学习过程中，学会查看浏览器控制台（右侧 computed 部分）中的盒模型图：

盒模型五大属性

 盒模型五大属性分别是：

宽度 width、高度 height、内边距 padding、 边框 border、外边距 margin。

1. 宽度 width

  • 作用：设置可以添加元素内容的区域的宽度。
  • 属性值：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 300px;background-color: red;}p {width: 50%;background-color: yellow;}</style>
</head>
<body><div class="box"><p>这是一段文字</p></div>
</body>
</html>

p 的父级是 box，box 的父级是 body，p 的宽度就是 box 宽度的50%。

• 如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度，例如 div 、p 元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 100%区域，如果是 span 元素等不需要独占一行的，其 width 属性的值是根据内部元素内容自动撑开的宽度。

• body 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度。

2. 高度 height

  • 作用：设置可以添加元素内容的区域的高度。
  • 属性值：

 与宽度 width 的属性值设置非常类似。

• 如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。

3. 内边距 padding

  • 作用：设置的是元素的边框内部到宽高区域之间的距离。
  • 特点：可以去加载背景，不能书写嵌套的内容。
  • 属性值：常用 px 为单位的数值。
  • 如果设置  padding: 50px; 则上下左右四个方向的内边距都是 50px 。

  •  padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。

书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左。

 有时为了化简书写，一般习惯将四个方向的单一属性进行合写成 padding 属性。

padding 属性值：可以有 1-4 个值，值之间用空格进行分隔。

根据四个方向属性值不同，padding 有多种值的书写表示方法。

根据 padding 的属性值的个数不同，区分了四种表示法：

四值法

设置四个属性值，分配方向上、右、下、左。

三值法

设置三个值分配给上、左右、下。

二值法

设置两个值，分配给上下、左右。

单值法

设置属性值只有一个，分配方向上右下左，四边的值相同。

案例

制作三边内边距相同，一边不同。

方法①：使用四值法（10px 10px 10px 20px）、三值法（10px 10px 20px），进行属性值设置。

方法②（推荐使用）：利用综合属性和单一属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后面使用单一属性写法，再次定义某个方向的属性值不同，可以实现单一属性层叠综合属性的一部分。

    <style>.box {width: 200px;height: 200px;background-color: red;padding: 10px;padding-right: 20px;}p {background-color: yellow;}</style>

让单一属性层叠掉综合属性中的某一个。案例中先写综合属性 padding: 10px; 使得四个方向内边距都是 10px ，然后想让哪个边不同就写哪个边，比如想让右边不同就写 padding-right: 20px; 即可实现，并且减少出错。

其中第二种用法更加灵活，推荐使用，使用过程中注意书写顺序，单一属性必须书写在后，才能层叠掉综合属性中重复的部分。

4. 边框 border

  • 作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层。
  • 属性值：由三个值组成，分别为线的宽度、线的形状、线的颜色 。 
        <style>.box {width: 200px;height: 200px;background-color: red;border: 10px solid green;}</style>
  • border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。
按照属性值的类型划分为三个单一属性

划分为：

线宽：border-width

线型：border-style

颜色：border-color

①线宽 border-width
  • 作用：设置边框线的宽度。
  • 属性值：常用 px 形式的数值，四个方向都有边框，属性值类似于 padding，也有四种值的写法，即单值法二值法三值法四值法。
  •  <style>.box {width: 200px;height: 200px;background-color: red;border-width: 10px 20px 30px 40px;}</style>
②线型 border-style
  • 作用：设置边框的线条形状。
  • 属性值：形状的单词，总体也是类似 padding 的综合属性写法，也有单值法二值法三值法四值法的写法。
  • 属性值的单词可能性：

 <style>.box {width: 200px;height: 200px;background-color: red;border-width: 10px 20px 30px 40px;border-style: dashed solid groove inset;}</style>
 ③边框颜色 border-color
  • 作用：设置边框的颜色。
  • 属性值：颜色名或颜色值，整体类似 padding 综合属性写法，也有单值法二值法三值法四值法的写法。 
        <style>.box {width: 200px;height: 200px;background-color: red;border-width: 10px 20px 30px 40px;border-style: dashed solid groove inset;border-color: red green yellow blue;}</style>
根据边框的方向划分为四个单一属性

划分为：

上边框：border-top

右边框：border-right

下边框：border-bottom

左边框：border-left

每个单一属性都必须与复合属性 border 一致，设置三个属性值。

    <style>.box {width: 200px;height: 200px;background-color: red;border-top: 10px solid green;}</style>
根据方向和类型综合划分

类似 border-top 的单一方向属性，也可以根据属性值类型继续进行单一属性划分。

单一属性写法：border-方向-类型。

注意：细分时必须先写方向划分再写类型划分，否则属性名错误。

    <style>.box {width: 200px;height: 200px;background-color: red;border-top-color: green;}</style>

5. 外边距 margin

  • 作用：设置的是盒子与盒子之间的距离。
  • 特点：不能渲染背景。
  • 属性值：常用 px 为单位的数值。
  • 外边距的设置方式与内边距 padding 一模一样。
四个单一属性

上 margin‐top: 20px;

右 margin‐right: 20px;

下 margin‐bottom: 10px;

左 margin‐left: 20px;

复合属性的四种值的写法

四值法 margin: 10px 20px 30px 40px;

三值法 margin: 10px 20px 30px;

二值法 margin: 10px 20px;

单值法 margin: 10px;

    <style>.box {width: 200px;height: 200px;background-color: red;margin: 10px 20px 30px 40px;}

四、盒模型扩展应用

虽然我们了解了盒模型的五个属性的基本语法， 但是在实际工作中还有更多的方法和技巧需要掌 握，因此，我们需要扩展对盒模型的应用知识。

1. 清除默认样式

大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。

①清除盒模型的内外边距

盒模型（例如 body、div、p 等）属性中的内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么用通配符全部清除。

本来设计图没有边距，但是这里都有默认边距，所以要清除默认样式：

标签选择器的并集方式
 <style>/* 标签选择器并集方式清除默认样式（可以提前考虑到还没写的标签） */body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li {margin: 0;padding: 0;}</style>
通配符方式

也可以使用这种简便方法，但仅仅适合一些小的案例

    <style>/* 通配符方式清除默认样式（通配符选中所有标签） */* {margin: 0;padding: 0;}</style>

通配符会选择所有，而标签选择器的并集方式会有针对性的进行选择，所以标签选择器的并集方式的效率要高一些。

在实际项目中，一般用标签选择器的并集方式，如果是一些小案例，为了简化代码量可以使用通配符的方式。

②清除 ul 和 ol 两种列表的默认前缀

<ul> 和 <ol> 两种列表有默认的列表前缀，清除方式：使用 list-style 属性。

    <style>/* 清除 ul 和 ol 两种列表的默认前缀 */ul,ol {list-style: none;}</style>

③清除 a 标签默认样式

清除<a> 标签的默认样式，顺带设置页面中常用的 a 的公共样式：设置 color 和 text-decoration（可以通过设置color 使得a标签跟其他字体颜色一致，text-decoration设置清除下划线，主要就是想让a标签跟其他字体看起来一样，如果想让有的a标签不这样可以单独设置属性覆盖掉这个）。

    <style>/* 清除 a 标签默认属性 */a {color: blueviolet;text-decoration: none;}</style>
</head>
<body><a href="">这是一个a标签</a>
</body>

④清除默认加粗效果

一些标签默认带加粗效果，比如h1-h6，b，strong，

清除默认加粗效果：设置font-weight。

    <style>/* 清除默认加粗效果 */h1,h2,h3,h4,h5,h6,b,strong {font-weight: normal;}</style>

⑤设置初始化的公共样式

一般除了清除默认样式之外，做项目时还会设置初始化的公共样式。

可以给 <body> 标签设置整体文字样式，让大部分后代标签全部去继承（body里面的所有标签都可以继承，注意h1-h6标题，他们也继承，但是他们有自己的font-size，所以继承的body的就被层叠掉了，所以他们的字体还是自己原来的样式）。

    <style>/* 设置初始化的公共样式 */body {color: blue;font-size: 20px;font-family: Arial, "宋体";}</style>

2. height 应用

根据不同的需求，高度属性可以设置也可以不设置。
• 如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着在后面加载。
• 如果不设置高度：会根据标签内部内容高度自动撑开。

 以 <div> 标签为例，根据情况不同选择是否设置高度：

情况一：必须设置高度

设计图中盒子高度占位是固定的，后面同级元素在高度下面加载，这时候就必须设置高度。

溢出盒子

设置高度会产生一种情况：自身盒子内部内容过多会溢出盒子区域

盒子内部内容过多，但是盒子只有200px的高度，设置了高度后即使盒子装不下这些内容但是盒子也不会被撑开，这就是设置高度之后产生的效果。

而span没有被挤走，还是在盒子下方。

overflow解决溢出问题

对于这个问题，可以使用overflow 溢出属性进行解决。

设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。
可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。

visible跟上面出现的情况一样

hidden是经常使用的（溢出隐藏）

scroll在水平和竖直方向各出现一个滚动条，溢出方向出现滑块

auto，类似于文本域textarea，无溢出就正常显示，有溢出就出现滚动条。

auto是哪个方向溢出就哪个方向出现滚动条，不溢出的不会出现；而scroll是无论是否溢出两个方向都会出现滚动条，而只有溢出的才会出现滑块进行滑动。

情况二：必须不设置高度

设计图要求盒子高度必须自适应内部内容的高度，这是就不能设置高度。

比如一些新闻下面有评论区，有的新闻长有的短，新闻设置自适应，新闻内容有多少盒子就自动撑高多少，评论区就在新闻下面。
这时可以选择不设置高度，或者设置height的属性值是自动的，二者效果相同。

    <style>/* 设置高度为自动 */div {width: 200px;height: auto;border: 1px solid black;    }</style>

3. 居中

在网页中经常见到元素或者文字居中的效果。

① 文本水平居中

水平居中：text-align属性。（不论单行或多行都用这一条属性可以设置）

    <style>/* 设置文本水平居中 */p {width: 200px;height: auto;border: 1px solid black; text-align: center;   }</style>

② 文本垂直居中

单行文本垂直居中

单行文本垂直居中：让文字行高 line-height 等于盒子高度 height

（因为文字在自己的行高中是垂直居中的，所以让文字行高等于盒子高度，那么文字就可以在盒子垂直居中了）。

    <style>/* 设置文本水平居中 */p {width: 200px;height: 200px;border: 1px solid black; text-align: center;   line-height: 200px;}</style>
多行文本垂直居中

多行文本垂直居中：让存放文本的元素高度自适应或者设置元素内边距上下值相同。

不设置元素高度：

设置元素内边距上下值相同：

    <style>/* 设置文本垂直居中--设置元素内边距上下相同 */p {width: 200px;border: 1px solid black; text-align: center;  padding: 20px 0; }</style>

③ 元素垂直居中

一个元素内部嵌套的子元素，在父元素中居中。
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。

    <style>/* 设置元素垂直居中 *//* 不给父元素设置高度让其自适应，但设置内边距上下相同 */.box {width: 200px;border: 2px solid greenyellow;padding: 20px 10px;}.demo {width: 100px;height: 100px;background-color: aqua;}</style>
</head>
<body><div class="box"><div class="demo"></div></div>
</body>

④ 元素水平居中

针对类似 <div> <p>样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。（父子都是独占一行的盒子）
原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。

    <style>/* 设置元素水平居中 *//* 父元素设置不变，子元素设置magin左右都为auto */.box {width: 200px;border: 2px solid greenyellow;padding: 20px 10px;}.demo {width: 100px;height: 100px;background-color: aqua;margin: 0 auto;}</style>
</head>
<body><div class="box"><div class="demo"></div></div>
</body>

4. 父子盒模型

父元素的width ≥ 所有子元素width + padding + border + margin

一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度 width。
父元素的width ≥ 所有子元素width + padding + border + margin
如果不满足条件：要么多余的子元素掉下来，不能在一排，要么溢出父元素

（float: left;浮动属性，添加后就可以让本来独占一行的四个<p>标签排成一排）

    <style>/* 首先清除一下默认样式 */* {margin: 0;padding: 0;}.box1 {width: 1000px;height: 100px;border: 1px solid green;}.box1 p {float: left;width: 200px;height: 100px;background-color: blue;margin-right: 10px;}</style>
</head>
<body><div class="box1"><p>1</p><p>2</p><p>3</p><p>4</p></div>
</body>

否则，比如将子盒子的magin-right的值改为60px，子盒子就会掉下来：

magin-right的值极限是50px，子盒子刚好排成一排；51px都不可以。

另一种情况：父子盒模型中，只有一个子元素，且子元素是类似 <div> 标签必须占一行的。他不会出现上述那种掉下去的情况，但是他会出现溢出的情况。

父盒子是200×200，但是子盒子是（200+20）×（200+20），子盒子溢出。

经过上述两种情况：

所以，后续做项目时，计算或量取尺寸时一定要计算准确，一像素都不能偏差。

特殊情况：盒模型自动内减

对于上面第二种，即父子盒模型中，只有一个子元素，且子元素是类似 <div> 标签必须占一行的，有一种特殊的解决方式，即盒模型自动内减的方式。

解决方式：不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。

如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减（像上面那种，要想子盒子不超出父盒子，width要变成180，加上border的20才能刚好是200，不需要手动减，如果不设置子元素的 width 属性运行程序会自动将width变成180），子元素的 width 会自动收缩尺寸。

子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。

5. margin 塌陷现象

margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。

同级元素塌陷

上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。

父子元素塌陷

父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的margin-top 值，两个属性之间没有其他的内容进行隔离（中间没有padding 或者border将两个元素隔开），导致两个属性相遇，发生margin 塌陷。

本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。

解决 margin 塌陷问题的方法

同级元素

同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。

想让上面盒子与下面盒子之间有50px间距时，没必要将50拆成20和30，只需要将50给其中任何一个元素即可。

父子元素

父子元素：

让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；

更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。（一般不用子元素的magin，而是使用父级的padding）

另外注意：水平方向的 margin 没有塌陷现象。

相关文章：

CSS核心样式-02-盒模型属性及扩展应用

目录 三、盒模型属性 常见盒模型区域 盒模型图 盒模型五大属性 1. 宽度 width 2. 高度 height 3. 内边距 padding 四值法 三值法 二值法 单值法 案例 4. 边框 border 按照属性值的类型划分为三个单一属性 ①线宽 border-width ②线型 border-style ③边框颜色 bo…...

编程日记 2024/4/14 16:33:46

在 Google Cloud 上轻松部署开放大语言模型

今天&#xff0c;“在 Google Cloud 上部署”功能正式上线&#xff01; 这是 Hugging Face Hub 上的一个新功能&#xff0c;让开发者可以轻松地将数千个基础模型使用 Vertex AI 或 Google Kubernetes Engine (GKE) 部署到 Google Cloud。 Model Garden (模型库) 是 Google Clou…...

编程日记 2024/4/14 16:32:45

005Node.js模块URL的使用

引入 URL 模块 要使用 URL 模块&#xff0c;首先需要在代码中引入它。可以使用以下代码将 URL 模块导入到你的脚本中&#xff1a; const url require(url);实例代码 const urlrequire(url); var apihttp://www.baidu.com?nameshixiaobin&age20; console.log(url.parse(…...

编程日记 2024/4/14 16:31:44

美团笔试复盘

昨天做了美团的笔试&#xff0c;现在复盘一下。 1、将数组按照绝对值大小排序 有道算法题解决思路需要将数组按照绝对值大小进行排序&#xff0c;我使用的是sort方法Comparator比较器实现的&#xff0c;这里记录一下&#xff1a; public static void main(String[] args) {In…...

编程日记 2024/4/14 16:28:41

IntelliJ IDEA - Since Maven 3.8.1 http repositories are blocked

问题描述 新下载的 IDEA 在构建项目时&#xff0c;在下载引用的包时出现 “Since Maven 3.8.1 http repositories are blocked” 的问题。 原因分析 从 Maven 3.8.1 开始&#xff0c;不再支持 http 的包了。由于现在对网络安全的日益重视&#xff0c;都在向 https 转变&#…...

编程日记 2024/4/14 16:25:38

Django的APP应用更名（重命名）流程

将Django中的一个现有APP更名是一个需要谨慎操作的过程&#xff0c;因为它涉及到多个文件和配置的更新。下面是详细的步骤和一些补充细节&#xff0c;帮助你更顺利地完成APP重命名&#xff1a; 1. 修改APP名称及相关引用 更改APP目录名称&#xff1a; 首先&#xff0c;重命名…...

编程日记 2024/4/14 16:18:30

ChatGLM3-6B大语言模型离线执行

ChatGLM3-6B大语言模型离线执行 模型准备 一般而言&#xff0c;模型和模型参数可以通过如下三个模型源进行相应的下载&#xff1a; HuggingFace | ModelScope | WiseModel 本实例中&#xff0c;使用的是HuggingFace的源下载&#xff0c;相应的地址如下&#xff1a; HuggingFa…...

编程日记 2024/4/14 16:17:29

了解大语言模型的参数高效微调（Parameter-Effcient Fine-Tuning）

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 大语言模型在众多应用领域实现了突破性的进步&#xff0c;显著提升了各种任务的完成度。然而&#xff0c;其庞大的规模也带来了高昂的计算成本。这些模型往往包含数十亿甚至上千亿参数&#xff0c;需要…...

编程日记 2024/4/14 16:16:27

2024.4.14力扣每日一题——设计哈希集合

2024.4.14 题目来源我的题解方法一 链表数组 题目来源 力扣每日一题&#xff1b;题序&#xff1a;705 我的题解 方法一 链表数组 由于给定限制次数为10000&#xff0c;所以构造一个长度为10001的链表数组。对于add操作先看数组对应的位置是否为null或者为空&#xff0c;若是…...

编程日记 2024/4/14 16:14:25

SQL explain 显示子查询A类型为ALL怎么优化

当 SQL EXPLAIN 显示子查询 A 的类型为 ALL 时&#xff0c;这意味着数据库系统正在执行全表扫描&#xff0c;而不是使用索引来执行子查询。全表扫描可能会导致性能下降&#xff0c;特别是在大型表上。 为了优化这种情况&#xff0c;您可以考虑以下几点&#xff1a; 1. **索引…...

编程日记 2024/4/14 16:13:23

网络协议学习——IP协议

IP&#xff08;Internet Protocol&#xff0c;互联网协议&#xff09;是网络中最基本的协议之一&#xff0c;负责在互联网中进行数据包的传输。下面是对IP协议的详细讲解&#xff1a; IP协议的作用 IP协议是在网络层&#xff08;第三层&#xff09;上工作的协议&#xff0c;它的…...

编程日记 2024/4/14 16:11:19

MATLAB初学者入门（1）—— 基础知识和功能介绍

MATLAB&#xff08;Matrix Laboratory&#xff09;是一种用于数值计算、可视化以及编程的高性能语言环境。它广泛应用于工程、科学研究和教育等领域。以下是对MATLAB基础知识和编程技巧的系统性讲解&#xff0c;分为几个主要部分&#xff1a; 1. 基础操作 变量和表达式 在MAT…...

编程日记 2024/4/14 16:09:18

React Css 四种引入方式

React CSS 内联样式 优点 样式之间不会有冲突可以动态获取组件中state的值 缺点 要使用驼峰标识部分样式没有很友好的提示如果大量去写内敛样式 容易造成代码混乱伪类和伪元素无法编写 class HighCom extends PureComponent {constructor(props) {super(props)this.state…...

编程日记 2024/4/14 16:07:16

题目：输入3个数a,b,c，按大小顺序输出。

题目&#xff1a;输入3个数a,b,c&#xff0c;按大小顺序输出。　　　 There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried abou…...

编程日记 2024/4/14 16:05:14

AI预测体彩排3第3弹【2024年4月14日预测--第1套算法开始计算第3次测试】

今天咱们继续测试第1套算法和模型&#xff0c;今天是第3次测试&#xff0c;目前的测试只是为了记录和验证&#xff0c;不建议大家盲目跟买。我的目标仍旧是10次命中3-4次!~废话不多说了&#xff0c;直接上结果&#xff01; 2024年4月14日排3的七码预测结果如下 第一套&…...

编程日记 2024/4/14 16:04:12

Android 在xml 布局中如何嵌套 Jetpack Compose

最近在项目开发的过程中需要用到 Jetpack Compose&#xff0c;之前没有接触过Compose&#xff0c;所以项目一直没有用到Compose。通过查看官网发现Compose上手比较快&#xff0c;但是准备比较复杂的布局要转换成Compose 不是一件容易的事情。那有没有可能只是对成熟的项目中的x…...

编程日记 2024/4/14 16:01:09

Spring Boot统一功能处理（一）

本篇主要介绍Spring Boot的统一功能处理中的拦截器。 目录 一、拦截器的基本使用 二、拦截器实操 三、浅尝源码 初始化DispatcherServerlet 处理请求&#xff08;doDispatch) 四、适配器模式 一、拦截器的基本使用 在一般的学校或者社区门口&#xff0c;通常会安排几个…...

编程日记 2024/4/14 16:00:08

我与C++的爱恋：类与对象（二）

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;我与C的爱恋 ​ 本篇着重介绍构造函数和析构函数&#xff0c;剩余内容在下篇解答。 一、类的默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 任何类在什么都不写时…...

编程日记 2024/4/14 15:56:04

BERT入门：理解自然语言处理中的基本概念

1. 自然语言处理简介 自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是人工智能领域的重要分支&#xff0c;涉及计算机与人类自然语言之间的相互作用。NLP 的应用已经深入到我们日常生活中的方方面面&#xff0c;如智能助理、机器翻译、舆情…...

编程日记 2024/4/14 15:51:00

Discoverydevice.java和activity_discoverydevice.xml

一、Discoverydevice.java public class Discoverydevice extends AppCompatActivity {private DeviceAdapter mAdapter2;private final List<DeviceClass> mbondDeviceList new ArrayList<>();//搜索到的所有已绑定设备保存为列表private final List<Devic…...

编程日记 2024/4/14 15:47:57

华为OD机试 - 最多颜色的车辆（Java JS Python C C++）

须知 哈喽，本题库完全免费，收费是为了防止被爬，大家订阅专栏后可以私信联系退款。感谢支持 文章目录 须知题目描述输入描述输出描述解析代码题目描述 在一个狭小的路口，每秒只能通过一辆车，假设车辆的颜色只有 3 种，找出 N 秒内经过的最多颜色的车辆数量。 三种颜色编…...

编程日记 2024/4/14 15:46:56

【无人机/平衡车/机器人】详解STM32+MPU6050姿态解算—卡尔曼滤波+四元数法+互补滤波——附3个算法源码

效果： MPU6050姿态解算-卡尔曼滤波+四元数+互补滤波 目录 基础知识详解 欧拉角...

编程日记 2024/4/14 15:45:54

NzN的C++之路--构造函数与析构函数

如果一个类中既没有成员变量也没有成员函数&#xff0c;这个类简称为空类。空类中其实并不是什么都没有&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成6个默认成员函数。那今天我们就来学习一下其中两个默认成员函数&#xff1a;构造函数与析构函数。先三连后看…...

编程日记 2024/4/14 15:44:53

【算法刷题day24】Leetcode：216. 组合总和 III、17. 电话号码的字母组合

文章目录 Leetcode 216. 组合总和 III解题思路代码总结 Leetcode 17. 电话号码的字母组合解题思路代码总结 草稿图网站 java的Deque Leetcode 216. 组合总和 III 题目&#xff1a;216. 组合总和 III 解析&#xff1a;代码随想录解析 解题思路 回溯三部曲&#xff1a;确定递归…...

编程日记 2024/4/14 15:41:47

一体化泵站的生产制造流程怎样

诸城市鑫淼环保小编带大家了解一下一体化泵站的生产制造流程怎样 综合泵站和传统式混泥土泵站的一大差别是&#xff0c;离去制造厂前&#xff0c;能够开展全部机械设备设备的生产加工及零部件加工&#xff0c;随后运送到建筑项目当场开展安裝。这类经营方式缩短了开发周期&…...

编程日记 2024/4/14 15:37:43

【1】C++设计模式之【单例模式】

单例模式在C中的实现方式有以下几种&#xff1a; 懒汉式&#xff08;线程不安全&#xff09;饿汉式&#xff08;线程安全&#xff09;双检锁/双重校验锁&#xff08;DCL&#xff0c;线程安全&#xff09;静态局部变量&#xff08;线程安全&#xff09;C11版本&#xff08;线程…...

编程日记 2024/4/14 15:34:37

软件设计模式之解释器模式

一、引言 在软件设计中&#xff0c;我们经常遇到需要“解释”和执行某种特定语法或语言的情况。这时&#xff0c;解释器模式就派上了用场。解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为设计模式&#xff0c;它提供了一种解释语言的语法并定义一个句子如何…...

编程日记 2024/4/14 15:30:33

java Web课程管理系统用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 课程管理系统是一套完善的web设计系统&#xff0c;对理解JSP java 编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&#xff0c;使用ja…...

编程日记 2024/4/14 15:28:29

Electron 桌面端应用的使用 ---前端开发

Electron是什么&#xff1f; Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 入门…...

编程日记 2024/4/14 15:27:28

【SpringBoot：详解Bean装配】

&#x1f3e1;Java码农探花&#xff1a; &#x1f525; 推荐专栏&#xff1a;<springboot学习> &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、IoC容器的简介BeanFactory接口源码二、Bean装配扫描装配探索启动类条件装配自定义Bean总…...

编程日记 2024/4/14 15:25:26

如何利用国外网站做自媒体/新闻头条最新消息30字

原已经安装好的nginx&#xff0c;现在需要添加一个未被编译安装的模块: nginx -V 可以查看原来编译时都带了哪些参数 原来的参数&#xff1a; --prefix/app/nginx 添加的参数: --with-http_stub_status_module --with-http_ssl_module --with-http_realip_module nginx第三方模…...

编程日记 2024/11/2 1:40:46

天津网站建设交易/引流用什么话术更吸引人

7、今有三分之一&#xff0c;五分之二。问合之得几何&#xff1f; 答曰&#xff1a;十五分之十一。 译文&#xff1a; 设有分数13、25&#xff0c;问相加得多少&#xff1f; 答&#xff1a;1115。...

编程日记 2024/11/1 23:53:53

在线网站地图生成器/360优化关键词

Workerman_cor_ape这是什么Workerman_cor_ape 是知名php框架 Workerman 的强化版&#xff0c;在不影响任何使用方式&#xff0c;稳定性&#xff0c;性能前提下&#xff0c;增加了异步任务组件。原理是什么Workerman每个工作进程只有一个线程&#xff0c;这个线程既负责收发网络…...

编程日记 2024/11/1 23:06:11

网站建设管理与政府/超级优化大师下载

期待着,盼望着&#xff0c;五一劳动节终于要到来了&#xff01;开心&#xff01;让我们欢呼雀跃&#xff01; 小编此时此刻的心情&#xff0c;无法形容&#xff0c;唯有吟诗一首&#xff1a; 啊&#xff01;劳动节~~ 真高兴呀&#xff01; 真高兴&#xff01; 哎呀&#xff01;…...

编程日记 2024/11/1 22:26:30

怎么做网站下单/深圳百度推广seo公司

IE的时候图片在右边显示&#xff0c;而FF的时候图片在文字下面显示&#xff0c;现在如何做&#xff0c;才能让2个浏览器下都文字下方显示啊&#xff1f;QQ5650387 <html> <head><meta http-equiv"Content-Type" content"text/html; charsetut…...

编程日记 2024/11/1 18:55:55

公司商城网站建设/网域名查询地址

对于移动平台上的RPG类的游戏&#xff0c;我们常用虚拟摇杆来控制人物角色的行走和一些行为&#xff0c;相信我们对它并不陌生&#xff0c;之前尝试了EasyTouch2.5&#xff0c;发现并没有最新版的3.1好用&#xff0c;2.5版本的对于自适应没有做的很好&#xff0c;而最新版的已经…...

编程日记 2024/11/1 16:36:48