web前端技能方法总结(css、js、jquery、html)(22)

简介: web前端技能方法总结(css、js、jquery、html)

XHTML按道理应该是一种结构和内容格式,可以用CSS样式化,即使没用CSS,也应该在任何设备中都能看得见。

1、使用流

浏览器用流来布置页面上的XHTML元素。浏览器从XHTML文件的开头开始,从头到尾跟着元素的流显示它遇到的每个元素。比如块元素,每两个之间都有换行。所以先显示文件中的第一个元素,接着显示换行,再显示第二个元素,再换行等,从文件的开始一直到末尾。这就是流。

内联元素在水平方向上一个接着一个地流,从左上方到右下方。(注意,文本时内联元素的一个特殊例子。)内容从左流到右直到没有足够的空间,就放到下一行。注意浏览器必须把文本分成不同的几部分以放置得更好。如果把浏览器窗口变窄一些,或者用width属性把内容区的大小减小一些,那么需要多少行,浏览器就用多少行让内容流入空间。

2、关于流和盒子还要知道的

(1)当浏览器并排放置两个内联元素时,且这些元素都有边界时,浏览器就会如你所希望的那样做。它在元素之间创建了足够的空间,该空间等于两个边界之和。如果左边的元素有10像素的边界,右边的有20像素的边界,两个元素之间就会有30像素的空间。

(2)当浏览器并列放置两个块元素时,它把共同的边界重叠到一起。重叠边界的高度是最大边界的值。假如上面元素的下边界是10像素,下面元素的上边界是20像素,则重叠的边界就是20像素。

(3)如果一个元素嵌套在另一个元素中,而它们都有边界时,会重叠。这种情况下计算边界的方法是:如果两个垂直方向的边界相交,即使一个元素嵌套在另一个元素中,它们也会重叠。注意如果外层的元素有边框,边界就不相交,所以不会重叠,但如果把边框去掉,就会重叠。

3、如何漂移元素

首先,给它一个标识符。例如给某一个段落一个id。

给它设置宽度。

开始漂移。现在我们来添加float属性。float属性值可以设置为left或right。

我们分步骤看一下浏览器是如何将它和页面上的其他内容流入的。

(1)首先,浏览器跟平常一样往页面流入元素,从文件的开头开始,一直到结尾。

(2)当浏览器遇到漂移元素,就把它放到最右边(假设float属性值为right)。同时把它从流中移走,就像它漂在页面上。

(3)因为把漂移段落从正常的流中移走,并用块元素替代了,那一段落根本就像不在那儿似的。

(4)不过当放置内联元素时,它们流到它周围。(当内联元素被注入块元素中时,它们流入漂移元素边界的周围)

注意,块元素放置在漂移元素之下(但是内联元素以及文字不在之下而是流到它周围),因为漂移元素不再是正常流的一部分。块元素放置在漂移元素之下,这就意味着假如块元素有背景颜色,而漂移元素没有背景颜色(即是透明的),则能透过漂移元素看到下边的颜色。——块元素忽略漂移元素,而内联元素知道它们在那儿。(嵌套在块元素中的内联元素通常流到漂移元素周围,留意漂移元素的边界,而块元素跟平常一样流向页面)

CSS只允许把元素漂移到左边或右边,不允许漂移到中间。

4、CSS的clear属性

可以设置一个元素的clear属性,使元素流向页面时,不允许漂移元素出现在这个元素的左边、右边或两边。例如设置了页脚div的这个属性clear:right; 则当浏览器在页面上放置这个元素的时候,它会注意看有没有漂移元素会到它的右边,如果有,它把页脚向下移动,直到它右边没有任何内容为止。现在,无论如何调浏览器的大小,页脚会一直在漂移元素的下面,而不会发生重叠。当你在一个块元素中设置了clear属性,它会把一个块元素向下移直到它的右边、左边或两边(取决于clear的值)都没有漂移元素。

相关文章
|
9天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
106 52
|
12天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
21 1
|
16天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
16天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
71 1
|
23天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
36 7
|
21天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
35 3
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
148 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
44 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
2月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。