前端复习
文章平均质量分 52
baibaider
这个作者很懒,什么都没留下…
展开
-
清除浮动的方法
浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度将为0.且由于父盒子的高度为0,下面的元素会自动补位,所以这个时候要进行浮动的清除。<style type="text/css"> .pra{ border:5px #ffcccc solid; width:3原创 2017-12-07 23:19:06 · 130 阅读 · 0 评论 -
js深复制浅复制
深浅复制主要是针对于js的引用数据类型的,因为他们不只一层,并且修改一个变量是不希望修改到另外一个变量。概念:浅复制:只复制指向某个对象的指针,新旧对象共享一块内存,修改新对象会改到原对象上。深复制:不共享内存,修改新对象不会改到原对象上。实现:浅复制实现:js 简单的赋值操作一般实现的都是浅复制。深复制实现的七种方法:1. 手动复制:var obj1 = {"name":"baibai", "a...原创 2018-03-15 16:16:01 · 184 阅读 · 0 评论 -
高程的事件委托代码
事件委托:事件处理程序过多时,可以使用事件委托。例如:一个ul下有多个li都有点击事件,这时可以给ul上委托点击事件。并且事件委托的优点:事前消耗低,因为只取得一个DOM元素,占用内存更少。使用事件委托时:在DOM树中尽量最高的层次上添加一个事件处理。代码如下:<ul id="myUl"> <li id="goSomewhere">goSomewhere<...原创 2018-02-04 00:44:22 · 180 阅读 · 0 评论 -
浅谈两栏式布局+三栏式布局(自适应)
两栏式布局(侧边栏固定宽度,主体内容部分自适应)法1:(侧边栏左/右浮动,主体部分margin-left/margin-right为侧边栏宽度)<style type="text/css"> .pra{ height: 500px; } .aside{ width:300px; t原创 2017-12-08 22:47:07 · 745 阅读 · 0 评论 -
BFC
盒子类型:block-level box: display 属性为 block, list-item(作为列表显示), table(块级表格)的元素,会生成 block-level box。并且参与 block fomatting context;inline-level box: display 属性为 inline, inline-block, inlin转载 2017-12-07 21:26:27 · 173 阅读 · 0 评论 -
display属性
display的属性:inline 默认。此元素会被显示为内联元素,元素前后没有换行符。none 此元素不会被显示。(在页面中没有位置与大小,而visibility:hidden内容虽然不可见,但是在页面中仍然有位置与大小。)block 此元素将显示为块级元素,此元素前后会带有换行符。inline-block 行内块元素。(CSS2.1 新增的值)inheri转载 2017-12-07 22:11:01 · 387 阅读 · 0 评论 -
css3的flex布局
1.Flexible boxes盒子按照宽高分出了以下 8 点:水平的主轴:main axis; 垂直的纵轴:cross axis;纵轴的开始位置和边框的交点:cross start;纵轴的结束位置和边框的交点:cross end;主轴的开始位置和边框的交点:main strat;主轴的结束位置和边框的交点:main end;单个项目占据主轴的空间距离:main axis;单个项目占据纵轴的空间距...转载 2018-02-22 20:29:35 · 589 阅读 · 0 评论 -
做一个爬虫
建立spider文件夹spider文件夹下新建data,image文件夹用来存放爬取到的数据npm init创建package.json,一路回车安装依赖:说明:由于http模块、fs模块都是内置的包,因此不需要额外添加。这里安装cheerio包,和request包。在dos中,cd进入spider文件夹,然后 npm install cheerio –save安装完cheerio包后,继续安装r...原创 2018-02-22 17:55:19 · 503 阅读 · 0 评论 -
stopPropagation(停止事件在dom层次的传播)
stopPropagation()是用于立即停止事件在DOM层次中的传播,即取消进一步的时间捕获或冒泡。例如,直接添加到一个按钮的事件处理程序可以调用stopPropagation(),从而避免触发注册在document.body上面的事件处理程序.<div id="btn">按钮</div> <script> var oBtn = documen...原创 2018-02-08 16:21:12 · 801 阅读 · 0 评论 -
try-catch语句的嵌套
demo1:嵌套try,内层中没有catch语句 try{ try { throw new Error("opps") } finally { console.log("finally"); } } catch(ex){ console.error("o...原创 2018-02-08 16:18:51 · 3794 阅读 · 1 评论 -
纯css画菱形,三角形,梯形,平行四边形
菱形: display: inline-block; width:100px; height:100px; background-color: #c685d9; transform: rotate(45deg); margin:50px;三角形: width: 0...原创 2018-02-26 15:24:21 · 14278 阅读 · 0 评论 -
target伪类实现tab选项卡
样式<style type="text/css"> #first{ background-color: #f00; } #second{ background-color: #0f0; } #third{ background-color: #00f; } ...原创 2018-02-25 00:10:04 · 602 阅读 · 0 评论