![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
深入了解css
大鱼吃小鱼7
一个会撸代码的小鱼姑娘,爱撸码,爱旅游,爱写作.
展开
-
【面试题拆解】--- 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 · 13950 阅读 · 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技巧(值得收藏!!!)
01.【负边距】????负边距的效果: 左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似.02.【shape-outside】定义非矩形的形状,参考MDN:shape-outside03.【BFC应用】????BFC应用之阻止外边距合并(margin collapsing)在外层/包裹层上添加 overflow:hidden; 里层的外边距不会被合并.04. 【BFC应用...原创 2019-10-15 17:03:28 · 773 阅读 · 0 评论 -
css、less、sass中定义变量,并使用变量设置属性值
CSS的变量声明和使用 :root{ --base: yellow; --spacing: 10px; --blur: 10px; }上面代码定义了3个变量,:root使得所有人可访问 img{ filter: blur(var(--blur)); padding: var(--spacing); back...原创 2018-11-16 19:15:13 · 11452 阅读 · 0 评论