Css

浅谈CSS中的百分比

结论:标准流中的元素,看其属性有没有继承性。对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块);对于height,它没有继承性,父元素或者祖先元素会自适应其所有子元素的高度和(这点是需要注意的)。绝对定位参照的是离它最近的父元素或祖先元素,如果没有父元素或祖先元素,那么参...
代码星球·2020-09-25

css实现垂直居中的各种方法

1、行内元素居中line-height(须知高度).box{height:300px;}p{line-height:300px;} 2、table居中display:table-cell;vertical-align:middle;.box{display:table;}p{display:table-cel...

纯css写一个switch开关

这样的简单的开关效果1、html<divclass="switch-box"><divclass="bg_con"><inputid="checked_1"type="checkbox"class="switch"value="0"/><labelfor="checked_1"...
代码星球·2020-09-24

CSS效果集锦(持续更新中)

  使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下:代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>light<...

用CSS绘制实体三角形

使用CSS盒模型中的border(边框)即可实现如下所示的三角形:.box{width:0;height:0;border-width:100px;border-style:solid;border-color:#FFCCCCtransparenttransparenttransparent;}请看下面这段代码:.bo...
代码星球·2020-09-17

css3之水波效果

这些效果可谓多种多样,当然用canvas、svg也都能实现奈何对这些有不熟悉(尴尬),不过咱们用css来写貌似也没想象中的那么难吧。 效果图 css.container{width:100px;height:100px;border-radius:50%;border:3pxsolid#e787e7...
代码星球·2020-09-17

CSS中@support的用法 及其calc、media用法

背景:一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc,support,media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来,看一看它的真面目。了解到了@support的这个属性,记录下:CSS中的@support主要是用于检测浏览器是否支持CSS的某...

CSS3中的px,em,rem,vh,vw

1、px:像素,精确显示2、em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端     em换算工具:http://www.runoob.com/tags/ref-...
代码星球·2020-09-17

css等待特效

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>css等待特效</title></head><styletype="text/css">.load-cube-gri...
代码星球·2020-09-13

css样式显示多个空格

遇到后台传回的字符串包含多个空格,但是在前台显示上则只会显示出一个空格的问题,相信大家都遇到过,那如何解决呢?很简单,在相应元素上添加一个css语句即可:white-space:pre;  ...

css之文本两端对齐的两种解决方法

说起文本对齐,大家都知道text-align,最常用的有left、right、center,今天我们说一下justify,也就是文本两端对齐。说起来简单,但是有些小坑大家还是要注意的。现在我们有这样的两行文本,实际开发中我们经常会遇到这样的情景:需要把姓名和电话号码这两段文字对齐。我们自然会想到text-align:j...

CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同...

浅谈css3有意思的属性pointer-events: none;

 可以用来阻止事件pointer-events:none;可以让某个元素实现类似于海市蜃楼的效果,具体理解为,你可以看的到某个元素,但是你无法摸的着。 而display:none;是你摸不着,但是你也看不见。 pointer-events:none;摸不着,但是看得见。如果把某个元素再加上...

CSS样式大全

CSS样式大全字体属性:(font)大小{font-size:x-large;}(特大)xx-small;(极小)一般中文用不到,只要用数值就可以,单位:PX、PD样式{font-style:oblique;}(偏斜体)italic;(斜体)normal;(正常)行高{line-height:normal;}(正常)单...
代码星球·2020-09-13

CSS之flex兼容

随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然我们的技术不能是被拍死在沙滩上,我们还要支持,不支持的话,只能是你这个页面,这个产品被淘汰。那么为了不被淘汰,我们就要做些兼容性处理。我写页面的时候用到过很多的...
代码星球·2020-09-13