css世界
大鱼吃小鱼7
一个会撸代码的小鱼姑娘,爱撸码,爱旅游,爱写作.
展开
-
【查缺补漏】css、Less、Sass定义变量,混合,嵌套,运算等(内含10道面试题)
一. 定义变量1.CSS 的变量声明和使用定义 3 个变量,:root 使得所有人可访问:root{--base:yellow;--spacing:10px;--blur:10px;}使用上面定义的变量作为属性值:img{filter:blur(var(--blur));padding:var(--spacing);background:var(--base);}还可以通过js改变变量的值,从而改变属性doc...原创 2020-12-01 00:21:05 · 2519 阅读 · 1 评论 -
【面试题拆解】--- css 水平垂直居中的实现方式和原理揭秘
1.文本、图片的水平垂直居中(1)单行文本居中设置文本内容text-align:center; //水平居中line-height:100px; //垂直居中, 行高等于高度,为什么 line-height 等于高度就可以实现文本垂直居中?要了解其中缘由, 先弄清楚几个概念。行高行高, 顾名思义, 就是一行文本的高度,在规范上讲就是两条基线之间的距离。行高由上间距、文本高度、下间距组成,上间距的距离与下间距的距离是相等的。默认情况下一行文本的行高分为:上间距,原创 2020-10-04 20:13:34 · 531 阅读 · 0 评论 -
不用找UI, CSS也能搞定图片效果(等比缩放, 背景模糊处理,投影等等)
在实际开发过程中, 总是会遇到各种需要处理图片的情况,举个简单的例子, 用户上传头像,我们都知道头像宽高是有一定比例的, 但用户的图片千奇百怪,如果简单的按照我们设定的宽高显示,图片变形不可避免,那么该怎么处理?也就是标题中提到的图片等比缩放了,这个时候我们需要用到css的一个属性, object-fit.<div class='header-container'> <img src="./333.jpg" alt=""></div><img原创 2020-05-19 23:34:20 · 642 阅读 · 0 评论 -
select组件设置居右对齐, text-align无效
问题:在原生组件select中,需要设置居右对齐, 我设置了:select{ text-align: right;}但是无效,搜索发现可以使用:select{ direction: rtl;}效果图:搞定!补充:direction属性规定文本的方向 / 书写方向。该属性指定了块的基本书写方向,以及针对 Unicode 双向算法...原创 2019-11-26 18:56:53 · 2863 阅读 · 0 评论 -
css强制换行的三个属性word-space、word-break、white-space解析
目录 white-space1. white-space:nowrap2.white-space: pre;3. white-space: pre-wrap;4.white-space: pre-line;word-break 1. word-break:keep-all;2.word-break:break-all;word-...原创 2019-11-19 17:16:22 · 13949 阅读 · 0 评论 -
css制作圆角按钮和卡片阴影效果
效果:代码:button{ width: 100px; margin: 10px; margin-bottom: 0; height: 37px; background: #fff; color: #506AE7; text-shadow: 1px 1px 1px rgba(255,255,255, .1); b...原创 2019-11-12 10:09:23 · 2945 阅读 · 2 评论 -
css中的未定义行为:浏览器的差异(一)
今天看了张鑫旭大佬的新书的有感吧,记录一下。Web标准未对一些场景做出明确规范,所以各大浏览器厂家只能根据自己的理解和喜好去实现,表现差异不是浏览器的bug,用计算机领域的术语描述为”未定义行为”。比如一个例子: CSS中的一个伪类,最常用的一个伪类:active,鼠标按下,执行改伪类对应的CSS样式,鼠标抬起还原。但是这种情况呢:<...转载 2018-11-01 16:02:53 · 166 阅读 · 0 评论