你未必知道的CSS知识点
-
【负边距】负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似
-
【shape-outside】不要自以为是了。你以为自己是方的,在别人眼里你却是圆的
-
BFC应用】BFC应用之阻止外边距合并(margin collapsing)
-
【BFC应用】BFC应用之消除浮动的影响
-
【input的宽度】并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,其默认宽度取决于size特性的值
-
【层叠上下文】层叠上下文:小辈就是小辈,再厉害也只是个小辈
-
【table布局】display:table实现多列等高布局
-
【定宽高比】css实现定宽高比的原理:padding的百分比是相对于其包含块的宽度,而不是高度
-
【隐藏文本】隐藏文字内容的两种办法
-
【居中】实现居中的一种简单方式
-
【角向渐变】新的渐变:角向渐变。可以用来实现饼图
-
【背景重复新值】background-repeat新属性值:round和space。前者表示凑个整,后者表示留点缝
-
【outline使用】可以使用outline来描边,不占地方,它甚至可以在里面
-
【背景定位】当固定背景不随元素滚动时,背景定位是相对于视口的
-
【object-fit】图片在指定尺寸后,可以设置object-fit为contain或cover保持比例
-
【鼠标状态】按钮禁用时,不要忘了设置鼠标状态
-
【背景虚化】使用CSS滤镜实现背景虚化
-
【fill-available】设置宽度为fill-available,可以使inline-block像block那样填充整个空间
-
【fit-content】设置宽度为fit-content,可以使block像inline-block那样实现收缩宽度包裹内容的效果
-
【自定义属性】CSS自定义属性的简单使用
-
【min-content/max-content】可以设置宽度为min-content和max-content,前者让内容尽可能地收缩,后者让内容尽可能地展开
-
【进度条】使用渐变,一个div实现进度条
-
【打印】可以在打印网页时,设置page相关属性。比如page-break-before属性来表示是否需要另起新页
-
【过渡】爱的魔力转圈圈
-
【动画案例】水波效果原理