css+html
关注
分享
扫一扫
文章平均质量分 51
夯实基础，体会css的强大。
疯狂踩坑人
人生无常，把握能把握的点滴
展开
-
事件捕获、冒泡、委托
事件捕获、冒泡、委托1）事件捕获：由外向内触发事件（记：捕获是由表层伸入水的深处）2）事件冒泡：由内向外触发事件（记：冒泡由水深处到表层）3）事件先捕获再冒泡：这是目前主流浏览器采用的做法，试验代码如下先了解事件绑定函数：addEventListener(event, listener, useCapture)event: 什么事件listener: 监听的响应函数useCapture: true表示使用捕获机制，false表示使用冒泡机制。（默认为false）<html lang="原创 2021-03-27 11:32:34 · 208 阅读 · 1 评论 -
css3和js实现抛物线运动
实现抛物线运动方式一：CSS3实现我用原生js+css3实现了抛物线效果，查看效果请点击css3抛物线同样的效果，下面代码是在vue中写的，我将用它来分析如何css3实现抛物线运动。实现思路：1）这里需要定一个球图片和一个包裹图片的球盒子，最终的位置是球盒子X轴移动300px，球图片相对于球盒子在Y轴移动了300px。2）给样式变化加上transition，从而实现过渡效果，而不是瞬间完成。X轴方向是匀速的，所以采用了linear函数；Y轴上速度变化：负数-0-正数，所以你会看到小球先是负速度原创 2021-03-23 16:10:50 · 1938 阅读 · 0 评论 -
嵌套flex下overflow失效
嵌套flex下 overflow失效在flex盒子A下嵌套另一个flex盒子B, B的高度是flex:1，让B的子元素高度是flex:1的且overflow:auto，但是这种情况下的overflow会失效！解决办法：解决overflow失效的关键代码是min-height: 0; 示例如下：效果对比图：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <原创 2021-03-14 22:29:56 · 1049 阅读 · 0 评论 -
上下固定，中间滑动布局
上下固定，中间滑动布局思路：利用flex布局把中间撑开，再给中间加上overflow: auto;代码：<style> html,body{ padding: 0; margin: 0; box-sizing: border-box; height: 100%; } .container{ height: 100%; background-color: #b2b2b2;原创 2021-01-31 11:52:39 · 221 阅读 · 0 评论 -
实现图片背景的两种方式
实现图片背景的两种方式1)通过css样式实现<div class="box"> <a class="logo_link" href="www.bilibili.com"> <img class="header_logo" src="../static/images/bili_logo.png" alt=""> </a></div>* { padding: 0px; margin: 0px;原创 2021-01-20 19:29:24 · 193 阅读 · 0 评论 -
常见的块级元素和行内元素
块级元素和行级元素常见块级(block)元素，（可以设置宽高，会自动换行）div h1-h6 ul ol li p form table label等常见的行内（inline）元素，（无法设置宽高，无法自动换行）span a i（斜体） em（强调） sub(下标) sup（上标）等常见的内联-块级（inline-block） 元素，（可以设置宽高，无法自动换行）img button input textarea select等inline的特点：对外：与原创 2021-01-20 00:01:07 · 388 阅读 · 0 评论 -
行内元素对齐，vertical-align属性深入讨论
1.行内元素对齐（vertical-align属性）最终效果图：代码：<div class="box"> <img class="avatar" src="../static/images/avatar.jpg" alt=""> <span class="username">疯狂踩坑人</span> <span class="level_num">LV6</span> <span class原创 2021-01-20 00:20:10 · 443 阅读 · 0 评论