第三章总结

最新推荐文章于 2024-07-13 17:28:14 发布
最新推荐文章于 2024-07-13 17:28:14 发布
阅读量681 收藏 29
点赞数 15
文章标签： tensorflow 人工智能 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76561151/article/details/136632755
版权

目录

3.1盒子模型

​编辑

3.2块级元素与行内元素 

块级元素

​编辑

行内元素 

行内块元素 

3.3浮动与定位

元素浮动与清除

元素定位

​编辑

3.4flex布局 

容器属性

项目属性 

3.1盒子模型

  1.     盒子模型就是我们在页面设计中经常用到的一种思维模型。在css中，一个独立的盒子模型由内容（context)，内边距（padding），边框（border和外边距（margin）4部分组成。
  2. 此外对padding，border和margin可以进一步细化为上，下，左，右4个部分，在css中可以分别进行设置

 

  •  width和height 内容的宽度和高度
  • padding-top、padding-right、padding-bottom、padding-left 上内边距、右内边距、底内边距和左内边距。
  • border-top、border-right、border-bottom、border-left 上边框、右边框、底边框、左边框。
  • margin-top、margin-right、margin-bottom、margin-left 上外边距、右外边距、底外边距、左外边距‘

3.2块级元素与行内元素 

 元素按显示方式分为块级元素、行内元素、行内块级元素、它们的显示方式由display属性控制

块级元素

块级元素默认占一行高度 ，一行内通常只有一个块级元素，添加块级元素，会只动换行，块级元素一般作为盒子出现。块级元素的特点如下：

  1. 一个块级元素占一行。
  2. 块级元素的，默认高度由内容决定，除非自定义高度
  3. 块级元素的默认宽度是由父级元素的内容区宽度，除非自定义宽度。
  4. 块级元素的宽度、高度、外边距、及内边距都可以自定义设置。
  5. 块级元素可以容纳块级元素和行内元素。

<view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素的实例代码如下： 

行内元素 

  1. 行内元素不能被设置高度和宽度，其高度和宽度由内容决定。
  2. 行内元素不能放置块级元素，只能容纳文本或其他行内元素。
  3. 同一块内，行内元素及其他行内元素显示在同一行。 

 <text/>组件默认为行内元素，使用<view>及<text/>组件演示盒子模型及行内元素的示例如下：

行内块元素 

当元素的display属性被设置为inline-block时，元素被设置为行内块元素。行内块元素可以设置高度、宽度、内边距、和外边距。示例代码如下：

3.3浮动与定位

元素浮动与清除

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，其基本格式如下：

{float:none|left|right;}
  1. none默认值，表示元素不浮动
  2. left 元素向左浮动
  3. right 元素向右浮动

在下面的实例代码中，分别对box1、box2、box3元素左浮动：

    通过案例我们发现，当box3左浮动后，父元素的边框未能包裹box3元素。这时，可以通过清除浮动来决解。

    由于浮动不再占用原文档流的位置，因此它会对页面其它元素的排列产生影响。在CSS中，clear属性用于清除浮动元素对其它元素的影响，其基本格式如下：

{clear:left|right|both|none}
  1. left 清除左边浮动的影响，也就是不允许左边有浮动元素；
  2. right 清除右边的浮动的影响，也就是不允许右边有浮动元素；
  3. both 同时清除左右两侧浮动的影响；
  4. none 不清除浮动。 

示例代码： 

<view> box1,box2左浮动 box3清除浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #0f0;">box1</view>
<view style="float: left;border: 1px solid #0f0;">box2</view>
<view style="clear: left; border: 1px solid #0f0;">box3</view>

 

元素定位

浮动布局虽然灵活，但无法对元素的位置进行准确的控制。在CSS中，通过postition属性可以实现对页面元素的精确定位，基本格式如下：

{postition:static|relative|absolute|fixed}
  1.  static 默认值，该元素按照标准流进行布局。
  2. relative 相对定位，相对于它在原文档流的位置进行重新定位，它后面的盒子仍然以标准方式对待它。
  3. absolute 绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响。
  4. fixed 固定定位，相对于浏览器窗口进行定位。

对box1、box2、box3进行元素静态定位，示例代码如下：

<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

 

 

对box1、box2、box3进行元素相对定位，示例代码如下：

<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position:relative;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

