css
微 光
纵有疾风起,人生不言弃
展开
-
flex 最后一行 左对齐
场景 :无法确定flex换行后列表个数又不固定,直接调试html特别麻烦,使用Grid布局Grid布局天然有gap间隙,且天然格子对齐排布,因此,实现最后一行左对齐可以认为是天生的效果。<div class="box"> <div class="list"></div> <div class="list"></div> <div class="list"&g..原创 2022-04-10 18:29:07 · 1351 阅读 · 0 评论 -
记一次Margin-top的bug,子div设置margin-top后,父div与子div一起下移
根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己上级(父元素,祖先元素)。解决办法:①父元素加一个上边框 ②父元素加overflow:hidden ③父元素设置padding-top...原创 2020-06-10 17:32:03 · 197 阅读 · 0 评论 -
flex布局中flex-grow 与 flex-shrink 的详细计算方式
flex-grow 的计算方式flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时,如何分配这些剩余空间。其值为一个权重(也称扩张因子),默认为 0(纯数值,无单位),剩余空间将会按照这个权重来分配。比如剩余空间为 x,三个元素的 flex-grow 分别为 a,b,c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x * a / sum, x * b / sum, x * c / sum,是为权重也。举个例子:父元素宽度 500px,三个子元素的 wi原创 2020-05-15 15:56:59 · 1642 阅读 · 0 评论 -
css3的box-shadow阴影属性
这篇文章很详细https://jingyan.baidu.com/article/b2c186c83d3741c46ef6ffe3.html原创 2019-03-15 16:35:19 · 185 阅读 · 2 评论 -
css解决移动端1像素边框问题
@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2) { .(边框所在类名) { border-width: .5px !important; } }原创 2019-02-21 11:11:27 · 783 阅读 · 0 评论 -
css中关于搜索框或按钮获得焦点时外边框变蓝的处理
添加css属性,这样点击时就不会有蓝色边框了 {outline:none;}原创 2017-06-18 20:46:29 · 10809 阅读 · 1 评论 -
css制作抽奖轮盘效果/扇形菜单
先上效果图附上代码:<!DOCTYPE html><html><head><meta charset="utf-8" /><title>轮盘</title><style type="text/css">#L {position: rela原创 2017-06-20 15:46:13 · 10788 阅读 · 1 评论 -
CSS未知宽高的元素,水平垂直居中
方法一:使用定位思路:子元素绝对定位,距离顶部 50%,左边50%,然后使用css3 transform:translate(-50%; -50%)优点:高大上,可以在webkit内核的浏览器中使用缺点:不支持IE9以下不支持transform属性<style>.parent{ position: relative; height:300px; ...原创 2018-11-28 21:33:52 · 618 阅读 · 0 评论 -
使图片完整显示,而不是被拉伸的办法
img { max-height: 100%; max-width: 100%; }原创 2019-01-07 18:35:01 · 1524 阅读 · 0 评论 -
解决移动端上用overflow-y:scorll样式生硬的问题
H5移动端模拟滑动时一般通过overflow-y:scorll实现,但是我们会发现手指滑多少,页面也就滑多少,效果非常生硬,在不想引入其他滑动组件库是可以通过下面的方式模拟原生的滑动效果。在使用overflow-y:scorll时,同时使用-webkit-overflow-scrolling:touch。想深入了解可以看这篇文章:https://www.cnblogs.com/xiahj/...原创 2019-02-21 17:27:38 · 3469 阅读 · 1 评论