相对定位与绝对定位的练习 .father{ width:600px; height:400px; background:#F63; margin:50px auto; position:relative; } .box1,.box2,.box3,.box4{ width:80px; height:6 ...
分类：
Web程序 时间：
2020-12-04 11:47:25
阅读次数：
23
在目标区域以内，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bottom 或 left 之一 ...
分类：
其他好文 时间：
2020-09-18 03:15:31
阅读次数：
37
定位分为：静态定位、相对定位、绝对定位、固定定位 1、静态定位（static） 一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层，属于标准流。 2、绝对定位（absolute） 绝对定位元素从文档流脱出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置 ...
分类：
Web程序 时间：
2020-09-17 16:40:25
阅读次数：
46
1、padding-bottom实现等比例缩放 原理：1、父元素设置定位为相对定位（position: relative）2、子元素设置定位为绝对定位（position: absolute）3、父元素padding-bottom值为百分比时以父元素为参考，正方形时同父元素一样的百分比。4、子元素的绝 ...
分类：
其他好文 时间：
2020-07-31 18:01:58
阅读次数：
89
/*最外层的盒子*/.container{ width: 640px; height: 640px; /*盒子居中*/ margin: 100px auto; /*相对定位*/ position: relative;}/*两个按钮*/.btn{ width: 100%; height: 100%; ...
分类：
Web程序 时间：
2020-07-29 21:40:58
阅读次数：
78
效果图 三列布局需求： 1.两边固定，当中自适应 2.当中列要完整显示 3.当中列要优先加载 一、使用定位实现三列布局 缺点：必须要有容器相对定位，而且定位会提升层级，对编写页面有很大困扰 二、使用浮动实现三列布局 缺点：中间列无法优先加载 ...
分类：
其他好文 时间：
2020-07-24 10:09:26
阅读次数：
103
步骤 1 : 一个div始终贴在下方 首先把蓝色div设置为相对定位然后把内部的绿色div设置为绝对定位， bottom: 0表示贴在下面 <style> #div1 { position: relative; height: 300px; width: 90%; background-color: ...
分类：
Web程序 时间：
2020-07-15 23:43:28
阅读次数：
92
要实现的效果：如果上面元素较少，提交按钮在屏幕底部，如果上面元素较多，接近一屏，或者超过一屏，按钮随之下移。 需要以下几点： 1、按钮和上面元素在一个div中，父div相对定位，需要居底的div绝对定位。 2、父div min-height: 100vh。 3、父div设一个伪类，伪类设置一定高度， ...
分类：
Web程序 时间：
2020-07-15 15:32:18
阅读次数：
425
一、前端阻止冒泡事件 举例：button里面有个span标签，button和span都绑定了点击事件，点击span不会触发button的点击事件 思路：阻止冒泡到上一层 在内部标签span中加入：event.stopPropagation(); 二、将项目打包并安装在当前环境中 将本地python项 ...
分类：
Web程序 时间：
2020-07-13 18:48:18
阅读次数：
119
圣杯布局 1.结构先加载主体,再加载左右 2.将三者都 float:left , 左右再加上一个position:relative（因为相对定位后面会用到）?3、middle 部分 width:100% 占满 ? 此时 middle 占满了，所以要把 left 拉到最左边，使用 marginlef ...
分类：
其他好文 时间：
2020-07-12 18:57:22
阅读次数：
74