对box1、box2、box3进行绝对定位，示例代码如下：

<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position:absolute;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

 对box1、box2、box3进行元素固定定位，示例代码如下：

<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position:fixed;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

3.4flex布局 

     flex布局是万维网联盟(World Wide Web Consortium,W3C)在2009年提出的一种新布局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局。flex 是 flexible box的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局。
      flex 布局主要由容器和项目组成，采用flex布局的元素称为flex容器(flex container), flex 布局的所有直接子元素自动成为容器的成员，称为flex 项目( flex item)。

其中容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做 cross size。flex布局模型如图所示。


    设置display属性可以将一个元素指定为flex布局，设置flex- direction属性可以指定主轴方向。主轴既可以是水平方向，也可以是垂直方向。

容器属性

flex容器支持的属性有7种，如表所示。

1.display

display用来指定元素是否为flex布局，语法格式为：

.box{display:flex|inline-flex;}
  1.  flex ---块级flex布局，该元素变为弹性盒子；
  2. inline-flex   行内flex布局，行内容器布局符合行内元素的特征，同时在容器内又符合flex布局规范。设置flex布局后，子元素的float、clear和vertical-align属性将失效。

2.flex-direction

flex-direction用于实战主轴的方向，即项目排列的方向，语法格式为：

.box{flex-direction:row|row-reverse|column|colum-reverse;}
  1. row 主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为row;
  2. row-reverse 主轴为水平方向，起点在右端；
  3. column 主轴为垂直方向，起点在顶端；
  4. Colum-reverse 主轴为垂直方向，起点在底端

显示效果如下：

 

3.flex-wrap

flex-wrap 用于指定当项目在一根轴线的排列位置不够时，项目是否换行，其语法格式如下：

.box{flex-wrap:nowrap|wrap|wrap-reverse;}
  1.  nowrap 不换行，默认值；
  2.  wrap 换行，第一行在上方；
  3.  wrap-reverse 换行，第一行在下方；

显示效果如下：

 

4.flex-flow

flex-flow是flex-dicection和flex-wrap的简写形式，默认值 为row nowrap。语法格式如下：

.box{flex-flow:<flex-direction>||<flex-wrap>;}

示例代码如下：

.box{flex-flow:row nowrap;}//水平方向不换行
.box{flex-flow:row-reverse wrap;}//水平方向逆方向换行
.box{flex-flow:column wrap-reverse;}//垂直方向逆方向换行

5.justify-content

justify-content用于定义项目在主轴上的对齐方式。语法格式如下：

.box{justify-content:flex-start|flex-end|center|space-between|space-around;}
  1. justify-content 与主轴方向有关，默认主轴水平对齐，方向从左到右；
  2. flex-start 左对齐，默认值
  3. flex-end 右对齐 ；
  4. center 居中；
  5. space-between 两端对齐，项目之间的间隔都相等；
  6. space-around 每个项目两侧的间隔相deng;

显示效果如下：

 

 6.align-items

align-items用于指定项目在交叉轴的对齐方式，语法格式如下：
 

.box{align-items:flex-start|flex-end|center|baseline|stretch;}
  1. align-items 与交叉轴方向有关，默认由上到下；
  2. flex-start 交叉轴起点对齐；
  3. flex-end 交叉轴终点对齐；
  4. center 交叉轴中点对齐；
  5. baseline 项目根据他们第一行文字的基线对齐；
  6. stretch 如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值。

示例代码如下：

//.wxml
<view class = "cont1">
<view class = "item" >1 </view >
<view class = "item item2">2 </view >
<view class = "item item3">3 </view >
<view class = "item item4">4 </view>
</view>
//.wxss
.cont1{
display: flex;
flex-direction:row;
align-items:baseline;}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items:flex-end
}
.item4{
  height: 120px;
}

 运行效果：

7.align-content

align-content用来定义项目有多根轴线（出现换行后）在交叉轴上的对齐方式，如果、只有一根轴线，该属性不起作用。语法格式如下：

.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch;}
  1.  space-between 与交叉轴两端对齐，轴线之间的间隔平均分布；
  2.  space-around 每根轴线两侧的间隔都相等’，轴线之间的间隔比轴线与边框间隔大一倍

其余属性值的含义与align-items属性的含义相同。 

项目属性 

