第三章总结

已于 2024-03-15 11:45:40 修改
阅读量331 收藏 7
点赞数 4
文章标签： 前端 javascript html
于 2024-03-13 19:49:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80243318/article/details/136633721
版权

一.盒子模型

二.块级元素和行内元素

1.块级元素

特点：

（1）一个块级元素占一行。

（2）块级元素的默认高度由内容决定，除非自定义高度。

（3）块级元素的高度，宽度，外边距以及内边距都可以自定义设置。

（4）块级元素可以容纳块级元素和行内元素。

<view style="border:1px solid #f00">快级元素1</view>
<view style="border:1px solid #0f0;margin:15px;padding:20px">块级元素2</view>
<view style="border:1px solid #00f;width:200px;height:80px">块级元素3</view>
<view style="border:1px solid #ccc">
<view style="height:60px">块级元素4</view>
</view>

2.行内元素

行内元素，不必从新的一行开始，通常会与前后的其他行内元素显示在同一行，他们不占有独立的区域，仅靠自身支撑结构。一般不可以控制大小，常用于控制页面中文本的样式。

特点：

（1）行内元素不能被设置高度与宽度，其高度宽度由页面决定。

（2）行内元素不能放置块级元素，只容纳文本或者其他行内元素

（3）同一块内，行内元素和其他元素显示在同一行。

<view style="padding:20px">
<text style="border:1px solid #f00">文本</text>
<text style="border:1px solid #0f0;margin:10px;padding:5px">文本2</text>
<text style="border:1px solid #00f;display: inline;">块级元素设置为行内元素</text>一行显示不全.自动换行显示
</view>

 3.行内块元素

当元素的diaplay属性被设置为inline-block时，元素被设置为行内块元素。行内块元素可以设置高度，宽度，内边距，外边距。

<view>
元素显示方式的<view style="display:inline-block;border:1px solid #f00;margin:10px;width:200px;">块级元素，行内元素和行内块元素</view>三种类型。
</view>

三.浮动与定位

1.元素浮动与清除

格式如下：{float:none | left | right |;}

其中，none--默认值，表示不浮动；

           left--左浮动；

           right--右浮动。

<view>box1,box2,box3没浮动</view>
<view style="border: 1px solid #f00;padding:5px">
<view style="border: 1px solid #0f0">box1</view>
<view style="border: 1px solid #0f0">box2</view>
<view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float:left;border: 1px solid #0f0">box1</view>
<view style="border: 1px solid #0f0">box2</view>
<view style="border: 1px solid #0f0">box3</view>
</view>
<view>box1box2左浮动</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="border: 1px solid #0f0">box3</view>
</view>
<view>box1box2box3左浮动</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="float:left;border: 1px solid #0f0">box3</view>
</view>

 

 在css中，clear属性用于清除浮动元素对其他的影响，其基本格式如下：

{clear: left |right |both |none|}

代码如下：

<view>box1box2左浮动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>
</view>
<view>box1box2box3左浮动在父元素后面添加一个元素</view>
<view style="border: 1px solid #f00;padding: 5px"class="clear-float">
<view style="float:left;border: 1px solid #0f0">box1</view>
<view style="float:left;border: 1px solid #0f0">box2</view>
<view style="float:left;border: 1px solid #0f0">box3</view>
</view>

2.元素定位

基本格式：

{prosition: static |relative|absolute|fixed}

<!--三个元素均未定位-->

<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>

 

 相对定位
<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>

绝对定位
<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>

 固定定位
<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>

 

四.flex布局

flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器，flex布局的所有直接子元素自动成为容器的成员，称为flex项目。

图为flex布局模型：

 1.容器属性

display:

 格式.box{display:flex |inline-fiex;}

flex-direction:

格式.box{flex-direction:row\row-reverse |column-reverse;}

其中，row为水平方向，起点在左端；

          row-reverse为水平方向，起点在右端；

          column为垂直方向，起点在顶端；

          column-reverse为垂直方向，起点在底端；

图所示为元素在不同方向下的显示效果：

flex-wrap:

格式.box{flex-wrap:nowrap |wrap |wrap-reverse} 

其中，nowrap不换行，默认值；

          wrap换行，第一行在上发方；

          wrap-reverse换行，第一行在下方；

如图：

flex-flow:

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

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

代码如下：

justify-content:

语法如下：

.box{justify-content:flex-start |flex-end |center |space-between|space=around;} 

其中，flex-start左对齐，默认值；

flex-end右对齐；

center居中；

space-between两端对齐，项目之间的间隔都相等；

space-around每个项目两侧的间隔相等；

align-items：

 格式.box{align-item;flex-stare }flex-end |center |baseline |stretch}

代码如下：

//.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;
}

 效果图：

align-content: 

格式.box{align-content:flex-start|flex-end|center|space-between|space-around |stretch} 

2.项目属性

 order:

格式.box{order:<number>;}

flex-frow:

.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">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>

效果图：

flex-basis: 

.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:100px">3</view>
<view class="item">4</view>
</view>

效果图：

 

flex: 

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

代码如下：

alihn-self:

格式.box{align-self;auto |flex-atart |flex-end |center |baseline |atretch;} 

