FEE

在桌面端，为select box添加focus background之后，由于select还处于focus状态，background并不会自动消失![在这里插入图片描述](https://img-blog.csdnimg.cn/c2f7c1aab5aa4e0ca672cd79c2bedf82.png。通过主动触发失焦，可移除当前focus状态。

比较图1和图2-左，可以发现，底部按钮在全面屏中并没有足够的空间去展示，理想情况为图2-右以及图3-左，有足够的填充。图2-左的情况会导致：1.用户需要双击才能实现按钮的点击2.有概率会退出到手机主页那么如何来解决这个问题，以达到图3的效果？我们可以通过使用env(safe-area-inset-bottom)来达到额外填充的效果。padding-bottom:env(safe-area-inset-bottom)padding-bottom:calc(0.5rem+en...

对于position的取值，常见的有：static、relative、absolute 和 fixed，还有较少被关注到的：initial,inherit和unset。1.initial 可用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式（IE不支持该关键字）2.inherit 可继承属性，从父元素那获取对应属性的经过计算与转换的值，如果父元素没有，则向上查找，直到使用浏...

传统方法中，要让不定宽元素水平居中，我们一般采取以下结构：<div class="more-btn1"><span>查看更多</span></div>.more-btn1 { text-align: center;}.more-btn1 span { display: inline-block; paddi...

针对IE8:@media \0screen { color: #000;}

overflow-x: scroll;overflow-y: hidden;white-space: nowrap;

positon:fixed---绝对定位元素将相对于屏幕视口（viewport）的位置来指定其位置，并且元素的位置在屏幕滚动时不会改变。fixed 属性会创建新的层叠上下文（Stacking Context）。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。Stacking Context---层叠上下文层叠上下文是HTML元素的三维概念，这些HTML元素...

注：本文出自淘宝的元彦，见文前端观察。高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是...

先说个应用于li的场景，都知道在list-style: disc情况下，li的表现是这样的： 1、间距大，虽然可以通过margin负值来调整 2、圆点太大，不好看，不好调整大小，而且在谷歌/火狐上看起来有差异所以:before就派上用场了：<li class="test">test</li>.test { position: relative; margin: 50px;

slideToggle()通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。对应slideUp()和slideDown() 注意：在使用slideToggle()进行显隐内容时，在响应式页面下，切记不要在前面添加.stop()如：$(this).stop().slideToggle();在内容即将显示或隐藏时继续点击，会出现如下情况，当屏幕变大或缩小，页面内容高度应有所

/* 子元素-平均分栏 */ .flex1 { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ width: 20%; /* For old syntax, otherwise collapses. */ -webk

1、对话框 #talkbubble { width: 120px; height: 80px; background: #404040; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-ra

HTML<div class="share-icon"> <span class="s1"></span> <span class="s2"></span> <span class="s3"></span> <span class="s4"></span> <span class="s5"></span></div> CSS// share icon clos

在日常布局当中，碰到需要图文左右两列，垂直居中的情况，即在文字内容高度大于图片高度时，图片相对文字垂直居中，反之，则文字相对图片垂直居中。 对于响应式布局，由于图文字高度的变化，所以要避免出现文字或图片被遮挡住的情况，那么就要设定一定大小的上下padding值。 初次尝试，定义左右浮动，此时display:table-cell布局失效。那要让文字垂直居中，首先想到的是定位：position: a

在li列表中，我们通过list-style-type可轻松实现计数，但无法做到动态更新前面的序号，通过CSS计数函数则可实现。 场景：在下单页面，有对新老用户的判断，对于未登录用户，第一步是选择登录或者注册，第二步是选择用户地址…未登录用户在登录后原来第二步会变成第一步，而已登录过用户第一步就是选择地址。body { /*插入计数器第一个计数器从0开始累加，第二个计数器从1开...

在某些布局当中，.test这个块必须包含在.main这个块中，而同时要达到如下图的效果，则可以使用margin-right负值<div class="main"> <div class="test"></div></div>.main { background: #ccc; width: 400px; height: 200px;}.test { bac

<input class="switch-btn switch-btn-animbg" type="checkbox" checked><label><input class="switch-btn switch-btn-animbg" type="checkbox" checked> 默认选中</label>.switch-btn { cursor: pointer; width: 45

在移动端web页面开发中，为了使css中使用的尺寸与设计稿一致，通常会采用 rem 单位配合 lib-flexible 来实现移动端的适配，在IOS设备上 flexible.js 会根据设备的分辨率动态的调整 viewport 的 width 和 scale 来达到目的。但是，现在很多的安卓手机也是高分辨率的屏幕，有些1px边框的按钮和列表会显得特别粗，flexible.js 只处理了IOS的手机，

通常在页面载入/鼠标移到文字上方时，要有下划线从无到有的动画效果，下面用hr标签和a标签举例说明： html代码<div class="pic-wrapper"> <p> <hr class="first-hr"> <br> <hr class="second-hr"> </p> <br> <a class="demo-a">aaaaaa