51
Dev开发社区
首页
文章
问答
工具
搜索
登录
注册
文章频道
前端
css3
Javascript
html
Html5
Css
vue
网站优化
正则表达式
React
后端
C语言
C++
Java
.Net
PHP
Python
gis
Go语言
数据库
nosql
其他
Redis
sql
Mysql
Oracle
sqlserver
mongodb
移动
Flutter
Android
IOS
微信
微信小程序
支付宝小程序
快应用
开源
hadoop
资讯
经验
其他
工具
互联网络
代码编辑器
报表/图表
其他
算法
操作系统
linux
unix
windows
centos
mac
游戏开发
架构
微服务
网站架构
分布式系统
系统架构
软件工程
敏捷开发
软件工程
Css
浅谈CSS中的百分比
结论:标准流中的元素,看其属性有没有继承性。对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块);对于height,它没有继承性,父元素或者祖先元素会自适应其所有子元素的高度和(这点是需要注意的)。绝对定位参照的是离它最近的父元素或祖先元素,如果没有父元素或祖先元素,那么参...
代码星球
·
2020-09-25
浅谈
CSS
中的
百分比
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...
代码星球
·
2020-09-24
css
实现
垂直
中的
各种
纯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
一个
switch
开关
CSS效果集锦(持续更新中)
使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下:代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>light<...
代码星球
·
2020-09-24
CSS
效果
集锦
持续
更新
用CSS绘制实体三角形
使用CSS盒模型中的border(边框)即可实现如下所示的三角形:.box{width:0;height:0;border-width:100px;border-style:solid;border-color:#FFCCCCtransparenttransparenttransparent;}请看下面这段代码:.bo...
代码星球
·
2020-09-17
CSS
绘制
实体
三角形
css3之水波效果
这些效果可谓多种多样,当然用canvas、svg也都能实现奈何对这些有不熟悉(尴尬),不过咱们用css来写貌似也没想象中的那么难吧。 效果图 css.container{width:100px;height:100px;border-radius:50%;border:3pxsolid#e787e7...
代码星球
·
2020-09-17
css3
水波
效果
CSS中@support的用法 及其calc、media用法
背景:一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc,support,media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来,看一看它的真面目。了解到了@support的这个属性,记录下:CSS中的@support主要是用于检测浏览器是否支持CSS的某...
代码星球
·
2020-09-17
用法
CSS
@support
及其
calc
CSS3中的px,em,rem,vh,vw
1、px:像素,精确显示2、em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www.runoob.com/tags/ref-...
代码星球
·
2020-09-17
CSS3
中的
px
em
rem
css等待特效
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>css等待特效</title></head><styletype="text/css">.load-cube-gri...
代码星球
·
2020-09-13
css
等待
特效
css样式显示多个空格
遇到后台传回的字符串包含多个空格,但是在前台显示上则只会显示出一个空格的问题,相信大家都遇到过,那如何解决呢?很简单,在相应元素上添加一个css语句即可:white-space:pre; ...
代码星球
·
2020-09-13
css
样式
显示
多个
空格
css之文本两端对齐的两种解决方法
说起文本对齐,大家都知道text-align,最常用的有left、right、center,今天我们说一下justify,也就是文本两端对齐。说起来简单,但是有些小坑大家还是要注意的。现在我们有这样的两行文本,实际开发中我们经常会遇到这样的情景:需要把姓名和电话号码这两段文字对齐。我们自然会想到text-align:j...
代码星球
·
2020-09-13
css
文本
两端
对齐
两种
CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同...
代码星球
·
2020-09-13
CSS3
类和
元素
特性
区别
浅谈css3有意思的属性pointer-events: none;
可以用来阻止事件pointer-events:none;可以让某个元素实现类似于海市蜃楼的效果,具体理解为,你可以看的到某个元素,但是你无法摸的着。 而display:none;是你摸不着,但是你也看不见。 pointer-events:none;摸不着,但是看得见。如果把某个元素再加上...
代码星球
·
2020-09-13
浅谈
css3
有意思
属性
pointer-events
CSS样式大全
CSS样式大全字体属性:(font)大小{font-size:x-large;}(特大)xx-small;(极小)一般中文用不到,只要用数值就可以,单位:PX、PD样式{font-style:oblique;}(偏斜体)italic;(斜体)normal;(正常)行高{line-height:normal;}(正常)单...
代码星球
·
2020-09-13
CSS
样式
大全
CSS之flex兼容
随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然我们的技术不能是被拍死在沙滩上,我们还要支持,不支持的话,只能是你这个页面,这个产品被淘汰。那么为了不被淘汰,我们就要做些兼容性处理。我写页面的时候用到过很多的...
代码星球
·
2020-09-13
CSS
flex
兼容
专栏
更多
老潘
关注
欢迎关注
建站高手
关注
兴趣:做网站
星空
关注
星空下的梦~
代码星球
关注
IT猿
关注
首页
上一页
1
2
3
4
下一页
尾页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他