摘要: style方法 style对象代表一个单独的样式声明,可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式获,取不了外部的样式,即这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type="text/cs 阅读全文
posted @ 2020-08-15 10:31 webpon 阅读(459) 评论(0) 推荐(0) 编辑
摘要: 一、常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新 阅读全文
posted @ 2020-08-14 22:21 webpon 阅读(169) 评论(0) 推荐(0) 编辑
摘要: 概述 许多的web开发者不了解给html与body元素设置样式有什么不一样,大多数时候开发者只是给body设置样式,当不起作用的时候,他们会把所有的样式都加到html与body元素上,直到出现觉得符合他们的期望的效果了,但是他们并不知道样式是在谁的身上起了作用。 出现这种混乱的情况是可以理解的,因为 阅读全文
posted @ 2020-08-14 22:04 webpon 阅读(759) 评论(1) 推荐(1) 编辑
摘要: 元素的层级 1.下面的盖住上面的元素 2.z-index大的盖住z-index小的 3.父元素的z-index再大也盖不住子元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="te 阅读全文
posted @ 2020-08-14 17:14 webpon 阅读(195) 评论(0) 推荐(0) 编辑
摘要: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2020-08-14 15:56 webpon 阅读(207) 评论(0) 推荐(0) 编辑
摘要: 一、DOM元素的获取(连style这个标签也可以获取)1)document.getElementsByClassName ( “class”)返回集 htmlcollection ,用法和数组一致说明: class为DOM元素上class属性的值2)document.getElementById( 阅读全文
posted @ 2020-08-14 12:54 webpon 阅读(294) 评论(0) 推荐(0) 编辑
摘要: CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助,下面就进行详细介绍:定位分为静态定位,相对定位,绝对定位,固定定位这四种,定位有不同的参数,例如:left、right、top、bottom、z-index等。 1、静态定位(static) 一般的标签元素不加任何定位属性都属于静态定位,在页 阅读全文
posted @ 2020-08-13 22:45 webpon 阅读(529) 评论(0) 推荐(0) 编辑
摘要: 我们在进行页面布局的时候可以发现元素在脱离文档流后,就会出现高度塌陷问题。 一、什么是高度塌陷? 通过下面的例子了解什么是高度塌陷。 在页面中设置一个盒子box,其中在嵌套一个子元素小盒子box1。box设置边框宽度,而高度不去设置(高度会由内容撑开) 但是当我们向盒子里面添加内容的时候<div c 阅读全文
posted @ 2020-08-11 17:27 webpon 阅读(256) 评论(0) 推荐(0) 编辑
摘要: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2020-08-10 15:45 webpon 阅读(65) 评论(0) 推荐(0) 编辑
摘要: jQuery增删元素类名 作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点 1、添加类 $("div").addClass("current"); 2、删除类 $("div").removeClass("current"); 3、切换类 $("div").toggle 阅读全文
posted @ 2020-08-10 14:39 webpon 阅读(112) 评论(0) 推荐(0) 编辑