随笔分类 - CSS
摘要：在使用Flex或Grid布局时，经常会遇到内容溢出容器或者将容器撑大的情况 例如在grid布局中元素尺寸为1fr，或者flex布局中元素flex-grow:1时，想使用Echarts画图和布局中的文本省略显示时发现并没有达到预期的效果，容器被内容撑大了 想要解决这个问题，首先需要知道容器为什么会被撑
阅读全文
摘要：参考资料：https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 参考资料：https://cloud.tencent.com/developer/article/1516801
阅读全文
摘要：单边框0.5px，可以用以下方式： 方式一：border + border-image + 线性渐变linear-gradient <div class="border">0.5像素边框</div> <style> .border { width: 200px; height: 200px; mar
阅读全文
摘要：学习博客：https://www.haorooms.com/post/css_unit_calc
阅读全文
摘要：学习博客：http://www.ruanyifeng.com/blog/2019/03/grid layout tutorial.html
阅读全文
摘要：分享一下我喜欢的四个代码样式的CSS配置，复制粘贴即可使用，根据highlight.js调整配置，编辑器一定要改成markdown。（喜欢的话你就点个赞 _<） 1、atom one dark reasonable 2、atom one dark 3、atom one light 4、monokai
阅读全文
摘要：由于div运用了position：fixed，内部通讯列表设置了height：100%，然而列表设置overflow：overlay 溢出部分显示不全，且无滚动条出现，最终找出原因在于顶部header占据65px 解决办法： 设置通讯列表的height: calc(100% 65px);减去head
阅读全文
摘要：如图：搜索和图标不是垂直居中着实难受 最终通过如下代码实现：
阅读全文
摘要：学习网站：https://developer.mozilla.org/zh CN/docs/Web/CSS/overflow
阅读全文
摘要：我们常常需要在文本过长时显示，将超出显示成省略号： 思想为： 首先设置宽度，然后让超出的部分隐藏 如果有超出则在最后显示省略号 让文本不换行 具体css代码为： Html代码就不用写了，一个div 或者span class = "title"即可。
阅读全文
摘要：Css Sprite（优点） 减少图片的字节。 减少网页的http请求，从而大大的提高页面的性能。 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的
阅读全文
摘要：一般用来上下所有居中，但是这时候auto的计算是全屏像素，从而得到满屏 单纯高度的话，只要把left，right去掉即可
阅读全文
摘要：1、去除chrome等浏览器默认发光边框 这样textarea在选中的时候，文字会有点移动，解决方法： 这样也可以解决更改选中时的颜色值，已达到给用户反馈的效果 2、去除IE10+浏览器文本框后面的小叉叉 3、禁止多行文本框textarea拖拽 这样就不能放大缩小 4、resize解析：在这里要提到
阅读全文
摘要：学习博客：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 学习博客：http://caibaojian.com/demo/flexbox/flex-direction.html 掘金博客：https://juejin.im/post/6
阅读全文
摘要：第一种：激活父级元素BFC属性（父级元素设置overflow：auto） 第二种：使用after伪类元素进行清除
阅读全文
摘要： 
浙公网安备 33010602011771号