容器内的项目支持6个属性，其名称和功能如下：

 

1.order

order属性定义项目排列顺序，数值越小，排列越靠前，默认值为0。语法格式如下：

.item{order:<number>;}

 示例代码：

<view class = "cont1">
<view class ="item">1</view>
<view class ="item">2</view>
<view class ="item">3</view>
<view class ="item">4</view>
</view>
<view class ="cont1">
<view class = "item" style ="order:1">1</view>
<view class = "item" style ="order:3">2</view>
<view class = "item" style ="order:2" >3</view>
<view class ="item">4 </view>
</view >

效果运行图：

2.flex-grow

flex-grow定义项目的放大比例，默认值为0，即不放大。语法格式如下：

.item{flex-grow:<number>;}

 示例代码如下：

<view class = "cont1">
<view class ="item">1</view>
<view class ="item">2</view>
<view class ="item">3</view>
<view class ="item">4</view>
</view>
<view class ="cont1">
<view class = "item" style>1</view>
<view class = "item" style ="flex-grow:1">2</view>
<view class = "item" style ="flex-grow:2">3</view>
<view class ="item">4 </view>
</view >

效果运行图：

3.flex-shrink

flex-shrink用来定义项目的缩小比例，默认值为1，如果空间不足，该项目将缩小。语法格式如下：

.item{flex-shrink:<number>;}

示例代码如下:

<view class = "cont1">
<view class ="item">1</view>
<view class ="item">2</view>
<view class ="item">3</view>
<view class ="item">4</view>
</view>
<view class ="cont1">
<view class = "item">1</view>
<view class = "item" style ="flex-shrink: 2">2</view>
<view class = "item" style ="flex-shrink: 1" >3</view>
<view class ="item " style="flex-shrink: 4">4 </view>
</view >

 

 效果运行图：

4.flex-basis

flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto(即项目的本来大小)。语法格式如下：

.item{flex-basis:<number>|auto;}

 示例代码如下：

<view class = "cont1">
<view class ="item">1</view>
<view class ="item">2</view>
<view class ="item">3</view>
<view class ="item">4</view>
</view>
<view class ="cont1">
<view class = "item">1</view>
<view class = "item" style="flex-basis: 100px;">2</view>
<view class = "item" style ="flex-basis:200px;" >3</view>
<view class ="item ">4 </view>
</view >

5.flex

flex属性是flex-grow、flex-shrink、flex-basis的简写，其默认值为0、1、auto。语法格式如下：

.item{flex:<flex-grow>|<flex-shrink>|<flex-basis>;}

示例代码如下：

.item{flex:auto}//等价于 .item{flex:1 1 auto;}
.item{flex:auto}//等价于 .item{flex:0 0 auto;}

 

6.align-self

align-self属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。语法格式如下：

.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}

 在该属性值中，除了auto以为，其余；属性值和容器align-self的属性值完全一致。

