jz____-优快云博客

原创 js事件机制的理解

js事件机制js事件的发生包括捕获和冒泡两个阶段捕获：从最外边元素节点传递至发生事件的元素节点，即由外到内；冒泡：从发生事件的元素节点传递至最外边元素节点，即由内到外；js事件是先捕获阶段到冒泡阶段，即从最外层依次到发生事件的元素节点，再由发生事件的元素节点到最外面元素节点。但由于IE8及其低版本不支持捕获事件，所以现在很多事件都是在冒泡中进行事件处理的。举个例子来说 <div ...

2021-01-12 15:03:31 318

原创两栏布局

文章目录一、前言二、两栏布局的方法1.绝对定位布局2.浮动+margin3.浮动+calc（）4.浮动+相对定位5.flex布局6.grid布局三、图示一、前言左侧宽度固定，右侧宽度自适应 <div class="box"> <div class="left">left</div> <div class="right">right</div> </div> .

2021-01-12 14:55:28 190

原创三栏布局

文章目录前言实现三栏布局的方法1.绝对定位布局2.左右浮动布局3.圣杯布局4.双飞翼布局5.flex布局6.grid布局图示前言三栏布局中，一般情况都是左右两边的宽度固定，中间的盒子自适应 <div class="box"> <div class="left">left</div> <div class="center">center</div> <div class="ri

2021-01-12 12:02:03 382

文章目录前言一、BFC是什么？二、触发BFC的条件1.body根元素2.浮动元素：float除none以外的值（left、right）3.绝对定位元素：position（absolute、fixed）4.display（inline-block、table-cell、flex）5.overflow除visible以外的值（hidden、auto、scroll）三.BFC的作用1.避免margin重叠2.清除浮动3.两列自适应布局前言常见的定位方式有三种普通流（normal flow）浮动（fl

2021-01-10 19:14:44 323

原创清除浮动

清除浮动文章目录清除浮动一、为什么要清除浮动？二、浮动引起的问题三、清除浮动的方法1.空标签2.overfow3.after伪标签一、为什么要清除浮动？浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。 <div class="outer"> <div class="box1"></div> <div class="box2"></div> </div>

2021-01-10 16:28:59 291

原创垂直居中

垂直居中的几种方法文章目录垂直居中的几种方法1.相对定位+transform*父元素下只有一个元素，且父元素设置了高度*2.相对定位+绝对定位+transform*父盒子和子盒子都不知道高度的时候使用*3.flex*不兼容老式浏览器* <div class="outer"> <div class="inner"></div> </div>图示：1.相对定位+transform父元素下只有一个元素，且父元素设置了高度 .outer {

2021-01-10 11:47:58 122

原创 js数组常用的方法

js数组常用的方法排序1.sort()2.sort(callback)reduce(callback, initVal)1. 累加（累乘）2. 统计值的个数3.数组去重遍历1.forEach()2.map()查找是否存在值1.find()2.some()3.includes(val)查找索引1.findIndex()2.indexOf(val)过滤filter()前面添加（删除）1.添加 unshift(val)2.删除 shift()末尾添加（删除）1.添加1.1 push(val)1.2 concat(

2020-12-12 22:08:37 1067

原创常用的flex布局介绍(水平居中和垂直居中)

常用的flex布局介绍1.flex-directionflex-direction:row;(==默认==)flex-direction:row-reverse;flex-direction:column;flex-direction:column-reserve;2.flex-wrapflex-wrap:nowrap;(==不换行，默认==)flex-wrap:wrap;(==换行==)flex...

2020-04-29 00:13:56 2262 2

qq_44771740的博客