主要是HTML5 的拖放（Drag 和 Drop） 例子（不需要对div设置ID）： <div style="width: 50px;height:50px;" οndrοp="drop(event,this)" οndragοver="allowDrop(event)...: 当放置被拖数据时，会发生 drop 事件，这里自定义drop(event,this)函数,互换两个的innerHTML ondragover:当拖动链接等有默认事件的元素时，要在ondragover...在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值。
大家好，又见面了，我是你们的朋友全栈君。 <!...-- var div = document.getElementById('divDetail'); div.scrollTop = div.scrollHeight; --> ...两个方法的定义。 offset(): 获取匹配元素在当前视口的相对偏移。 返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。...position(): 获取匹配元素相对父元素的偏移。 返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
10px; border: 1px solid black; background-color: white } click me 内容 <script
编辑框，textarea，input text的光标位置，兼容FF和IE 一二三四五六七八
background:url(00.jpg) no-repeat;opacity:0;filter:alpha(opacity:0);} var box=document.getElementById...(“box”); var col=box.getElementsByTagName(“div”); var rowDiv=[]; var bg_P=[]; var...””; for(var i=0;i<16;i++) { for(var j=0;j<16;j++) { str+='’; } }
01 问 题 如果将一个 img 放在 div 或 span 里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！...代码： ... 02 原 因 因为 img 默认是按基线( baseline )对齐的。...对比一下图片和右边的 p, q, y 等字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高 03 解决方案 要去掉空格可以使用 vertical-align: bottom 或将 img 标签变为块级元素...至于什么是基线，还记得四线三格的英语写字本么？中间第三条线就是基线。
inline-block 行内块元素 2. position:absolute|fixed 会将元素变为行内块 使用盒模型 创建浮动盒 可以使用float属性创建浮动盒（脱离文本流），浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界...值 说明 left 移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界 right 移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的右边界 none 元素位置固定 注意事项...定位类型 值 说明 static 默认值，元素为普通布局 relative 相对定位，元素位置相对于普通位置定位 absolute 绝对定位，元素相对于position值不为static的第一位祖先元素来定位...fixed">fixeddiv> div> 相对定位（relative）：相对于自己原位置进行偏移，在文本流中的位置依然存在，不脱离文档流； 绝对定位（absolute）：对于position值不为...static的第一位祖先元素来定位（未找到，则相对body元素），在正常流中的位置不在存在，脱离文档流； 固定定位（fixed）：一直位于可视窗口的指定位置，不受滚动条影响，脱离文档流。
inline-block 行内块元素 2. position:absolute|fixed 会将元素变为行内块 使用盒模型 创建浮动盒 可以使用float属性创建浮动盒（脱离文本流），浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界...值 说明 left 移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界 right 移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的右边界 none 元素位置固定 注意事项...定位类型 值 说明 static 默认值，元素为普通布局 relative 相对定位，元素位置相对于普通位置定位 absolute 绝对定位，元素相对于position值不为static的第一位祖先元素来定位... fixed 相对定位（relative）：相对于自己原位置进行偏移，在文本流中的位置依然存在，不脱离文档流；...固定定位（fixed）：一直位于可视窗口的指定位置，不受滚动条影响，脱离文档流。 ?
普通流 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。...相对定位 相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时...绝对定位 相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。...绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。 如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块儿（body或html神马的）元素。...浮动布局 首先介绍一些浮动模型的基本知识：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
❝「属性树」是解释「视觉和滚动效果」如何应用于DOM元素的数据结构 ❞ 它们提供了回答问题的方法，例如：一个给定布局尺寸和位置的DOM元素，它应该被放置在相对于屏幕的哪个位置？...一个800x600的合成层（默认图块合并） drawRect命令绘制尺寸为800x600，颜色为白色的图块 drawRect命令绘制位于相对于视图(0,0)位置，尺寸为100x100，且颜色为粉色的图块...一个144x244的合成层 (拥有属性树的图块) drawTextBlob命令在(0,0)位置，绘制Hello world文本信息 平移(0,18) 围绕Z轴旋转顺时针旋转25度 drawRect命令绘制位于相对于视图...❝一个「单独」的GPU纹理瓦片为每个瓦片提供了视口部分的光栅化像素 ❞ 然后，渲染器可以更新单个瓦片，甚至只是改变现有瓦片在屏幕上的位置。...聚合阶段会找出这样的优化，并根据单个渲染合成器无法访问的全局来应用这些优化。
定位（position） CSS 布局的核心是 position 属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。...可以看到，第三段原来的位置被回收了。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素 body 在定位。...盒子位移属性是如何工作？ 盒子的位移属性有四个“top、right、bottom和left”，用来指定元素的定位位置和方向。...定位上下文 把元素的 position 属性设定为 relative、absolute或 fixed 后，可以使用 top、right、bottom 和 left 属性，相对于另一个元素移动该元素的位置...外部 div 改为相对定位之后，后代中绝对定位的元素就会按照 top 和 left 属性的设定，相对于外部 div 定位。此时内部 div的 top 和 left 属性参照的就是外部 div。
Hello小伙伴们，我又来了，来的太不频繁，兔妞也自惭形秽！但是真的是有机会就更新啦～最近烦心事也很多，不过还是要努力开心呀，每天都是愉快的新的一天！...1） 要求容器在宽度自由伸缩的情况下，A/B/C的宽度始终是1:1:1，如何实现，写出两种方法。...2）元素竖向的百分比是相对于容器的高度吗？...重绘 当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。...重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 触发重绘的条件：改变元素外观属性。如：color，background-color等。
reflow:改变元素在网页中的布局和位置 导致回流发生的情况： 改变窗口大小 改变文字大小 内容的改变，如用户在输入框中敲字 激活伪类，如:hover 操作class属性 脚本操作DOM 计算offsetWidth...在网页中的位置的元素样式时，根据浏览器新属性重新绘制一次。不会带来重新布局。...注意，文件更新后，缓存带来的影响。可以在文件名字后面加一个版本号） 减少http请求 为什么要用语义化标签？...rem 根据当前屏幕的宽度和设计稿的宽度，算出html的基准值 假设当前屏幕宽度为375px 设计稿上是640px 当前屏幕宽度/设计稿宽度 = x / 100 => x = 当前屏幕宽度/设计稿宽度...{font-size:20px;} .div{font-size:2rem} 2rem = 2*20 rpx: 微信小程序（规定屏幕宽为750rpx） 如何实现0.5px的边框？
自动定位（默认定位方式） relative 相对定位，相对于其原文档流的位置进行定位 absolute 绝对定位，相对于其上一个已经定位的父元素进行定位 fixed 固定定位，相对于浏览器窗口进行定位...# 相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置） 就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。 固定定位有两点： 固定定位的元素跟父亲没有任何关系，只认浏览器。...注意： z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。 如果取值相同，则根据书写顺序，后来居上。 后面数字一定不能加单位。
标签有一个属性是 src，用来表示图像的URL，当这个属性的值不为空时，浏览器就会根据这个值发送请求。如果没有 src属性，就不会发送请求。 嗯？貌似这点可以利用一下？...我们先不给 设置 src，把图片真正的URL放在另一个属性 data-src中，在需要的时候也就是图片进入可视区域的之前，将URL取出放到 src中。...如何判断元素是否在可视区域 方法一 网上看到好多这种方法，稍微记录一下。...，也就是滚动条滚动的距离 通过 element.offsetTop获取元素相对于文档顶部的距离 然后判断②-③<①是否成立，如果成立，元素就在可视区域内。...可以看出返回的元素位置是相对于左上角而言的，而不是边距。 我们思考一下，什么情况下图片进入可视区域。
(可以说是完全无视) [1]浮动-定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...问题2：元素浮动造成的两个div覆盖或相互重叠如何解决。 （1）、左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。...相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...（3）绝对定位 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层
CSS定位机制 CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。 相对定位 相对定位指的是设置为相对定位的元素框会偏移某个距离。...元素仍然保持其未定位前的形状，它原本所占的空间仍保留。 如果将box2的框 top 设置为 50px，那么框将在原位置顶部下面 50 像素的地方。...浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...更多请参考 绝对定位 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。...绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。 因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。
所以，我们的布局应该从定位和尺寸开始聊起 定位 定位的概念就是它允许你定义一个元素相对于其他正常元素的位置，它应该出现在哪里，这里的其他元素可以是父元素，另一个元素甚至是浏览器窗口本身。...块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。 2、relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。...3、absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素) 4、fixed：元素框不再占有文档流位置，并且相对于视窗进行定位...主要是div块的出现，可以使得网页进行灵活的排布，使得网页变得繁荣。这时，开发者也开始思索如何去更加清晰地分辨网页的层次。接下来，我们可以看看有哪些比较出名的布局方式。...，应该如何区分，如何布局。
也就是说，B2只认没有偏移之前的B1，B1的偏移不对B2产生任何影响，相对定位的元素，是处于常规流中的，这点需要注意，另外，相对定位是相对于元素的自身定位，并且，在常规流中还占据原来的位置。...这也意味着相对定位可能产生框的重叠。 相对定位元素的尺寸 相对定位元素的尺寸，会保持它在常规流中的尺寸。包括换行以及原来为它保留的位置。...在包含块的章节中，说明了什么时候相对定位元素会产生新的包含块。 如何偏移以及计算后的值 对于一个相对定位的元素，’left’ 和 ‘right’ 会水平的位移框而不会改变它的大小。’...如果 left 为 ‘auto’，计算后的值(computed value)为 right 的负值（例如，框区根据 right 值向左移）。...由于 top 和 bottom 没有造成框被拆分或者拉伸，计算值总是 top=-bottom，如果两个都是auto，其计算值就都是0，如果其中之一是auto，它就是另一个的负值。
，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。...设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、...元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量 这个东西很好的应用就是导航栏吸顶效果，但是比较蛋疼的是这个属性的兼容性还不是很好...float浮动布局 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。...具有BFC特性的元素可以理解为一个完整的盒子，这个盒子不会产生塌陷，无论内部元素如何变化，其外部元素不受影响 如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性： body 根元素 浮动元素
领取专属 10元无门槛券
手把手带您无忧上云
