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的值)都没有漂移元素。

相关文章
|
12天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
5天前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
23 6
|
2天前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
12 0
|
2天前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
10 0
|
2天前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
9 0
|
2天前
|
JavaScript 前端开发 搜索推荐
【前端基础篇】JavaScript之DOM介绍1
【前端基础篇】JavaScript之DOM介绍
14 0
|
2天前
|
Web App开发 JavaScript 前端开发
【前端基础篇】JavaScript基础介绍
【前端基础篇】JavaScript基础介绍
7 0
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)