是十七点哇！
关注
Linux第三章总结
weixin_65037940的博客
03-14 706
mkdir命令: [选项] 目录名 -m 创造目录 并且可以设置权限 -p 递归创造文件 -v 提示创造过程信息 rmdir命令: [选项]目录名 权限:所有用户 功能:删除空目录 -p:递归删除目录
西瓜书第三章总结
weixin_44852879的博客
12-18 483
微型计算机原理与接口技术第三章总结
landiao8848的博客
04-25 879
第三章 8086/8088 指令系统 3.1概述
《概率论与数理统计》（浙大第四版）第三章总结笔记（纯手写）
qq_45681057的博客
05-29 3998
一. 写在前面 教材：《概率论与数理统计》（浙大第四版） 这份笔记仅为个人笔记，不具有全面性与权威性。但非常希望这份笔记可以给有需要的读者一些启发 这份笔记中可能存在错误或者偏差，希望与读者在评论区一起交流 这份笔记完全原创，但读者可以根据需要进行分享   二. 第三章总结笔记 ...
软件工程导论第三章复习总结附思维导图
涛涛不淘
03-23 1407
软件工程导论第三章复习总结附思维导图 概述 准确回答“系统必须做什么” 必须理解并描述问题的信息域，根据这条准则应该建立数据模型 必须定义软件应该完成的功能，这条准则要求建立功能模型 必须描述作为外部事件结果的软件行为，这条准则要求建立为行为模型 必须对描述信息，功能和行为的模型进行分解，用分层的方法展示细节 一、任务 确定对系统的综合要求 1.1功能需求 1.2性能需求 1.3可靠性和可用性需求 1.4出错处理需求 1.5接口需求 1.6约束 1.7逆向需求 1.8将来可能提出的需求 分析系统的数据需求
计算机网络第一章总结
weixin_65440201的博客
04-11 3428
目录 1.1计算机网络再信息时代中的作用 1.2互联网的概述 1.2.1网络，互联网和因特网 1.2.2互联网基础结构的三个阶段 1.2.3互联网的标准化工作 1.3互联网的组成 1.3.1三种交换方式 1.4计算机网络的类别 1.4.1计算机网络的定义 1.4.2计算机网络的分类 1.5计算机网络的性能 1.6计算机网络体系结构 1.1计算机网络再信息时代中的作用 网络分为三类：电信网络，有线电视网络，计算机网络。 而Interner的译名有两种： 第一种：因特..
第三章总结（顺序结构程序设计）
weixin_61912954的博客
11-20 824
3.1
实变函数第三章思维导图知识点总结
江船夜雨听笛的博客
08-26 2671
实变函数第四章思维导图知识点总结 实变函数第二章思维导图知识点总结 实变函数第一章思维导图知识点总结
第三章 总结及作业（78CE）【编译原理】
小心星的博客
03-29 3184
第三章 总结及作业（78CE）【编译原理】
计算机网络第三章总结_计网第三章_
10-03
计算机网络第三章内容总结，转发请标明出处
信号与系统第三章傅里叶变换总结信号三.docx
04-21
欢迎大家一起学习，不喜勿喷
Vue3轻松实现导出Excel文件功能
bjzhang75的博客
10-03 359
Vue3轻松实现导出Excel文件功能
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 265
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
在 TS 的 class 中，如何防止外部实例化
读心悦
10-04 830
虽然这不是直接防止外部实例化的方法，但你可以通过提供一个静态工厂方法来控制实例的创建。这样，即使构造函数是公开的，外部代码也只能通过你提供的工厂方法来获取实例。通过将类的构造函数设为私有，你可以阻止外部代码创建该类的实例。通常，将构造函数设为私有是实现这一目的最直接和有效的方法。如果你想要定义一个类，但不允许它直接实例化，你可以将其定义为一个抽象类。抽象类不能被实例化，但可以作为其他类的基类。静态方法来获取实例。这种方式并不完全防止外部实例化（因为构造函数仍然是公开的），但它提供了一种控制实例创建的方式。
Vue根实例、实例总结
m0_54007573的博客
10-04 617
Vue根实例、实例总结
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1297
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
React18新特性
最新发布
警警的博客
10-06 957
同时，需要注意的是，React 18的并发特性和新Hooks是基于Fiber架构实现的，它们共同构成了React 18中强大的渲染和控制能力。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。
WebGL在低配置电脑的应用
警警的博客
10-04 559
批量绘制与顶点合并案例：在WebGL渲染大量相似物体时，使用实例化绘制（Instanced Rendering）和顶点合并技术，将多个物体的顶点数据合并处理，减少绘制调用次数和顶点处理量。模型简化和LOD技术案例：在一个大型3D场景的WebGL应用中，通过简化模型的面数并应用LOD技术，根据物体与摄像机的距离动态加载不同精细度的模型。纹理压缩是一个有效的优化手段，可以采用如ETC1、ETC2等激进的纹理压缩格式，以牺牲部分画质换取更小的纹理尺寸，从而加快纹理加载和渲染速度。尽量减少需要绘制的顶点数量。
计算机网络第三章知识要点全面解析
资源摘要信息:"计算机网络第三章总结_计网第三章" 本章节主要探讨了计算机网络中数据链路层的相关知识。数据链路层位于OSI模型的第二层，主要负责在相邻节点之间的可靠传输。在总结中，我们将详细介绍以下几个方面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值