![](https://img-blog.csdnimg.cn/20200522191734417.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
CSS笔记
AndyPoplar
学无止境
展开
-
position的4个值和用法
1. position的4个值我理解的四个值为absoluterelativefixedsticky2. 用法2.1 absoluteposition:absolute 绝对定位TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)如果元素没有设定TRBL并且父级没有设定position属性,那么当前设置absolute的元素默认依据父级的坐标原始点为原始点。如果元素设定TRBL并且父级没有设定position属性,那么当前设置absolute的元素则以浏览器左上角为原创 2020-06-07 19:56:46 · 5011 阅读 · 0 评论 -
display:none和visibility:hidden的区别
1.隐藏元素后是否占据空间display:none 不占据空间visibility:hidden 占据空间2.是否产生回流display:none 产生回流visibility:hidden 不产生回流3.是否有继承visibility具有继承性,给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别示例:<style原创 2020-05-30 10:32:30 · 254 阅读 · 0 评论 -
关于nth-child(n)与nth-of-type(n)的区别
先看下代码 <style> div span:nth-child(2){ color: greenyellow; } div span:nth-of-type(2){ color: red; } </style> <div> <span>我是第1</span>...原创 2020-03-19 14:17:28 · 113 阅读 · 0 评论 -
CSS之使用display:inline-block来布局
转载自转载 2020-03-05 16:46:46 · 85 阅读 · 0 评论 -
display:table与display:table-cell多行文字垂直居中
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .parsent{ width: 500px; height: 500px; background: yellow;...原创 2019-08-25 18:30:19 · 176 阅读 · 0 评论 -
小程序通过background-image设置背景图片
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片;base64图片设置步骤如下:1.在网站 点击进去转换哦 上将图片转成base64格式的文本2.在WXSS中使用以上文本:background-image: url(“data:image/png;base64,iVBORw0KGgo=…”);3.为了是背景图片自适应宽高,可以做如下设置:...转载 2019-08-02 12:26:44 · 593 阅读 · 0 评论