CSS3禁止用户选中文字——user-select: none;
摘要：需求：现在有一个需求是在移动端让你禁止用户选中文字，你会怎么做呢？如下图 解决方法：使用CSS3新增属性 user-select: none; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; user-sel
阅读全文
input使用小技巧
摘要：①：如何修改placeholder样式？ input::-webkit-input-placeholder { color: #ccc; font-size: 15px; } 注：其它浏览器适配方案 原文参考：https://webfem.com/post/placeholder ②：设置获取焦点后
阅读全文
CSS怎么在项目里引入自定义字体(@font-face)
摘要：前言： 以前我一直用内置的默认字体给文字设置字体，直到一天UI妹纸给了我下面的字体 当时我是蒙蔽的，这个字体的效果如下 默认字体并无该字体，直接设置是没有效果的，这时就需要用到自定义字体了 下面我来简单介绍一下添加自定义字体的方法 添加自定义字体： ①：首先需要下载所需字体 推荐该下载字体网站：ht
阅读全文
css清除浮动的3种方式
摘要：前言： 当不给父元素设置宽高时，父元素的宽高会被子元素的内容撑开。但当子元素设置浮动属性（float） 后， 子元素会溢出到父元素外，父元素的宽高也不会被撑开，这称之为“高度塌陷”。可以理解为使用浮动后的副作用 那什么是高度塌陷呢？比如下面截图，box1和box2的外层（这里外层指下图箭头所指的紫色
阅读全文
2种不同方式实现背景图里加入文字的简单CSS样式
摘要：如果让你实现下图的样式（图片里面插入文字），你会怎么做呢？ 我总结了2种方式 ①：用 img src属性直接引入图片 + 定位 ②：用背景图且不使用定位 第一种： HTML <div class="download-explain"> <img class="download-explain-img
阅读全文
outline和outline-offset属性实现简单的缝边效果
摘要：如果现在有个需求，让你实现下面的样式，你会怎么做呢？ 我首先想到的是用 border + box-shadow 实现，代码如下 div { margin: 50px auto; width: 200px; height: 100px; background: #655; border-radius:
阅读全文
一个需求认识CSS3 的transform-origin属性
摘要：最近遇到一个需求，是以前做PHP的同事问我的问题 下面是他在百度发的问题截图 根据上面的截图，我稍微梳理了一下 问题：现在有个div，旋转45度后，这个div的宽度会动态改变，并且要向右上方偏移 需求：现在想要该div旋转45度后，宽度动态改变的同时，不要向右上方偏移 注：这个动态添加的宽度理论上不
阅读全文
CSS3——:nth-child选择器基本用法简述
摘要：注：n 是从1开始的 ：nth-child 是 CSS3 提供的一个好用的选择器，因为在项目中经常用到，所以简单总结了它的常用方法 下面示例代码截图用的是同一个例子，p元素的父元素都是body p:nth-child(2) 表示给第2个p元素添加背景色，p:nth-child(3)是第3个p元素，以
阅读全文
几个实用的CSS代码段总结
摘要：废话不多说，直接上代码，希望能帮到有需要的小伙伴 ①：遮罩 position: fixed; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; right: 0; bottom: 0; z-index: 9; width: 100%; height:
阅读全文
终于明白word-break属性——break-all和break-word的区别
摘要：其实一直不明白，也没有认真去想过 word-break 属性的 break-all 和 break-word 有什么区别 后来看了一个大神写的一篇博客，写得很详细，看了豁然开朗。 所以，我也就不在过多赘述，直接上demo，最后会附上原文链接 demo <!DOCTYPE html> <html> <
阅读全文
hover样式失效的解决方法
摘要：提到 css 的hover 选择器，想必大家都不陌生（:hover 用于设置鼠标指向某元素上后显示的样式） 除了常用的 hover 选择器，还有3个可以和它搭配使用的选择器： :link 设置未被访问页面的链接 :visited 用于设置已被访问的页面链接 :active 用于活动链接 一般 hov
阅读全文
CCS3怎么实现border边框渐变效果
摘要：下图注册按钮的边框有渐变效果，如果让你来实现，你会怎么做呢 个人觉得，省事的做法，直接让UI给背景图片就可以了，如下图 不过这种做法感觉不太灵活，如果要修改border的渐变颜色，就需要UI重新做图。那应该怎么做呢？ 我首先想到的方法就是用CSS3的border-image属性 border-ima
阅读全文
CSS3实现背景透明文字不透明
摘要：最近遇到一个需求，如下图，input框要有透明效果 首先想到的方法是CSS3的 opacity属性，但事实证明我想的太简单了 这个属性虽然让input框有透明效果，同时文字和字体图标也会有透明效果，导致文字和字体图标被模糊，如下图 于是我开始思考其它方式，最后想到了通过透明背景图来实现 背景图虽然能
阅读全文
CSS重置
摘要：在css文件的顶部一般会看到下面的样式 * { margin: 0; padding: 0; } 这里的星号代表所有元素，意思是把所有元素的 margin 和 padding 都重置为 0 之所以要这么做，是因为要清除浏览器默认的样式，这种做法简单，粗暴，但不推荐 所以慢慢就衍生出了 reset.c
阅读全文
table-layout引起的探索——fixed和auto的区别
摘要：问题：最近想把mui提供的底部导航组件样式单独抽出来，遇到一个问题：给底部图片下的文字设置了超出隐藏，但没有生效，如下图： 注：该底部导航为mui提供的组件 解决：这让我百思不得其解，经过一些琢磨后发现是这个属性的原因：table-layout table-layout 属性的作用是设置表格布局算法
阅读全文
用CSS解决一个让人头疼的问题
摘要：需求：下面的文字内容分别都写在一个a标签里，现在需要获取到每一行最后一个a标签的竖线，并删除 我首先想到的是用CSS3新增选择器—— :nth-child()来解决，比如 :nth-child(3n) 这里的3n表示获取到所有3的倍数的元素 更多用法参见：https://developer.mozi
阅读全文
CSS3新增伪类--好用的:target
摘要：问：如果让你实现下图，点击跳转后，让内容1增加一个背景颜色，你会怎么做呢？ 可能很多小伙伴第一反应是用JS，给跳转绑定点击事件，然后用DOM获取到内容1，在给其添加css样式。 如果我跟你说用css来实现，你会不会一脸蒙蔽，然后想骂人。哈哈哈。其实用CSS3新增的伪类：target就能轻松搞定。 W
阅读全文
css垂直居中方法总结
摘要：在网页布局中，我们往往会遇到下图所示的场景，让小图标和文字对齐 可能有的小伙伴会说，这个简单，直接给小图标设置左浮动来实现。 这样做是可以的，但不推荐，毕竟浮动是会影响布局的，能少用还是少用。 以前遇到这种场景，其实挺头疼的，我是直接给小图标设置相对定位，然后调整top值。好像找不到更好的办法，也就
阅读全文
控制页面打印的2种方法（css3的media媒体查询和window.print()）
摘要：在实际开发中，有时可能会有打印的需求。下面我总结了2种打印的方法，希望对各位小伙伴有所帮助。 ①：直接用window.print()方法就可以打印整个页面，下面是一个小demo <!DOCTYPE HTML> <html> <head> <title>div print</title> <meta
阅读全文
box-sizing:border-box的作用
摘要：其实一直没仔细研究过CSS3新增的这个属性box-sizing，只是经常会看到其它网页和公司项目里面有用到这个属性，然后就百度找到了一篇不错的介绍 https://www.jianshu.com/p/e2eb0d8c9de6 要想清楚这个属性的作用，首先要理解盒子模型 盒子模型是指：外边距（marg
阅读全文