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

目录

三、盒模型属性

 常见盒模型区域

盒模型图

盒模型五大属性

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 没有塌陷现象。

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

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

相关文章

软考高级架构师:随机函数模型

一、AI 讲解 随机函数模型是理解各种随机过程和算法的一个重要概念&#xff0c;在软件工程、算法设计以及系统分析中有着广泛的应用。简而言之&#xff0c;随机函数模型是一种用于描述具有随机性的系统或过程的数学模型&#xff0c;它能够帮助我们预测和分析在不确定性下的系统…

基于java+springboot+vue实现的智能停车计费系统(文末源码+Lw+ppt)23-30

摘 要 随着人们生活水平的高速发展&#xff0c;智能停车计费信息管理方面在近年来呈直线上升&#xff0c;人们也了解到智能停车计费的实用性&#xff0c;因此智能停车计费的管理也逐年递增&#xff0c;智能停车计费信息的增加加大了在管理上的工作难度。为了能更好的维护智能…

MySQL基础入门上篇

MySQL基础 介绍 mysql -uroot -p -h127.0.0.1 -P3306项目设计 具备数据库一定的设计能力和操作数据的能力。 数据库设计DDL 定义 操作 显示所有数据库 show databases;创建数据库 create database db02;数据库名唯一&#xff0c;不能重复。 查询是否创建成功 加入一些…

学习基于pytorch的VGG图像分类 day5

注&#xff1a;本系列博客在于汇总CSDN的精华帖&#xff0c;类似自用笔记&#xff0c;不做学习交流&#xff0c;方便以后的复习回顾&#xff0c;博文中的引用都注明出处&#xff0c;并点赞收藏原博主. 目录 VGG的数据集处理 1.数据的分类 2.对数据集的处理 VGG的分类标签设置 …

spring boot集成logback到mysql 8

spring boot集成logback到mysql 8 依赖数据库准备创建log日志用户&#xff0c;并创建数据库执行建表sql 配置文件bugbug 1&#xff1a;Failed to instantiate type ch.qos.logback.classic.db.DBAppenderbug信息&#xff1a;解决&#xff1a; bug2: DBAppender cannot function…

设计模式-代理模式(Proxy)

1. 概念 代理模式&#xff08;Proxy Pattern&#xff09;是程序设计中的一种结构型设计模式。它为一个对象提供一个代理对象&#xff0c;并由代理对象控制对该对象的访问。 2. 原理结构图 抽象角色&#xff08;Subject&#xff09;&#xff1a;这是一个接口或抽象类&#xff0…

AIGC专栏10——EasyAnimate 一个新的类SORA文生视频模型 轻松文生视频

AIGC专栏10——EasyAnimate 一个新的类SORA文生视频模型 &#x1f4fa;轻松文生视频 学习前言源码下载地址技术原理储备&#xff08;DIT/Lora/Motion Module&#xff09;什么是Diffusion Transformer (DiT)LoraMotion Module EasyAnimate简介EasyAnimate原理界面展示快速启动云…

主干网络篇 | YOLOv8更换主干网络之ConvNext | 全新的纯卷积模型

前言:Hello大家好,我是小哥谈。2022年,Facebook AI Research和UC Berkeley一起发表了一篇文章A ConvNet for the 2020s,在文章中提出了ConvNeXt纯卷积神经网络,它对标的是2021年非常火的Swin Transformer,通过一系列实验比对,在相同的FLOPs下,ConvNeXt相比Swin Transfo…

软考系规第2章思维导图,软硬件网络和次新技术大杂烩

虽然目前系统规划与管理师的教程是否改版存在不确定性&#xff0c;但是不影响咱们先概要了解当前的教程&#xff0c;使用思维导图的方式粗读教程。 为了帮助你更好的学习系规教程&#xff0c;降低系规教程阅读门槛&#xff0c;指尖疯特发起了教程伴读活动&#xff0c;通过伴读脑…

《由浅入深学习SAP财务》:第2章 总账模块 - 2.6 定期处理 - 2.6.4 月末操作:货币折算

2.6.4 月末操作&#xff1a;货币折算 如果一个公司代码启用了多个本位币&#xff0c;如下表所示&#xff0c;则在平时记账时&#xff0c;系统会在凭证行项目中同时体现出多个本位币的金额。 图2.6.4-1 两个本位币的金额都会实时更新到科目余额中。因此&#xff0c;在月末可以直…

