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

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

5、流动和冻结设计

以上的设计都叫做流动布局,因为无论我们把浏览器调整到多大,它们都会扩展到填满浏览器为止。这些布局很有用,因为通过扩展,它们把现有的空间填满了,并且允许用户充分利用屏幕空间。不过有时把布局锁定很重要,以便当用户调整屏幕时,你的设计看起来还跟原来一样。有几个布局是这样工作的,我们先从冻结布局开始。

(1)冻结布局

冻结布局把元素锁住,冻结到页面上,所以它们根本不能移动,因此我们避免了许多窗口扩展带来的问题。

冻结布局的方法:在你的XHTML中添加一个

,命个id如allcontent,这个
要包围页面中的所有内容。添加CSS规则,将这个
中的内容限制为固定宽度。(即width设为固定值,同时加些其他样式如padding、背景色等)这样,甚至当浏览器重新被调整时也是这个固定宽度,所以我们有效地把
以及它包含的所有内容都冻结到页面上了。

(2)凝胶物布局

冻结布局有几个好处,但当你把浏览器调宽时外观明显变差(因为所有空的空间都在右面)。不过我们有一个解决方法,它是一个你能在网站上看到的很普通的设计。这种设计在冻结的和流动的之间,它有一个相应的名字叫凝胶物。凝胶物布局锁定了页面中内容区的宽度,但把它放到浏览器中央。

布局方式:不是把allcontent

的左右边界固定,而是把边界设置成“auto”.把边界设置成“auto”,浏览器会计算出合适的边界是多少,并且保证左右边界相等,以使内容居中。

6、绝对布置:用CSS在页面上精确地放置元素

当一个元素被绝对放置了,浏览器做的第一件事是把它从流中完全移走。接着浏览器把元素放置在top和right指明的位置(或bottom和left)。(注意,top指的是离页面顶部的距离,其他类似,都是相对页面边缘的)

1 #sidebar {
2 width:280px;
3 position:absolute;
4 top:128px;
5 right:200px;
6 }
因为sidebar现在是绝对布置的,它就被移出了流,然后根据所有指定的top、left、right、bottom属性来放置。因为sidebar不在流中了,其他的元素甚至不知道它在那儿,就完全把它忽略了。流中的元素甚至不把它们的行内容包围在绝对布置的元素周围。它们完全被遗忘在页面上了。(注意,这跟漂移元素稍有不同,因为流中的元素要调整它们的行内容还要考虑到漂移元素的边界。但绝对布置的元素对其他元素没有任何影响)

绝对布置的元素可以互相层叠放置。谁在谁上面?每个布置的元素有一个叫做z-index的属性,用来指定它的层叠位置。哪个元素有较大的z-index值就在上面。例如我们可以给某个绝对布置的元素的z-index属性设一个很大的值99,,这个元素就位于其他的上面。

(1)默认的position属性值是什么?是static。static布局把元素放置在正常的文档流中,并且不用你布置——浏览器决定哪个元素放哪儿。你可以用float属性把一个元素从流中拿出来,可以决定它应该漂移向左边还是右边,不过最终还是浏览器决定它放置的位置。与之相对的是position的属性值absolute,用绝对布置,你告诉浏览器放置元素的精确位置。

(2)你可以布置任何元素,无论死块元素还是内联元素。只是记住当绝对放置一个元素时,就把它从正常的页面流中移走了。

(3)position属性值有四个:static、absolute、fixed和relative。fixed把一个元素放置在跟浏览器窗口(而不是页面)有关的位置,所以fixed元素不移动。relative取出一个元素并让它正常地流到页面上,然后在页面显示之前让它偏移。relative多用于比较高级的布局和特殊的效果。

(4)如果你没指定绝对元素的宽度,块元素默认状态下会占据整个浏览器的宽度,减去你指定的左边或右边的偏移。

(5)除了用像素指定位置之外,还有另外一种常用的布置元素的方法,即百分数。如果你用百分数,元素的位置会随着浏览器宽度的改变而改变。例如,如果浏览器窗口宽度是800像素,元素的左位置设置成10%,那么就离浏览器窗口的左边80像素。百分数的另一个常用的用途是指定宽度。如果不需要元素或边界具体的宽度,那么可以用百分数把主内容区和sidebar的大小设置得灵活一些。你会发现在两栏或三栏布局中这种用法贡献很大。

(6)但是浏览器很宽时,sidebar可能向下盖过了页脚。但是绝对布置就不能用clear了,因为流元素忽略了绝对布置元素的存在。

总结:用绝对布置可以把元素放在页面的任何位置,默认状态下,绝对布置相对于页面边放置元素。如果把一个绝对布置嵌入另一个布置过的元素中,那么它的位置就是相对于布置过的那个包含它的元素。

left、right、top、bottom属性用来放置绝对、固定和相对布置的元素;用相对布置时,left、right、top、bottom涉及到与元素在正常流中的位置相对的偏移量。

通常使用漂移元素或绝对布置的元素可以完成同样的设计。

相关文章
|
17天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
114 52
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
20天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
31 4
|
19天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
24 1
|
23天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
38 7
|
1月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
27 4
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
31 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效