前端开发

margin: auto也能实现垂直居中

2019-07-27262次阅读css
margin: auto能在块级元素设定宽高之后自动填充剩余宽高。除了水平方向,垂直方向的margin也能实现垂直居中,但是需要元素在垂直方向具有自动填充特性,而这个特性可以利用position实现:
前端开发

!important的权重

2019-07-27217次阅读css
在css中,!important的权重相当的高,但是由于宽高会被max-width/min-width覆盖,所以!important会失效。
前端开发

CSS技巧实现多行文本显示省略号

2019-07-18456次阅读css
Firefox(从68版开始)支持-webkit-line-clamp实现多行文本显示省略号,-webkit-line-clamp浏览器兼容性https://caniuse.com/#search=-webkit-line-clamp方面支持的还不错。不过还有另一种CSS方法实现多行文本显示省略号,所以称之为真正的CSS技巧。
前端开发

CSS选择器链或组中出现无效的伪选择器会怎样

2019-07-12336次阅读css
如果选择器链或组中有无效的伪元素或伪类,则整个选择器列表无效。如果伪元素(但不是伪类)具有-webkit-前缀,那么对于Firefox 63,Blink、Webkit和Gecko浏览器认为它是有效的,而不会使选择器列表无效。
前端开发

CSS实现元素的宽高比

2019-06-13457次阅读css3css
元素的宽高比描述了其宽度与高度之间的比例关系。两种常见的视频宽高比是4:3(20世纪的通用视频格式)和16:9(高清电视和欧洲数字电视的通用)。
前端开发

max-height实现任意高度元素的动画

2019-06-09445次阅读css
通过设置display属性none、block显示与隐藏,是没有任何动画效果的。还有就是能过height:0+overflow:hidden到height实现固定高度动画。实现任意高度元素的动画不妨试试max-height
前端开发

CSS3中背景属性background-clip

2019-06-01656次阅读css3css
background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框下面。如果没有设置背景图片或背景颜色,那么这个属性只有在边框透明或半透明时才能看到视觉效果,否则,本属性产生的样式变化会被边框覆盖。
前端开发

css实现按钮背景色渐变过渡

2019-06-01387次阅读css3css
background-position:指定图片的初始位置。这个初始位置是相对于以background-origin定义的背景位置图层来说的。background-size:设置背景图片大小。当取值为百分比时,表示指定背景图片相对背景区的百分比大小。当设置两个参数时,第一个值指定图片的宽度,第二个值指定图片的高度。
前端开发

css中@supports特性检测

2019-05-31346次阅读css3css
CSS @supports通过CSS语法来实现特性检测,判断当前浏览器对某个特性是否支持,实现渐进增强的效果。
前端开发

css属性值initial、inherit、unset关键字区别

2019-05-291216次阅读css3css
写了好几年的css还真没有注意到它们之间的区别,同时这也是一个很好的面试题。例如:问position属性有多少取值。通常的回答是static、relative、absolute和fixed。当然还有一个sticky。其实,除此之外,CSS属性通常还可以设置下面几个值:initial、inherit、unset、revert