前端样式
css,less......
aliven1
前端工程师,技术栈:PS、AI、H5、CSS3、JS、TS、jQuery、vue、react、微信小程序、node、express、svn、git、webpack
展开
-
sass中的for和each
sass中的for,each原创 2024-02-02 15:48:26 · 393 阅读 · 0 评论 -
响应式设计小技巧 -- flex和@media的结合
flex和media原创 2023-08-09 15:18:07 · 157 阅读 · 0 评论 -
elementUI中,合并表格行或者列的处理
合并表格之后,受影响的数据行或者列,要使用return重置。原创 2023-03-06 15:05:34 · 226 阅读 · 0 评论 -
element中切换全局样式
2.在watch中监听主题色,拿到link标签的样式结果,使用style标签进行替换。1.设置默认的主题色;原创 2022-10-25 17:56:37 · 198 阅读 · 0 评论 -
elementUI中固定列,导致横向滚动条失效
elementUI中固定列,导致横向滚动条失效原创 2022-09-30 10:39:27 · 762 阅读 · 0 评论 -
css绝对定位定义块元素的高度
htmlcss:main中的绝对定位,top和bottom的组合使用,定义了main的高度原创 2022-07-06 21:00:03 · 601 阅读 · 0 评论 -
伪类和伪元素的区别
伪类伪元素伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;伪元素本质上是创建了一个有内容的虚拟容器;CSS3中伪类和伪元素的语法不同;可以同时使用多个伪类,而只能同时使用一个伪元素;https://www.cnblogs.com/ihardcoder/p/5294927.html...原创 2021-11-02 21:51:17 · 63 阅读 · 0 评论 -
css常用的选择器
一、基本选择器序号 选择器 含义通用元素选择器,匹配任何元素E 标签选择器,匹配所有使用E标签的元素.info class选择器,匹配所有class属性中包含info的元素#footer id选择器,匹配所有id属性等于footer的元素实例:{ margin:0; padding:0; }p { font-size:2em; }.info { background:#ff0; }p.info { background:#ff0; }p.info.error { col转载 2021-10-16 10:54:36 · 414 阅读 · 0 评论 -
浏览器样式重置reset.css
重置浏览器标签的样式表,因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如button标签,在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的,所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。1.百度搜索reset.csshtml,body,div,span,applet,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,co原创 2020-12-30 12:07:10 · 303 阅读 · 0 评论 -
彻底理解nth-child和nth-of-type的区别
第二个元素且为p,颜色为红色p:nth-child(2),p:nth-child(7){ color:red; } :<style> p:nth-child(2),p:nth-child(7){ color:red; }</style><h1>标题</h1><p>这是锻若</p><p>这是锻若</p><span>这是span</span><span原创 2020-10-19 22:43:15 · 285 阅读 · 0 评论 -
flex画三点的色子
原创 2020-09-24 12:27:47 · 298 阅读 · 0 评论 -
响应式布局中的vw-vh
根据CSS3规范,视口单位主要包括以下4个: 1.vw:1vw等于视口宽度的1%。 2.vh:1vh等于视口高度的1%。 3.vmin:选取vw和vh中最小的那个。 4.vmax:选取vw和vh中最大的那个。...原创 2020-09-24 12:25:56 · 512 阅读 · 0 评论 -
水平和垂直居中问题
水平和垂直都居中--不知道子元素尺寸的情况原创 2020-09-23 21:03:45 · 103 阅读 · 0 评论 -
手写clearfix
原创 2020-09-23 20:57:07 · 360 阅读 · 0 评论 -
margin纵向重叠和负值问题
<head> <style> p{ font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom:15px; } </style></head> <body> <p>A</P> <p></p> <p></p> <p></p> &l.原创 2020-09-23 20:48:58 · 429 阅读 · 0 评论 -
强制换行
word-wrap:属性允许长单词或 URL 地址换行到下一行word-break 属性规定自动换行的处理方法。原创 2020-09-22 09:19:45 · 280 阅读 · 0 评论 -
webpack中字体图标的使用
1.下载字体图标到本地,保留上图font中的文件,把涉及字体图标的类文件拷贝到一个文件中,然后修改路径。2.在需要使用的地方,引入该文件即可;原创 2020-09-02 22:20:54 · 239 阅读 · 0 评论 -
css伪元素:before和:after的用法
css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。如下图,是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查。css有一系列的伪元素,如:before,:after,:first-line,:first-letter等,本文就详述一下:before和:after元素的使转载 2020-07-03 18:05:14 · 1510 阅读 · 0 评论 -
块元素垂直水平居中的方法/块元素在body中垂直居中js
方法一:方法二:方法三:方法四:方法五:原创 2020-06-30 12:23:40 · 495 阅读 · 0 评论 -
BFC/IFC/GFC/FFC分别是什么?
BFC原创 2020-06-30 12:16:59 · 2327 阅读 · 0 评论 -
解决移动端Retina屏幕1px边框问题
1.0.5px边框6.viewport+REM转载 2020-06-23 12:51:59 · 300 阅读 · 0 评论 -
不改变行内样式代码,修改图片的宽度
原创 2020-06-23 12:40:09 · 760 阅读 · 0 评论 -
display-visibility-opacity
display: display:none,不渲染;绑定事件不会被触发;visibility: visibility:hidden,渲染;绑定事件不会被触发;opacity:opacity:0,渲染。绑定事件会被触发;原创 2020-06-22 13:28:58 · 128 阅读 · 0 评论 -
图片在盒子中居中
li{width: 25%;height: 100%;float: left; display: -webkit-box; -webkit-box-align:center; -webkit-box-pack:center;}img{ /*宽度和高度谁先到,图片尺寸基准就以谁的尺寸为准,另一边就不涨了*/ max-width: 100%;max-height: 100%;}...原创 2020-06-13 11:08:56 · 1600 阅读 · 0 评论 -
约束显示两行,超出部分隐藏并加点号
.text-overflow(@lineclamp:7){ overflow: hidden; text-overflow:ellipsis; -webkit-line-clamp:@lineclamp; -webkit-box-orient:vertical; display: -webkit-box;}原创 2020-06-02 11:18:12 · 372 阅读 · 0 评论 -
BFC定义页面的独立容器
一个div内部的样式影响到了它外部div的样式1.没有浮动时候的样:2.黄色模块浮动之后,影响了蓝色div的样式原创 2020-05-23 17:41:47 · 260 阅读 · 0 评论 -
flex布局避免父盒子被撑开,滚轮失效问题
弹性盒子Flex Box滚动条原理,避免被撑开,永不失效在HTML中,要实现区域内容的滚动,只需要设定好元素的宽度和高度,然后设置CSS属性overflow 为auto或者scroll:在Flex box布局中,有时我们内容的宽度和高度是可变的,无法确定下来,这时候设置滚动条,可能会失效。只要记住几个关键要素,就可以解决这个问题。1、清楚的知道当前元素的flex flow如果要设置水平滚动条,那么父元素的flex-flow要设置为row,如果要设置纵向滚动条,那么父元素的fl..转载 2020-05-13 13:15:06 · 4430 阅读 · 0 评论 -
flex布局内部数据撑开外部盒子,导致溢出问题
mainboard使用了flex布局定义高度:flex:6;内部盒子定义高度100%,当内部盒子数据动态增加的时候,内部数据会撑开mainboard,这个时候在mainboard加overflow,可以消除溢出;...原创 2019-12-14 15:46:02 · 2050 阅读 · 0 评论 -
elementUI中覆盖原有组件样式写法
为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担,如无法覆盖原有组件的样式。 可以加/deep/ 。深度作用选择器/deep/or>>>如果希望scoped样式中的选择器“深入”,即影响子组件例子:/deep/...转载 2019-11-25 16:41:48 · 1933 阅读 · 0 评论 -
select等与其它元素对齐问题
.frequency{ line-height: 25px; select{ vertical-align: middle; }}1.INPUT和图片按钮对齐:<script type="text/javascript" src="https://...原创 2019-07-29 14:24:55 · 1438 阅读 · 0 评论 -
less中函数执行的条件语句写法
条件语句的条件如果命中多个,都执行,但只渲染最后一个--------------------------------------------------------------------------------------------------------------------------------------------比较运算符和js中基本一致,但是相等运算符,用的是=...原创 2019-03-23 09:36:36 · 3362 阅读 · 0 评论 -
function自调用后面的分号
(function(){var arrA=$('#navbar1').find('a');console.log(arrA.length)})();绿色部分的分号,如果不加,后面有可能出现报错的情况,所以自调用之后的分号一定要加上原创 2017-12-19 13:54:12 · 345 阅读 · 0 评论 -
td中的块元素居中问题
td中的元素,如果是文本,直接给text-align:center,td中的文本就居中了,如果是块元素,想设置宽高度居中,可以直接把元素设置为inline-block,就能用text-align设置居中了,用block可能不好用;...原创 2019-06-15 11:08:47 · 4755 阅读 · 0 评论 -
position:absolute相对于谁定位
1.相对定位:相对于块级元素(或行内块)自身位置进行定位;2.绝对定位:绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的(默认是body); 绝对定位元素相对的元素是它最近的一个祖先,该祖先满足:position的值必须是:relative、absolute、fixed,若没有这样的祖先则相对于body进行定位 ...原创 2019-04-30 11:36:31 · 6770 阅读 · 0 评论 -
CSS中hover改变子元素和其它元素样式
转载 2019-04-28 18:44:53 · 3869 阅读 · 0 评论 -
hbuilder设置less自动编译
设置之后要重启hbuilder原创 2018-04-13 09:33:11 · 1071 阅读 · 0 评论 -
scrollTop的兼容新问题
转载 2018-04-17 15:53:50 · 221 阅读 · 0 评论 -
inline-block元素4px空白间距清除方案
原创 2018-04-03 11:16:27 · 333 阅读 · 0 评论 -
css文字换行问题white-space:pre-line或者white-space:pre-wrap,解决word-wrap:break-word解决不了的
转载 2018-04-02 17:33:38 · 5726 阅读 · 0 评论 -
input中text和buttom没办法对齐问题
原创 2018-04-09 10:54:42 · 272 阅读 · 0 评论