css
文章平均质量分 68
shelleyHLX
这个作者很懒,什么都没留下…
展开
-
Syntax Error: TypeError: this.getOptions is not a function
出现问题场景:vue运行项目过程中报错ERROR Failed to compile with 1 error 下午4:27:58error in ./src/components/AudioComponent/VueAudio.vue?vue&type=style&index=0&id=2c4b1f58&lang=scss&scoped=true&...原创 2022-01-10 16:31:50 · 2689 阅读 · 0 评论 -
CSS现状和如何学习
在20年岁末有幸和一群优秀大学生在一起聊CSS相关的话题,感到非常的荣幸!在此非常感谢平台(阿里巴巴集团.前端练习生计划)给我这样的机会,同时也要非常感谢好友 裕波,墨苒对我的鼓励和支持。在结束直播的时候,说过后面要整理一篇文字版本,由于个人新转团队(互动团队转到 F(x) Team团队),加上自己太懒,所以今天才开始整理文字版本。所幸能在岁末完成,还算是一种补救。希望接下来的内容,对于新接触CSS或对CSS感兴趣的同学有所帮助,更希望有更多的同学能参与阿里巴巴集团练习生计划的学习,并有所获。直播的感觉转载 2022-01-17 14:23:08 · 227 阅读 · 0 评论 -
jqgrid列和表头不对齐的问题
今天在做首页时没用使用表格的模板,结果jqgrid表出现了表头和列不对齐的情况我很奇怪,于是跟其他正常的表格进行对比,发现有一个很奇怪的地方正常对齐的表头正常对齐的表格可以看到正常的表头,width虽然是100px,但是实际上是92+5+2+1=100,表格也是95+2+2+1=100,所以是对齐的而不对齐的表头是这样的表格所以就不对齐了,然而实际上这才是默认正常的。那么是什么属性改变了这一点呢?我采用排除法一个个试验属性。终于发现是b...转载 2021-12-23 16:11:36 · 899 阅读 · 0 评论 -
CSS 函数
CSS 有以下几个函数:函数 描述 CSS 版本 attr() 返回选择元素的属性值。 2 calc() 允许计算 CSS 的属性值,比如动态计算长度值。 3 cubic-bezier() 定义了一个贝塞尔曲线(Cubic Bezier)。 3 hsl() 使用色相、饱和度、亮度来定义颜色。 3 hsla() 使用色相、饱和度、亮度、透明度来定义颜色。 3 linear-gradient() 创建一个线转载 2022-01-17 14:36:08 · 112 阅读 · 0 评论 -
CSS 单位
CSS 有几个不同的单位用于表示长度。一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。长度有一个数字和单位组成如 10px, 2em, 等。数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。对于一些 CSS 属性,长度可以是负数。有两种类型的长度单位:相对和绝对。浏览器支持下表中的数字表示支持该长度单位的最低浏览器版本。长度单位 Chrome IE Firefo转载 2021-12-22 14:13:53 · 70 阅读 · 0 评论 -
CSS tab-size 属性
tab-size:number|length|initial|inherit;例子:pre {tab-size: 16; }pre {-moz-tab-size: 16; } /* 针对 Firefox 的代码 */pre {-o-tab-size: 16; } /* 针对 Opera 的代码 */目前只有 Chrome 支持 tab-size 属性。Firefox 支持另一个可替代该属性的属性,即 -moz-tab-size 属性。Opera 支持另一个可替代该属性的属性,.转载 2021-12-22 14:11:41 · 155 阅读 · 0 评论 -
vh wh calc
vh/vwvh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;视区所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。calcca...转载 2021-11-29 11:22:38 · 112 阅读 · 0 评论 -
li:hover使li中a标签颜色改变
.container .buttons li{ padding: 10px 20px; border: 1px solid #ccc; border-radius: 10px; margin-left: 30px; cursor: pointer;}.container .buttons li a{ text-decoration: none; color: #000; font-size: 18px;}.container .buttons li:hover{ .原创 2021-10-09 15:47:50 · 1076 阅读 · 1 评论 -
弹出窗口的元素定位
弹出窗口的元素和某个元素绑定一起,且弹出窗口可以滚动,元素也随着移动办法:子绝父相,如果要显示的html是不在父元素一起,则弄到一起<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont原创 2021-09-26 10:56:50 · 745 阅读 · 0 评论 -
HTML中元素的定位方式
初中物理就学过,位置是相对的,要有参照物,因此,所有定位都是相对参照物的定位。position 属性: 规定元素的定位类型,该属性的可选值有static、relative、absolute、fixed、inherit。定义了position属性后,经常还要定义相对参照物的偏移量,即left,right,top,bottom属性值,当然,也可以不定义,那样的话,就是在参照物的位置上。float属性: 规定元素是否浮动,其实,这个属性也是定位的一种类型,但搞不懂为什么它没有出现在po...转载 2021-09-26 09:31:05 · 750 阅读 · 0 评论 -
纯CSS设置Checkbox复选框控件的样式
下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中。这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框。样式一转载 2021-08-12 11:11:16 · 6101 阅读 · 0 评论 -
CSS 中已设置的属性怎么去掉?
例子:样式被污染了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...原创 2021-08-12 09:49:33 · 2710 阅读 · 1 评论 -
css:list-style-image
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>ul { list-style-image:url('sqpurple.gif');}</style></head><body><ul><li>Coffe...原创 2021-08-05 16:53:54 · 402 阅读 · 0 评论 -
你真的了解word-wrap和word-break的区别吗?
这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是太拗口了,长得又差不多,导致连背都很难背下来。那它们到底是什么呢?我在mozilla的官网上找到如下的解释:word-wrapword-break我们看到两个解释中都出现了 break lines within words 这样的词汇,说明它们都跟单词内断句又关。然后我们试着翻译一下上面转载 2021-07-20 11:51:14 · 223 阅读 · 0 评论 -
【译】关于vertical-align你应知道的一切
原文地址:Vertical-Align: All You Need To Know通常我们需要垂直对齐并排的元素。CSS提供了一些可实现的方法:有时我用浮动float来解决,有时用position: absolute来解决,有时甚至是“肮脏”地手动添加的margin或padding。我真的不喜欢这些解决方案。float只对齐元素的顶部,且需要手动清除浮动。绝对定位的元素脱离文档流,所以他们不再影响周围的元素。而用修补性的margin或padding打破了最细微变化的东西。但这里还有一个选择:转载 2021-07-19 10:27:54 · 600 阅读 · 0 评论 -
CSS3与CSS的区别有哪些?
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译。 CSS 是用来表现HTML或XML的标记语言。 CSS 是由W3C的CSS工作组发布推荐和维护的. CSS 是编程入门人员的必修课,运用CSS样式可以让页面变得美观。 CSS 语法由三部分构成:选择器、属性和值: selector {property: value}CSS3 是最新的 CSS 标准。在W3Cschool首页,转载 2021-07-05 17:58:53 · 3086 阅读 · 0 评论 -
HTML和HTML5,css和css3的区别有那些?
HTML和HTML5的区别:其实说白了,就是ES5和ES6的区别,无非就是换汤不换药,其实这个说法也不太对,是加了一些调料而已,HTML是前端搭建页面的必须品,但是随着人们开发的需求和速度,后期维护和代码可读性,各个方面的需求不断增加,会发现HTML里面的一些标签满足不了,所以就更新换代,不断的更具需求整合添加了一部分新的元素标签进来,其中常用的有如下这些,如有不全请谅解,仅供参考:新增的结构标签:1、header元素表示页面中一个内容区块或真个页面的标题。2、hgroup元素表示对真个页面转载 2021-07-05 17:49:55 · 665 阅读 · 0 评论 -
CSS3 calc() 函数,height: calc(100% - 70px);
今天做练习的时候遇到了这样一行代码:height: calc(100% - 70px);,100%的高度减去70px???这是什么函数?竟然支持不同单位之间的运算?!通过查阅资料,我终于认识了这个函数——calc()函数。calc()函数是CSS3 提出的,目的是动态改变宽度/高度的变化,适配问题。<div> <div class=“head”>标题</div> <div class=“contain”>内容</div>...转载 2021-07-05 16:29:01 · 2210 阅读 · 1 评论 -
div文字垂直居中的方法有哪些?
首先我们应该知道文字的水平居中比较简单,行级元素设置其父元素的text-aligncenter,块级元素设置其本身的left和rightmargins为auto即可。但是div文字的垂直居中就不是那么简单了,所以我们就来具体看看div文字垂直居中的几种实现方法。 1、vertical-align属性让文字居中 vertical-align值有很多,常用的就是middle,bottom,text-bottom等,然而真实使用的时候,我们会发现这个属性“时灵时不灵”,有些情况下我们加了这个...原创 2021-05-14 11:01:47 · 17310 阅读 · 0 评论 -
SVG学习笔录(一)
SVG可缩放矢量图形(Scalable Vector Graphics)这项技术,现在越来越让大家熟知,在h5的移动端应用使用也越来越广泛了, 下面让我分享给大家svg学习的经验。 HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。一、什么是svg? Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形转载 2021-05-10 19:48:01 · 583 阅读 · 0 评论 -
[译] Tailwind CSS 15 分钟入门
翻译自:https://scotch.io/tutorials/get-started-with-tailwind-css-in-15-minutesTailwind CSS是一个 CSS 框架,它由大量的功能类组成,而不是编写好的组件。使用 Tailwind,后,我发现最让我欣喜的一件事:再也不用重写 CSS 样式类了在 Tailwind 的首页上,有一个很酷的例子,用来展示 Tailwind 如何工作。真实案例本文聚焦在介绍 Tailwind 的一些特性。如果你想直接看一..转载 2021-05-07 17:56:50 · 1819 阅读 · 0 评论 -
CSS 写作建议和性能优化小结
1.前言每一个网页都离不开css,但是对于css,很多开发者的想法就是,css只要能用来布局,把效果图排出来就可以了,其它的细节或者优化,不需要怎么考虑。但是我觉得css可不只是把页面的布局完成就是完事的,还需要考虑很多细节有优化,更不会像大家想得那么简单,在学习当中,如果发现什么技巧或者优化的点,我也会学以致用!那么今天,就分享下我总结的css写作建议和性能优化的一些问题!希望能帮让大家对神奇的css有一个新认识,当然,如果大家觉得还有什么其它的建议。欢迎指点!2.css渲染规则首选,关于cs转载 2021-05-04 17:24:25 · 334 阅读 · 0 评论 -
CSS层叠样式表
一、概念 上课案例下载CSS(层叠样式表):用于控制网页的表现优点: 实现表现和内容相分离(方便维护、错误修改、界面调整更加容易) 便于页面风格的统一和修改(样式重用、高效率开发) 简化网页,提高页面浏览速度(减少文件量,降低服务器带宽成本,加快网页解析速度,有利于SEO) 二、在html中使用css的四种方法1、行内样式:混合在HTML标记里使用,对每个元素单独定义样式<pstyle="color:blue">文字</p>...转载 2021-05-04 16:44:00 · 683 阅读 · 0 评论 -
怎么快速排查冲突的css样式??
在 chrome 浏览器中按 f12 会打开开发者工具,下图会有说明:由于图片被压缩不清楚,我在下面拆开来上传给你看:https://www.imooc.com/wenda/detail/3810911. 细化选择符通过使用组合器(Combinator)将选择器的描述写得更加精确(参考CSS选择器 - MDN),例如对于下述代码片段,如果想给.cellphones中的.apple增加样式,只使用.apple,势必会对.fruit中的.apple也造成影响。...转载 2021-04-26 19:43:37 · 786 阅读 · 0 评论 -
修改placeholder的颜色
<div class="col-sm-3" id="zjyjr"> <label class="col-sm-4 control-label">最近业绩人</label> <div class='col-sm-8'> <input class="form-control" placeholder="最近业绩人" type="text" name="Q__S__LK__entit...原创 2021-04-21 15:11:08 · 255 阅读 · 0 评论 -
CSS 中Font Awesome 图标(附码表)
HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。Font Awesome 传送门:http://fontawesome.dashgame.com/Font Awesome链接:http://pan.baidu.com/s/1gdMEDTx密码: wrac效果图:调用实例:<html><head><title>Font Awesome图标调用实例</title转载 2021-04-19 15:29:28 · 936 阅读 · 0 评论 -
清除html标签的原始样式--yui reset
http://cache.baiducontent.com/c?m=JNDY3ewxhbji2YH5YnDkb1KEj81FWEagOLN8R4lT5bhlrqPj3jPeFRtrcct4xkUGK5UpVnl3UU-fN1toeGerokb8-lbWrtMytj46JCMiEEsyTmuo4Goj2BMk4DCs5I_L&p=9277d20386cc42ad5281de2d02149f&newp=8b2a9713878806ff57ee96745b4797231610db2151d6d01原创 2021-02-07 09:43:11 · 329 阅读 · 0 评论 -
《CSS揭秘》第一章(1)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .btn{ ...原创 2021-02-02 17:51:59 · 243 阅读 · 0 评论 -
CSS小技巧--(1)
flex box的例子https://css-tricks.com/snippets/css/a-guide-to-flexbox/flex box的语法、例子:http://www.ruanyifeng.com/blog/2015/07/flex-examples.htmlhttp://www.ruanyifeng.com/blog/2015/07/flex-grammar.html原创 2021-02-02 14:36:25 · 58 阅读 · 0 评论 -
前端面试题-BFC(块格式化上下文)
一、BFC 的概念1.规范解释块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。2.通俗理解BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。 如果一个元素符合触发 BFC 的条件,则 BFC 中的元素布局不受外部影响。 浮动元素会创建 BFC,则浮动元素内部子元素主要受该浮动元素影响,所转载 2021-02-02 10:54:58 · 363 阅读 · 0 评论 -
CSS中的BFC详解
引言:这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱。你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用。一、何为BFC BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 1、浮动元素,float 除 none 以外的值; 2、定位元素,position(absolute,fixed);...转载 2021-02-02 10:18:08 · 9996 阅读 · 2 评论 -
FLEX布局
https://www.jb51.cc/css/992869.html编程之家收集整理的这篇文章主要介绍了FLEX布局,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。FLEX布局FLEX布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。基础通过指定display: flex来标识一个弹性布局盒子,称为FLEX容器,容器内部的盒子就成为FLEX容器的成员,容器默认两根轴线,水平的主轴与垂直的交叉轴,主轴的开始位置叫做main s转载 2020-12-31 13:54:01 · 75 阅读 · 0 评论