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

相关文章
|
5天前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
14 0
|
2天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
4天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
26 0
|
5天前
|
存储 JavaScript 前端开发
HTML web存储
HTML web存储
10 0
|
5天前
|
前端开发 JavaScript
前端 JS 经典:函数管道
前端 JS 经典:函数管道
5 0
|
5天前
|
前端开发 JavaScript
前端 JS 经典:数组去重万能方法
前端 JS 经典:数组去重万能方法
10 0
|
5天前
|
缓存 JavaScript 前端开发
前端 JS 经典:CommonJs 规范
前端 JS 经典:CommonJs 规范
13 0
|
5天前
|
JavaScript 前端开发
前端 JS 经典:原型和原型链
前端 JS 经典:原型和原型链
11 0
|
5天前
|
前端开发 JavaScript API
前端 JS 经典:Proxy 和 DefineProperty
前端 JS 经典:Proxy 和 DefineProperty
10 0
|
5天前
|
JavaScript 前端开发
前端 JS 经典:JS 基础类型和 typeof
前端 JS 经典:JS 基础类型和 typeof
9 0