![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
Moon月亮猪
这个作者很懒,什么都没留下…
展开
-
92. Responsive and Fixed Navigation Menu - Responsive Web Design
1. 引用下曹刘阳写的《编写高质量代码-web前端开发修炼之道》一书中看到的一句话:position:absolute和float会隐式地改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute、 float中任意一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素以s...原创 2019-10-12 12:44:14 · 99 阅读 · 0 评论 -
8. 未解之谜
父子元素均设置:position:absolute子元素的宽度为自适应。由内容决定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...原创 2019-10-08 00:04:40 · 95 阅读 · 0 评论 -
DarkCode Plan
175141左边屏幕浏览器, 右边分卫两部分,左边为VSCode,右边为播放器。原创 2019-10-01 16:17:53 · 149 阅读 · 0 评论 -
126.选择器参考手册,以及元素的排列方向
选择器参考手册修改box内部元素的排列方向.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); direction: rtl;}原创 2019-10-01 15:46:36 · 125 阅读 · 0 评论 -
CSS sercrets 杂七杂八
Chrome浏览器缩放比例25%-500% 1em本身是变量,存储当前变量尺寸。类似currentcolor以及inhert 颜色是一门功课 CSS 原理 应用 全貌 经典 难原创 2019-10-01 13:39:31 · 161 阅读 · 0 评论 -
124
居中的一个方法是使用父元素相对定位,子元素绝对定位,调整left, top以及transform translate(-50%, -50%);如果X方向,父元素定义为position:relative, 子元素为绝对定位,left:50%, transform: translateX(50%);;另外元素消失,可使用opacity:0;hover某个动作引起opacity为1,再...原创 2019-09-29 23:36:17 · 102 阅读 · 0 评论 -
74.Background 背景图片问题
1. background-position:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title>...原创 2019-09-29 15:11:51 · 110 阅读 · 0 评论 -
123: ::before 貌似与jquery一起用效果更好,动态添加css
before用法转载 2019-09-29 13:28:42 · 156 阅读 · 0 评论 -
114. 3d Social Media Buttons With Awesome Hover Using Only HTML & CSS
1. 父容器设置display:inline-flex后会包裹子容器。2. div的特性div不设置height与weight情况下,占据一行。设置后,虽然不占用整行,却又换行效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...转载 2019-09-29 12:00:39 · 80 阅读 · 0 评论 -
154. Amazing Alert Buttons With Only HTML and CSS
1. 用<a>制作button效果,需要设置text-decoration padding display.btn{ text-decoration: none; padding: 14px 20px; display: inline-block; text-align: center; color:white; fon...转载 2019-09-29 11:29:18 · 73 阅读 · 0 评论 -
94. Folded Box - Only By Using HTML & CSS
.test{ width: 100px; height:100px; background: deepskyblue; border-color:black; border-width:40px;; border-style: solid; border-color: #c0392b yellowgreen;}Border ...转载 2019-09-29 10:34:17 · 82 阅读 · 0 评论 -
130. 6 Awesome Css Filters For Images You Should Know
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...转载 2019-09-28 12:29:55 · 70 阅读 · 0 评论 -
120. 居中(DarkCode与CSS Secrets)
1. Text Align对象:行内元素, div内文字,匿名容器(没有被标签包裹的文本节点)效果:水平居中方法:对其父元素引用text-align<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor...转载 2019-09-28 11:35:51 · 101 阅读 · 0 评论 -
106. 行内标签span 设置position:absolute 变为inline-block 可设置宽高
发现问题过程:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...转载 2019-09-19 12:55:30 · 524 阅读 · 0 评论