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

相关文章
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
158 1
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
269 0
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
174 1
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
185 1
|
6月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
225 1
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
397 1
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
110 1
|
6月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
6月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中