那些你总是记不住但又总是要用的css有没有经常遇到一些样式每次写都要用百度呢？我收集了一些我平时经常要用到的但又总是记不住的样式。有错误的地方欢迎指正。一、设置input 的placeholder的字体样式input::-webkit-input-placeholder {* ChromeOperaSafari *color: red;}input::-mo …
css outline
在本篇文章里，我们一起学习下如何使用 CSS checkbox hack 技巧制作一个响应式的手风琴组件，这个组件完全基于CSS，没有JavaScript脚本，基于窗口大小进行水平和垂直之间进行切换。为了让大家更好理解，我将和大家一起一步步的进行完成。手风琴样式效果：下图是我们要制作的手风琴效果本示例需要你具备一些关于flexbox的知识。首先，我们先了解下 …
前言如果两个或多个元素很接近，那么用户就会认为它们以某种方式属于彼此。当对多个设计元素进行分组时，用户可以根据它们之间的空间大小来决定它们之间的关系。没有间距，用户将很难浏览页面并知道哪些内容相关而哪些内容无关。在本文中，我将介绍有关CSS中的间距，实现此间距的不同方法以及何时使用 padding 或 margin 所需的所有知识。更多的CSS知识点实践相关 …
Kendo UI致力于新的开发，来满足不断变化的需求，通过React框架的Kendo UI JavaScript封装来支持React Javascript框架。Kendo UI for Angular是专用于Angular开发的专业级Angular组件，telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。Kendo U …
如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；如果 .parent 的 height 写死了，就很难把 .child 居中忠告：能不写死高度就不写死高度demo地址 https:jsbin.comcuyifidedit?html,css,output方法1：table 自带功能使用 …
小王苦恼的盯着电脑屏幕。领导刚给他指派了任务，让他今天完成一张注册界面的表单，明天就交。这可着实难倒小王了。虽然小王是个程序员，但是对于CSS样式还真是不太擅长，研究了一下午，到了下班时间才勉勉强强弄出了界面：就在这时，老张下班回家，路过小王的工位，满心疑惑，于是探头瞅瞅小王到底在干什么。小王看到老张疑惑的看着自己，什么也没说，只是苦笑着摇摇头。这下老张更疑 …
CSS盒模型：如图为CSS标准盒模型结构最里层为内宽width和内高height。次一层为padding填充值，会增加元素的总宽高。再次一层为border边框值，会增加元素的总宽高。最外一层为margin值，不记入元素总宽高，是本元素距离外部的距离。想象成为一个纸箱，最里层为width和height，在箱子外面塞了一层泡沫，是padding值，又给泡沫涂了颜 …
转载说明：原创不易，未经授权，谢绝任何形式的转载1、解决图片5px间距问题您是否经常遇到图片底部多出5px空间的问题？别担心，有4种方法可以解决。方案一：设置其父元素的font-size:0px方案二：在 img 的样式中添加display:block方案三：在 img 的样式中添加vertical-align:bottom方案四：将父元素的样式增加为lin …
大家都知道如何调试JavaScript，如果想查看哪个变量，只需要用console.log把它打印出来就行了，但是如果想调试CSS怎么做呢？今天教大家两个方法。使用outline大家可以在你们的网站上加上这条语句，看看会有什么效果？是不是每个元素都可以清楚地看到呢？为什么使用outline而不是border呢？主要是由于它俩有下面几个区别：outline不占 …
今天，有个群友问了我这么一个问题，如果不想切图，是否有办法实现带渐变边框的字体效果？如下所示：本文，就将尝试一下，在 CSS 中，我们可以如何尽可能的实现这种渐变边框字体效果。元素叠加首先，比较容易想到的写法是通过元素叠加实现。元素本身实现文字效果本身通过元素的伪元素，配合 background-clip: text 实现渐变文字，并且通过 transfor …