auto表示继承容器align-item的属性，如果没有父元素，则等于stretch(默认值）。

 

@@@一叶之秋
关注
  • 15
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
3.第三章总结1
08-08
第三章总结晶体管高频小信号等效电路Y参数等效电路 混合π型等效电路分类单调谐谐振放大器双调谐谐振放大器图异以并联谐振回路作为负载矩形系数较大 —— 带宽衰减因子
半导体材料：半材第3章总结.doc
11-28
半导体材料：半材第3章总结.doc
计算机网络第三章总结_计网第三章_
10-03
计算机网络第三章内容总结，转发请标明出处
荣政第三章总结1
08-08
荣政第三章总结1
计算机网络第三章知识总结.docx
09-11
计算机网络第三章知识总结
Python29 Tensorflow的基本知识和使用
Argulo的博客
07-10 887
相比之下，NumPy 是一个基于数组的数学库，它主要用于数组操作和数学计算，但它不支持符号化计算图和自动微分。: 在 TensorFlow 1.x 中，计算图的延迟执行机制允许 TensorFlow 进行图级别的优化和变换，以提高执行效率。TensorFlow 的一个重要特点是它的符号化计算图执行模式，这使得它可以在计算图中描述复杂的数学模型，并且可以通过自动微分来计算梯度，从而用于优化模型。定义好的图可以在不同设备（CPU、GPU、TPU）上执行，甚至可以在不同平台（本地计算、云计算）上迁移。
tensorflow张量生成以及常用函数
Water_Sunzhipeng的博客
07-08 708
tf.random.uniform(维度，minval=最小值， maxval = 最大值）[min, max)data = tf.data.Dataset.from_tensor_slices((输入特征，标签))2.tf,zeros(维度) 全为0 tf.ones(维度）全为1 tf.fill(维度，指定值—）tf.random.truncated_normal(维度，mean=均值， stddev=标准差）tf.random.normal(维度，mean=均值， stddev= 标准差）
Tensorflow之损失函数与交叉熵
Water_Sunzhipeng的博客
07-09 455
例如 二分类，已知答案y_(1, 0) 预测 y1(0.6, 0.4), y2=(0.8, 0.2), 那个答案接近标准答案。均方误差tensorflow实现，loss_mse = tf.reduce_mean(tf.sqrue(y_-y)代码实现， tf.losses.categorical_crossentropy(y_,y)预测多了，损失成本，预测少了，损失利润，利润不等于成本。预测酸奶日销量，y，x1, x2是影响日销量的因素。自定义损失函数 loss(y_, y) =
TensorFlow系列：第四讲：MobileNetV2实战
wang_yong_hui_1234的博客
07-10 265
在训练模型时，我们不可能时时盯着训练数据结果，如果把训练过程曲线保存成图片，这样就比较方便查看。训练进度：主要看最下边一行输出，一轮训练完成会显示训练集和验证集的正确率。曲线图如下：训练集和验证集准确率上升，损失率下降，这是完美的表现。以后的所有讲解，都基于函数式方式进行，因为函数式调用比较灵活。
TensorFlow系列：第三讲：MobileNetV2使用介绍
wang_yong_hui_1234的博客
07-09 731
MobileNetV2 是由 Google 在 2018 年发布的一种轻量级深度神经网络架构，旨在优化移动设备和嵌入式设备上的图像分类和其他视觉任务的性能。它是 MobileNet 系列的第二代改进版本，相较于 MobileNetV1，引入了新的层类型和架构改进，显著提升了模型的准确性和效率。1. 主要特性和创新点深度可分离卷积（Depthwise Separable Convolutions）：延续了 MobileNetV1 的设计，通过深度可分离卷积来减少参数量和计算量。
【眼疾病识别】图像识别+深度学习技术+人工智能+卷积神经网络算法+计算机课设+Python+TensorFlow
最新发布
子午的博客
07-13 102
眼疾识别系统，使用Python作为主要编程语言进行开发，基于深度学习等技术使用TensorFlow搭建ResNet50卷积神经网络算法，通过对眼疾图片4种数据集进行训练（‘白内障’, ‘糖尿病性视网膜病变’, ‘青光眼’, ‘正常’），最终得到一个识别精确度较高的模型。然后使用Django框架开发Web网页端可视化操作界面，实现用户上传一张眼疾图片识别其名称。
tensorflow之欠拟合与过拟合，正则化缓解
Water_Sunzhipeng的博客
07-09 515
正则化在损失函数中引入模型复杂度指标，利用给w增加权重，弱化数据集的噪声，loss = loss(y与y_) + REGULARIZER*loss(w)利用超参数REGULARIZER给出参数w在总loss中的比例，即正则化权重， w是需要正则化的参数。L1正则化大概率会使很多参数变为0，因此该方法可通过系数参数，减少参数的数量，降低复杂度。L2正则化会使参数很接近0但不为0，因此该方法可通过减少参数值的大小降低复杂度。存在过拟合现象，轮廓不够平滑， 使用l2正则化缓解过拟合。
AGI 之 【Hugging Face】 的【问答系统】的 [构建问答系统] / [ 构建基于评论的问答系统 ] 的简单整理
仙魁XAN
07-12 643
AGI，即通用人工智能（Artificial General Intelligence），是一种具备人类智能水平的人工智能系统。它不仅能够执行特定的任务，而且能够理解、学习和应用知识于广泛的问题解决中，具有较高的自主性和适应性。AGI的能力包括但不限于自我学习、自我改进、自我调整，并能在没有人为干预的情况下解决各种复杂问题。AGI能做的事情非常广泛：跨领域任务执行：AGI能够处理多领域的任务，不受限于特定应用场景。自主学习与适应：AGI能够从经验中学习，并适应新环境和新情境。
聊聊如何在内网下构建大模型微调环境
python1234567_的博客
07-12 671
LlamaFactory新版更新后，还是比较方便，只是说llamafactory-cli命令的确是有点蒙，踩个坑就好了。对于LlamaFactory微调来说，本身不难，毕竟都是配置；主要是在内网环境下的依赖包拉取安装是真麻烦，但其实也还好。走一遍的话，还是可以学到很多的。​。
Open-TeleVision——通过VR沉浸式感受人形机器人视野：兼备远程控制和深度感知能力
结构之法 算法之道
07-12 886
这篇论文的链接，我当时快速看了一遍，还是有价值的一个工作(其应该有受humanplus工作的其他)，一直想做下解读来着，无奈过去一周一直在弄mamba2的解读，所以没来得及弄。码器捕捉图像和本体感觉标记的关系，Transformer解码器输出特定块大小的动作序列。手腕的姿态流式传输到服务器。服务器将人类姿态重新定向到机器人，并将关节位置目标。如下图所示，便是TeleVision的远程操作数据收集和学习设置。7.3日，我司大模型机器人(具身智能)线下营群里的一学员发了《左：我们的远程操作系统。
YOLOv10改进 | 特殊场景检测篇 | 轻量级的低照度图像增强网络IAT改进YOLOv10暗光检测（全网独家首发）
热门推荐
Snu77的博客
07-11 1万+
本文给大家带来的改进机制是轻量级的变换器模型：Illumination Adaptive Transformer (IAT)，用于图像增强和曝光校正。其基本原理是通过分解图像信号处理器（ISP）管道到局部和全局图像组件，从而恢复在低光或过/欠曝光条件下的正常光照sRGB图像。具体来说，IAT使用注意力查询来表示和调整ISP相关参数，例如颜色校正、伽马校正。模型具有约90k参数和约0.004s的处理速度，能够在低光增强和曝光校正的基准数据集上持续实现优于最新技术（State-of-The-Art, SOTA）
阿里发布大模型发布图结构长文本处理智能体，超越GPT-4-128k
夕小瑶科技说
07-09 840
随着大语言模型的发展，处理长文本的能力成为了一个重要挑战。虽然有许多方法试图解决这个问题，但都存在不同程度的局限性。最近，阿里巴巴的研究团队提出了一个名为GraphReader的新方法，通过将长文本组织成图结构，并利用智能体来探索这个图，成功提升了模型处理长文本的能力。GraphReader的核心思想是将长文本分解成关键元素和原子事实，构建成一个图，然后让智能体在这个图中探索和推理。这种方法不仅能有效处理超长文本，还在多跳问答等复杂任务上取得了优异表现。
人力资源人工智能依赖于良好的数据
yongyoudayee的博客
07-12 568
人力资源不断发展(HR)人工智能在技术领域(AI)它已经成为改变游戏规则的力量。人工智能驱动的工具有望简化人力资源流程，提高管理能力，彻底改变员工体验。然而，这些人工智能解决方案的有效性仅取决于算法的复杂性或计算硬件的能力。事实上，这种模式的很大一部分取决于一个基本的——良好的数据。
AI技术的转变：从辨别式到生成式
学IT，找陈寒
07-09 3323
李彦宏在2024世界人工智能大会上的发言，提醒我们在AI技术发展的道路上，不要盲目追求技术本身或表面的用户数据，而应更多地关注技术的实际应用和产业价值。在大模型技术与个性化应用之间找到平衡，将是未来发展的关键。作为AI从业者和技术爱好者，我们应以务实的态度，探索AI技术在各个领域的实际应用，为产业发展和社会进步贡献力量。通过李彦宏的发言，我深刻认识到AI技术发展的方向和挑战，也更加坚定了自己在这一领域继续探索和创新的信心。未来，愿我们共同努力，推动AI技术更好地服务于社会和产业，为人类创造更美好的未来。
计算机组成原理PPT-第3章 指令系统.ppt
11-26
"计算机组成原理PPT-第3章 指令系统.ppt是中国计算机学会21世纪大学本科计算机专业系列教材编写的课件，共分为指令格式、寻址技术、堆栈与堆栈操作、指令类型四个部分。指令是指示计算机执行某些操作的命令，而指令...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值