Css
文章平均质量分 59
橙橙鲁
作为一个前端人,无论工作跑偏到哪,始终不忘初心。
展开
-
webstorm 配置 less 自动编译
查了一些都有点偏差,找到方法后记录下~【windows环境下】1. 在有node环境下,安装lessnpm i less -g安装后,会出现一个安装路径:C:\Users\Administrator>npm i less -gC:\Users\Administrator\AppData\Roaming\npm\lessc -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc+ less@3原创 2020-10-28 09:45:22 · 513 阅读 · 1 评论 -
vue 表格固定列,表格另一侧滑动
实现表格固定列,右半部分依旧可以互动效果,如下图:解决思路:写两个<table>:一个是整体的table,table外侧的div保持宽度固定和overflow:scroll,内部的table宽度大于外部才能滚动起来;一个是固定再左侧的table,固定的这个table内容只有固定显示的这部分,同时,position:absolute在左侧,相当于就是给那个表格盖一层;实际效...原创 2020-04-29 13:49:59 · 3774 阅读 · 1 评论 -
CSS 滚动条样式【兼容chrome、Firefox、IE】
css滚动条样式,windows系统下,滚动条比较丑,以下分别是chrome、Firefox、IE5.5+三大浏览器的改写方法。Chrome:原理:通过-webkit相关属性直接可以灵活控制滚动条样式。::-webkit-scrollbar { /* 滚动条宽 */ width: 6px; height: 4px;}::-webkit-scrollbar-thumb { /* 滚...原创 2019-11-18 16:57:23 · 6229 阅读 · 2 评论 -
CSS常用函数整理
1. 计算 calc()这个感觉是最常用也最实用的的一个方法。这个函数,可用在如,左右布局,一边宽度固定,另一边撑开左右宽的情景。calc() 函数用于动态计算长度值。calc(数学表达式)如:width:calc(100% - 20px);<style> .calc{ font-size: 10vw; overflow: hidden; ...原创 2019-09-11 13:39:25 · 867 阅读 · 0 评论 -
:last-of-type , :last-child 无效的问题
:last-of-type 无效碰到的问题:<style> .c:last-of-type{ background:red;}</style>eg 1:<p>这是第一个段落。</p><p class='c'>这是第二个段落。</p><p class='c'>这是第三个段落。</p>...原创 2019-07-09 17:30:01 · 7727 阅读 · 0 评论 -
overflow:hidden 和position: absolute混合使用 失效问题
在有position: absolute时,overflow:hidden有时失效,有时未失效。分析后,总结如下:1. 在absolute(以下为position: absolute简称)层上,若有overflow(以下作为overflow:hidden简称),则不会互相影响,各自功能正常使用。2. 在absolute层的父级上,如有overflow,则overflow对子级(即absolu...原创 2019-03-12 21:27:50 · 11298 阅读 · 1 评论 -
inline, inline-block, block 区别 & 宽高设置 & 与margin、padding共用失效情况 整理
根据demo测试后的总结如下:display:inline;并列显示在同一行 宽高不可设置; 宽高就是它包含的文字或图片的宽高。 margin:只有左右,上下失效 padding:padding-top会超出父级display:inline-block;并列显示在同一行 宽高可设置; 元素宽度在不设置的情况下,和内容的宽度一致 高度在不设置情况下,和内容高度一致(而对于...原创 2018-11-16 16:51:07 · 1605 阅读 · 0 评论 -
行高line-height,border 引起的标签间的缝隙问题
问题现象:使用字体图标,在内部绝对定位,可是总是下面无法对齐,审查元素感觉是字体图标底部空白了一部分。html:&lt;a class="active"&gt;asdfghjkl&lt;/a&gt;css:a.active{ position: relative;}a.active:after { content: "\e812";原创 2019-02-26 15:19:21 · 1645 阅读 · 0 评论 -
CSS动态效果常用整理 animation,transition,transform
一、animation浏览器支持属性 @keyframes 43.0 4.0-webkit- 10.0 16.0 5.0-moz- 9.0 4.0-webkit-...原创 2019-02-26 09:19:41 · 1400 阅读 · 0 评论 -
input button 同在一行 水平对齐、缝隙问题整理
问题1: input和button中间有缝隙&lt;style&gt;.search_input_bar .search_input{ border: 1px solid #DBDBDB; border-radius: 2px 0 0 2px; height: 30px; width: 220px; line-height: 30px; pad...原创 2018-12-19 17:48:04 · 7909 阅读 · 0 评论 -
scss环境搭建 【mac】
mac上本身已经有ruby,直接查看版本号即可 ruby -v (window上需要安装ruby的安装包) 安装sass sudo gem install sass 测试安装成功与否: sass -v在webstorm上配置自动编译 如下图,找到preference – file watchers – 点击左下角的加号 – 出现弹框 – 保存 ...原创 2018-07-12 14:33:16 · 1420 阅读 · 0 评论 -
css 文字两端对齐
制作封面、表格时,会有 这种标签格式,一般有2~4字不等,需要两边对齐。经测试仅仅text-align: justify; 和 display: inline-block; 没有效果。效果图IE7(IE8均可以): chrome效果图: html:<ul class="examined_info"> <li><span class="examined_label">登 记 号:<原创 2017-11-28 16:51:00 · 770 阅读 · 0 评论 -
Mac上Safari浏览器字体变细问题
在Mac上Safari浏览器上,hover时用了transform: translateY(0); 偏移动画后,hover时字总会变细。而Mac的chrome还有window的chrome、Safari也都没有问题。 如下图: 左边是hover时的字体,右侧是正常的字体。 解决: 在hover的css中加:-webkit-font-smoothing: subpixel-antialiase原创 2017-09-25 16:06:52 · 4862 阅读 · 0 评论