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

简介: 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涉及到与元素在正常流中的位置相对的偏移量。

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

相关文章
|
13天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
12天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
16天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
17 2
前端JS读取文件内容并展示到页面上
|
5天前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
23 6
|
12天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
14天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
28 4
|
19天前
|
JavaScript 前端开发 开发者
基于Vue.js的前端框架有哪些?
Vue.js 是一款流行的前端 JavaScript 框架,用于构建单页面应用(SPA)。除了 Vue.js 本身,还有许多基于 Vue.js 的前端框架和 UI 库,它们提供了更多的功能和组件,以便开发者能够快速构建应用程序。
21 6
|
18天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
16 3
|
2天前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
13天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。