![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
Harriet嘉
前端 こんにちは、世界
展开
-
图片底部空白缝隙问题
img { vertical-align: bottom;}给图片添加 vertical-align: middle | top | bottom 等。(推荐使用) 把图片转换为块级元素 display: block; (转换块级元素可能会影响布局,所以推荐使用第一种) 容器 line-height 足够小. 只要半行间距小到字母x的下边缘位置或者再往上, 自然就没有了撑开底部间隙高度空间了. 比如: 容器设置 line-height: 0; 容器 font-size 足够小....原创 2021-08-23 09:11:53 · 152 阅读 · 0 评论 -
css元素隐藏原理及display:none和visibility:hidden
一、CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。一个一个看。 { display: none; /* 不占据空间,无法点击 */ } /********************************************************************************...转载 2018-03-20 22:47:27 · 320 阅读 · 0 评论 -
CSS布局基础——BFC
BFC,全称 Block Formatting Context,翻译成块级格式化上下文,它就是一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。看一大堆文字可能有点抽象,现在拿个js函数来比喻说明一下吧,我们现在有一个叫做bfc的函数,而一个函数就是一个块级作用域,这里面所有的变量申明、运行都在这个块级作用域内进行。理所当然,一个环境中的变量不会影...转载 2018-03-20 23:12:31 · 143 阅读 · 0 评论 -
CSS实现div的高度填满剩余空间
需求:1. 这个矩形的高度和浏览器窗口的高度相同,不能出现纵向滚动条2. 绿色部分高度固定,比如50px3. 紫色部分填充剩余的高度HTML结构暂且如下:<div id="main"> <div id="nav">nav</div> <div id="content">content</div>&a转载 2018-07-03 11:05:25 · 3477 阅读 · 0 评论 -
Column-count属性遇到的问题
用Column-count分成4列之后出现被截断问题。解答:如果column多列布局是写在ul,那就给li加上-webkit-column-break-inside:avoid;height:100%;overflow: auto;//兼容火狐 break-inside:avoid;...原创 2018-06-29 00:07:10 · 10211 阅读 · 0 评论 -
图片溢出div,超出div解决办法
当我的图片宽度大小没有设置,过大的时候,它会超出我的div宽度。这个时候,我给它设置了一个小于我的div的宽度,它是可以进入div盒子而不溢出的,然而,当我们的浏览器缩小的时候,我的div是栅格布局,固定了百分比会随浏览器可视界面而缩小,但是此时图片因为固定宽度不能同步缩小,还是会发生溢出现象。还有一种将就的办法,就是设置overflow:hidden,隐藏溢出的部分,但是大家都可以预料的到那种糟...原创 2018-07-07 10:14:50 · 27729 阅读 · 0 评论 -
css3实现文字扫光渐变动画效果
利用css3这个属性(背景剪裁):background-clip: border-box || padding-box || context-box || no-clip || text本次用到的就是: -webkit-background-clip:text;栗子:1、<style> .masked{ text-align: ce...转载 2018-07-28 14:33:00 · 1457 阅读 · 0 评论