事件规定在何处放置被拖动的数据。...如果需要设置允许放置，我们必须阻止对元素的默认处理方式。 这要通过调用 ondragover 事件的 event.preventDefault() 方法： 当放置被拖数据时，会发生 drop 事件。...调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） 通过 dataTransfer.getData("Text") 方法获得被拖的数据。...该方法将返回在 setData() 方法中设置为相同类型的任何数据。 被拖数据是被拖元素的 id ("drag1") 把被拖元素追加到放置元素（目标元素）中 结果----》 拖动前 ? 拖动后 ?...在两个 元素之间拖放图像--- 代码清单： <!
填充（padding） 填充是内容区和边框之间的空间。...空白边（margin） 空白边位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。...对于两个相邻的（水平或垂直方向 ）且设置有空白边值的盒子，他们邻近部分的空白边将不是二者空白边的相加，而是二者的并集。若二者邻近的空白边值大小不等，则取二者中较大的值。...区别： 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。... 我们在浏览器中运行之后发现，想象的很美好 结果却并不美好，因为两个子元素宽度超过了50%，导致了折行，于是宽度就不能设置为50%了，只能将宽度减去padding
:1%; IE6 的躲躲猫(peek-a-boo) bug bug 修复: _height:1%; 这里列出触发 hasLayout 元素的一些效果 1.阻止外边距折叠 两个相连的 div 在垂直上的外边距会发生叠加...，而触发 hasLayout 的元素之间则不会有这种情况发生，如下图： ?...上图的例子中，三个 div 各包含一个 p 元素，三个 div 及其包含的 p 元素都有顶部和底部的外边距，但只有第三个 div 的边距没有与它的子元素 p 的外边距折叠。...上图的例子中，有两个 div ，它们各包含一个设置了浮动的 p 元素，但第一个 div 实际被浏览器判断为没有高度和宽度，即高度为 0 ，上下边框重叠在一起。...上图两个 div 都设置了背景图，但只有使用 zoom: 1 触发了 hasLayout 的第二个 div 才能正确显示背景图。
下载插件：npm install vue-qr <vue-qr :text=”qrcodeText”...)” :logoScale=”.2″ :logoMargin=”5″ logoBackgroundColor=”white” > </div...） // size 尺寸, 长宽一致, 包含外边距（推荐20px） // margin 二维码图像的外边距, 默认20px // colorDark 实点的颜色（默认黑色） // colorLight...*(size-2*margin),（默认 0.2） // logoMargin LOGO标识周围的空白边框, 默认为0（推荐5px） // logoBackgroundColor Logo 背景色...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
兄弟元素边距合并 场景三：再来看这段代码，两个兄弟元素，一个下边距是 100px ，另一个上边距 100px ，预计的结果是两个兄弟元素之间的距离是 200px 。...> 但是两个兄弟元素之间的距离只有 100px 。...现象：发生了边距重叠，两个兄弟元素的上边距和下边距发生了重叠。 规则：正正取最大，负负取最负，正负就相加。 原因：块级元素的上外边距或下外边距有时（直接接触/相邻时）会合并为一个外边距。...空元素边距合并 场景四：两个兄弟元素之间有四个空元素，每个空元素有 25px 的 margin-top，预计的结果是两个兄弟元素之间的距离是 100px 。...现象：发生了边距重叠，所有的空元素的边距重叠成一个空元素的边距。 原因：如果一个块级元素没有任何内容并且设置了 margin-top 和 margin-bottom 时会发生 margin 合并。
('Runob')") // 包含 Runob文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(selector)")...']") //多属性选过滤，同时满足两个属性的条件的元素 3.5状态过滤选择器 $("input:enabled") // 匹配可用的 input $("input:disabled") //...jQuery 尺寸方法 width() height() innerWidth() - 宽度（包括内边距） innerHeight() - 高度（包括内边距） outerWidth() - 宽度（包括内边距和边框...parents() - 返回被选元素的所有祖先元素 parentsUntil() - 返回介于两个给定元素之间的所有祖先元素，$("span").parentsUntil("div"); 向下遍历 DOM...DOM 树进行水平遍历： siblings() - 所有同胞元素 next() - 下一个同胞元素 nextAll() - 所有跟随的同胞元素 nextUntil() - 两个参数之间的所有同胞元素
; 有限元素可以设置上下的外边距，有些元素则不能设置; 通过上述问题，我们可以推断出，html元素是有不同类别的。...二、浮动布局 了解了元素的分类之后，我们再来看下一个问题，我们之前讲解的盒子模型，都是用div作为容器来存放网页的内容，而div是块元素，那么如何让两个div在同一行显示呢，可以使用float属性来实现...div元素都设置float:left属性，这样两个div就可以在同一行显示了。...空div清除浮动 我们在菜单和h2之间添加一个空的div标签，并且为其制定样式。 1 <!...伪元素清除浮动 在上面的案例中，我们使用了一个空的div来清除浮动，很方便地解决了清除浮动的问题，但是html标签毕竟是为了布局而存在的，我们随意添加一个标签来处理样式，从html存在的意义来考虑，这个解决方案并不是特别理想
: 当相邻两个元素都设置了margin 边距时,margin 将取最大值, 舍弃最小值； 解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden...在＜div class=”floatB”>＜div class=”NOTfloatC”>之间加上＜div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级...，之间不能存在嵌套关系，否则会产生异常。...,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决： <div id=”bg...③ 如果整个工程都删除了， 在桌面创建一个同名的文件夹，通过webstorm打卡这个项目，在执行1，2步骤。
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 外边距可以是负值，而且在很多情况下都要使用负值的外边距。内边距不能为负值。边框不能为负值。...元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。...提示：背景应用于由内容和内边距、边框组成的区域。 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。...增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。...margin : 外边距，也有资料将其翻译为空白或空白边。 在 w3school，我们把 padding 和 margin 统一地称为内边距和外边距。
~欢迎点击上方蓝字「歪码行空」快速关注~ ---- 前言 相信大家应该都遇到过下面这个问题：“HTML 源码中行内元素之间的空白显示在了屏幕上”。可能大家都有自己的小技巧来消除这些意料之外的空白。...但是方法有很多，有时候不能满足于一种方法，不同的方法适合于不同的场景。就像我之前一直用的方法，今天总结了之后才发现还有更好的方法。...废话不多说，接下来我给大家总结一下消除行内元素 HTML 源码空白的小技巧。 下文中以一个div中的两个span标签为例。...我们将两个div内的两个span设为display:inline-block;width:50%;，会发现两个span元素并没有在同一行，这就是源码中的空白导致的。 示例图与代码如下： ?...span:last-child { margin-left: -0.333333em; } 不过从上面可以看出，最右边还会存在一点点的白边误差。
有三种情况会产生边距折叠： 1、同一层相邻元素之间 元素A 元素B .A, .B { width...p标签之间的间隔是20px。...例子中，A，B元素与父元素box之间没有其他元素的情况下： 元素A 元素B<...3、空的块级元素 当元素B的margin-top直接贴到元素A的margin-bottom的时候（也就是中间的元素没有内容），也会发生边界折叠。...如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
清除浮动的方式： 父级元素定义height。 但这样定死的高度，往往不是我们想要的。 父级结尾处添加一个空div,设置css样式clear:both。...原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度。 父级定义伪元素:after和zoom(推荐使用)。...因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化，往往会出现浏览器之间的页面显示出现差异。 (15) 说说你对边距折叠的理解?...外边距折叠（margin塌陷）： 相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin） 什么时候会造成margin塌陷？ 相邻的元素都在普通流中。...相邻的元素之间没有其他非空内容隔开 如何解决margin塌陷？
),padding-bottom(下内边距),padding-left(左内边距) Padding:当padding后有两个数字时即Padding:10px 20px; 指的是上下内边距为10px,左右内边距为...20px 注意：两个数字之间有空格。...后有两个数字时，即margin:10px 20px; 指的是上下外边距为10px,左右为20px 注意：两个数字之间有空格。...通常，用一个空的 ? ? <!
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕 . 2.编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个...Paste_Image.png 3. $.extend 的作用和用法 作用：将两个或更多对象的内容合并到第一个对象。...Paste_Image.png 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。...$node $ndoe.remove() 8.把$ct里内容清空 $ct.empty();//DOM中移除集合中匹配元素的所有子节点 9.在$ct里设置 html $ct.html('') 10.获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距) $node.width();/
"> 添加 CSS 重置页面所有元素的内外边距和盒模型大小...，并将元素的盒模型设为"border-box"，使得元素的大小不会随着内边距和边框的增加而变化。...这段代码使用了 innerHTML 属性将一个新的 div 元素插入到了任务列表中，其中包括任务名称和删除按钮。...> `; 最后将删除按钮的点击事件绑定到一个匿名函数上，当点击删除按钮时，它将删除任务列表中的相应任务。...在匿名函数中，this 引用当前的删除按钮，this.parentNode 引用该按钮的父元素，也就是任务列表的 div 元素。remove() 方法用于删除该元素。
p { font-size:14px; } h1 { color:#F00; } 复合选择器， 由两个选择器直接构成，第一个必须是元素选择器，第二个必须是类选择器和ID选择器，这两个选择器之间不能有空格...p.special { color:#red} .special { color:#green; } 后代选择器，用来寻找特定元素或元素组的后代，后代选择器由其他两个选择器之间的空格表示。... #main {font-size:18px;} 类选择器，标有class的 HTML 元素指定特定的样式，用.来表示。类名的第一个字符不能使用数字。...通用选择器 像通配符的作用，可以匹配所有元素，由*表示，对页面上所有的元素应用样式。例如删除每个元素上默认的浏览器内边距和外边距。但是使用*这种方式加载很慢，不建议使用。...会有20px的左边距，内层嵌套的不会有影响。
注意: 两个盒子的垂直外边距完全接触才会触发 #1.2 塌陷情况有几种?...兄弟关系的盒子 父子关系的盒子 #2 实际操作 #2.1 兄弟关系的盒子 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。...两个外边距一正一负时，折叠结果是两者的相加的和。...子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙（即父级盒子往下塌陷了10px）。...值，抵消掉子元素设置margin值的方式 为父盒子添加overflow：hidden 为父盒子添加position：fixed 为父盒子添加 display：table 利用伪元素给子元素的前面添加一个空元素
) 方法之间进行切换 fadeTo(speed,opacity,callback) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间） 必需的 speed 参数规定效果的时长。...","yellow"); 尺寸 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距） height() 方法设置或返回元素的高度（不包括内边距、边框或外边距 innerWidth(...) 方法返回元素的宽度（包括内边距） innerHeight() 方法返回元素的高度（包括内边距） outerWidth() 方法返回元素的宽度（包括内边距和边框） outerHeight() 方法返回元素的高度...() 方法返回介于两个给定元素之间的所有祖先元素 后代 children() 方法返回被选元素的所有直接子元素 find() 方法返回被选元素的后代元素，一路向下直到最后一个后代 同胞 siblings...() 方法返回被选元素的所有同胞元素 next() 方法返回被选元素的下一个同胞元素 nextAll() 方法返回被选元素的所有跟随的同胞元素 nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
"footer">.footer 优雅的 Demo 优点：通俗易懂，容易掌握 缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的...BFC的特性： 1)块级格式化上下文会阻止外边距叠加 当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。...换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。 2)块级格式化上下文不会重叠浮动元素 根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。...这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。.../cssd/onhavinglayout.htm），由于old9博客被墙，中文版地址： IE8使用了全新的渲染引擎，删除了 hasLayout 原本的功能，因此彻底杜绝了很多深恶痛绝的 bug，但 IE8
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
