布局与事件
文章平均质量分 52
日晞
这个作者很懒,什么都没留下…
展开
-
两栏布局,左边固定右边自适应
【代码】两栏布局,左边固定右边自适应。转载 2023-08-07 17:52:48 · 80 阅读 · 0 评论 -
说一下DOM事件流
1.首先,body标签内的元素后会变成DOM树手写虚拟dom树结构 <div class="vdom" id="first"> <p>内容</p> <ul> <li>1</li> <li>2</li> </ul> </div> <script> { tag: 'div' data:原创 2021-09-15 16:53:44 · 110 阅读 · 0 评论 -
盒模型:正常盒子: content-box 和怪异盒子: border-box 特点
offsetwidth=== boder+padding+width正常盒子设置(默认):box-sizing:content-box正常盒子特点:content == width(如下图)怪异盒子设置:box-sizing:boder-box怪异盒子特点:padding + boder + content == width(如下图所示)那想一想:这两张图片,哪个盒子大一些呢?(思考之后往下拉,答案)答案:正常盒子大一些,首..原创 2021-08-16 17:38:02 · 183 阅读 · 0 评论 -
怎么解决移动端响应式布局问题
达到这种布局,且是响应式(即随着移动端的变化,元素大小也相应变化)flex 布局(flex:25%) <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...原创 2021-08-17 17:47:54 · 482 阅读 · 0 评论 -
rem、em、vw、vh区分
rem(r:root 根):根据根元素html font-size * rem (类似倍数)em:根据元素本身的字体大小*em大小(类似倍数)(继承)vh: (vw同理)原创 2021-08-16 22:36:08 · 154 阅读 · 0 评论 -
元素垂直水平居中的多种办法(块级 行内元素)
块级元素居中:1.未知子元素宽高,绝对定位+transform:translate<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w...原创 2021-08-16 19:03:22 · 132 阅读 · 0 评论 -
BFC(块格式化上下文)详解
下图即为margin 重叠效果:margin 最终只取了.sec 的 margin-top。是什么(what):是一块独立的渲染区域,内部元素的渲染不会影响边界以外的元素。原创 2021-08-16 18:32:31 · 165 阅读 · 0 评论 -
盒子浮动,盒子塌陷,解决办法:清除浮动...
盒子塌陷:子盒子的内容到父盒子外面这里container:父亲盒子,item:子盒子子盒子的内容到父盒子外面了,盒子就是塌陷了产生塌陷的原因:父盒子:没有设置高度 且 子盒子:脱离文档流(eg:float:left)==> 盒子塌陷解决盒子塌陷问题:对父盒子:把父盒子的高度写死即可 或 对子盒子:清除子盒子的浮动清除子盒子的浮动方法(3个):在子盒子后面添加一个盒子,给其添加clear:both属性 <!DOCTYPE...转载 2021-08-16 18:06:09 · 2047 阅读 · 0 评论