table表格border相邻边框重合问题解决方法
摘要：前言 最近在写一个table表格时遇到了一个样式问题，如下图 以前面试总是听到或看到border相邻边框重合的面试题，当时也看了不少，久了不用就有点遗忘。 解决方法 一般使用margin-bottom：-1px即可解决
阅读全文
CSS怎么在项目里引入自定义字体图标(@font-face)
摘要：前言 推荐到下面2个免费好用的字体图标网站，下面以阿里巴巴矢量图标库举例说明 1. 阿里巴巴矢量图库 2. Font Awsome 步骤 1. 登录官网后，搜索要下载的图标，鼠标指向该图标后如下图所示，点击加入购物车图标 2. 然后点击右上角的购物车图标后如下图所示，选择下载代码 也可以选择添加至项
阅读全文
巧用ovflow:hidden属性解决一个图片放大的小问题
摘要：前言 下面是2张普通且未放大的图片 现在有个需求，鼠标指向图片放大，但只让图片放大，包裹图片的容器不放大，如下图 上面图片放大后，包裹图片的容器也随之放大，若我们想要下图的效果，只让图片放大，该怎么做呢？ 解决方法 经过研究，我发现只要给包裹图片的容器加上 ovflow: hidden属性即可 假设
阅读全文
flex解决页面内容过少，底部跟随到页面中间的问题
摘要：前言 你可能遇到过如下问题，当页面内容较少时，底部会跟随内容到页面中间显示， 聪明的你可能立马想到用position：fixed固定定位来解决。这样底部始终固定在底部， 不受内容多少的影响。如果你不想固定底部，还有其它方法可以解决吗？答案是肯定的， Flex弹性布局就能解决该问题。 Demo <!D
阅读全文
flex+vh实现等高两列分别滚动
摘要：前言 下图的布局方式，做过后台管理系统的同学应该不会感到陌生，这是一个经典的布局形式，顶部导航，下面左右两列布局， 左侧为菜单栏，右侧为内容区域。 需求 现在有个需求，当左右两列布局元素都超出自身高度后，各自分别出现滚动条，并且互不影响，就像下面这样， 左侧侧边栏无论怎么滚动，右侧内容区域不会跟随滚
阅读全文
CSS实现多列等高布局的3种方法
摘要：前言 多列等高是什么意思？ 即需要每个列的高度能与最高的那个列等齐 比如下图，左右2列不会随着中间列高度的增高而随之增高 要达到的效果 方法一：使用flex <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author
阅读全文
line-height是怎么继承的？
摘要：前言 line-height (行高) 这个css属性相信大家已经如数家珍，但说到它的继承关系可能还是会有点模糊。 下面简单总结了line-height在实际使用中的3种继承场景，下面都以p元素的行高是多少举例说明。 第一种：具体数值（子元素未设置具体行高数值，会自动继承父元素的行高） DEMO（下
阅读全文
css filter属性滤镜变灰
摘要：如果有需求想让网页变成下面黯然失色的样子应该怎么做呢？ 其实很简单，只需要给html添加css的filter属性即可轻松实现，各主流浏览器兼容写法如下： html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms
阅读全文
overflow属性解决内容未超出依然显示滚动条轨道的问题
摘要：前言 最近遇到一个小问题，我想红色框区域的内容超出后纵向能够出现滚动条，于是加了overflow-y: scroll ， 但没想到内容超出后虽能出现滚动条，但内容没超出时也会有滚动条的轨道显示，如下图黑色箭头所示， 这让我有点费解，经过一番调试，我发现改成overflow-y: auto就可以了 有
阅读全文
flex——justify-content属性引起的一个样式问题
摘要：前言 在flex布局出现以前，我一般习惯使用浮动布局（float）来实现下列布局 现在尽量少用浮动布局，虽然好用，但有时会带来一些意想不到的问题，甚至导致布局错位， 一开始浮动布局只是为了实现文字环绕而出现的，而后来却被广泛运用到布局当中。现在有了更好的解决方案flex布局 问题 最近使用flex实
阅读全文
background属性怎么添加2个或多个背景图
摘要：最近遇到一个需求，下面充值金额按钮是一个背景图，点击之后显示的状态也是一个背景图，如下图 按照惯用的套路，新增一个class，点击后的状态直接写在里面即可 然而点击后，虽然状态背景成功显示出来，但按钮背景却消失了 此时，我突然想起background可以添加2个或多个背景，于是修改代码后如下， 本以
阅读全文
background-size:100% 100% 和 background-size:cover的区别简述
摘要：下面我通过给下图背景图添加background-size属性的不同属性值，更直观的显示出100%和cover的区别 下图是添加background-size:100% 100% 后的背景图效果，背景图被拉伸后有点失真 下图是添加background-size: cover 后的背景图效果，背景图被拉
阅读全文
CSS3实现文字描边的2种方法
摘要：问题 最近遇到一个需求，需要实现文字的描边效果，如下图 解决方法一 首先想到去看CSS3有没有什么属性可以实现，后来被我找到了text-stroke 该属性是一个复合属性，可以设置文字宽度和文字描边颜色 该属性使用很简单：text-stroke:1px #f00;（1px是文字宽度，#ff是文字描边
阅读全文
css不常用的4个选择器-个人向
摘要：①：element1.element2（给同时满足有element1和element2 2个类名的元素添加样式） <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .test1.test2 {
阅读全文
CSS改变浏览器默认滚动条样式
摘要：前言 最近总是看到某网站滚动条不是浏览器默认样式，而是自定义样式 比如我博客的滚动条，自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问，这是怎么实现的呢？ 解决 注：①：经测试，目前只支持webkit内核的浏览器， 比如，谷歌，Safari，edge，360安全和360极速浏览器的极
阅读全文
伪类和伪元素区别小结
摘要：有时对伪类和伪元素傻傻分不清楚，觉得它们很相似，但又有哪里不同，所以做了一个小结，希望能帮到有需要的人 1个相同点：都是被添加到一个选择器末尾的关键字 2个不同点： ① 伪类是以1个冒号(:)作为前缀被添加到选择器末尾的关键字；伪元素是以2个冒号(::)作为前缀被添加到选择器末尾的关键字 ② 如果伪
阅读全文
border和outline的区别
摘要：如果有一个需求，给一个元素增加一条边框，想必大家会习惯且娴熟的使用border来实现， 其实outline也能达到同样的效果，并且在有些场景下会更适用，比如下面的demo 使用border后，div宽度增加，导致超出父元素 使用outline后，div元素宽度不会改变 DEMO <!DOCTYPE
阅读全文
你需要知道的8个CSS带@的规则
摘要：1：@charset（用来设置html文档字符编码的格式，比如我们常用的，charset='utf-8'） 注：建议CSS文件最顶部都加上@charset "utf-8";，避免出现乱码 以前我写过一篇博客，详见：https://www.cnblogs.com/tu-0718/p/6920243.h
阅读全文
CSS选择器[attribute | = value] 和 [attribute ^ = value]的区别
摘要：前言 首先你需要知道[attribute | = value] 和 [attribute ^ = value] 分别是什么？ ①：[attribute | = value] ②：[attribute ^ = value] 使用场景（下面我用获取input为例，逐步描述何时使用[attribute |
阅读全文
orientation属性（判断是否为横竖屏）
摘要：现在有一个需求：移动端网页默认竖屏显示，当用户横屏浏览，就给予相应提示，比如横屏时显示下面截图提示信息 几年前，可能大家想到用 window.orientation 属性来实现，现官方已弃用，不做推荐，并且有了更好的实现方式—— orientation orientation: portrait（竖
阅读全文