HTML & CSS
超文本标记语言 / 层叠样式表
落落叶叶无声
做过后端,现在主前端的开发工程师...
展开
-
【响应式布局】使用 flexbox 实现简单响应式布局
使用 flex 实现响应式布局原创 2022-11-19 14:37:14 · 918 阅读 · 0 评论 -
iframe 如何禁止视频自动播放
iframe 如何禁止视频自动播放原创 2022-07-15 22:04:16 · 6578 阅读 · 4 评论 -
【css】css 实现填充剩余高度
自动填充高度.html<div class="box"> <div class="header">头部</div> <div class="auto-fill">自动填充</div></div>使用 flex(推荐)兼容性好;只需关注自动填充的 div,无需考虑其他 div 的高度.box { display: flex; flex-flow: column; height: 100%;}.h原创 2021-10-11 21:21:56 · 18744 阅读 · 1 评论 -
一图看懂 offsetX,clientX,pageX,screenX 的区别
offsetX vs clientX vs pageX vs screenX原创 2021-05-21 15:32:31 · 1635 阅读 · 0 评论 -
一行 css 实现竖直间隔线
效果图html<div class="container"> <a href="#">收藏</a> <a href="#">评论</a> <a href="#">点赞</a> <a href="#">分享</a></div>css.container { display: flex; font-size: 14px;}a { text-deco原创 2021-05-11 00:10:22 · 520 阅读 · 0 评论 -
解决 andoird 和 iphone 微信浏览器h5页面收起软键盘后页面留空白问题
android 版本function windowResize() { var originalHeight = document.documentElement.clientHeight || document.body.clientHeight; window.onresize = () => { var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight //键盘弹原创 2021-05-10 00:35:33 · 1170 阅读 · 2 评论 -
Flex 布局的自适应子项内容过长导致其被撑大问题
问题还原flex 布局中,把其中一个子项设置 flex-grow: 1,可以使它自动占据所有剩余空间,但是当该子项内容过长时,子项长度会被长内容给撑开而出现滚动条。<div class="box"> <div class="item-1">xxxx</div> <div class="item-2"> long content - long content - long content - long content - long conten原创 2021-02-25 19:47:41 · 4372 阅读 · 1 评论 -
妙用 max 和 calc 函数实现元素居中两端等宽自适应
在 css 世界中,有时一句 css 就能实现很强大的功能,这是因为有了函数的存在。底下这句 css 就能够很轻松的实现元素两端等宽自适应padding: 1em max(1em, calc(100vw - 70ch)/2);70ch 表示元素的 width 为 70个字母长度。元素两端的补白宽度为 (屏幕宽度 - 元素宽度)/ 2 ,当补白宽度小于 1em,用 1em 代替。用 max 就是为了指定 1em 为最小补白宽度,防止元素两端宽度消失。div { height: 100px;原创 2021-02-23 11:53:06 · 442 阅读 · 0 评论 -
利用 linear-gradient 函数实现炫酷的动态进度条
linear-gradient 函数linear-gradient 是可以用来创建颜色线性渐变效果的一个函数语法:background-image: linear-gradient(deg, color...)第一个参数为渐变的方向或角度,第二个参数为渐变颜色颜色百分比background-image: linear-gradient(to right bottom, red 25%, blue 75%)0 - 25% 为纯红色,25% - 75% 为红色渐变到蓝色,渐变中心在50%,75原创 2021-02-07 00:06:16 · 995 阅读 · 1 评论 -
不定高度元素实现高度自适应动画
问题如果元素高度确定情况下,实现动画并不是什么难事。但是如果是不定高度的元素呢?可能很多人第一反应是,给元素加个 :height: auto可惜的是,这并不会起作用。用 max-height 代替 height思路:先将需要做动画的元素设置 max-height: 0px,overflow: hidden;在事件中给元素添加 max-height: 固定高度(>= 元素的实际高度)<!DOCTYPE html><html lang="en"><原创 2021-01-21 09:50:35 · 1542 阅读 · 0 评论 -
如何去掉 html 的空白文本节点 text
为什么会有文本节点html 中的空白文本节点 text,是由于标签的换行而产生的。下面的例子可以证明这一点<div id="wrapper"> <span>abc</span> <span>abc</span></div>打印 div 的所有子节点(包括文本节点 text),我们发现:第一个 text 是 div...原创 2020-03-31 00:36:39 · 1695 阅读 · 0 评论 -
Select标签那些事儿
选中某个选项(By JQuery)<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="http://code.jquery.com/jquery-1.8.0.min.js"></script></head><body> <select id="原创 2017-09-11 19:59:46 · 222 阅读 · 0 评论 -
IE浏览器兼容性问题
IE下不兼容javascript的trim函数解决方法: 使用JQuery提供的方法jQuery.trim(str)or$.trim(str)原创 2017-09-06 19:07:47 · 216 阅读 · 0 评论 -
Checkbox复选框的那些事儿
关于checkbox复选框 要使checkbox选中,我们都知道加checked属性。 选中可以是 最近做项目时发现,checked属性随便接受什么值(包括”false”和”“),都是选中状态, 伴随之便产生疑问,那要设置checkbox为非选中状态,应该怎么办?其实,input checkbox标签的checked有两种状态,分别是true和false 只要checked有值原创 2017-08-04 11:11:23 · 391 阅读 · 0 评论