2024最新版守约者二级域名分发系统

主要功能 二级域名管理&#xff1a;我们的系统提供全面的二级域名管理服务&#xff0c;让您轻松管理和配置二级域名。 域名分发&#xff1a;利用我们先进的域名分发技术&#xff0c;您可以自动化地分配和管理域名&#xff0c;确保每个用户或客户都能及时获得所需的域名资源。 自…

虚幻引擎启动报错记录

0x00007FFEF0C8917C (UnrealEditor-CoreUObject.dll)处(位于 UnrealEditor.exe 中)引发的异常: 0xC0000005: 写入位置 0x0000000000000030 时发生访问冲突。 解决办法&#xff1a;首先查看堆栈信息&#xff0c;我的项目启动是因为默认场景编译不过&#xff0c;进到编辑器配置文…

08 Php学习:if语句、Switch语句

PHP 条件语句 当您编写代码时&#xff0c;您常常需要为不同的判断执行不同的动作。您可以在代码中使用条件语句来完成此任务。 在 PHP 中&#xff0c;提供了下列条件语句&#xff1a; if 语句 - 在条件成立时执行代码 if…else 语句 - 在条件成立时执行一块代码&#xff0c;…

【vim 学习系列文章 20 -- a:mode 的值有哪些?】

请阅读【嵌入式开发学习必备专栏 之 Vim】 文章目录 a:mode 的值有哪些?举例Vim 底部状态栏设置 a:mode 的值有哪些? 在 Vim 脚本语言中&#xff0c;a:mode 常常用于函数内部&#xff0c;以获取该函数被调用时 Vim 正处于的模式。它主常用于那些可以从不同模式下被调用的函数…

铸造大型基础平板的结构应该怎样设计

设计大型基础平板的结构时&#xff0c;需要考虑以下几个方面&#xff1a; 地质条件&#xff1a;首先要了解工程所在地的地质条件&#xff0c;包括土质、地下水位、地震状况等。根据地质条件来选择合适的基础类型&#xff0c;如浅基、深基或地下连续墙等。 荷载分析&#xff1a…

【C++】深度解析--拷贝构造函数(从0开始,详解浅拷贝到深拷贝,小白一看就懂!!!)

目录 一、前言 二、拷贝构造函数 &#x1f34e;概念解析 &#x1f95d;特性解析 &#x1f4a6;为什么拷贝构造函数使用传值方式会引发无穷递归调用&#xff1f; &#x1f4a6;为什么拷贝构造函数的形参中要加入 const 修饰 &#x1f4a6;若未显式定义&#xff0c;编译器会生…

支持向量机模型

通过5个条件判定一件事情是否会发生&#xff0c;5个条件对这件事情是否发生的影响力不同&#xff0c;计算每个条件对这件事情发生的影响力多大&#xff0c;写一个支持向量机模型程序,最后打印5个条件分别的影响力。 示例一 为了计算每个条件对一件事情发生的影响力&#xff0c…

word从零基础到高手【办公】

第1课 - word基础操作快速入门第2课 - 让你效率10倍提升的快捷操作第3课 - word排版快速入门第4课 - 排版实战案例讲解第5课 - 搞定论文排版全过程第6课 - 让你的word更强大的神技第7课 - 提高工作效率必备的批量操作 资料截图如下: 发送: "word办公" 获取提取码

代码随想录算法训练营DAY25|C++回溯算法Part.2|216. 组合总和III、17.电话号码的字母组合

文章目录 216. 组合总和III题意理解树形结构伪代码实现剪枝操作CPP代码实现 17.电话号码的字母组合解题思路树形结构伪代码实现隐藏回溯CPP代码 216. 组合总和III 力扣题目链接 文章讲解&#xff1a;216. 组合总和III 视频讲解&#xff1a;和组合问题有啥区别&#xff1f;回溯算…

数据库(2)

目录 6.buffer pool,redo log buffer和undo logo&#xff0c;redo logo,bin log概念以及关系&#xff1f; 7.从准备更新一条数据到事务的提交的流程描述&#xff1f; 8.能说下myisam和innodb的区别吗&#xff1f; 9.说下MySQL的索引有哪些吧&#xff1f; 10.什么是B树&…