方法一： div1 content div2 content 上面的div1和div2就会在同一行显示。...（此方法一般都会有效的） 方法二： div1 content div2 content 这样的方法有时候会不起作用，好像在引入别的js框架中使用部分会出现故障。
， 28 7月 2022 作者 847954981@qq.com 前端学习, 我的编程之路 CSS3进阶整理 CSS伪类 CSS伪元素–::after/::before 伪元素就是利用css在标签内部的前面或者后面添加一个行内元素...记住哪个盒子的子元素有浮动，就在哪个盒子上添加清除浮动 具体方法为： .clearfix::after{ content: ''; display: block; clear: both;...这里需要完成三步：强制不换行、元素内容溢出处理、文本溢出省略。...1.强制不换行：H5中推荐使用 white-space:nowrap 方法来实现不换行 2.元素内容溢出 overflow 这一步我们的目标是超出部分不显示，使用overflow属性。...*/ -webkit-box-orient: vertical; 这里我们把强制不换行去掉。
现在我有一个需求，WIFI模块控制一个继电器，我要做的是如果内部程序跑乱了，造成了内部程序复位重启，那么控制继电器的状态不能改变 如果是设备断电了，然后又来电了，我需要的是继电器一定要是断开才好。...不能加额外的电路，只能在程序中做判断 其实 内部程序跑乱了，造成了内部程序复位重启 和 设备断电了，然后又来电了 然后都是重新执行程序，不知道大家是如何做的 我的思路是。。。...先说一下WIFI模块的一个很大的优点， 大家有没有注意WIFI模块的引脚，假设配置了一个引脚为高电平，无论内部如何的利用软件复位，这个引脚都会保持高电平 还有就是，WIFI模块如果是断电上电那么引脚一开始一定是低电平...最终我的方案是： 先读取引脚是不是低电平，如果是，就是说是断电上电然后执行的程序，如果不是，就是说内部复位重启然后执行的程序 其实是自己人为设置的那个引脚输出的高电平，看下面的程序 local PowerResetPin...如果 PowerReset = true 说明是断电上电然后执行的程序 好了就是这么简单，主要还是因为WIFI引脚有这个特点，软件复位可以保持住状态
div class="box">4 5 6 结果： 这样就算我们去掉其中的一个或者多个剩下来的在容器内部的子元素同样能够均匀排列...，基准线（以文字） 其中还有许多属性需要一一仔细实验 包括 justify-content:/*在主轴上的对齐方式*/ flex-direction:/*顺序*/ flex-wrap:/*换行*/...="box">7 8 假如容器container的长度比子元素的宽度相加更多，内部的元素宽度是按照内部元素原本的宽度来的。...但是假如容器container的长度比子元素的宽度相加要少，那么因为容器是不换行的，他就会压缩内部元素的宽度 下面多加几个元素,则会变成这样： 然而在大部分情况下不是我们想要的，那现在把容器的的...flex-wrap:wrap;/*这个是默认为no-wrap 不换行*/ } 如下： 这样在容器内的子元素就会保持原来的宽度。
2) Block/inline-block元素包裹的inline-block元素，默认超width会换行，hieght撑开，可以通过white-space:nowrap强制不换行，但不能实现文本省略显示...六、flex 实现盒子布局，主要分为容器和子元素相种。在容器元素上用display:flex指定为flex盒子，在子元素上用flex指定元素所占用的格子数。...Flex容器重要属性： 1) Flex-direction：表示项目排列方向，可以有四个，左到右，右到左，上到下，下到上 2) Flex-wrap：表示是否允许换行，默认不允许(nowrap) Flex-flow..."grid02">05 5) Align-items：属性定义在交叉轴上的对齐方式（Y轴，垂直对齐），stretch可以拉申(默认值) .wrap02{...* ( 子元素自身宽度 * 子元素自身的flex-shrink/ ( 所有子元素宽度 * 子元素的flex-shrink之和) ) .wrap{ width: 400px
强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal;...} 强制英文单词断行 div{ word-break:break-all; } word-wrap: css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象...break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 定义和用法 word-wrap 属性允许长单词或 URL 地址换行到下一行。...CSS3 JavaScript 语法： object.style.wordWrap="break-word" 语法 word-wrap: normal|break-word; 值 描述 normal 只在允许的断字点换行...break-word 在长单词或 URL 地址内部进行换行。 CSS 参考手册
只对中文起作用，强制换行 white-space:nowrap; 强制不换行，都起作用 p{ word-wrap: break-word; white-space: normal; word-break...一般在富文本中返回换行符不是的标签，而且\n。...nowrap; // 子元素不被换行 display: inline-block; } 32、让div里的图片和文字同时上下居中 这里不使用flex布局的情况。...class="scale"> 这里是所有子元素的容器 34、transfrom的rotate属性在...\test.jpg"/> 内部文字 .box{ width:300px; line-height: 300px; font-size
因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。...设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行。...清除浮动 父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 ? 给内部两个盒子加上float属性的时候 ?....浮动的元素自己会有一套排列规则，相当于在页面上面浮动着一层新的页面 1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐） <!...如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。 优点：通俗易懂，方便 缺点：添加无意义标签，语义化差 不建议使用。
我是默认值哦）;right：右对齐;center：居中对齐 （2）bgcolor属性：我的作用是添加一个背景颜色 三 文本元素 1 b元素： 我的作用就是 加粗文字； 2.br元素： 我的作用就是强制换行...； 3.i元素： 我的作用就是让 文字倾斜； 4.del元素： 我的作用就是 删除文子 5.strong元素： 我的作用是强调一段文本我的实际作用也是加粗文字. 6.wbr元素： 我的作用是表示安全换行...14.abbr元素： 我的作用是表示一段文本的缩写,在文本显示上没有任何实际效果，比如WTO 15.q元素： 我的作用从语义上看表示引用来自其他地方的的内容， 我的实际作用就是给文本加上双引号...元素的分类 块元素:主要特征是会产生换行效果，自动与其他元素分离成两行；通常可以作为容器在内部添加其他元素。 ...div元素和布局 div元素是通用的块元素，内部可以包含其他各种元素包括其他div元素；并且可以通过CSS设置样式来完成复杂的页面的布局 通过一个简单的实例了解div布局是如何实现的 十一 通用属性
当父组件引用了子组件的时候，会遇到父组件执行子组件的方法，比如下拉刷新上拉加载等事件只有在页面中才能检测到，但是获取数据的方法在子组件，这时就可以执行子组件方法。...思路很简单，类似于vue中给子组件加ref执行子组件方法道理一样，这里是给子组件加一个 属性： id="子组件名称",比如： 然后在父组件对应的方法中直接...this.selectComponent("#list").getList(); 如果涉及到多次调用该子组件的方法，可以在onReady生命周期中定义一下，比如： onReady:function(...){ this.list = this.selectComponent("#list"); }, 之后在方法中再调用的时候直接用this.list.方法名就可以了。
Display在官方定义：规定元素应该生成的框的类型。本文只重点分析常用的6个值：none、block、inline、inline-block、inherit、flex。...这也就表明此时的元素是被浏览器渲染的（在文档流中是占有位置的），只是处于不可见的状态。...如果没有占宽或高的子元素存在，则高度为零。...a000000002 5) Block/inline-block元素包裹inline元素，默认超width自动换行，height撑开。...a) 强制不换行可以通过white-space:nowrap来实现，此时超width的就会浮出来，可以通过overflow:hidden和text-overflow:ellipsis配合实现省略显示。
span 跨度，跨距；范围 两个都是双标签 区别 div 标签 用来布局的，但是现在一行只能放一个 div span 标签 用来布局的，一行上可以放好多个...span 小结 标签名定义说明标题标签作为标题使用，并且依据重要性递减段落标签可以把 HTML 文档分割为若干段落水平线标签就是一条线换行标签强制换行...div 标签用来布局的，但是现在一行只能放一个 divspan 标签用来布局的，一行上可以放好多个 span 标签属性 标签属性就是外在特性 水平线的长度是... 的格式 图像标签中 src 属性必须写 alt 属性表示图片未能正常显示时的文本，title 表示图片描述 链接标签 注意： 内部链接...关于a标签中的 target 属性的内容 _blank在新窗口中打开被链接文档。_self在被点击时的同一框架中打开被链接文档（默认）。_parent在父框架中打开被链接文档。
【放在要分割的元素上】 @media print { .avoid-break { page-break-inside: avoid; } } 控制分页位置：使用 page-break-before...class="page"> 在这个例子中，我们定义了一个名为 container 的容器元素，并为其设置了 page-break-inside: avoid; 属性...CSS 实现打印 Table 单元格换行显示 white-space: normal;：默认值，文本在遇到空格或换行符时换行，单词内部不会强制分割。...word-break: break-all;：单词会被强制分割，即使在单词内部也会进行换行。
子元素选择器 (>号分割) 这个相比较与后代选择器，区别就是子元素只匹配直接关联的子元素（也就是中间不能有嵌套） div > span { color: red } ...块元素是一个元素，占用了全部宽度，在前后都是换行 内联元素只需要必要的宽度，不强制换行。 1....class="ov"> 这是一个会移除的文本 c. word-wrap & word-break word-wrap 文本太长时，换行的策略 normal 只在允许的断字点换行 break-word...在长单词或 URL 地址内部进行换行。...>鼠标移动到 div 元素上，查看过渡效果。
word-break: break-all 是一个CSS属性，用于控制文本在容器中的换行方式。它的作用是强制在任意字符之间进行换行，即使这样可能会导致单词被分割。...break-all：强制在任意字符之间进行换行，即使这样可能会导致单词被分割。这个值适用于不考虑单词边界的语言，比如中文、日文等。 keep-all：不允许在单词内换行，只能在字符之间换行。...使用 word-break: break-all 可以在需要时强制换行，即使这样可能会导致单词被分割。这在一些特定的布局需求下很有用，比如在狭窄的容器中显示长文本时。...一、基本概念 word-break:break-all是CSS3中的一个属性，用来控制在元素内部如何处理中文字符的换行问题。该属性可以使得长单词或URL自动换行并保留完整单词或URL。...div{ width: 200px; border: 1px solid #ccc; overflow: hidden; } a{ text-overflow: ellipsis
代码风格 1.1缩进与换行 [强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。... 2.3 title [强制] 页面必须包含 title 标签声明标题。 [强制] title 必须作为 head 的直接子元素，并紧随 charset 声明之后。...解释： viewport meta tag 可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。...另外，为了使 viewport 正常工作，在页面内容样式布局设计上也要做相应调整，如避免绝对定位等。...[建议] 只在必要的时候开启音视频的自动播放。 [建议] 在 object 标签内部提供指示浏览器不支持该标签的说明。
, div#h") #所有class为"no"或者id为"h"的div元素 document.body #获取body标签 document.documentElement #获取...document.inputEncoding #文档的编码（字符集） document.readyState #文档的（加载）状态 document.strictErrorChecking #是否强制执行错误检查...children #获取子节点的集合 ，返回数组 firstChild #获取第一个子元素 并把换行和空格也当成是节点信息 firstElementChild...#获取第一个子节点 lastChild #获取最后一个子节点 并把换行和空格也当成是节点信息 lastElementChild #获取最后一个子节点 parentNode...ID下的Div的子元素以及它的兄弟和父，子元素，如下： 6)).创建节点 我们可以自定义节点并添加值，不过要将它添加到文档中去，所以必须添加节点，一般和下方的增加节点配套使用。
2 flex布局父项常见属性 2.1 常见父项属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-warp：设置子元素是否换行 align-content...2 3 2.3 justify-content 设置主轴上的子元素排列方式 justify-content 属性定义了项目在主轴上的对齐方式...*/ justify-content: center; } 2.4 flex-warp 设置子元素是否换行 默认情况下，项目都排在一条线（又称：“轴线”）上。...属性值 说明 nowrap 默认值，不换行 wrap 换行 2.5 align-items 设置侧轴上的子元素排列方式（单行） 该属性是控制子项在侧轴（默认y轴）上的排列方式，在子项为单项的时候使用。...设置侧轴上的子元素的排列方式（多行） 设置子项在侧轴上的排列方式，并且只能用于子项出现 换行 的情况（多行） 图片 属性值 说明 flex-start 默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列
writing-mode 属性：实际上定义了文本水平或垂直排布以及在块级元素中文本的行进方向，在块布局、内联布局中有不同效果。...full-width: 强制将字符（主要是表意文字和拉丁文字））--写在一个正方形内，使它们能够在通常的东亚文字（如中文或日文）中对齐。...温馨提示：此属性并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，你需要在元素上添加几个额外的属性：overflow 和 white-space。...，在断开的标题之间更平衡的行长度，以及一种完全关闭文本换行的方法。...语法参数: # 文本以适当的字符换行（例如空格，在英语等使用空格分隔符的语言中），以最大限度地减少溢出, 默认值 text-wrap: wrap; # 文本不换行，它将溢出包含的元素，而不是换行。
2 代码风格 2.1 缩进与换行 [强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。...[强制] title 必须作为 head 的直接子元素，并紧随 charset 声明之后。...解释： viewport meta tag可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。...另外，为了使 viewport 正常工作，在页面内容样式布局设计上也要做相应调整，如避免绝对定位等。...[建议] 在 object 标签内部提供指示浏览器不支持该标签的说明。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
