Css | 乐趣区

关于css:css中width的小九九

<article class=“article fmt article-content”><h4>一、width话题引入</h4><p>width属性定义元素内容区的宽度，在内容区里面能够减少内边距、边框和外边距。那别离设置 width:auto、width:100% 有什么区别呢？设置box-sizing: border-box对元素宽度有什么影响？</p><h4>二、代码demo</h4><pre><code><!DOCTYPE html><html lang=“en”> <head> <meta charset=“UTF-8” /> <meta name=“viewport” content=“width=device-width, initial-scale=1.0” /> <title>css中width的小九九</title> </head> <style> .parent { width: 500px; height: 560px; background-color: #fff; border: 10px solid #eee; padding: 20px; } .child { background-color: #ccc; border: 10px solid #eee; margin: 20px; height: 100px; text-align: center; } .child2 { width: auto; } .child3 { width: 100%; } .child4 { width: 100%; box-sizing: border-box; } </style> <body> <div class=“parent”> parent <div class=“child child1”>child1: default</div> <div class=“child child2”>child2: width:auto</div> <div class=“child child3”>child3: width:100%</div> <div class=“child child4”>child4: width:100% 并且 box-sizing:border-box</div> </div> </body></html></code></pre><p></p><h4>三、剖析</h4><ol><li>child1：宽度默认auto，和child2统一<br/><br/></li><li>child2：设置width:auto<br/><br/> 最终宽度：document.getElementsByClassName(‘child2’)[0].clientWidth = 440<br/> <strong>即</strong> 500(父元素宽度) - 20(子元素margin)∗2 - 10(子元素border)∗2 = 440<br/><br/></li><li>child3：设置width:100%<br/><br/> 最终宽度：document.getElementsByClassName(‘child3’)[0].clientWidth = 500<br/> <strong>即</strong> 500(父元素宽度)<br/><br/></li><li><p>child4：设置width:100%; box-sizing: border-box;</p><pre><code>box-sizing：border-box;盒子width = 内容的宽度 + padding + border盒子height = 内容的高度 + padding + borderbox-sizing：content-box;盒子width = 内容的宽度盒子height = 内容的高度</code></pre><p><br/>最终宽度：document.getElementsByClassName(‘child4’)[0].clientWidth = 480<br/><strong>即</strong> 500 - 子元素padding - 子元素border = 子元素width</p></li></ol><h4>四、论断</h4><ul><li>width:auto 是子元素的 content + padding + border + margin 撑满父元素的 content。<br/><br/></li><li>width:100% 是子元素的 content 撑满父元素的 content。<br/><br/></li><li>在开发中尽量抉择设置 width: auto，防止子元素设置 padding、border、margin等导致子元素溢出父元素。<br/><br/></li><li>在开发中能够抉择在根元素设置 box-sizing:border-box</li></ul></article> ...

关于css:CSS-mask-与-切图艺术

欢送关注我的公众号：前端侦探作为一名 CSSer，我并不拥护“切图”。相同，有些中央还是更举荐的，特地是那些奇形怪状的 UI，正当的“切图”能够极大地提高布局效率，当然，这里须要一点点技巧，将“切图”和 CSS 现有能力联合起来，一起学习一下吧一、“切图”的局限性传统的“切图”简略暴力，但往往短少适应性。适应性个别有两种，一是尺寸自适应，二是色彩能够自定义。举个例子，有这样一个优惠券款式对于这类款式实现技巧，之前在这篇文章中有具体介绍： CSS 实现优惠券的技巧不过这里稍微不一样的中央是，两个凹陷处都是平滑解决的单纯实现内凹圆角曾经很吃力了，当初还来个平滑圆角？是时候祭出最初大招了--切图。然而，切图真的能解决吗？假如曾经失去了这样一张图片 div{ background: url(a.png) 0/100% 100%;}上面是这张图片在不同尺寸下的体现除非整个布局的尺寸是齐全固定的，否则都会有不同水平的拉伸状况，这是视觉最为禁忌的。另外，整张图是固定的，也无奈间接批改背景色，如果有多种状态，还须要保留多份 .div1{ background: url(a.png) 0/100% 100%;}.div2{ background: url(b.png) 0/100% 100%;}有没有更为灵便的切图形式呢？二、图形运算与CSS MASK常常会和设计稿打交道，对设计软件（Photoshop、Figma等）应该或多或少也有所理解了，这里简略介绍一下图形运算（也称布尔运算），通常有 4 种类型这是一个十分常见的设计技巧，能够将不同的图形通过运算合成新的图形。上面是一个经典案例，就是通过圆的布尔运算绘制的这么好的个性，CSS 中有相似的吗？这就不得不提到CSS mask 了，CSS MASK 能够指定一张图作为遮罩图片。 div{ mask: url(图片); mask: 突变;}遮罩图片能够是图片，也能够是突变。次要原理是显示遮罩图片不通明的局部，通明的则会被裁剪，示意如下然而，很多状况下，繁多的遮罩并不能满足需要，比方这样一个带缺口的圆，繁多的突变可能无奈绘制因而，咱们须要用到和设计中图形布尔运算一样的技巧。这和 CSS mask中的mask-composite是一一对应的 /* Keyword values */mask-composite: add; /* 叠加（默认） */mask-composite: subtract; /* 减去，排除掉下层的区域 */mask-composite: intersect; /* 相交，只显示重合的中央 */mask-composite: exclude; /* 排除，只显示不重合的中央 */利用这个个性，能够很轻易的合成带缺口的圆，也就是说，咱们能够应用 CSS 的形式自在的去裁剪、合成咱们想要的图形。 ...

关于css:cssinjs-从饱受争议到慢慢成为组件库的主流方案

css-in-js 是什么开始前端风行 css html js 离开写，各自负责本人善于的款式、构造、行为，这叫关注点拆散，react 进去后，推出jsx ，在js 中写html ，这样构造和行为都由js解决。React 对 CSS 封装非常简单，就是沿用了 DOM 的 style 属性对象。开始在react 生态中有各种css 集成的计划，css-in-js 是其中一种，开始提出时饱受争议，到当初眼看成为了支流。 css in js 是这样写的 import { makeStyles } from '@griffel/react';const useClasses = makeStyles({ icon: { color: 'red', paddingLeft: '5px' },});function Component() { const classes = useClasses(); return <span className={classes.icon} />;}有几个用支流的组件库，都在用 css in js 计划。应用 css-in-js 计划的组件库Ant DesignAnt Design 5.0 版本从应用了很久的less 切换到 css-in-js 计划，过后引起很多人的探讨，大家都认为 css-in-js 的计划减少了渲染工作，会影响组件的渲染性能。 ...

关于css:最大的-zindex-值是多少

明天看到一个投票挺有意思的，投票问题是“What's the largest z-index value you can specify?”，能够指定的最大 z-index 值是多少？咱们在开发中常应用的有相似0、1、2、-9999、9999等值，然而很少会去思考 z-index 属性的范畴。那这个最大值到底是多少呢？和投票后果是否统一？本文将从属性介绍、官网文档定义、不同浏览器可取值来剖析。 1.z-index属性z-index: auto | <integer> | inherit;z-index 属性能够被设置为关键字 auto 或 <integer>。 auto：盒子不会创立一个新的部分层叠上下文。盒子在以后层叠上下文的层叠等级是 0。<integer>：盒子在以后层叠上下文的层叠等级就是 <integer> 的值。盒子还会创立一个部分层叠上下文。这意味着该元素的后辈元素不会和该元素的内部元素比拟 z-index。2.W3C 文档中的形容https://www.w3.org/TR/CSS21/syndata.html#numbers Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and is not a negative number. ...

关于css:译这8个CSS小技巧你知道吗

前言在网页设计和前端开发中，CSS属性是十分重要的一部分。把握罕用的CSS属性不仅能够使你的网页看起来更好看，还能晋升用户体验，明天小编为大家介绍8个常见的CSS小技巧： 1.批改滚动条款式下图是咱们常见的滚动条，当初须要扭转滚动条的宽度和色彩了，并把它画的圆一点。（常见的滚动条）能够用::-webkit-scrollbar来实现： /*设置滚动条的宽度*/::-webkit-scrollbar{ width: 10px; } /*将轨道改为蓝色，并设置圆形边框*/::-webkit-scrollbar-track{ background-color: blue; border-radius: 10px; } /* 将滚动条设置为灰色并将其设置为圆形*/::-webkit-scrollbar-thumb{ background: gray; border-radius: 10px } /*悬停时呈深灰色*/::-webkit-scrollbar-thumb:hover{ background: darkgray; } （扭转之后的滚动条） 2.批改光标停留在页面上的款式个别状况下鼠标的款式是一个箭头，扭转鼠标光标的款式为其余类型： /*类为first的元素，设置鼠标为不可用状态。 */ .first{ cursor: not-allowed; } /* 类为second的元素，将鼠标指针设置为放大镜成果 */ .second{ cursor: zoom-in; } /* 类为third的元素，将鼠标指针设置为十字准星形态*/ .third{ cursor: crosshair; } （扭转之后的光标） 3.放弃组件的纵横比大小在构建响应式组件的时候，组件的高度与宽度的不协调常常会导致视频和图像会呈现拉伸的状况，影响读者的观感，因而咱们须要设置组件的纵横比属性： .example{ /* 设置纵横比 */ aspect-ratio: 1 / .25; /* 设置宽度后，高度主动设置 */ width: 200px; /*设置边框.*/ border: solid black 1px; }设置了宽度之后，咱们将主动失去等于125像素的高度，以放弃长宽比。 ...

关于css:如何使用Grid中的repeat函数

在本文中，咱们将摸索 CSS Grid repeat() 函数的所有可能性，它容许咱们高效地创立 Grid 列和行的模式，甚至无需媒体查问就能够创立响应式布局。不要反复本人通过 grid-template-columns 和 grid-template-rows 属性，咱们能够显式地设置网格中的行数和列数，并指定它们的大小。如果咱们心愿多行和/或多列的大小雷同，这可能会变得反复。 repeat()函数能够将咱们从反复中解救出来。举个例子，咱们可能会这么写： grid-template-columns: 1fr 1fr 1fr 1fr 1fr;应用repeat()，能够这么写： grid-template-columns: repeat(5, 1fr);在下面的例子中，repeat()函数能够让咱们指定须要多少列（5列），以及列的大小（1fr，即可用空间的几分之一）。这样，咱们的代码就会更高效、更易读。这只是一个简略的例子。上面咱们将看到，咱们还能够用 repeat() 函数做很多事件。上面的截图显示了上述代码的一个简略演示。一篇蕴含十个 div 的文章分为五列。 repeat函数的的选项实际上，咱们能够在 repeat() 的括号内做很多事件。它接管两个参数，两头用逗号隔开。第一个参数代表"计数"，第二个参数代表"轨道"：repeat(<count>, <tracks>)。(轨道是一列或一行的通用名称）。第一个参数能够是以下三种之一：数字（比方1，2，3）auto-fit关键字auto-fill关键字显然，数字值设定了特定的轨道数。然而，auto-fit和auto-fill能够依据可用空间的大小，设置不同数量的轨道。这使得它们在没有媒体查问的响应式布局中十分不便。上面咱们将对它们进行具体介绍。第二个参数指定了要反复的轨道数。可选值包含：长度值，可应用单位包含fr、px、em、%和ch等等min-content关键字max-content关键字auto关键字minmax()函数，其能够嵌套min()或者max()函数fit-content()函数命名线正如你所看到的，这个参数有很多可能的选项，它们看起来可能有点凌乱，尤其是当几个选项组合在一起的时候。在此，咱们将尽量把事件简单化，免得陷入凌乱。在大多数状况下，轨道参数是相当简略和直观的。设置反复列在摸索 repeat() 能够应用的各种参数之前，值得注意的是 repeat() 能够用来创立列模式。例如，请看上面这段有六列网格的超长代码： article { grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;}能够应用repeat()这么改写： article { grid-template-columns: repeat(3, 1fr 2fr);}这会通知浏览器反复一个模式三次--先是 1fr 宽的一列，而后是 2fr 宽的一列。应用长度值咱们曾经在 repeat() 中应用过 1fr 的长度值。应用 fr 单位的益处是，它能够依据可用空间确定轨道的大小，而无需放心可用空间的多少。不过，咱们也能够依据须要应用其余长度单位。 ...

关于css:vue2中使用unocss在ie11-不能正常显示unocss的颜色设置

前景ie11 不能失常显示unocss的色彩设置：“--un-text-opacity: 1 !important; color: rgba(213,147,197,var(--un-text-opacity));” IE11 目前是无奈反对 CSS 变量（自定义属性）和 rgba 中应用的 var() 函数。为了在 IE11 中应用 UnoCSS，你须要执行额定的步骤来转换这些古代 CSS 个性为 IE11 能够了解的款式。思路解决方案方法，能够应用 PostCSS 插件，postcss-custom-properties 和 postcss-color-function，来解决这些不兼容性。步骤装置须要的 PostCSS 插件：npm install postcss-custom-properties postcss-color-function --save-dev更新 PostCSS 配置：如果你应用的是 postcss.config.js，则能够如下配置：module.exports = { plugins: [ require('postcss-custom-properties')(), require('postcss-color-function')(), // ... 其余 PostCSS 插件 ],};如果应用 Vue CLI 并在 vue.config.js 中配置 PostCSS，也能够在那里增加这些插件。从新构建我的项目从新构建我的项目。这将通过上述 PostCSS 插件解决你的 CSS，将古代的 CSS 个性转换为 IE11 能够了解的款式。而后UnoCSS 生成的色彩应该可能在 IE11 中失常显示。

关于css:原生CSS嵌套简介

嵌套是应用Sass等CSS预处理器的外围起因之一。当初，该性能曾经以相似的语法呈现在规范浏览器CSS中。你是否在构建零碎时放弃对预处理器的依赖？CSS嵌套能够节俭输出工夫，并使语法更易于浏览和保护。迄今为止，你必须像这样键入残缺的选择器门路： .parent1 .child1,.parent2 .child1 { color: red;}.parent1 .child2,.parent2 .child2 { color: green;}.parent1 .child2:hover,.parent2 .child2:hover { color: blue;}当初，你能够将子选择器嵌套在父选择器中，比方： .parent1, .parent2 { .child1 { color: red; } .child2 { color: green; &:hover { color: blue; } }}你能够嵌套任意层级的选择器，但要留神不要超过两到三级。嵌套层级没有技术层面的限度，然而会让代码更难浏览，并且让最终CSS变得很简短。直到2023年四月，暂没有浏览器反对CSS嵌套语法。你须要应用 CSS 预处理器（如 Sass、Less 或 PostCSS）进行构建步骤，以便将嵌套代码转换为惯例的全选择器语法。嵌套性能现已在Chrome 112+和Safari 16.5+中实现，Firefox将在2023年晚些时候提供反对。 CSS原生嵌套规定你能够将任何选择器嵌套到另一个选择器中，但必须以符号结尾，如&，.（用于HTML class），#（用于HTML id），@（用于媒体查问），:，::，*，+，~，>，或 [。换句话说，它不能间接援用HTML元素。上面的代码有效，<p>选择器不会被解析： .parent1 { /* FAILS */ p { color: blue; }}修复该问题最简略的办法就是应用&，其与Sass雷同的形式援用以后选择器： .parent1 { /* WORKS */ & p { color: blue; }}或者，能够这么解决： ...

关于css:写一写会经常用到的CSS样式

批改滚动条款式 ::-webkit-scrollbar { width: 10px; height: 10px;}/*定义滚动条轨道内暗影+圆角*/::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba($color: #ffffff, $alpha: 0.7);}/*定义滑块内暗影+圆角*/::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3); &:hover { background-color: rgba(0, 0, 0, 0.53); cursor: pointer; }}禁止在页面中选中文本进行复制 -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*晚期浏览器*/ -moz-user-select:none; /*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; /*用户是否可能选中文本*/字体超出长度以...模式展现 width: 50px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-webkit-line-clamp: 2; //这个是管制显示几行当前...的// 还有一些能够参考word-break:break-all;// 以英文字母作为换行根据word-wrap:break-word; // 以英文单词作为换行根据white-space:pre-wrap;// 以中文作为换行根据让文字平分宽度间距对齐 .tagLiTitle { width: 70px; height: 20px; margin-right: 20px; text-align: justify; color: #7cb305; i { display: inline-block; width: 100%; } }应用的时候<div class="tagLiTitle">XXX<i></i></div>

关于css:玩转CSS基础CSS盒模型

CSS盒模型什么是CSS盒模型？残缺的 CSS 盒模型利用于块级盒子，内联盒子只应用盒模型中定义的局部内容。模型定义了盒的每个局部 —— margin, border, padding, and content ，合在一起就是在页面上看到的内容。为了减少一些额定的复杂性，有一个规范盒模型和代替（IE）盒模型。组成盒模型须要的内容： content：内容区域，通过width和height设置。padding：内边距，内容区域外的空白区域，通过padding设置。border：边框，包裹内容区域和内边距，通过border设置。margin：外边距，盒子和其余元素间接的空白区域，通过margin设置。margin不会计入盒子的大小规范盒模型浏览器默认应用的是规范盒模型。给规范盒模型设置width和height，理论设置的是content内容区域，盒子的宽高须要再加上padding和border。盒子的宽度 = width + (padding 2) + (border 2)盒子的高度 = height + (padding 2) + (border 2)设置属性 box-sizing: content-box规范盒模型示例 div { width: 200px; height: 200px; padding: 10px; border: 5px solid red; margin: 10px;} 以后规范盒模型div的宽度为230px = 200 + 10 + 10 + 5 + 5，高度为230px = 200 + 10 + 10 + 5 + 5。代替（IE）盒模型IE浏览器默认应用代替盒模型，IE8+反对应用box-sizing进行切换如果须要应用代替盒模型，设置box-sizing: border-box属性即可。 ...

关于css:CSSflex

关于css:CSS3的动画属性

transition、animation和transform是CSS3中三个制作动画的重要属性，本篇文章次要对其进行学习理解。一、transitiontransition容许css的属性值在肯定的工夫区间内平滑地过渡。这种成果能够在鼠标单击、取得焦点、被点击或对元素任何扭转中触发，并圆滑地以动画成果扭转CSS的属性值。transition ：transition-property || transition-duration || transition-timing-function || transition-delay; 复制代码transition次要蕴含四个属性值：执行变换的属性：transition-property，变换连续的工夫：transition-duration，在连续时间段，变换的速率变动：transition-timing-function，变换延迟时间：transition-delay。1. transition-propertytransition-property: none || all || property; 复制代码transition-property是用来指定当元素其中一个属性扭转时执行transition成果。none: 没有属性会取得过渡成果；all: 所有属性都将取得过渡成果,也是其默认值；property: 定义利用过渡成果的 CSS 属性名称列表，列表以逗号分隔。2. transition-durationtransition-duration: time; 复制代码transition-duration是用来指定元素转换过程的持续时间，取值time为数值，单位为s（秒）或者ms(毫秒)，其默认值是0，也就是变换时是即时的。3. transition-timing-functiontransition-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-bezier(n,n,n,n); 复制代码以上具体取值含意如下：值形容linear规定以雷同速度开始至完结的过渡成果。ease规定慢速开始，而后变快，而后慢速完结的过渡成果。ease-in规定以慢速开始的过渡成果。ease-out规定以慢速完结的过渡成果。ease-in-out规定以慢速开始和完结的过渡成果。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义本人的值。可能的值是 0 至 1 之间的数值。4. transition-delaytransition-delay: time; 复制代码transition-delay是用来指定一个动画开始执行的工夫，也就是说当扭转元素属性值后多长时间开始执行transition成果，其取值time为数值，单位为s（秒）或者ms(毫秒)，默认大小是"0"，也就是变换立刻执行，没有提早。5. 示例html代码<div class="one"></div> 复制代码css代码.one { width: 100px; height: 100px; margin: 200px auto; background-color: #cd4a48; -webkit-transition: width, height 2s ease; -moz-transition: width, height 2s ease; -ms-transition: width, height 2s ease; -o-transition: width, height 2s ease; transition: width, height 2s ease; ...

关于css:CSS架构之BEM设计模式

为什么须要CSS架构？其实在日常开发CSS当中，会遇到许多的问题，应用设计模式可能很好的解决。例如在日常开发我的项目，须要组件化时，组件外部的class款式类治理就十分的芜杂。大部分公司的命名规定还是只有大小驼峰、应用英文等这些根底的命名规定。常常会本人都忘了本人命名的css是啥，应用设计模式就能很好的解决该问题。 CSS架构也能让html与css更好的解耦，能更好的抽取款式中可复用的局部，使你的html代码更具语义，也合乎了HTML5中想让日常开发更具备语义化的理念。理解这些设计模式无疑会使css代码更具模块化，块款式不依赖于页面上的其余元素，因而也较好的防止了遇到级联问题。多人合作的时候，也能高效防止命名反复问题。最重要是提取精髓，灵便利用，更加的标准规模化，在达到提高效率的同时兼顾性能。最重要的是，不必再为命名CSS搜索枯肠了。 BEM的简介BEM就是： B代表：Block（块），独立实体，独立的意义，每个页面都能够看做是多个Block组成,见下图1-1；E代表：Element（元素），block 的一部分，没有独立意义，是组件下的一个元素，多个元素造成一个组件，见下图1-2；M代表： Modifier （修饰符），block 或 element 上的标记，是形容Block或Element的属性或状态，同一Block或Element能够有多个Modifier。BEM全称BlockElementModifier是由Yandex（俄罗斯最驰名的互联网企业）的开发团队提出的前端开发实践。通过Block、Element、Modifier来形容页面，通过 _ 与 -- 连贯，要害就是为了解决多人合作的命名问题。 <p align=center>[1-1.block图解]</p> <p align=center>[1-2.Element图解]</p> BEM的根底应用模块block（）没有前缀，多个单词用 - 连贯，是对一个组件名形象。例如： //一个一般列表的a标签 <li><a class='li-a'>...</a></li> //一个在导航栏的a标签 <li><a class='nav-li-a'></a></li> //一个被选中的在导航栏的a标签 <li><a class='nav-li-a is-active'></a></li> //一个在头部的图片 <header> <img class="header-img" src="#" alt="#"> </header>元素Element元素在模块之后，能够有多个层级，以 __ 连贯。element 也不是死板的，是依据具体的需要演变的，两头也能够应用 - 来演变。<li class="nav--main__item js-nav--main__item"><a>...</a></li><li class="nav--main__item js-nav--main__item"><a>...</a></li><li class="nav--main__item js-nav--main__item"><a>...</a></li> //几个一般列表的a标签 <li> <a class='li-a__item'>...</a> <a class='li-a__item'>...</a> <a class='li-a__item'>...</a> </li> //几个在导航栏的a标签 <li> <a class='nav-li-a__item'></a> <a class='nav-li-a__item'></a> <a class='nav-li-a__item'></a> </li>润饰Modifier某元素、或者某模块特地的状态，必须有一个状态名和状态值，应用 _ 链接次要针对的是 Block 自身,是对于Block做润饰。例如有：色彩大小用处案例： //一个用作logo的图片 <header> <img class="header-img_logo" src="#" alt="#"> </header>应用BEM的益处使html代码更具语义使css代码更具模块化多人合作的时候，也能高效防止命名反复问题更加的标准规模化加重CSS命名懊恼

关于css:不要图片CSS实现圆角边框渐变色背景透明

前言不要图片？CSS实现圆角边框渐变色+背景通明，最近在工作中经常实现这些成果，速速来Get吧~ 文末分享源代码。记得点赞+关注+珍藏！ 1.实现成果 2.实现原理border-image： border-image CSS 属性容许在元素的边框上绘制图像。这使得绘制简单的外观组件更加简略，也不必在某些状况下应用九宫格了。应用 border-image 时，其将会替换掉border-style 属性所设置的边框款式。咱们都晓得，实现一个边框渐变色能够用border-image，然而border-image不反对圆角；那么如何通过一些办法，去实现边框圆角呢？ border-image: linear-gradient( 115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b ) 2 2;3.实现步骤办法一：background-clip ：content-box, border-box毛病：背景无奈通明 background-clip：规定背景的绘制区域语法： background-clip: border-box|padding-box|content-box;值形容border-box背景被裁剪到边框盒padding-box背景被裁剪到内边距框content-box背景被裁剪到内容框background-origin: background-Origin属性指定background-position属性应该是绝对地位。留神如果背景图像background-attachment是"固定"，这个属性没有任何成果。绘制一个标签，为其设置相应的宽高 <div class="flex-column j_c">background-clip</div>div { cursor: pointer; position: relative; width: 180px; height: 60px; font-size: 15px; color: #e2fffd; transition: all 0.5s ease-in-out; position: relative;}设置背景色彩为边框色彩+元素背景色，设置background-origin，以及background-clip，并设置通明色边框 div:nth-child(1) { --bg: linear-gradient(180deg, #346575 0%, #1a283b 100%); --border: linear-gradient(270deg, #455364, #aec9e9, #455364); border: 1px solid transparent; /* var(--bg)背景色 var(--border)边框色 */ background-image: var(--bg), var(--border); background-origin: border-box; background-clip: content-box, border-box; border-radius: 10px;}该办法不能设置通明色的背景办法二：伪元素叠加毛病：背景无奈通明绘制一个标签，设置背景色彩为边框渐变色的色值，设置绝对定位，层级设置为1<div class="flex-column j_c">伪元素</div> ...

关于css:UnoCSS给了我一个不用tailwindcss的理由

雷同的原由 & 前言如果你没有据说过 tailwindcss 或者 unocss，请先 return 先去理解一下。开发上：可能为你甚至你们的前端团队节俭很多写款式的工夫，也能让你或者你们的我的项目开发体验有很大晋升生产上：你们的我的项目打进去的包体积中的款式代码占比将忽然骤降而后趋于不变。书接上回之前我写过一篇文章给我一个你不必tailwindcss的理由！，极力推荐应用 tailwindcss 来晋升开发效率和体验，尤其是款式代码的体验会有质的晋升。当然款式代码打包体积的缩小也能够起到优化咱们整体前端我的项目的作用。然而为什么有这篇文章了呢？因为托尼老师给了我不必 tailwindcss 的理由，无奈回绝的理由，就是咱们明天的配角 UnoCSS 为什么我换到了UnoCSStailwindcss 和 UnoCSS 都是原子化CSS模式实现的一种，为什么当初我更举荐 UnoCSS ，接下来就讲一下 UnoCSS 的杀手级亮点：极致性能这里我借用托尼老师的话： No parsing, no AST, no scanning, it's INSTANT (5x faster than Windi CSS or Tailwind JIT). 跳过解析，不应用 AST从外部实现上看，Tailwind 依赖于 PostCSS 的 AST 进行批改。思考到在开发过程中，这些工具 CSS 的并不常常变动，UnoCSS 通过十分高效的字符串拼接来间接生成对应的 CSS 而非引入整个编译过程。同时，UnoCSS 对类名和生成的 CSS 字符串进行了缓存，当再次遇到雷同的实用工具类时，它能够绕过整个匹配和生成的过程。当初说是比 tailwindcss 快5倍，其实当年可是比 tailwindcss JIT 模式快200倍的存在，前面 tailwindcss 应该是做了大量的优化工作，才让托尼老师改口称5倍快了。齐全可定制，不是一个框架，而是引擎相比于 tailwindcss 必须把原子类写到 class 外面， UnoCSS 提供了更多可选计划，并且兼容多种格调的原子类框架，除了 tailwindcss ，同样反对 Bootstrap， Tachyons，Windi CSS ...

关于css:只有拐角的css样式

如图下图html 代码 <div class="corner-box"> <div class="corner-top"></div> <div class="corner-bottom"></div> <p>预警次数TOP6指标散布</p></div>css 代码 .corner-box { float: left; cursor: pointer; user-select: none; width: 190px; height: 35px; line-height: 35px; font-size: 16px; position: relative; padding-left: 10px; background-color: #ecf8ff; @corner-width: 8px; @corner-height: 8px; @corner-border: 1px solid #43bafe; @corner-fix: -4px; .corner-base() { content: ''; position: absolute; width: @corner-width; height: @corner-height; border: @corner-border; } .corner-top { &::before { .corner-base(); left: @corner-fix; top: @corner-fix; border-bottom: none; border-right: none; } &::after { .corner-base(); right: @corner-fix; top: @corner-fix; border-bottom: none; border-left: none; } } .corner-bottom { &::before { .corner-base(); left: @corner-fix; bottom: @corner-fix; border-top: none; border-right: none; } &::after { .corner-base(); right: @corner-fix; bottom: @corner-fix; border-top: none; border-left: none; } } }

关于css:深入理解CSS字符转义行为

深刻了解CSS字符本义行为深刻了解CSS字符本义行为前言为什么要本义？CSS 本义什么是非法css的表达式左半局部右半局部练习参考链接前言在日常的开发中，咱们常常写css。比方常见的按钮: <button class="btn"></button>，咱们往往写出这样的款式 .btn { display: inline-flex; cursor: pointer; user-select: none; /* ..more decl.. */}然而咱们有时候也会见到这样的元素: <div class="2xl:text-base">Hello world</div> 与之对应失效的CSS款式为： @media (min-width: 1536px) { .\32xl\:text-base { font-size: 1rem; line-height: 1.5rem; }}这时候就纳闷了，我明明写的是 2xl:text-base 啊？\:这个本义还好说，\3 这个又是哪来的呢？本篇文章就来从 W3C 的角度，对 css本义行为进行揭秘。为什么要本义？咱们先把眼光晋升一些，其实本义 (Escaping)这个行为，在各个语言零碎中都存在，小到正则表达式，html，css，大到 javascript 或者其余成熟的编程语言，都多少存在着这种行为。那些须要本义的字符，往往是和语言中的特定关键字(keywords/meta)产生了抵触，所以被迫让位。比方，正则表达式中的 . 就是一个元字符，代表的是匹配任意单个除了换行符的字符。要想匹配 . 就须要本义一下写成 \.。 html 中的 <,> 须要写成 <，>，不然就会和 html 中的标签匹配形式(<div></div>)产生抵触。而 javascript 中咱们也常常写出这样的单/双引号字符串 'i\'m a "happy" fool' or "i'm a \"happy\" fool"。 ...

关于css:Wallys-launches-highperformance-TriBand-ipq4019qca9882

Fast forward to Wi-Fi 6 era. Around the time of the introduction of the Wi-Fi 6, regulatory agencies around the world released new unlicensed spectrum in the 6GHz band which is more than double the spectrum available in the other two bands. Wi-Fi 6 operation in the 6GHz band is referred to as Wi-Fi 6E to distinguish it from Wi-Fi 6 operation in 2.4GHz and 5GHz bands. What is Tri-Band?Tri-Band Wi-Fi refers to a wireless networking technology that utilizes three separate frequency bands to transmit data and provide Wi-Fi connectivity. In a typical tri-band setup, two frequency bands are in the 5 GHz range, and one is in the 2.4 GHz range. Each band operates independently, allowing devices to connect to different bands simultaneously. ...

关于css:CSS巧技-你不知道的zIndex层级问题

前言问题：# 为什么z-index值大的却在z-index小的上面？上面带你一探到底 css为盒模型的布局提供了三种不同的定位计划失常文档流浮动定位最初一种计划（特指相对定位）将会把元素从失常文档流中齐全移走，其最终的落脚点将取决于开发者。通过设置 top，left，bottom 和 right 的值，你能够在二维空间中对元素进行定位，但 CSS 同时也容许你应用 z-index 把它搁置在三维空间中。外表看起来，z-index 仿佛是一个很简略的属性，你给它设置哪个值，元素就会位于 y 轴的哪个地位，就这样。但它实际上并没有咱们设想的这么简略，这个属性背地是一系列决定元素所在层级的规定。 z-index的根底概念x 轴代表程度方向，y 轴代表垂直方向，z 轴则代表咱们的眼光向页面（屏幕）看进去的时候，各元素的布局状况。屏幕是一个二维立体，所以咱们实际上是看不到z轴的，z轴实际上是通过透视的模式展现的。也就是说，多个元素共享同一块二维平民啊时，友得元素在顶部，有的元素在底部，因而而感触到z轴的存在。 css容许咱们给z-index设置三种值来决定某个元素在z轴方向上的地位。 auto（默认值）重叠程序与父元素相等number 元素的重叠程序，能够为正整数，负整数或者0inherit 规定应该从父元素继承z-index属性的值如果两个元素在定位之后共享同一块二维空间，那么在这块空间中，z-index越大的元素将会笼罩z-index较小的元素。层叠上下文和层叠等级什么是层叠上下文？ MDN定义：咱们假设用户侧面向（浏览器）视窗或网页，而 HTML 元素沿着其绝对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性依照优先级程序占据这个空间。什么是层叠等级？在层叠上下文中，子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被主动视为父级层叠上下文的一个独立单元。这样就产生了层叠等级，层叠上下文依据层叠等级决定元素在页面的层叠程序。在一个层叠上下文中，一共可能呈现七个层叠等级，从最低到最高排列，顺次是：等级层叠元素1背景和边框：造成层叠上下文的元素的背景和边框，它是整个上下文中层叠等级最低的2Z-Index 为正数：设置了 z-index 为正数的子元素以及由它所产生的层叠上下文3块级盒模型：位于失常文档流中的、块级的、非定位的子元素4浮动盒模型：浮动的、非定位的子元素5内联盒模型：位于失常文档流中的、内联的、非定位的子元素6Z-index 为 0：设置了 z-index 为 0 的、定位的子元素以及由它所产生的层叠上下文7Z-Index 为负数：设置了 z-index 为负数的、定位的子元素以及由它所产生的层叠上下文，它是整个上下文中层叠等级最高的总结：层叠上下文能够蕴含在其余层叠上下文中，并且一起创立一个层叠上下文的层级。每个层叠上下文都齐全独立于它的兄弟元素：当解决层叠时只思考子元素。每个层叠上下文都是自蕴含的：当一个元素的内容产生层叠后，该元素将被作为整体在父级层叠上下文中按程序进行层叠。Note: 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创立层叠上下文。能够这样说，没有创立本人的层叠上下文的元素会被父层叠上下文异化。示例每个被定位的元素都创立了单独的层叠上下文，因为他们被指定了定位属性和 z-index 值。咱们把层叠上下文的层级列在上面： Root DIV #1DIV #2DIV #3 DIV #4DIV #5DIV #6 ...

关于css:flexcss-快速布局

/*! https://github.com/lzxb/flex.css */[flex],[flex]>*,[flex]>[flex] { overflow: hidden}[flex] { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex}[flex]>* { display: block}[flex]>[flex] { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex}[flex~="dir:left"] { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row}[flex~="dir:right"] { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: end}[flex~="dir:top"] { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column}[flex~="dir:bottom"] { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-pack: end}[flex~="main:left"] { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start}[flex~="main:right"] { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end}[flex~="main:justify"] { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between}[flex~="main:center"] { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center}[flex~="cross:top"] { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start}[flex~="cross:bottom"] { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end}[flex~="cross:center"] { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center}[flex~="cross:baseline"] { -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; -ms-grid-row-align: baseline; align-items: baseline}[flex~="cross:stretch"] { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch}[flex~="box:mean"]>*,[flex~="box:first"]>*,[flex~="box:last"]>*,[flex~="box:justify"]>* { width: 0; height: auto; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1}[flex~="box:first"]>:first-child,[flex~="box:last"]>:last-child,[flex~="box:justify"]>:first-child,[flex~="box:justify"]>:last-child { width: auto; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0}[flex~="dir:top"][flex~="box:mean"]>*,[flex~="dir:top"][flex~="box:first"]>*,[flex~="dir:top"][flex~="box:last"]>*,[flex~="dir:top"][flex~="box:justify"]>*,[flex~="dir:bottom"][flex~="box:mean"]>*,[flex~="dir:bottom"][flex~="box:first"]>*,[flex~="dir:bottom"][flex~="box:last"]>*,[flex~="dir:bottom"][flex~="box:justify"]>* { width: auto; height: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1}[flex~="dir:top"][flex~="box:first"]>:first-child,[flex~="dir:top"][flex~="box:last"]>:last-child,[flex~="dir:top"][flex~="box:justify"]>:first-child,[flex~="dir:top"][flex~="box:justify"]>:last-child,[flex~="dir:bottom"][flex~="box:first"]>:first-child,[flex~="dir:bottom"][flex~="box:last"]>:last-child,[flex~="dir:bottom"][flex~="box:justify"]>:first-child [flex~="dir:bottom"][flex~="box:justify"]>:last-child { height: auto; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0}[flex-box="0"] { -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0}[flex-box="1"] { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1}[flex-box="2"] { -webkit-box-flex: 2; -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; -webkit-flex-shrink: 2; -ms-flex-negative: 2; flex-shrink: 2}[flex-box="3"] { -webkit-box-flex: 3; -webkit-flex-grow: 3; -ms-flex-positive: 3; flex-grow: 3; -webkit-flex-shrink: 3; -ms-flex-negative: 3; flex-shrink: 3}[flex-box="4"] { -webkit-box-flex: 4; -webkit-flex-grow: 4; -ms-flex-positive: 4; flex-grow: 4; -webkit-flex-shrink: 4; -ms-flex-negative: 4; flex-shrink: 4}[flex-box="5"] { -webkit-box-flex: 5; -webkit-flex-grow: 5; -ms-flex-positive: 5; flex-grow: 5; -webkit-flex-shrink: 5; -ms-flex-negative: 5; flex-shrink: 5}[flex-box="6"] { -webkit-box-flex: 6; -webkit-flex-grow: 6; -ms-flex-positive: 6; flex-grow: 6; -webkit-flex-shrink: 6; -ms-flex-negative: 6; flex-shrink: 6}[flex-box="7"] { -webkit-box-flex: 7; -webkit-flex-grow: 7; -ms-flex-positive: 7; flex-grow: 7; -webkit-flex-shrink: 7; -ms-flex-negative: 7; flex-shrink: 7}[flex-box="8"] { -webkit-box-flex: 8; -webkit-flex-grow: 8; -ms-flex-positive: 8; flex-grow: 8; -webkit-flex-shrink: 8; -ms-flex-negative: 8; flex-shrink: 8}[flex-box="9"] { -webkit-box-flex: 9; -webkit-flex-grow: 9; -ms-flex-positive: 9; flex-grow: 9; -webkit-flex-shrink: 9; -ms-flex-negative: 9; flex-shrink: 9}[flex-box="10"] { -webkit-box-flex: 10; -webkit-flex-grow: 10; -ms-flex-positive: 10; flex-grow: 10; -webkit-flex-shrink: 10; -ms-flex-negative: 10; flex-shrink: 10}

关于css:CSS层叠上下文层叠等级层叠顺序和zindex

一、层叠上下文层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1标准中，每个盒模型的地位是三维的，别离是立体画布上的X轴，Y轴以及示意层叠的Z轴。个别状况下，元素在页面上沿X轴Y轴平铺，咱们觉察不到它们在Z轴上的层叠关系。而一旦元素产生重叠，这时就能发现某个元素可能笼罩了另一个元素或者被另一个元素笼罩。如果一个元素是层叠上下文元素，咱们能够了解为这个元素在Z轴上就“出人头地”，最终体现就是它离屏幕观察者更近。你能够把层叠上下文元素了解为了解为该元素当了官，而其余非层叠上下文元素则能够了解为普通群众。但凡“当了官的元素”就比一般元素等级要高，也就是说元素在Z轴上更靠上，更凑近观察者。二、层叠等级层叠等级(stacking level，叫层叠级别/层叠程度也行)，决定了同一个层叠上下文中元素在z轴上的显示程序。比如说：处于层叠上下文中的元素，就像是元素当了官，等级天然比一般元素高。再设想一下，假如一个官员A是个省级领导，他上司有一个秘书a-1，家里有一个保姆a-2。另一个官员B是一个县级领导，他上司有一个秘书b-1，家里有一个保姆b-2。a-1和b-1尽管都是秘书，然而你想一个省级领导的秘书和一个县级领导的秘书之间有可比性么？谁大谁小，谁高谁低高深莫测，所以基本没有比拟的意义。只有在A上司的a-1、a-2以及B上司的b-1、b-2中互相比拟大小高下才有意义。分割下面说到的层叠上下文能够得出结论：1、一般元素的层叠等级优先由其所在的层叠上下文决定。2、层叠等级的比拟只有在以后层叠上下文元素中才有意义。不同层叠上下文中比拟层叠等级是没有意义的。三、层叠程序层叠程序(stacking order)示意元素产生层叠时依照特定的程序规定在Z轴上垂直显示。由此可见，后面所说的层叠上下文和层叠等级是一种概念，而这里的层叠程序是一种规定。当元素产生层叠时，层叠程序遵循下面图中的规定。这里值得注意的是：1、左上角"层叠上下文background/border"指的是层叠上下文元素的背景和边框。2、inline/inline-block元素的层叠程序要高于block(块级)/float(浮动)元素。3、单纯思考层叠程序，z-index: auto和z-index: 0在同一层级，但这两个属性值自身是有基本区别的。为什么inline/inline-block元素的层叠程序要高于block(块级)/float(浮动)元素？其实很简略，像border/background属于装璜元素的属性，浮动和块级元素个别用来页面布局，而网页设计之初最重要的就是文字内容，所以在产生层叠时会优先显示文字内容，保障其不被笼罩。四、如何产生“层叠上下文”后面说了那么多，到底如何产生层叠上下文呢？如何让一个元素变成层叠上下文元素呢？其实，层叠上下文也基本上是有一些特定的CSS属性创立的，个别有3种办法：1、HTML中的根元素<html></html>自身就具备层叠上下文，称为“根层叠上下文”。2、一般元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。3、CSS3中的新属性也能够产生层叠上下文。栗子1:有两个div，p.a、p.b被包裹在一个div里，p.c被包裹在另一个div里，只为.a、.b、.c设置position和z-index属性。 <style> div { position: relative; width: 100px; height: 100px; } p { position: absolute; font-size: 20px; width: 100px; height: 100px; } .a { background-color: pink; z-index: 1; } .b { background-color: yellow; z-index: 2; top: 20px; left: 20px; } .c { background-color: blue; z-index: 3; top: -40px; left: 40px; }</style><div> <p class="a">a</p> <p class="b">b</p> </div> <div> <p class="c">c</p> </div> 成果：因为p.a、p.b、p.c三个的父元素div都没有设置z-index，所以不会产生层叠上下文，所以.a、.b、.c都处于由<html></html>标签产生的“根层叠上下文”中，属于同一个层叠上下文，此时谁的z-index值大，谁在下面。 ...

关于css:css常用小技巧

一、设置input相干款式1、input的placeholder的款式input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red;}input::-moz-placeholder { /* Firefox 19+ */ color: red;}input:-ms-input-placeholder { /* IE 10+ */ color: red;}input:-moz-placeholder { /* Firefox 18- */ color: red;} <input type="text" placeholder="请设置用户名">2、设置input聚焦时的款式input:focus { border: red 1px solid;}3、勾销input的默认款式background:none;border:none;outline:none;// 去掉ios的input的默认款式-webkit-appearance:none;// 去掉点击暗影-webkit-tap-highlight-color:rgba(255,255,255,0);// 去掉chrome表单主动填充后的黄色底色input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 100px white inset;}二、单行和多行文本超出省略号<style>.container { width: 300px; height: 200px; margin: 100px; padding: 20px; border: 1px solid #eee; font-size: 13px; color: #555;}.c-red { color: #8968CD;}p { background-color: #ccccff; padding: 2px 5px;}/*单行*/.single { width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}/*多行*/.mutiple { display: -webkit-box; /*重点，不能用block等其余，将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列形式）*/ -webkit-line-clamp: 3; /*行数，超出三行暗藏且多余的用省略号示意...*/ line-clamp: 3; word-break: break-all; overflow: hidden; max-width: 100%;}</style><div class="container"> <p class="single"> <span class="c-red">单行溢出：</span>笑你我枉花光心计爱竞逐镜花那漂亮怕侥幸会转瞬远逝为贪嗔喜恶怒着迷责你我太贪功恋势怪大地众生太美丽悔旧日太执信约誓为悲欢哀怨妒着迷 </p> <p class="mutiple"> <span class="c-red">多行溢出：</span>笑你我枉花光心计爱竞逐镜花那漂亮怕侥幸会转瞬远逝为贪嗔喜恶怒着迷责你我太贪功恋势怪大地众生太美丽悔旧日太执信约誓为悲欢哀怨妒着迷啊舍不得璀璨俗世啊躲不开痴恋的快慰啊找不到色相代替啊参毕生参不透这条难题吞风吻雨葬落日未曾徘徊　欺山赶海践雪径也未失望拈花把酒偏折煞世人情狂凭这两眼与百臂或千手不能防天阔阔雪漫漫共谁同航这沙滚滚水皱皱笑着浪荡贪欢一晌偏教那女儿情长掩埋 </p></div> ...

关于css:IPQ5018-and-QCN6122-The-Future-of-Wireless-Networking

Wireless networking has become an essential part of our lives, allowing us to connect to the internet from anywhere without the need for wires or cables. With the increasing demand for high-speed internet and the growing number of connected devices, it has become necessary to develop new technologies that can handle the increased load. The IPQ5018 and QCN6122 are two cutting-edge wireless networking technologies that are set to revolutionize the industry. Let's take a closer look at what they are and how they work. ...

关于css:图片父元素div宽度异常问题

实现一个成果：div A宽度250px,高度100px，div B中有五张宽高皆为100px的图片并排，五张图片在A中从左至右展现，展现完最初一张图片而后再从右至左循环动画展现。如：问题：B宽度应为500px，然而显示的是父元素的250px，设置B宽度为500px，显示设置胜利，然而展现还是显示250px。（导致动画展现有问题）后果：img设置了max-width: 100%;导致B宽度异样。勾掉这个属性就显示失常了：论断：max-width: 100%;max-height: 100%;个别配合应用。用处：为了不让图片被放大后失真咱们能够设置img的最大宽度为本身尺寸大小，更艰深的讲就是放弃宽高比，在设置的宽高范畴内，只容许放大不容许放大img，在范畴内宽高放弃比的最大值即为该图片最终宽高的值。拓展：object-fit是在设置的固定宽高中依照属性显示图片成果，所占宽高不变。

关于css:IPQ5018-with-QCN6122-to-achieve-highspeed-wifi-connection

Introduction of IPQ5018 and chip function advantages. IPQ5018/IPQ5010,802.11ax,wifi 6e，QCN9074,2X2 2.4G support 2x WiFi 6E Card support BT5.1/ Dual-core ARM 64bit A53@1.0GHz Processor512MB DDRL3L System Memory4MB NOR Flash, 128MB NAND Flash2x2 On-board 2.4GHz radio,up to 573Mbps physical Data RateSupport BT5.1M.2 Card Slot for 5G (QUECTEL RM 500Q-GL) ;M.2 Card Slot for QCN9074 WIFI 6E Card IPQ5018 is a high-performance embedded processor launched by Qualcomm, which is specially used for Wi-Fi network applications. It integrates a quad-core ARM Cortex-A53 processor and high-speed network connection, supports multiple Wi-Fi standards, including 802.11ac and 802.11ax, and is also compatible with 802.11a/b/g/n. IPQ5018 also supports a variety of peripheral interfaces, such as USB, PCIe, etc., which can be easily connected and communicated with other devices.The main functions and advantages of the IPQ5018 chip are as follows:High performance: IPQ5018 is equipped with a quad-core ARM Cortex-A53 processor with a main frequency of up to 1.0GHz, which provides powerful computing and processing capabilities and can handle a variety of data and applications.High-speed network connection: IPQ5018 supports multiple Wi-Fi standards, including 802.11ac and 802.11ax, and is also compatible with 802.11a/b/g/n, supports dual-band Wi-Fi, and provides high-speed network connection and transmission speed.Safe and reliable: The IPQ5018 chip integrates a variety of security functions and encryption algorithms, including WPA3 encryption, AES encryption, TLS/SSL, etc., which can ensure the safety and reliability of network data transmission. ...

关于css:CSS中常用的一些样式选择符

当波及到 CSS 选择器时，大多数人都相熟常见的选择器，如类选择器、ID选择器、标签选择器等等。然而，CSS 还提供了一些较为冷门但实用的选择器，上面介绍几个：通用选择器（Universal Selector）：通用选择器应用 * 符号，能够匹配 HTML 文档中的任何元素。通用选择器不会抉择文档中不存在的元素，但会抉择 HTML 中的所有元素。属性选择器（Attribute Selector）：属性选择器能够依据元素的属性及其属性值抉择元素。例如，能够应用 [attribute=value] 选择器抉择所有属性名为 attribute 的元素，并且属性值等于 value。还有一些其余的属性选择器能够抉择属性的结尾或结尾等。子串匹配选择器（Substring Matching Selector）：子串匹配选择器能够依据元素的属性值中蕴含的子字符串抉择元素。例如，应用 [attribute*=value] 能够抉择所有属性名为 attribute 的元素，并且属性值中蕴含 value 子字符串。后辈选择器（Descendant Selector）：后辈选择器应用空格分隔，能够抉择元素的后辈元素。例如，应用 ul li 能够抉择所有嵌套在 ul 元素内的 li 元素。邻接选择器（Adjacent Sibling Selector）：邻接选择器应用 + 符号分隔，能够抉择紧接在另一个元素后的元素。例如，应用 h1 + p 能够抉择在 h1 元素后紧接着的 p 元素。通用兄弟选择器（General Sibling Selector）：通用兄弟选择器应用 ~ 符号分隔，能够抉择与另一个元素相邻的所有同级元素。例如，应用 h1 ~ p 能够抉择所有与 h1 元素同级的 p 元素。 :empty 伪类选择器：能够用来抉择没有子元素的元素，例如 div:empty 能够抉择所有没有子元素的 div 元素。 :not 伪类选择器：能够用来抉择除了某个元素之外的所有元素。例如，p:not(.intro) 能够抉择所有没有 intro 类的 p 元素。 :checked 伪类选择器：能够用来抉择被选中的表单元素，例如 input:checked 能够抉择所有被选中的 input 元素。 :target 伪类选择器：能够用来抉择以后流动的锚点元素，例如 #section1:target 能够抉择以后流动的 ID 为 section1 的锚点元素。 :nth-of-type() 伪类选择器：能够用来抉择特定类型的元素中的特定子元素。例如，ul li:nth-of-type(2) 能够抉择所有 ul 元素中的第二个 li 元素。 :first-of-type 伪类选择器：能够用来抉择某个元素下第一个呈现的特定类型的子元素。例如，ul li:first-of-type 能够抉择每个 ul 中第一个 li 元素。 :last-of-type 伪类选择器：能够用来抉择某个元素下最初一个呈现的特定类型的子元素。例如，ul li:last-of-type 能够抉择每个 ul 中最初一个 li 元素。 :only-of-type 伪类选择器：能够用来抉择某个元素下惟一的特定类型的子元素。例如，div p:only-of-type 能够抉择每个 div 中惟一的 p 元素。 :lang() 伪类选择器：能够用来抉择特定语言的元素。例如，p:lang(en) 能够抉择所有带有 "en" 语言属性的 p 元素。 :root 伪类选择器：能够用来抉择文档的根元素，即 html 元素。例如，:root { font-size: 16px; } 能够将文档中所有元素的字体大小设置为 16px。 ...

关于css:css超出显示省略号

单行，超出显示省略号overflow: hidden; //超出的文本暗藏text-overflow: ellipsis; //溢出用省略号显示white-space: nowrap; //溢出不换行多行，超出显示省略号overflow: hidden;text-overflow: ellipsis;display: -webkit-box; //作为弹性伸缩盒子模型显示。-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列形式--从上到下垂直排列-webkit-line-clamp: 2; //显示的行

关于css:CSS-css-opacity和-color-Hex-opacity的区别

接上文[《[CSS] HEX格局color不透明度变换》](https://segmentfault.com/a/1190000043633202) 应用css的opacity属性 (不透明度) 来给元素设置不透明度，能够发现opacity越小，色彩越靠近背景色。css的opacity不仅影响元素content区域(content区域中的文字也会变的于背景色更靠近)，也会影响元素的border，当opacity为0时，元素存在，视觉上不可见，边框一并隐没。应用getHexOpacity的形式先获取通明色(opacityColor)，再将背景色设置为opacityColor( background-color: var(--opacityColor) )这种形式在色彩自身与css opacity的实现视觉上无区别，有区别的是，其中不透明度为0的元素边框还在。间接给元素设置 opacity，这种形式设置的是整个元素的透明度，它会影响元素及其所有内容和边框的透明度，而不仅仅是背景色的透明度。即元素的所有局部都会变得半透明。通过 getHexOpacity制备通明色，再将其作为 background-color 属性的值设置给元素。这种形式设置的是元素的背景色的透明度，而不是元素自身的透明度。即元素的内容和边框的透明度并没有扭转，只有背景色的透明度扭转了。如果须要调整元素的整体透明度，能够应用第一种形式(设置css的opacity)。如果仅须要调整元素的背景色的透明度，能够应用第二种形式。完结。同步更新到本人的语雀https://www.yuque.com/dirackeeko/blog/rdu2e33k066o9gs9

关于css:滚动条样式设置方法

::-webkit-scrollbar应用属性阐明详情见：::-webkit-scrollbar ::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条款式。备注：如果没有设置 overflow:scroll;，元素的滚动条将不会显示。备注： ::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其余基于 WebKit 的浏览器）上可用。滚动条款式的规范办法可用于 scrollbar-color 和 scrollbar-width。 CSS 滚动条选择器你能够应用以下伪元素选择器去批改基于 webkit 的浏览器的滚动条款式： ::-webkit-scrollbar——整个滚动条。::-webkit-scrollbar-button——滚动条上的按钮（高低箭头）。::-webkit-scrollbar-thumb——滚动条上的滚动滑块。::-webkit-scrollbar-track——滚动条轨道。::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道局部。::-webkit-scrollbar-corner——当同时有垂直滚动条和程度滚动条时交汇的局部。通常是浏览器窗口的右下角。::-webkit-resizer——呈现在某些元素底角的可拖动调整大小的滑块。CSS应用示例实用所有能够滚动的元素间接 ::-webkit-scrollbar 结尾 /* 1,滚动条 */ ::-webkit-scrollbar { width: 15px; /* 纵向滚动条宽度 */ height: 15px; /* 横向滚动条高度 */ background: blue; /* 整体背景 */ border-radius: 10px; /* 整体圆角 * } /* 2,滚动条两端的按钮 */ ::-webkit-scrollbar-button{ width: 15px; /* 横向滚动条宽度 */ height: 15px; /* 纵向滚动条高度 */ background: black; border-radius: 10px; } /* 3,外层轨道 */ ::-webkit-scrollbar-track { /* background: red; */ border-radius: 10px; } /* 4.内层轨道，它会笼罩外层轨道的款式。 */ ::-webkit-scrollbar-track-piece { width: 5px; background-color:red; margin: 0 -2px 0; } /* 5,滑块 */ ::-webkit-scrollbar-thumb { background: #bec5ca; min-height: 50px; min-width: 50px; border-radius: 10px; } /* 纵向滑块悬浮 */ ::-webkit-scrollbar-thumb:vertical:hover { background: yellow; } /* 横向滑块悬浮 */ ::-webkit-scrollbar-thumb:horizontal:hover { background: pink } /* 6,边角，两个滚动条交汇处 */ ::-webkit-scrollbar-corner{ background: blue; }只实用于特定的局部，须要在选择器之前附加元素，增加一个类名，比方 ...

关于css:CSS-HEX格式color不透明度变换

对16进制的色彩 (HEX格局)，根底模式是"#1BFFCD"这种模式(6位16进制数字) - 其R G B重量别离用2位十六进制数字示意(rr gg bb) HEX格局的色彩也能够设置透明度，在根底的6位16进制数字之后加上2位十六进制数字示意透明度如"#1BFFCDFF" -> 不透明度最高，其色调体现等同于 "#1BFFCD""#1BFFCD11" -> 不透明度很低，根本等同于背景色"#1BFFCD00" -> 不透明度最低，等同于背景色晓得了这些，就能够对HEX格局的color进行不透明度变换了间接贴代码详解：1、指标输入格局是对立大写的HEX color，如 "#AABBCCEF"。不想要"#aabbccef"，更要防止 "#AABBCCef"这种大小写混合的状况。因而在代码中对用户输出的hex color及转化后的透明度都进行了toUpperCase解决。 2、此外还有一个须要留神的点在于当传入的参数percent比拟小，如0.01 或 0.05。对应的间接计算出的opacity别离是 0.01 -> "2" 0.05 -> "C"如果不对opacity进行解决，则会产生"#AABBCC2" "#AABBCCC"这样的7位HEX color 这种color是违规的，会造成不可预期的后果。因而判断opacity的length，如果length小于2则补零，将opacity变成2位。完结。同步更新到本人的语雀https://www.yuque.com/dirackeeko/blog/vto22bxk1b4p6cte

关于css:前端面试实录CSS篇最近一周

前言系列首发于公众号『前端进阶圈』，更多精彩内容敬请关注公众号最新消息。最近一周面试实录CSS篇1. CSS 选择器以及优先级?CSS 选择器选择器格局优先级权重id 选择器#id100类选择器.classname10属性选择器[title]/[title="one"]10伪类选择器div:hover10标签选择器div1伪元素选择器input::after1子选择器ul>li0后辈选择器li a0通配符选择器*0CSS 选择器优先级参考 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity!important 例外，优先级最高内联款式id 选择器类选择器，属性选择器，伪类选择器标签选择器，伪元素选择器子选择器，后辈选择器，通配符选择器选择器权重参考 W3C: https://www.w3.org/TR/selectors/#specificity例子：./Demo/css_selector_and_priority.html2. link 和 @import 的区别？link: 链接内部资源的标签，此标签决定了文档与内部资源的关系，罕用于链接样式表(css)，网页站点图标(favicon)。用法；<link rel="stylesheet,icon,image/png,shortlink,help,author,image/svg+xml" href="网络门路/相对路径/绝对路径"/>属性： rel: 示意关系：realtionship,href: 网络门路/相对路径/绝对路径size: icon 的大小disabled: 仅对 rel = "stylesheet" 类型失效区别：隶属差别：link 为 html 标签，能够加载 css, 也能够引入网站图标（facaion）, 定义 rel 链接属性，而 @import 是 css 提供，只能用于加载 css加载差别：link 援用的 css,在页面加载时同时加载。而 @import 在页面加载完后才加载兼容性：link 是 html 标签，没有兼容问题。而 @ import 是 css2.1 提出的，IE5 以下的浏览器不反对。可操作性：link 可应用 js 来管制 DOM 去扭转款式，而 @import 不反对，因为 DOM 办法是基于文档的。权重差别：在款式中：link 款式的权重高于 @import 的权重吗，例如: ...

关于css:Css基础知识点总结

CSS根底CSS(cascading style sheet) 汉译为层叠样式表,是用于管制网页款式WEB规范中的体现规范语言,在网页中次要对网页信息的显示进行管制。目前举荐遵循的是W3C公布的CSS3.0版本；用来体现HTML或者XHTML等款式文件的计算机语言。1998年5月21日由w3C正式推出的css2.0HTML + CSS补救html语言的有余缩减页面代码，进步访问速度;代码缩小，页面文件就会小，占用网络带宽就少，客户端关上速度就快，用户体验就会更好构造清晰，有利于seo优化有利于搜索引擎优化缩短改版工夫对网站的重构有很好的反对CSS语法CSS语法由两局部组成：选择符、申明。申明包含：属性和属性值选择符 {属性: 属性值 ;属性:属性值}选择符阐明：CSS选择符（选择器）选择符示意要定义款式的对象(标签名字)，能够是元素自身，也能够是一类元素或者制订名称的元素,简略来说就是给对应的元素起个名称。1）每个CSS款式由两局部组成，即选择符和申明，申明又分为属性和属性值；2）属性必须放在花括号中，属性与属性值用冒号连贯。3）每条申明用分号完结。4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。5）在书写款式过程中，空格、换行等操作不影响属性显示。CSS样式表1:外部样式表语法：<style type="text/css">css语句</style>注：应用style标记创立款式时，最好将该标记写在<head></head>;2:内部款式(1) 语法：<link rel="stylesheet" type="text/css" href="指标文件的门路及文件名全称" />阐明：应用link元素导入内部样式表时，需将该元素写在文档头部，即<head>与</head>之间。rel：用于定义文档关联，示意关联样式表；type：定义文档类型；(2)、导入内部样式表<style type="text/css">@import url("指标文件的门路及文件名全称");</style>阐明：@和import之间没有空格 url和小括号之间也没有空格；括号外部加引号，必须结尾以分号完结；link @import区别差异1：老祖宗的差异：link属于XHTML标签，而@import齐全是CSS提供的一种形式。 link标签除了能够加载CSS外，还能够做很多其它的事件，比方定义RSS，定义rel连贯属性等，@import就只能加载CSS。差异2：加载程序的差异：当一个页面被加载的时候（就是被浏览者浏览的时候），link援用的CSS会同时被加载，而@import援用的CSS 会等到页面全副被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有款式。差异3：兼容性的差异。：@import是CSS2.1提出的，所以老的浏览器不反对，@import只在IE5以上的能力辨认，而link标签无此问题。差异4：应用dom管制款式时的差异：当应用javascript管制dom去扭转款式的时候，只能应用link标签，因为@import不是dom能够管制的.3:内联样式表<标签 style="属性1:值1;属性2:值2; ……"></标签>CSS样式表的权重关系1）内联样式表的优先级别最高2）外部样式表与内部样式表的优先级和书写的程序无关，后书写的优先级别高。3）同在一个样式表中的优先级和书写的程序也无关，后书写的优先级别高。(被笼罩的只是雷同属性的款式)CSS选择符CSS根本选择符：类型选择符、id选择符、class选择符(类选择符)Css选择符分类：类型选择符（标记选择器）类选择符（class选择符）ID选择符（id选择器）伪类选择器通配符（*）设置全局属性群组选择符（汇合选择器）蕴含选择符（后辈选择器）属性选择符伪对象选择符类型选择符类型选择符是依据html语言中的标记来间接定义语法：标签名称 {属性：属性值；}a)类型选择符就是以文档对象html中的标签作为选择符，即应用构造中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。b)所有的页面元素都能够作为选择符;用法：（1）如果想扭转某个元素的默认款式时，能够应用类型选择符；（如：扭转一个p段落款式）（2）当对立文档某个元素的显示成果时，能够应用类型选择符；（如：扭转文档所有p段落款式）类（class）选择符编辑语法： .class名{属性：属性值;}用法：class选择符更适宜定义一类款式；(1)当咱们应用类选择符时，应先为每个元素定义一个类名称，(2)类选择符的语法格局：如：<div class="top"></div>.top{属性:属性值;}ID选择符语法： <标签 id=“名”></标签> id名{属性：属性值;}（1）能够给每个元素应用id选择符，但id是元素的惟一标识符，不可呈现反复的id名；如：<div id="top"></div>（2）id选择符的语法格局是“#”加上自定义的id名如：#box{width:300px; height:300px;}（3）起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)如：div标记（4）一个id名称只能在文档中呈现一次，因为id是惟一的（5）最大的用途：创立网页的外围构造。(唯一性、起名字不能应用关键字)伪类选择器a:link {color: red;} / 未拜访的链接状态 /a:visited {color: green;} / 已拜访的链接状态 /a:hover {color: blue;} / 鼠标滑过链接状态 /a:active {color: yellow;} /* 鼠标按上来时的状态 /阐明：1）当这4个超链接伪类选择符联结应用时，应留神他们的程序，失常程序为：a，a:link,a:visited,a:hover,a:active,谬误的程序有时会使超链接的款式生效；2）为了简化代码，能够把伪类选择符中雷同的申明提出来放在a选择符中；例如：a{color:red;} a:hover{color:green;}示意超链接的三种状态都雷同，只有鼠标划过变动色彩通配符语法：*{属性：属性值;}阐明：通配选择符的写法是“*”，其含意就是所有标签；示意该款式实用所有网页元素；用法：罕用来重置款式。例：*{margin:0;padding:0;}群组选择符语法：选择符1，……，选择符5 {属性：属性值;}阐明：当有多个选择符利用雷同的款式时，能够将选择符用“，”分隔的形式，合并为一组。实例：.top, #nav, p{width:100px;}蕴含选择器（后辈选择器）语法：选择符1(父) 选择符2（后辈）{属性：属性值;}选择符父级选择符子级{属性：属性值;}阐明：选择符1和选择符2用空格隔开，含意就是选择符1中蕴含的所有选择符2;实例： div ul li{height:200px;}选择符权重css中用四位数字示意权重，权重的表达方式如：0，0，0，0；权重规定：HTML标签(类型选择符)的权重是1，class的权重是10，id的权重是100。类型选择符的权重为0001class选择符的权重为0010id选择符的权重为0100属性选择符的权重为0010伪类选择符的权重为0010伪元素（对象）选择符的权重为0001蕴含选择符的权重：为蕴含选择符的权重之和内联款式的权重为1000继承款式的权重为0000群组汇合选择符权重为他自身注：如果权重雷同时，则执行后写的款式；css层叠性css层叠指的是款式的优先级，当产生抵触时以优先级高的为准。开发者款式>读者款式>浏览器款式（除非应用!important标记）id选择符>（伪）类选择符>元素选择符权重雷同时取前面定义的款式

关于css:CSS-in-JS-之-Styledcomponents-用法

npm i styled-components 根本用法import React, { Component } from 'react'import styled from 'styled-components'export default class App extends Component { render() { const StyledFooter = styled.footer` background:yellow ` return ( <StyledFooter> <footer> <ul> <li>首页</li> <li>列表</li> <li>我的</li> </ul> </footer> </StyledFooter> ) }}反对sass/less语法import React, { Component } from 'react'import styled from 'styled-components'export default class App extends Component { render() { const StyledFooter = styled.footer` background:yellow; position:fixed; left:0; bottom:0; width:100%; height:50px; line-height:50px; text-align:center; ul{ display:flex; list-style:none; li{ flex:1; &:hover{ background:red; } } } ` return ( <StyledFooter> <footer> <ul> <li>首页</li> <li>列表</li> <li>我的</li> </ul> </footer> </StyledFooter> ) }}可透传props 以及基于props做款式判断import React, { Component } from 'react'import styled from 'styled-components'export default class App extends Component { render() { const StyledInput = styled.input` outline:none; border-radius:10px; border-bottom:1px solid red; ` const StyledDiv = styled.div` background:${props => props.bg || 'yellow'}; ` return ( <StyledDiv bg={"lightblue"}> Apppppp <StyledInput type="password" ></StyledInput> </StyledDiv> ) }}款式化任意组件import React, { Component } from 'react'import styled from 'styled-components'export default class App extends Component { render() { const StyledChild = styled(Child)` background: yellow ` return ( <div> <StyledChild></StyledChild> </div> ) }}function Child(props) {//子组件记得接管 return ( <div className={props.className}>//子组件记得接管 Child </div> )}css的复用、扩大、加强mport React, { Component } from 'react'import styled from 'styled-components'export default class App extends Component { render() { const StyledButton = styled.button` width:100px; height:100px; background:yellow; ` const StyledButton2 = styled(StyledButton)` background:red; ` return ( <div> App <StyledButton></StyledButton> <StyledButton2></StyledButton2> </div> ) }}增加动画定义keyframesimport React, { Component } from 'react'import styled, { keyframes } from 'styled-components'export default class App extends Component { render() { const myanimation = keyframes` from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } ` const StyledDiv = styled.div` width: 100px; height: 100px; background: yellow; animation: ${myanimation} 1s infinite; ` return ( <div> <StyledDiv> </StyledDiv> </div> ) }}

关于css:CSS实现自动分页打印同时每页保留重复的自定义内容

当须要打印的内容过长时零碎会产生主动宰割页面，造成款式不太好看。应用CSS的 @media print 联合 <table> 能够实现对分页款式的可控。成果如下：假如有50条数据，打印时零碎会主动分成两页，同时每页保留自定义的header和footer。代码如下： <html><head> <title>print</title> <style> /* 在打印时利用此规定 */ @media print { @page { /* 文档的页面大小 */ size: A4; /* 文档的页边距 */ margin: 10mm 20mm 20mm; } table { width: 100%; border-collapse: collapse; } tbody tr td { padding-left: 5px; border: 1px solid #000; word-break: keep-all; font-size: .9rem; } .header-row th { border: 1px solid #000; } .title { margin: 0 0 20px; font-size: 1.5rem; } .footer-row { padding-top: 10px; } } </style></head><body> <table> <thead> <tr> <th colspan="3"> <div class="title">题目1题目1</div> </th> </tr> <tr class="header-row"> <th>First Name</th> <th>Last Name</th> <th>age</th> </tr> </thead> <tbody id="tbody"></tbody> <tfoot> <tr> <td colspan="1" class="footer-row"> <div>打印人：小王</div> </td> <td colspan="2" class="footer-row"> <div class="footer-time">打印工夫：2000-01-01 00:00:00</div> </td> </tr> </tfoot> </table> <script> // mock const rowNum = 50; const fragment = document.createDocumentFragment(); for (let i = 0; i < rowNum; i++) { const _tr = document.createElement('tr'); const _td1 = document.createElement('td'); const _td2 = document.createElement('td'); const _td3 = document.createElement('td'); _td1.appendChild(document.createTextNode(`John${i}`)); _td2.appendChild(document.createTextNode(`Doe${i}`)); _td3.appendChild(document.createTextNode(`${i}`)); _tr.appendChild(_td1); _tr.appendChild(_td2); _tr.appendChild(_td3); fragment.appendChild(_tr); } document.querySelector('#tbody').appendChild(fragment); </script></body></html>ctrl+p / command+p 唤起打印即可查看成果 ...

关于css:CSS-sass批量创建CSS变量scss-css

须要sass、sass-loader这两个npm包我用的是"sass": "^1.33.0","sass-loader": "^8.0.2" 装置npm依赖在src目录下新建一个_color.scss(这个文件名必须以下划线结尾，用_color.scss 不能用 color.scss) 定义dark, black, white, success, failed这五个变量名和对应的变量值新建theme.scss 在theme.scss中遍历_color.scss中的$colors,生成css变量, 如 --success-color: #00bf30; 执行 sass src/:dist查看执行后果在src同级呈现dist目录，dist目录下生成了theme.csstheme.css的内容如上图。完结。同步更新到本人的语雀https://www.yuque.com/dirackeeko/blog/ugu01you9lab3ib2

关于css:css三种方案实现图片宽高自适应等比例缩放

需要形容页面中有一个图片，页面宽度变小（比方关上控制台，拖动边栏），图片宽高，要随之等比例自适应缩放，如下效果图效果图实现计划计划一：应用宽度百分比和vw计划二：宽度百分比加高度被padding-top撑开计划三：搭配伪元素间接上代码，复制粘贴即可应用计划一：应用宽度百分比和vw<!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"> <title>Document</title> <style> .adapt { width: 36%; height: 36vw; background-color: pink; } img { width: 100%; height: 100%; } </style></head><body> <div class="adapt"> <img src="http://ashuai.work/static/img/avantar.png"> </div></body></html>计划二：宽度百分比加高度被padding-top撑开<!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"> <title>Document</title> <style> .adapt { width: 36%; height: 0; padding-top: 36%; background: pink; position: relative; } img { width: 100%; position: absolute; top: 0; left: 0; } </style></head><body> <div class="adapt"> <img src="http://ashuai.work/static/img/avantar.png"> </div></body></html>计划三：搭配伪元素<!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"> <title>Document</title> <style> .adapt { width: 36%; overflow: hidden; background: pink; position: relative; } .adapt::after { content: ''; display: block; margin-top: 100%; } img { width: 100%; position: absolute; top: 0; left: 0; } </style></head><body> <div class="adapt"> <img src="http://ashuai.work/static/img/avantar.png"> </div></body></html>A good memory is better than a bad pen. Write it down...

关于css:想要学好前端必须理解的布局方式响应式布局

响应式布局原文链接：https://note.noxussj.top/?source=sifou 什么是响应式布局？在不同屏幕分辨率下，可能以最佳的形式进行展现，元素的宽度尺寸以及展现形式可能会扭转。通常应用 @media 多媒体查问来实现响应式布局。长处页面可能兼容不同分辨率的屏幕。毛病工作量大，UI 须要设计多个平台的版本。场景一套代码兼容 web 端、平板、以及手机端网页根底案例以下简略模仿一个响应式布局，在不同设施/分辨率下实现不同的展现成果。容器尺寸 640px * 320px 当分辨率较大时可采纳一行多个元素的模式。容器尺寸 150px * 320px 当分辨率过小时采纳一行一个元素的模式。最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要再花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览，深色和浅色模式。原文链接：https://note.noxussj.top/?source=sifou

关于css:想要学好前端必须理解的布局方式静态布局

动态布局原文链接：https://note.noxussj.top/?source=zhihu 什么是动态布局？动态布局是平时开发中最常见的一种布局。就是给布局的元素设置固定的宽度和高度，无论你的屏幕分辨率是多大，它永远都是固定大小。通常应用 px 单位来实现动态布局。长处它的长处也比拟显著，是一种最简略的布局形式，开发者只须要依照设计图 1:1 还原进去即可，无需思考任何兼容性问题，所以工作量大大减少。毛病因为是固定的尺寸，所以在分辨率太低时会展现出滚动条，并且使得局部元素不在屏幕范畴内，可读性比拟差。场景传统的 Web 网站。根底案例以下简略模仿一个固定尺寸的元素，在不同设施/分辨率下展现的成果。容器尺寸 640px * 320px 可能发现以后分辨率能够容下这个盒子，布局是失常的。容器尺寸 150px * 320px 当分辨率过小就会产生问题了，例如盒子超出了该容器范畴，在简单的布局状况下还会导致布局错乱。最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要再花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览，深色和浅色模式。原文链接：https://note.noxussj.top/?source=zhihu

关于css:想学会flex布局我推荐你看这篇文章

flex 布局原文链接：https://note.noxussj.top/?source=zhihu 为什么要应用 flex 布局？flex 布局是目前比拟风行的一种布局，因为它非常简略灵便，区区简略几行代码就能够实现各种页面的的布局，以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。应用 flex 属性就能够写出简洁优雅简单的页面布局。先大略看一下我上面写的内容，而后再去看看阮一峰老师写的Flex 布局教程提醒容器：采纳 flex 布局的元素，称为容器。我的项目：指的是容器外面的子元素。容器的 6 个属性flex-direction属性决定主轴的方向（即我的项目的排列方向）。flex-direction: row （默认）主轴为程度方向，终点在左端。 flex-direction: row-reverse 主轴为程度方向，终点在右端。 flex-direction: column 主轴为垂直方向，终点在上沿。 flex-direction: column-reverse 主轴为垂直方向，终点在下沿。 flex-wrap主轴的换行形式。 flex-wrap: nowrap （默认）当我的项目总宽度超出容器的宽度时，不进行换行并且对我的项目的宽度进行对立压缩。 flex-wrap: wrap 换行，第一行在上方。 flex-wrap: wrap-reverse 换行，第一行在下方。 flex-flowflex-flow 是 flex-direction 和 flex-wrap 的简写模式。 flex-flow: row nowrap （默认） justify-content我的项目在主轴上的对齐形式。 justify-content: flex-start （默认）左对齐。 justify-content: flex-end 右对齐。 justify-content: center 居中。 justify-content: space-between 两端对齐，我的项目之间的间距都相等。 ...

关于css:CSS-选择器优先级

CSS（Cascading Style Sheets) 层叠样式表浏览器遵循三个步骤：起源、优先级、源码程序，剖析没有元素的每一个属性。如果一个申明在层叠中胜出，它就被称为一个层叠值。每个元素最多有一个层叠值。 CSS解决款式抵触判断条件样式表起源 => 选择器优先级 => 源码程序样式表起源用户样式表用户代理样式表（浏览器款式）第三方款式（多数浏览器反对）选择器优先级!import > id > 类 > 标签伪类选择器和属性选择器优先级和类选择器一样。能够采纳2,1,3的计算形式，别离代表id，类，标签选择器的数量。后面数量越大优先级越高。.name .person(0,2,0) 优先级大于 div .person p (0,1,0)源码程序呈现较晚的优先级高。 // 链接款式程序 LoVeHAte准则a:link {}a:visited{}a:hover {}a:active {}

关于css:在拥有滚动条元素内滚动时判断其子元素是否出现达到可视区域公式

问题形容网上的帖子大多数是：判断一个元素是否在可视区域中而帖子中举的例子，也是以浏览器最外层body/html的滚动条为例子，进行解说，基本上都是如下的效果图：留神这里的滚动条是最外层的实际上，咱们页面的滚动条，有时，并不是以最外层的body或者html进行滚动的可能是页面两头的某一个dom元素能够滚动咱们须要判断这个dom滚动元素内的某一个小dom指标元素何时呈现，何时达到可视区域这里的可视区域是能看到，和最外层的那个滚动条没有关系的如下效果图如需要：当红色盒子在内层滚动条滚动中呈现时，就更改对应dom元素背景色为粉红色留神这里有两个滚动条，咱们的需要是外面的滚动条滚动时，去做对应管制公式提出其实也很简略，首先咱们剖析一些元素层级构造。最外层的必定是body和html，这个不必管它在body标签外部，有一个<div class="scrollBox"></div>，这个dom元素领有滚动条而在.scrollBox的dom元素内，还有一个指标元素<div class="target"></div>，看看这个指标元素.target何时呈现，何时达到可视区域公式：滚动间隔呈现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox本身高度滚动间隔呈现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox本身高度滚动间隔呈现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox本身高度或：边界值 = 指标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器本身高度边界值 = 指标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器本身高度边界值 = 指标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器本身高度即，当滚动的间隔超过这个边界值时，指标元素就会呈现这里的边界值，肯定是初始边界值，就是要提前算好，最好存一份，因为滚动的话，会更改相应间隔地位的复制粘贴代码看成果更好了解： <!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"> <title>Document</title> <style> .scrollBox { width: 100%; height: 300px; background-color: #ccc; /* 领有滚动条 */ overflow-y: auto; } .target { width: 60px; height: 60px; background-color: red; } </style></head><body> <h1>孙悟空</h1> <h1>孙悟空</h1> <div class="scrollBox"> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <div class="target"></div> </div> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <script> let scrollBoxDom = document.querySelector('.scrollBox') let targetDom = document.querySelector('.target') // 留神！这里的边界值，是原始的地位的值，因为滚动的话，会更改元素的getBoundingClientRect的相干值 let boundaryValue = targetDom.getBoundingClientRect().top - scrollBoxDom.getBoundingClientRect().top - scrollBoxDom.offsetHeight // 边界值 = 指标元素间隔顶部高度 - 滚动盒子容器间隔顶部高度 - 滚动盒子容器本身的高度 function callBack() { if (scrollBoxDom.scrollTop > boundaryValue) { console.log('在可视区域'); scrollBoxDom.style.backgroundColor = 'pink' } else { console.log('不在可视区域'); scrollBoxDom.style.backgroundColor = '#ccc' } } scrollBoxDom.addEventListener('scroll', callBack) </script></body></html>附-以浏览器最外层body/html的滚动条为例子代码<!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"> <title>Document</title> <style> body { background-color: #ccc; } .target { width: 60px; height: 60px; background-color: red; } </style></head><body> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <h1>孙悟空</h1> <div class="target"></div> <script> window.onload = () => { let targetDom = document.querySelector('.target') // 指标元素dom function callBack() { const top = targetDom.getBoundingClientRect().top; // 指标元素dom间隔顶部的高度 if (top <= window.innerHeight) { // 当top小于等于文档显示区域的高时，就进入可视区域了 console.log('在可视区域'); document.body.style.background = 'pink' } else { console.log('不在可视区域'); // 当top大于文档显示区域的高时，就来到可视区域了 document.body.style.background = '#ccc' } } window.addEventListener('scroll', callBack); } </script></body></html>

关于css:2023-告别-CSS-预处理工具彻底拥抱-TailwindCSS

CSS 是申明式语言，很简略，很好学，然而写起来很累，所有货色都要写进去能力失效。复用方面更是无从下手，尽管大家都在一直总结，但始终没能找到足够好用的计划，能够无效改善 CSS 开发。于是咱们只好把眼帘转出 CSS 之外，转投 CSS 预处理工具，Less、SASS（SCSS）、Stylus，引入种种 CSS 不具备的性能，帮忙咱们改良开发体验。比方嵌套、函数、循环、条件，等等。然而如果你仔细察看，实际上，这几个工具最近 5、6 年都没怎么更新（我说的是功能性），因为该有的都有了，甚至很稳固；其它来自于 CSS 的改良，简直跟它们没什么关系，也不必更新。最近几年，随着 CSS 倒退，一些新个性逐渐引入，我感觉这些工具越来越难用，它们能带来的益处曾经无奈覆盖它们所造成的问题。是时候辞别 CSS 预处理工具了，就像咱们当年辞别 jQuery 一样。为什么说预处理工具落后？我把理由分成三大类：预处理工具的问题对 CSS 函数兼容性不好，尤其是 rgba()、hsl() 这些罕用的色彩函数数值类型转换，有不合乎预期的行为，比方 Stylus 实现 content:5CSS 的改良CSS 领有越来越多的函数，能够间接进行计算，比方后面提到的色彩；还有 calc() 来实现根底数学计算CSS 变量十分好用，能够大大改良编程体验，配合各种 JS 框架，咱们能够更容易的把数学逻辑和显示成果绑定在一起CSS Houdini 能够实现很多新性能，即便不深刻应用（JS 局部），也有好用的自定义属性CSS 也开始从预处理工具排汇养分，比方近期的嵌套性能曾经开始被整合，将来咱们能够间接应用预处理工具无奈跟进的问题很多缩写、复合属性无奈解决，比方 background-image、box-shadow 等，都反对多属性独特失效，预处理工具善于的循环、条件、函数无奈提供帮忙。预处理，顾名思义，产生在生产之前。实际上，网页在理论浏览时，会有很多因素影响到渲染后果，比方分辨率、dark mode 等。预处理工具对这些需要也没有改良。代替计划我目前的代替计划基于 TailwindCSS，所以天然蕴含 PostCSS、AutoPrefixer 等工具。而后用 postcss-import 实现主动导入和模块化；应用 tailwindcss/nesting 实现嵌套。为什么选用 TailwindCSS？首先，理论开发中，不论应用什么前端框架，咱们都须要大量原子化的胶水款式，比方调整间距、扭转字号、给容器增加一些边框、圆角、暗影等。这些款式如果都手写，工作量并不小；学习不同的款式名也是累赘；以及最重要的，CSS 优先级问题。应用 TailwindCSS 就都能很好解决。 TailwindCSS 不仅蕴含一大堆原子化款式，本身也是个残缺且优良的 CSS 编译器。它蕴含 reset，提供一组全局通用的 CSS 变量；它能够从各种文件里把咱们用到的款式提取进去，构建后生成的 CSS 里只有咱们要用到款式，不会有多余的；它会剖析咱们对款式的应用，正当的调整款式程序，保障款式能正确失效。应用 TailwindCSS 能够节俭很多工夫。 ...

关于css:弹性盒布局之从左往右空间不够换行继续从左往右从左往右从上往下

本文记录一个css小技巧，不难，不过可能本人一时间想不到问题形容咱们有这样的需要，大容器中有很多的盒子，从左往右排列，空间不够的话，而后换行，持续从左往右排列，如下效果图看到这样的需要，咱们第一工夫想到的就是弹性盒布局，给大容器开启弹性盒、容许换行，两侧散布，于是会写下如下代码： display: flex;flex-wrap: wrap;justify-content: space-between;如果是正好9个项，那这种写法没有问题，如果是8个项，最初一行的7和8就会两侧散布了，如下图：这种成果必定不行啊，那怎么办呢？解决方案一应用实在DOM进行填充，而后再暗藏这个DOM咱们再创立一个dom元素项，作为最初一个9而后把第9项的高度置为0，只保留宽度或者再加点透明度为0障眼法使其看不到即可代码如下（复制粘贴应用）： <!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"> <title>Document</title> <style> .wrap { width: 480px; height: 360px; border: 4px solid #000; overflow-y: auto; box-sizing: border-box; padding: 6px; /* 开启弹性盒，换行，两端散布 */ display: flex; flex-wrap: wrap; justify-content: space-between; } .item { width: 120px; height: 120px; line-height: 120px; text-align: center; border: 2px solid pink; font-weight: 700; font-size: 24px; margin-bottom: 8px; /* 留神是border-box盒模型 */ box-sizing: border-box; } /* 障眼法占位项 */ .fakeItem { width: 120px; height: 0; border: 2px solid green; box-sizing: border-box; opacity: 0; /* visibility: hidden; */ } </style></head><body> <div class="wrap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> <script> /** * 通过js增加一个假的项，即为占位项 * 占位项的高度为0，宽度和其余项宽度一样 * 也可加透明度为0，或者visibility都行的 * 只有障眼法看不到即可 * */ let wrap = document.querySelector('.wrap') let divDom = document.createElement('div') divDom.classList.add('fakeItem') wrap.appendChild(divDom) </script></body></html>这样就实现了，本文中的第一个效果图 ...

关于css:关于CSS单位的一些总结

height 高height设置百分比的时候，简略的了解是绝对父结点的高来计算的，能够看个例子： <!DOCTYPE html><html lang="zh-cn"><body> <div style='width:500px;border: 1px solid blue;height:100px;'> <div style='display: inline-block;border: 1px solid red;height:200px;'> 1 </div> <div style='display: inline-block;border: 1px solid red;height:100%;'> 2 </div> </div></body></html>咱们设置了父结点的高和兄弟结点的高，最终发现设置100%高的后果和父结点的高统一。那么，如果咱们不给父结点设置高会怎么样？还是看看例子： <!DOCTYPE html><html lang="zh-cn"><body> <div style='width:500px;border: 1px solid blue;'> <div style='display: inline-block;border: 1px solid red;height:200px;'> 1 </div> <div style='display: inline-block;border: 1px solid red;height:100%;'> 2 </div> </div></body></html>后果发现height:100%生效了。是的，第一个孩子只是把父结点撑起来了。如果加个定位会怎么样？革新一下例子： <!DOCTYPE html><html lang="zh-cn"><body> <div style='width:500px;border: 1px solid blue;position: relative;'> <div style='display: inline-block;border: 1px solid red;height:200px;'> 1 </div> <div style='display: inline-block;border: 1px solid red;height:100%;position: absolute;'> 2 </div> </div></body></html>哈哈哈，高又复原了。 ...

关于css:前端面试题汇总

1.输出一个URL到页面过程中产生了什么首先在浏览器中输出URL查找缓存：浏览器先查看浏览器缓存-零碎缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。DNS域名解析：浏览器向DNS服务器发动申请，解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的，因而会用到UDP协定。建设TCP连贯：解析出IP地址后，依据IP地址和默认80端口，和服务器建设TCP连贯发动HTTP申请：浏览器发动读取文件的HTTP申请，，该申请报文作为TCP三次握手的第三次数据发送给服务器服务器响应申请并返回后果：服务器对浏览器申请做出响应，并把对应的html文件发送给浏览器敞开TCP连贯：通过四次挥手开释TCP连贯浏览器渲染：客户端（浏览器）解析HTML内容并渲染进去，浏览器接管到数据包后的解析流程为：构建DOM树：词法剖析而后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象构建CSS规定树：生成CSS规定树（CSS Rule Tree）构建render树：Web浏览器将DOM和CSSOM联合，并构建出渲染树（render tree）布局（Layout）：计算出每个节点在屏幕中的地位绘制（Painting）：即遍历render树，并应用UI后端层绘制每个节点。浏览器渲染机制、重绘、重排重排：当DOM的变动影响了元素的几何信息(DOM对象的地位和尺寸大小)，浏览器须要从新计算元素的几何属性，将其安放在界面中的正确地位，这个过程叫做重排。触发条件：增加或者删除可见的DOM元素元素尺寸扭转——边距、填充、边框、宽度和高度重绘：当一个元素的外观产生扭转，但没有扭转布局,从新把元素外观绘制进去的过程，叫做重绘。触发条件：扭转元素的color、background、box-shadow等属性2.平铺三个div和一个按钮3.position属性固定定位 fixed：元素的地位绝对于浏览器窗口是固定地位，即便窗口是滚动的它也不会挪动。Fixed 定位使元素的地位与文档流无关，因而不占据空间。 Fixed 定位的元素和其余元素重叠。绝对定位 relative：如果对一个元素进行绝对定位，它将呈现在它所在的地位上。而后，能够通过设置垂直或程度地位，让这个元素“绝对于”它的终点进行挪动。在应用绝对定位时，无论是否进行挪动，元素依然占据原来的空间。因而，挪动元素会导致它笼罩其它框。相对定位 absolute：相对定位的元素的地位绝对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的地位绝对于。absolute 定位使元素的地位与文档流无关，因而不占据空间。 absolute 定位的元素和其余元素重叠。粘性定位 sticky：元素先依照一般文档流定位，而后绝对于该元素在流中的 flow root（BFC）和 containing block（最近的块级先人元素）定位。而后，元素定位体现为在逾越特定阈值前为绝对定位，之后为固定定位。默认定位 Static：默认值。没有定位，元素呈现在失常的流中（疏忽 top, bottom, left, right 或者 z-index 声明）。 inherit: 规定应该从父元素继承 position 属性的值。4.transition和animation的区别答：transition是适度属性，强调适度，它的实现须要触发一个事件（比方鼠标挪动下来，焦点，点击等）才执行动画。它相似于flash的补间动画，设置一个开始关键帧，一个完结关键帧。animation是动画属性，它的实现不须要触发事件，设定好工夫之后能够本人执行，且能够循环一个动画。它也相似于flash的补间动画，然而它能够设置多个关键帧（用@keyframe定义）实现动画。 5.CSS款式优先级!important内联款式（1000）ID选择器（0100）类选择器（0010）元素选择器（0001）通配符选择器（0000）vue中对组件款式的批改无scoped的状况 6.EventLoop（高频）JS是单线程的，为了避免一个函数执行工夫过长阻塞前面的代码，所以会先将同步代码压入执行栈中，顺次执行，将异步代码推入异步队列，异步队列又分为宏工作队列和微工作队列，因为宏工作队列的执行工夫较长，所以微工作队列要优先于宏工作队列。微工作队列的代表就是，Promise.then，MutationObserver，宏工作的话就是setImmediate setTimeout setInterval requestAnimationFrame是属于什么工作？宏工作？或二者都不是 7.map 跟 forEach 的区别map有返回值 forEach 没有返回值 8.computed与watchwatch 属性监听是一个对象，键是须要察看的属性，值是对应回调函数，次要用来监听某些特定数据的变动，从而进行某些具体的业务逻辑操作,监听属性的变动，须要在数据变动时执行异步或开销较大的操作时应用 computed 计算属性属性的后果会被缓存，当computed中的函数所依赖的属性没有产生扭转的时候，那么调用以后函数的时候后果会从缓存中读取。除非依赖的响应式属性变动时才会从新计算，次要当做属性来应用 computed中的函数必须用return返回最终的后果 computed更高效，优先应用。data 不扭转，computed 不更新。 ...

关于css:由zindex属性引发对层叠上下文的全面认知

在日常开发中，常常应用z-index款式属性调整元素的层级大小。个别状况下，都能达到元素之间笼罩成果的要求。但在某些场景下，不管定位元素z-index属性值设置多大，都无奈在页面的最顶层出现。尽管能够能够把该元素晋升为<body>的间接子元素，并且的确能够达到成果，但比拟繁琐，开发效率比拟低下。为此，开始对z-index款式属性开始钻研，但钻研到最初发现：页面的渲染是由若干个图层通过层叠上下文的程序，顺次渲染而成。上面就层叠上下文全面说说。层叠上下文（stacking context）层叠上下文是HTML中的一个三维概念，是元素在z轴上的绝对地位的形容。对于已经通过photoshop设计稿来获取页面元素尺寸的开发者而言，层叠上下文和图层的概念十分相似。元素造成层叠上下文的条件文档根元素（<html>）；position 值为 absolute（相对定位）或 relative（绝对定位）且 z-index 值不为 auto 的元素；position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有挪动设施上的浏览器，但老的桌面浏览器不反对）；flex (flex) 容器的子元素，且 z-index 值不为 auto；grid (grid) 容器的子元素，且 z-index 值不为 auto；opacity 属性值小于 1 的元素（参见 the specification for opacity）；mix-blend-mode 属性值不为 normal 的元素；以下任意属性值不为 none 的元素：transform、filter、backdrop-filter、perspective、clip-path、mask / mask-image / mask-borderisolation 属性值为 isolate 的元素；will-change 值设定了任一属性而该属性在 non-initial 值时会创立层叠上下文的元素；contain 属性值为 layout、paint 或蕴含它们其中之一的合成值（比方 contain: strict、contain: content）的元素。层叠上下文之间的关系层叠上下文的子元素在满足条件后能够造成一个新的子层叠上下文，从而整体上造成层叠上下文的树形关系（父子嵌套、兄弟平行）。不同层叠上下文的各个子元素，其影响范畴仅限于父级层叠上下文，而不会影响到其余层叠上下文。例如：上图中：左侧中的main1和main2设置了z-index为0，造成了新的层叠上下文，并且main2的层级比main1大；move1设置了z-index为999999，但因为无奈冲破父级层叠上下文的限度，无奈笼罩在move2的下面。右侧中的main1和main2设置了z-index为auto，无奈造成了新的层叠上下文；move1和move2有独特的父级层叠上下文，因为move1设置了z-index为999999，所以能够笼罩在move2的下面。试试看层叠程序（stacking order）一个层叠上下文的子元素能够是层叠上下文，也能够不是层叠上下文。子元素在z轴上的程序规定，是通过层叠程序来表白的。具体如下图所示：整体示意图总结由z-index引发了对层叠上下文的全面认知。当初利用层叠上下文的逻辑，解释结尾的景象：因为设置z-index属性的定位元素，其父元素为层叠上下文（也为定位元素），并且父元素并非位于整个页面的最高层级；所以设置z-index属性的定位元素，无论其z-index属性值设置多大，都无奈冲破父元素的限度，达到整个页面的最高层级。在日常开发中，有很多开发者在面对元素层叠场景时，都会为每个相干元素增加z-index属性。心愿这篇文章能对这种行为有所帮忙，全面认知层叠上下文，缩小非必要z-index属性的书写。

关于css:了解-BFC

对于页面的布局，前端开发者都大略理解：block元素占据网页一整行空间，从上到下排列；多个inline元素共享网页一整行空间，从左到右，超出横向空间时，则向下排列。但在开发页面时，会常常遇到浮动高度塌陷、垂直方向上的margin重叠or溢出等场景。尽管利用CSS Hack能够疾速解决问题，但其背地的原理始终没去了解。有时候某个CSS Hack还有副作用，尽管解决了问题，但又新增了其余问题；为此还须要减少一些dom，导致代码比拟冗余，不利于后续的开发者浏览代码。下面说的场景，其背地原理都和BFC无关，接下来就好好理解一下BFC。什么是BFCBFC（Block formatting contexts），块级格式化上下文。它是独立的渲染区域，该区域内的子元素不会影响内部的元素。 BFC 布局特点默认状况下，BFC内的子元素（content+padding+border+margin）仅能在BFC的content区域内展现。float元素也会决定BFC的高度，从而撑起BFC的高度。如何创立BFC根元素(<html>)浮动元素（元素的 float 不是 none）相对定位元素（元素的 position 为 absolute 或 fixed）行内块元素（元素的 display 为 inline-block）表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）表格题目（元素的 display 为 table-caption，HTML表格题目默认为该值）匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（别离是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）overflow 值不为 visible 和 clip 的块元素display 值为 flow-root 的元素，能够创立无副作用的BFC弹性元素（display为 flex 或 inline-flex元素的间接子元素）网格元素（display为 grid 或 inline-grid 元素的间接子元素）除display: flow-root办法之外，其余办法或多或少有副作用。因而除非有非凡场景须要，否则倡议应用display: flow-root创立BFC。BFC的理论利用革除浮动有了flex布局之后，float布局就很少应用了。但在某些文字布局场景下，float布局还是有一席之位的。在float布局风行的时代，都须要解决高度塌陷的问题。接下来，咱们用display: flow-root来解决高度塌陷的问题。入手试试看阻止子元素的垂直方向margin塌陷默认状况下，垂直方向上，子元素的margin会与父元素（no padding & border）的margin合并，或者子元素的margin显示在父元素之外。但这并不是咱们冀望的，咱们冀望子元素的margin显示在父元素的content范畴内。接下来，咱们用display: flow-root来解决这个问题。入手试试看总结BFC是页面上一个隔离的布局容器，容器里的子元素不会影响到容器外的元素。利用BFC，能够很好地解决日常开发中的布局问题。

关于css:一个神奇的定位方式-position-sticky

顶部导航往往须要固定在页面的顶部，不随滚动而产生绝对视口地位的扭转。在没有应用sticky定位之前，往往采纳fixed定位+placeholder占位的形式解决；须要借助javascript的能力，依据滚动间隔，动静在fixed定位和static定位两者之间做切换；费时费力，还须要波及大量的滚动计算。在应用sticky定位之后，这一常见场景将仅靠一个定位属性即可实现，简略又实用。上面具体理解一下这个属性。介绍为了能直观地理解sticky定位，这里引入三个元素：滚动元素、粘性束缚元素和sticky元素。滚动元素：从dom层级关系来看，间隔sticky元素最近的能滚动的父元素。粘性束缚元素：sticky元素的父元素。 sticky元素：设置了position: sticky的元素。sticky定位，分为两个状态：绝对定位、固定定位当sticky定位体现固定定位时，sticky元素绝对于滚动元素定位。sticky定位原理必须给sticky元素设置top、right、bottom、left中的任何一个值。因为sticky元素须要绝对滚动元素定位，定位须要地位参数；所以必须给sticky元素设置top、right、bottom、left中的任何一个值。 sticky元素与滚动元素、粘性束缚元素三者之间的UI体现sticky元素的显示范畴sticky元素（content+padding+border+margin）只能在粘性束缚元素的content范畴内挪动。当为sticky元素设置偏移款式时，能够显示在粘性束缚元素的content范畴之外；但sticky定位的实质不会扭转，只是sticky元素的显示地位产生了偏移。当sticky元素体现固定定位时，其定位逻辑为sticky元素设置的定位间隔，体现在：sticky元素的外边界（border or padding or content）到滚动元素的内边界（padding or content）之间的间隔 sticky元素体现为固定定位的条件sticky元素须要达到固定定位的地位。为sticky元素设置地位参数，相同方向上sticky元素的外边界（margin or border or padding or content）到粘性束缚元素的内边界（content）之间须要有元素，能够撑起肯定的空间，供sticky元素固定定位应用。例如：当sticky元素设置top之后；sticky元素的外边界（margin-bottom or border-bottom or padding-bottom or content-bottom）到粘性束缚元素的content-bottom之间有元素存在，且能撑起肯定的空间。粘性束缚元素与滚动元素之间不能存在款式属性为overflow: hidden的元素。sticky元素的体现sticky元素会创立一个新的层叠上下文；但在父元素中会留下占位符，不会影响任何其余元素的地位。同一个粘性束缚元素的多个sticky元素，当体现为固定定位时，可能会重叠在一起；默认状况下，靠后的sticky元素层级比靠前的高，但能够通过z-index调整。具体的例子两个sticky元素顺次不同高度吸顶入手试试看总结绝对其余三种定位（绝对定位、相对定位、固定定位）而言，sticky定位解决的场景比较复杂，且波及到的元素多。但把握其原理之后，遇到导航吸顶、底部按钮等场景时，将非常简略、高效。

关于css:CSS-弹性盒子模型常用配置

父级开启弹性盒子模型： display：flex排列方向： flex-direction:row/row-reverse/column/column-reverse主轴布局： justify-content:center/flex-start/flex-end/space-between/space-around副轴布局： align-items:center/flex-start/flex-end多行排列： align-content：center/flex-start/flex-end/stretch是否换行： flex-wrap：wrap/nowrapalign-content：用于批改 flex-wrap 属性的行为。相似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。子级配置：flex 是 flex-grow、flex-shrink、flex-basis 三个属性的简写，具体如下： flex-grow：必填，设置我的项目绝对于其余我的项目的增长量，默认为 0；flex-shrink：选填，设置我的项目绝对于其余我的项目的膨胀量，默认为 1；flex-basis：选填，我的项目的长度，可设为: auto(默认值，主动)、inherit（从父元素继承该属性值）或以具体值加 "%"、"px"、"em" 等单位模式。flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] auto: 计算值为 1 1 autoinitial: 计算值为 0 1 autonone：计算值为 0 0 autoinherit：从父元素继承[ flex-grow ]：定义弹性盒子元素的扩大比率。[ flex-shrink ]：定义弹性盒子元素的膨胀比率。[ flex-basis ]：定义弹性盒子元素的默认基准值。

关于css:快速学会Flex布局核心知识

Author:博哥 Time:2023-01-14 该文章对应的视频教程去B站观看视频教程去B站观看视频教程一.筹备工作1.1 创立index.html 编写如下代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>8分钟学会Flex布局</title> </head> <body> <div class="container"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </div> </body> </html>1.2 引入如下初始化款式:root{ --clr-dark: #0f172a; --clr-light: #f1f5f9; --clr-accent: #e11d48; } *, *::before, *::after{ box-sizing: border-box; } body{ margin: 0; padding: 0; line-height: 1.6; word-spacing: 1.4px; font-family: 'Roboto', sans-serif; color: var(--clr-dark); background-color:var( --clr-light) ; display: flex; justify-content: center; align-items: center; height: 100vh; } .container{ width: 80%; height: 700px; margin: 0 auto; border: 10px solid var(--clr-dark); } .item{ width: 150px; height: 150px; background-color: #fb7185; padding: 1em; font-weight: 700; color: var(--clr-light); text-align: center; border: 10px solid var(--clr-accent); border-radius: 10px; }二.Flex布局介绍 ...

关于css:Css知识扫盲

flex布局换行之后，上面一行的布局会异样.homeItemBox{ display: flex; flex-wrap: wrap; justify-content: flex-start; }.homeItem{ display: flex; width: calc((100% - 20rpx) / 4); flex-direction: column; align-items: center; flex-shrink: 0; margin-top:30rpx; }.homeItem:nth-of-type(4n+0){margin-right: 0;} //每一行的第四个margin right是0nth-of-type(4n+0)4n+0 就是每隔四个odd even关键词示意奇偶数这个是算术表达式 p:nth-of-type(3n+0)应用公式 (an + b)。*形容：示意周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，咱们指定了下标是 3 的倍数的所有 p 元素的背景色* flex-shrink: 0;假使给父元素设置了flex布局后，若要其子元素的width有成果，必须给子元素设置flex-shrink为0来固定元素不被挤压 filter*filter:brightness 亮度/曝光度 filter:brightness(0.2)filter: opacity( %) ---- 透明度filter: drop-shadow(offset-x offset-y blur color) ---- 暗影filter:drop-shadow(10px 15px 20px #000)filter: grayscale( %) ---- 灰度图像filter: sepia( %) ---- 深褐色filter: hue-rotate( deg ) ---- 色相旋转filter: invert( %) ---- 反转图像应用invert滤镜能够把对象的可视化属性全副翻转，包含色调、饱和度和亮度值filter: saturate( %) ---- 饱和度filter: contrast( %) ---- 对比度值0％代表全灰色图像，而100％代表原始图像filter: blur( px) ---- 高斯含糊* ...

关于css:大屏echarts漂移引发的问题

最近写了一个大屏我的项目，布局次要用的flex，后果写完发现其中的几个echarts图表鼠标事件漂移了，随即增加了媒体查问对图表进行zoom重设。然而，漂移的问题解决了，大屏的整体布局却因为zoom的扭转而撑出了原来的布局。最初解决：将图表父级增加overflow: hidden款式就阻止了溢出。

关于css:CSS-Grid-网格布局教程

一、概述网格布局（Grid）是最弱小的 CSS 布局计划。它将网页划分成一个个网格，能够任意组合不同的网格，做出各种各样的布局。以前，只能通过简单的 CSS 框架达到的成果，当初浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有肯定的相似性，都能够指定容器外部多个我的项目的地位。然而，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"我的项目"针对轴线的地位，能够看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，而后指定"我的项目所在"的单元格，能够看作是二维布局。Grid 布局远比 Flex 布局弱小。二、基本概念学习 Grid 布局之前，须要理解一些基本概念。 2.1 容器和我的项目采纳网格布局的区域，称为"容器"（container）。容器外部采纳网格定位的子元素，称为"我的项目"（item）。 <div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div></div>下面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是我的项目。留神：我的项目只能是容器的顶层子元素，不蕴含我的项目的子元素，比方下面代码的<p>元素就不是我的项目。Grid 布局只对我的项目失效。 2.2 行和列容器外面的程度区域称为"行"（row），垂直区域称为"列"（column）。上图中，程度的深色区域就是"行"，垂直的深色区域就是"列"。 2.3 单元格行和列的穿插区域，称为"单元格"（cell）。失常状况下，n行和m列会产生n x m个单元格。比方，3行3列会产生9个单元格。 2.4 网格线划分网格的线，称为"网格线"（grid line）。程度网格线划分出行，垂直网格线划分出列。失常状况下，n行有n + 1根程度网格线，m列有m + 1根垂直网格线，比方三行就有四根程度网格线。上图是一个 4 x 4 的网格，共有5根程度网格线和5根垂直网格线。三、容器属性Grid 布局的属性分成两类。一类定义在容器下面，称为容器属性；另一类定义在我的项目下面，称为我的项目属性。这部分先介绍容器属性。 3.1 display 属性display: grid指定一个容器采纳网格布局。 div { display: grid;} 上图是display: grid的成果。 ...

关于css:Anki-图片居中样式

img { display: block; margin-left: auto; margin-right: auto;}

关于css:原来这就是BFC-遇到样式问题别瞎搞了

前言看到一篇前端面试题，第一个问题是什么是BFC ？，一下子唤起了我的辛酸回顾，那是在七月，在沪漂找工作的路上，预约的一个电话面试，眼看着工夫就要到了，人生第一次进星巴克，提前百度了一下“星巴克什么咖啡是甜的”，装作很纯熟的样子要了杯焦糖玛奇朵，找了个角落坐下来，等着电话铃声响起...咱们先聊聊css吧，“来说说什么是BFC?” 一下子给我问懵了，前面体现也不是很现实，于是那一下午我真就好好品了一下午焦糖玛奇朵，口感醇厚偏甜，喝多易瘦削什么是BFC ?BFC：（Block Formatting Context）官网解释：A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context. 翻译过去：块级格式化上下文或块级格局区域，块级格局区域蕴含创立它的元素外部的所有内容，但不蕴含创立新块级格局区域的子元素外部的所有内容不太好了解是吧，举个例子： <div class="box1" id="BFC1"> <div class="box2"></div> <div class="box3"></div> <div class="box4" id="BFC2"> <div class="box5"></div> <div class="box6"></div> </div></div>解释当BFC1为一块BFC区域时，这块区域蕴含box2、box3、box4，他们是BFC1的子元素而当BFC2也是一块BFC区域时，他蕴含box5、box6 总结每一个BFC区域只包含其子元素，不包含其子元素的子元素。每一个BFC区域都是独立断绝的,互不影响一个元素不能同时存在于多个BFC中怎么生成一个BFC区域？根元素（html）,或蕴含body的元素设置浮动（float），且值不为none（为 left、right），设置定位（position）, 不为static或relative（为 absolute 、 fixed）设置 display 为这些值 inline-block、flex、grid、table、table-cell、table-caption设置 overflow，且值不为visible (为 auto、scroll、hidden)满足以上条件之一的即可造成BFC区域 BFC有哪些个性？属于同一个BFC的两个相邻容器的高低margin可能会重叠计算BFC高度时浮动元素也会被计算BFC的区域不会与浮动容器产生重叠所有属于BFC中的盒子默认左对齐，并且它们的右边距能够涉及到容器的右边线。最初一个盒子，只管是浮动的，但仍然遵循这个准则BFC是独立容器，容器外部元素不会影响容器内部元素依据BFC的个性，咱们能够解决哪些问题？依据个性1 >>> 解决外边距的塌陷问题当两个盒子设置100的外边距，会发现应该200px的外边距产生了塌陷，margin重叠只有100px 解决这个问题，将两个盒子放在不同的BFC中即可，办法一：咱们能够将其中一个元素设置成BFC区域，这里为box1包裹一层div设置overflow：hidden使其成为BFC区域，使box1，box2成为两个独立容器互不影响办法二：给其中一个元素设置display：inline-block，同样能够使其成为BFC区域 ...

关于css:23个css动画效果持续更新中

代码github仓库：https://github.com/shuirongsh...应用形式看名称效果图，有没有和本人想要的成果相似的有的话，复制粘贴代码应用也能够本人批改一下css成果并不是特地难，只是有时候咱们可能想不到笔者闲暇工夫，会持续更新的哦，点赞关注不迷路^_^留神：一些代码思路，笔者写在代码正文中去了 1_鼠标悬浮文字暗影跳动效果图代码<!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"> <title>Document</title> <style> h1 { width: 80px; color: cornflowerblue; } h1:hover { animation: animate 0.5s linear infinite; } @keyframes animate { 0%, 25% { text-shadow: 2px 2px 2px #ff6384; } 50% { text-shadow: 2px -2px 2px #ff6384; } 75% { text-shadow: -2px 2px 2px #ff6384; } 100% { text-shadow: -2px -2px 2px #ff6384; } } </style></head><body> <h1>hello</h1> </body></html>2_鼠标悬浮文字底部呈现下划线并变宽效果图 ...

关于css:各大页面重要时刻紧急变灰处理

首先咱们须要。。。。关上css代码而后咱们在body上定义{ filter: grayscale(.95);-webkit-filter: grayscale(.95);} 就成了。。。

关于css:推荐几个不错的-CSS-工具持续收录

原文链接:举荐几个不错的 CSS 工具，继续收录！ NeumorphismNeumorphism 是一个很棒的工具，能够依据你的爱好抉择色彩、编辑大小、半径、间隔等为你的设计生成 UI CSS 代码。 AnimistaAnimista 是CSS动画的中最佳的工具之一。你只需抉择你喜爱的动画类型，并设置一些参数，而后将生成的 CSS 代码用到你的我的项目中。 PurgeCSSPurgeCSS 能够删除 CSS 中未应用到的代码，减小 CSS 文件的体积，并进步性能。 Shadow BrummShadow Brumm 是一款疾速创立暗影的工具。应用此工具，你只需定义一些暗影选项，就能够创立酷炫且平滑的暗影，并为你生成成果代码。 CSS GradientCSS Gradient 是一款值得举荐的工具。你能够抉择不同类型的色彩和选项来创立突变背景，它主动为你的突变背景生成 CSS 代码。这是我日常开发中常常用到的工具之一。 CSS Grid GeneratorCSS Grid Generator 能够创立响应式网格布局，你只需设置列、行和单位。能够同步看到网页的成果，还能够获取该成果的 CSS 代码甚至 HTML 代码。 Get WavesGet Waves 能够为你的我的项目创立 SVG 波形。你只需调好参数，该工具会同步生成 wave 成果，当达到目标成果时，你只须要下载生成的 CSS 代码使用到你的我的项目中即可。 Blob MakerBlob Maker 此工具可帮忙你创立不同的不寻常形态，并容许你复制和下载 SVG 文件。 CSS Accordion Slider GeneratorCSS Accordion Slider Generator 此工具可帮忙你创立齐全响应的、仅 CSS（无 javascript）的手风琴滑块。 ...

关于css:CSS学习笔记一-盒子模型

原本依照失常的学习程序, 应该是HTML、CSS、JavaScript，再到Vue。然而到我这里程序就反过来了一样，先Vue 、再JavaScript，而后CSS。起因在于我之前就学习过这些，尽管当初学的不扎实，然而勉强能用，须要用到什么，而后遗记了就从新再学习一下，这看起来像是逆成长一样，但前面会将这个系列的文章补齐。前言在上海地铁是大多数人的通勤形式，有的时候地铁人多，就会很拥挤，那拥挤表白的意思是什么呢？我想是人与人之间的间隔很小吧。如果将人视做html的元素，那么人与世间的间隔在在CSS中称为margin，也被称为外边距。然而人和HTML的标签还是有些区别，HTML的元素分块级元素和行内元素、块级元素(Block-level elements)那什么是块级元素？简略的说就是块级元素占满一行，如下图所示: <!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"> <title>Document</title></head><body><p>This</p></body><style>p { background-color: #8ABB55; }</style></html>效果图: 尽管标签p的内容只有一个this，然而当咱们为它增加上背景色，你会发现整个一行都呈现了绿色。仔细的敌人运行代码之后可能会说也没占满一行啊，旁边还有两个空白啊。那是因为咱们写的p标签在body标签外面，body标签是一个更大的盒子: 浏览器给body默认的margin大小是8个像素, 咱们能够通过浏览器的工具来验证咱们的论断: 而后咱们将body标签的margin清空就会发现p标签齐全占一整行: <!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"> <title>Document</title></head><body><p>This</p></body><style>p { background-color: #8ABB55; margin: 0px; }body{ margin: 0px;} </style></html>所以块级元素占据其父元素的整个程度空间，高度等于其内容高度，像是一块一样，所以被称为块级元素。所以两个块级元素不能位于一行，默认状况下在块级元素之后，再写块级元素，块级元素会新起一行。以下是HTML中所有的块级元素列表: address article aside blockquote dd divdl fieldset figcaption figure footer h1-h6 formheader hgroup hr ol p pre section table ul行内元素那咱们能够类比块级元素对行内元素下定义，块级元素占据一行，那行内元素就是只占据它对应标签的边框所蕴含的空间: <!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"> <title>Document</title></head><body> <p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p></body><style> span { background-color: #8ABB55; }</style></html> ...

关于css:CSS之emmet语法

介绍:Emmet 语法能够疾速的生成Html和Css语法,能够进步html/css的编写速度,进步开发效率疾速生成html的语法生成标签间接输出标签名按tab键即可比方 div 而后tab 键，就能够生成如果想要生成多个雷同标签加上就能够了比方 div3 就能够疾速生成3个div如果有父子级关系的标签，能够用 > 比方 ul > li就能够了如果有兄弟关系的标签，用 + 就能够了比方 div+p如果生成带有类名或者id名字的，间接写 .demo 或者 #two tab 键就能够了如果生成的div 类名是有程序的，能够用自增符号 $如果想要在生成的标签外部写内容能够用 { } 示意疾速生成css款式语法CSS 根本采取简写模式即可比方 w200 按tab 能够生成 width: 200px;比方 lh26px 按tab 能够生成 line-height: 26px;

关于css:css-选择器总结

1. 根底选择器(1) 通配符选择器 * {}(2) 类选择器 .类名{}(3) ID选择器（具备唯一性） .ID {}(4) 元素选择器(标签选择器) div {}2. 关系选择器(1) 后盾选择器 ‘ ’ 如 div p{} div下的所有p标签都会失效(2) 子代选择器 > 只有第一个div下的p标签失效第二个div下的p标签不失效 div>p{} <div> <p><p> <div>p</div> </div>(3) 相邻兄弟选择器 + p+span{} 只有我是第一个span失效 <div> <p></p> <span>我是第一个span</span> <span>我是第二个span<span> </div>(4) 通用兄弟选择器 ~ 即兄弟级别的都能够失效3. 伪类选择器(1) 超链接相干 a. :link 超链接点击之前(只实用于a标签) b. :visited 超链接被拜访过之后(只实用于a标签) c. :hover 鼠标悬停 d. :active 鼠标点击但不松手时(2) :first-child 选择器匹配父元素中的第一个子元素(3) :last-child 选择器匹配父元素中的最初一个子元素(4) :nth-child(n) 选择器匹配父元素中的第n个子元素元素类型没有限度 n能够是数字也能够是关键字其中也能够将n设置为奇数，即odd 偶数为even(5) :only-child 选择器匹配父元素中只有一个子元素的元素(6) :empty 选择器匹配没有任何子元素的元素，包含文本节点(7) :not() 选择器匹配每个元素是不是指定的元素/选择器(8) :focus 选择器用于抉择具备焦点的元素个别用于input标签(9) :checked 选择器匹配每个选中的选中器（仅实用于单选框和复选框）4. 伪对象选择器::befor 和 ::after 用于在被选元素的后面或前面增加内容用来和content属性一起应用。5. 属性选择器

关于css:CSS-自定义属性变量-variables

自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 开发者自行定义的，它蕴含的值能够在整个文档中重复使用。由自定义属性标记设定值（比方： --main-color: black;），由 var() 函数来获取值（比方： color: var(--main-color);）简单的网站都会有大量的 CSS 代码，通常也会有许多反复的值。根本用法申明一个自定义属性，属性名须要以两个减号（--）开始，属性值则能够是任何无效的 CSS 值。和其余属性一样，自定义属性也是写在规定集之内的，如下： element { --main-bg-color: brown;}所定义自定义属性须要在其可见作用域内（即被嵌套的标签内应用），通常的最佳实际是定义在根伪类 :root 下，这样就能够在 HTML 文档的任何中央拜访到它了： :root { --main-bg-color: brown;}相干知识点var() 函数var()函数能够代替元素中任何属性中的值（value）的任何局部。 var()办法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数援用的自定义属性有效，则该函数将应用第二个值。 <var()> = var( <custom-property-name> , <declaration-value>)举个栗子/* 后备值 *//* 在父元素款式中定义一个值 */.component { --text-color: #080; /* header-color 并没有被设定 */}/* 在 component 的款式中应用它： */.component .text { color: var(--text-color, black); /* 此处 color 失常取值 --text-color */}.component .header { color: var(--header-color, blue); /* 此处 color 被回退到 blue */}个性继承：自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被应用。备用值嵌套：var()自身能够作为第二个值进行有限嵌套 ...

关于css:openKylin社区SIG组2022年第四季度工作会议顺利召开

2022年10月28日，openKylin社区SIG线上技术研讨会顺利召开。本次会议旨在增强openKylin社区与各SIG组之间的交换与沟通、促成社区SIG更好倒退，由openKylin社区Release SIG Maintainer张天雄进行主持，openKylin社区理事温研、openKylin社区技术委员会委员余杰、GraphicSystem SIG Maintainer杨凌云、Defend SIG Owner赵建祖、Xfce和KDE SIG Owner茹桃林、QuarkAI SIG Owner张文涛、InternationalPromotion SIG Owner王文竹、UKUI SIG Owner张超、Infrastructure SIG Owner毛周、RISC-V SIG Owner刘晓东，I18N SIG Owner李剑峰、Community SIG Owner刘敏等成员加入，围绕社区各SIG小组工作开展了深刻交换与探讨。1、SIG工作汇报会议开始，各SIG组围绕以后小组工作进展和将来布局进行了汇报分享，其中：GraphicSystem SIG Maintainer杨凌云示意GraphicSystem SIG目前正在致力于解决开源驱动SoC显卡平台会呈现的闪屏、不同型号显卡适配等问题，后续将会分阶段继续提交代码到openKylin社区mesa我的项目和wayland我的项目；Defend SIG Owner赵建祖示意小组目前正在布局openKylin平安防护利用的功能模块，后续将实现需要说明书并在社区公布开发工作并欢送感兴趣的开发者独特参加；Xfce和KDE SIG Owner茹桃林示意目前Xfce和KDE桌面环境已实现版本选型和80%的组件包本地打包编译验证，接下来将公布到openKylin proposed源；QuarkAI SIG Owner张文涛示意，目前已实现智能语音助手、结绳编译平台等AI利用的开发工作，接下来筹备进行打包编译和自测工作。2、社区规划介绍随后，由Release SIG Maintainer张天雄介绍了openKylin社区在SIG组反对方面的布局，次要包含社区成员成长体系、SIG组品牌宣传和openKylin版本布局四个方面。其中，张天雄介绍到openKylin社区每年公布一个正式版本，各SIG组应次要围绕openKylin版本发展SIG组工作，并争取让SIG组的交付成绩成为正式版本公布的一部分。3、圆桌探讨最初，在会议圆桌探讨环节，各参会人员围绕SIG小组后续的运作、治理和宣发以及心愿从openKylin社区失去怎么的反对等方面开展了交换探讨。其中，针对SIG宣发工作，openKylin社区可为各个SIG组提供品牌宣传反对，同时各SIG小组Owner也能够从集体渠道进行宣传，吸引更多有志人士退出，打造“明星SIG”。此外，对于SIG成员的奉献，openKylin社区也上线了成长体系，面向所有openKylin社区成员凋谢，不仅能够兑换社区礼品，还能够解锁不同社区权利。本次SIG线上技术研讨会的顺利召开，进一步增强了社区各SIG组之间、SIG组与社区之间的技术交换，加深了大家对各SIG组工作职责的认知。将来，openKylin社区将继续发力，助力社区SIG组工作的推广与利用，携手打造具备自定义操作系统状态能力和具备国内影响力的顶级开源社区。openKylin（凋谢麒麟）社区旨在以“共创”为外围，在开源、被迫、平等、合作的根底上，通过开源、凋谢的形式与企业构建合作伙伴生态体系，独特打造桌面操作系统顶级社区，推动Linux开源技术及其软硬件生态凋敝倒退。社区首批理事成员单位包含麒麟软件、普华根底软件、中科方德、麒麟信安、凝思软件、一铭软件、中兴新支点、元心科技、中国电科32所、技德零碎、北京麟卓、先进操作系统翻新核心等13家产业同仁和行业机构。审核：openKylin

关于css:CSS-渐变锯齿消失术

在 CSS 中，突变（Gradient）堪称是最为弱小的一个属性之一。然而，常常有同学在应用突变的过程中会遇到突变图形产生的锯齿问题。何为突变锯齿？那么，什么是突变图形产生的锯齿呢？简略的一个 DEMO： <div></div>div { width: 500px; height: 100px; background: linear-gradient(37deg), #000 50%, #f00 50%, #f00 0);}成果如下：其实，锯齿感曾经非常明显了，咱们再放大了看，其外部其实是这样的：又或者是这样：有意思的是，锯齿景象在 DPR 为 1 的屏幕下特地显著，而在一些高清屏（dpr > 1）的屏幕下，感触不会那么显著。 DPR（Device Pixel Ratio）为设施像素比，DPR = 物理像素 / 设施独立像素，设施像素比形容的是未缩放状态下，物理像素和设施独立像素的初始比例关系。那么为啥会产生锯齿感呢？传统网页的出现是基于像素单位的，对于这种一种色彩间接过渡另外一种色彩状态的图片，容易导致可视品质降落（信息失真）。因此对于一般的突变元素，像是上述写法，产生了锯齿，这是十分常见的在应用突变过程中的一个辣手问题。简略的解决办法解决失真的问题有很多。这里最简略的形式就是不要间接过渡，保留一个极小的突变过渡空间。上述的代码，咱们能够简略革新一下： div { width: 500px; height: 100px; - background: linear-gradient(37deg), #000 50%, #f00 50%, #f00); + background: linear-gradient(37deg), #000 49.5%, #f00 50.5%, #f00);}认真看其中的变动，咱们从 50% --> 50% 的间接过渡，变动成预留了 1% 的突变过渡空间，成果如下： ...

关于css:openKylin出品-COSCon22-开源操作系统论坛快来看看吧

业界具备宽泛影响力的开源年度盛会2022第七届中国开源年会(COSCon22)将于10月29日-30日由开源社举办。往年，咱们的主题是: Open the World !咱们喜爱 Open 胜过 Close咱们喜爱 Connection 胜过 Broken咱们喜爱 Public Good 胜过 Bad News咱们心愿能以开源的技术、开源的形式、开源的力量，为改善这个世界做出一点奉献。线上共设有1个主论坛和16个分论坛，其中【开源操作系统论坛】由openKylin技术负责人余杰和西安邮电大学传授陈莉君联结出品。目前，残缺论坛议程已出，快来一起看看吧~01论坛介绍开源曾经被写入国家十四五布局，目前国内外开源操作系统倒退迅速，操作系统开源社区建设热火朝天。本次论坛拟邀请国内外开源操作系统的开发者和爱好者独特分享与探讨开源操作系统的研制停顿、痛点痒点和将来布局，一起畅想开源操作系统的美妙今天。直播观看地址：http://segmentfault.com/area/...本次大会的线上互动群（COSCon'22 @开源人团圆）也如约而至。退出社群，理解大会一手信息，精彩周边拿不停！出品丨COSCon'22组委会编辑丨王梦玉设计丨苏子馨王梦玉朱亿钦openKylin（凋谢麒麟）社区旨在以“共创”为外围，在开源、被迫、平等、合作的根底上，通过开源、凋谢的形式与企业构建合作伙伴生态体系，独特打造桌面操作系统顶级社区，推动Linux开源技术及其软硬件生态凋敝倒退。社区首批理事成员单位包含麒麟软件、普华根底软件、中科方德、麒麟信安、凝思软件、一铭软件、中兴新支点、元心科技、中国电科32所、技德零碎、北京麟卓、先进操作系统翻新核心等13家产业同仁和行业机构。

关于css:扩大元素的点击区域

问题背景有时候咱们在做挪动端业务的开发时，会遇到这样的问题：咱们依照UI设计稿画好了页面，然而在验收性能时，发现在小屏幕手机上有些按钮不好点击，可是UI同学又不心愿咱们调整按钮的大小，毁坏了他的设计。上面提供一种办法，既能够不改变UI，又能够调整点击的热区。办法<button id="btn">btn</button>#btn { position: relative;}#btn::before { content: ""; position: absolute; top: -20px; right: -20px; bottom: -20px; left: -20px;}原理其实很简略，伪元素绝对于button进行四个方位的拉伸，这样不仅不会毁坏布局，还达到了目标。成果

关于css:5分钟搞懂css里面的盒模型

教你5分钟搞懂css外面的盒模型什么是盒模型在html中，咱们写的标签，很多都是有盒模型的，也就是在css外面，咱们为这些标签设置款式的时候，实际上就是为这些盒子设置款式。可能这样不是很好了解，咱们来看一个例子：在日常生活中，咱们常常应用一些盒子来装货色，此时咱们将盒子设想成从上往下看的二维立体：那么盒子将会蕴含以下货色：盒子外面装的货色【内容】盒子内容与盒子包装的间隔【内边距】盒子的厚度：【边框】盒子间隔其余货色的间隔【外边距】css外面的盒模型就蕴含内容content,内边距padding,边框border,外边距margin如下图所示：红色框框外面的就是内容content绿色箭头的间隔就是内边距padding再往外的彩色边框就是盒子的边框border最里面的的蓝色箭头就是外边距margin盒模型的分类在现在css的规范外面，盒模型有两种，一种是规范盒模型，一种是IE盒模型。 css默认应用的是ie盒模型，这就导致了一些初学者在设置css款式的时候呈现一些出其不意的问题。至于是什么问题呢？接着往下看。 ie盒模型首先咱们来讲讲ie盒模型是怎么样子的。咱们在ie盒模型中，设置的宽度以及高度，只是蕴含了内容content的宽度以及高度，不蕴含内边距padding以及边框border的宽度以及高度。 .box{ width: 100px; height: 100px; padding: 10px; border: 1px solid #000; margin: 19px;}在浏览器开发者工具中，咱们能够看到，该盒子的内容内容长宽都为100px,然而盒子的理论长宽为130px，这就是因为ie盒模型长宽只蕴含内容的长宽。此时咱们设置的长宽度计算形式为： width = content.width height = content.height 这时候，问题就来了：一些初学者明明只给盒子设置了100px的宽度，为什么盒子的理论宽度却是130px呢？看来下面的例子，就很明了了，这就是ie盒子长宽不蕴含内边距以及边框的宽度导致的问题。规范盒模型规范盒模型，就是咱们常说的盒模型，它的长宽蕴含了内容content，内边距padding，边框border的宽度以及高度。留神：规范盒模型并不蕴含外边距margin的宽度以及高度。在应用规范盒模型之前，咱们须要通过box-sizing: border-box;来设置盒模型的类型。.borderBox { box-sizing: border-box; width: 100px; height: 100px; padding: 10px; border: 1px solid #000; margin: 19px; }在下面的图片咱们能够看到，盒子外面的内容显著比ie盒模型的内容要小，这是因为规范盒模型的长宽蕴含了内容content，内边距padding，边框border的宽度以及高度。此时的咱们设置的长宽度计算形式为： width = content.width + padding.width + border.width height = content.height + padding.height + border.height ...

关于css:迟迟没学会grid是因为你没理解flex

我先问 2 个问题：你是不是用主轴-穿插轴/辅轴/副轴的概念了解 flex你是不是也用这个概念去了解 grid如果你是用这种形式了解的 flex，那听我缓缓道来明天我突破你对 flex 的了解打碎对 flex 了解display: grid 和 display: flex 默认方向都是 row，为什么他们体现进去的模式不一样呢？ display: flex：成果 display: grid：成果这也是很多人在纯熟应用 flex 之后，转用 grid 后遇到的最大问题（其实说的就是我本人，手动狗头）。对于 flex 布局来说，应用最多的属性是 justify-content 和 align-items。 justify-content 管制着主轴方向的布局，align-items 管制穿插轴（也叫侧轴，还有说叫做辅轴？副轴？）方向的布局。对于 justify-content 管制的方向叫做主轴方向，大家都比拟对立，对于 align-items 管制的方向叫什么，大家对它的了解就不太一样了，MDN 中叫做穿插轴或者侧轴，阮一峰和张鑫旭的博文中应用的是穿插轴，至于辅轴或副轴的翻译更多存在于和我一样的前端开发者写的博文中。下文对于 align-items 对立应用穿插轴的翻译。我不晓得其他人是不是和我了解的一样，我过后刚接触 flex，了解了主轴之后，剩下的那个天然就是副轴，或者辅轴喽。毕竟穿插轴或者侧轴这样的翻译切实不好了解，而主 - 副/辅从字面上一下就能了解了，而后就学会了 flex 布局计划，始终欢快应用到当初。如果只应用 flex 布局，这样了解没啥问题。直到有一天，你去应用 grid 布局，你会发现，为什么都有 justify-content、align-items，但体现进去的成果齐全不一样？而后吐槽一句：grid 布局真难用，一样的属性却是不同的用处。当初 grid 布局迟迟没有风行，一方面说是兼容性问题，但工夫曾经到了 2022 年，支流浏览器大部分都曾经反对了。所以就像张鑫旭大佬在两年前说的：“强尽管强，然而学起来累啊，我并不看好日后的遍及。” 为什么 grid 布局学起来累，用 flex 的概念去了解 grid ，学起来必定累啊，flex 的概念是什么，就是下面说的：主轴-穿插轴 ...

关于css:本节介绍css的背景属性以及应用效果

本节介绍css的背景属性以及利用成果css罕用的背景属性背景利用css3新增背景属性 css罕用背景属性css中的背景是由background属性来设置背景的，它是一个综合属性，能够拆分为繁多的属性背景色彩background-color属性名：background-color作用：在盒模型border以内区域扭转或者增加背景色彩代码示范： div{ background-color: red;}背景图片background-image属性名：background-image属性值：url（门路）作用：给盒子增加图片背景，图片不够覆盖住盒子会反复铺满盒子背景代码示范： div{ background-image: url();/*图片门路*/}背景反复background-repeat属性名：background-repeat作用：设置增加背景图是否反复进行加载属性值：repeat（默认值）、no-repeat、repeat--x、repeat--y 属性值作用repeat默认值，反复加载图片填满盒子背景区域no-repeat不反复加载图片repeat--x反复加载程度方向repeat--y反复加载垂直方向代码示范： div{ background-repeat:no-repeat}背景定位background-position属性名：background-position作用：设置不反复图片的加载地位属性值：left、right、center、top、center、bottom、px、%，必须要有两个值，一个x轴，一个y轴代码片段背景附着background-attachment属性名：background-position作用：设置背景图片是否随着页面滚动属性值：scroll、fixed（固定）综合写法background属性值：能够有1-5个属性值，值之间用空格隔开，背景定位的两个属性值不能被离开写，算作其中的一个属性值，五个属性值地位能够随便书写代码片段背景利用以图换字个别h1标签是权重最高的，外部会搁置最重要内容，比方logo图片、最大的题目等h1外部文字也能够进步seo搜寻排名又想应用文字且应用图片就须要用到以图换字 div{ text-indent:-30em; white-space:nowrap; overflow:hidden;}精灵图利用精灵图利用：当用户拜访网站时，网页上每一张图都要通过一次申请能力展示给用户，然而网页中有许多小背景图作润饰，会影响网页的加载速度，这时候就要将小背景图集合成一张图片进行加载实际操作：1、要设置好背景图的宽度2、精灵图放的都是装璜的小背景图3、精灵图能够x轴、y轴摆放代码片段 css3新增背景属性背景半透明rgba模式：在rgb根底减少一个透明度，取值范畴0-1，值越小，透明度越高书写形式：rgba(红色，绿色，蓝色，不透明度)留神：透明度只对背景有用，内容不影响代码示范： *{ margin: 0; padding: 0; } div{ border: 1px solid red; width: 400px; height: 400px; margin: 100px auto; background-color:rgba(232, 211, 255,0.2); }背景缩放background-size作用：缩放背景图的比例大小属性值：px值、%、cover（主动调整缩放比例，溢出会被暗藏）、contain（主动调整缩放比例，把图片扩大到展现区域最大化）

关于css:教你如何用CSS修改图片颜色

看到题目是不是吓了一跳？css居然还有这个操作？还真是第一次据说~ 原理嘛，其实很简略的，用到的就是 CSS3 滤镜filter中的drop-shadow，该滤镜能够给图片非通明区域增加投影。你能够了解为下图它实现的成果看上去就像使原来的对象来到页面，而后在页面上显示出该对象的投影。是有一点相似box-shadow，然而二者还是有显著差异的，我前面会写一篇专门的文章来比拟二者的差异。先来看一下语法： filter:drop-shadow(程度暗影偏移间隔垂直暗影偏移间隔投射的暗影色彩 ); 咱们筹备一张背景色是通明的图片(图片尺寸40px X 40px)，用一个div将该图片包裹住，给图片增加 filter: drop-shadow(40px 40px yellow) 这段代码，代表投射出一个和该图片一样的形态，三个参数别离代表：程度向右挪动40px，垂直向下挪动40px，投射出的形态色彩为黄色。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box{ width: 40px; height: 40px; border: 1px solid red; margin: 200px auto; } .pic{ filter: drop-shadow(40px 40px yellow); } </style> </head> <body> <div class="box"> <img src="img/delete.png" class="pic"/> </div> </body> </html> 成果为接下来咱们略微更改一下原代码，将原图设置在div内部并暗藏，变色后的投影搁置在div中 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

关于css:CSS-笔记

CSSCSS，或 Cascading Style Sheets （层叠样式表或级联样式表），用来给浏览器增加款式。引入 CSS 的形式 Import内联 Inline Style应用 style 属性来引入 CSS <h1 style="color:blue;"></h1>嵌入 Embedded Style在 <head> 标签里应用 <style> 标签 <head> <style> h1 { color: blue; } </style></head>外联 External Style Sheets把 HTML 代码和 CSS 代码别离存储到两个文件中，在 <head> 标签中通过 <link> 标签引入 CSS <link rel="类型" href="地位" type="text/css">CSS 规定的组成selector { property: value; /* declaration */}其中 selector 为选择器，declaration 为申明，property 为申明中的属性，value 为申明的属性值。选择器 Selector每个元素的款式规定都应该有开始和完结大括号（{ 和 }）。还须要确保元素的款式定义在开始和完结款式标签之间，并且每条款式规定都以分号;完结。通用选择器 Universal Selector应用 * 来抉择所有元素，称为通用选择器或通配符。 * { color: blue;}元素/类型选择器 Element/Type Selector元素选择器或者类型选择器()抉择 HTML 元素。 ...

关于css:样式工程化方案

参考文章款式模块化计划webpack打包款式介绍postcss 插件实例预处理语言less/sass/xxx css 语法自身不提供编程语言很多个性，个别满足我的项目要求得应用预处理语言，把握在我的项目中理论罕用的。1.1. 变量，嵌套，mixin 次要是解决复用和模块化问题，须要无意识去保护 css 模块的拓展性1.2. less-loader，css-loader，style-loader 在古代脚手架都是主动反对，要理解各loader的作用1.3. postcss 它负责把 CSS 代码解析成形象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行解决(解决特定场景的需要能够自定义插件)1.4. 能够看到具体DSL的语言都存在编译或者生成AST的过程，都离不开运行时或者编译时的话题css常见模块化计划2.1. css 命名提供命名空间（BEM等），手动约定存在局限性2.2. css Modules: 借助构建工具编译生成惟一的hash，不会全局抵触2.3. css-in-js：对于组件化复用是劣势，然而目前没有支流计划2.4. 组件款式批改：以业务批改组件库为例（组件库个别采纳BEM规定），最初编译的款式文件找到具体类名笼罩即可；相似的父子组件款式批改不采纳scoped代码的可读性更好我的项目款式打包计划3.1 对于 spa 我的项目，款式打包后果古代脚手架个别有最佳实际，在浏览器查看动态资源有app[hash].css/chunk-vendor.css/module.css等，个别在发展性能治理和优化场景会针对性解决3.2 css 文件自身没有模块化，后加载的笼罩之前的类名3.3 post-css 解决一些css的兼容和插件问题业务场景组件库款式计划1.1 组件库思考到款式的模块化和可拓展性个别围绕BEM设计款式，组件自身和款式资源都是分包模块化的1.2 款式自身作为子包，有大量的款式变量和模块化例子我的项目款式计划2.1 我的项目款式设计思考这几点，组件自身款式；全局可复用款式（变量，模块，第三方组件）2.2 其中组件款式反复的能够模块化，提供变量能够做主题切换2.3 微利用款式计划（跟组件相似不赘述）动画计划原生动画1.1 全局提供款式公共类1.2 框架自带虚构组件应用第三方库总结css 自身不好把握，然而个别业务场景不会太简单，遇到组件库设计款式计划曾经是绝对深水区了precss/css/postcss 各种DSL和插件，都是相似解决编译时和运行时的问题，跟跨端框架遇到问题思维类似构建工具提供成熟的loader和打包计划，在遇到性能优化时针对性解决，总体来说css的边界效应不显著，想做好有难度

关于css:CSS-有了has伪类可以做些什么

置信大家最近对:has都有所耳闻，标准提及了那么久，却迟迟没有动静，最近浏览器终于开始反对了~ :has伪类是一个十分弱小的伪类，弱小到难以置信，能够做很多梦寐以求的事件，很多以前只能更改 dom 构造或者只能用 JS 能力实现的性能当初也能纯 CSS 实现了，一起看看吧一、简略介绍一下:has:has伪类的语法非常简单，示意满足肯定条件后，就会匹配该元素。例如，上面的选择器只会匹配间接蕴含img子元素的a元素： a:has(> img)再例如，上面的选择器只会匹配其后紧跟着p元素的h1元素 h1:has(+ p)以我集体的了解来看，去除:has()后，剩下的选择器依然是残缺的 a>img加上:has()后，能够选中最后面的元素a。好了，语法其实就这么多，预计没啥吸引力，要害是理论利用。上面通过几个实例来感受一下:has伪类的弱小魅力~ 舒适揭示：兼容性要求须要 Chrome 101+，并且开始试验个性（105+正式反对），Safari 15.4+，Firefox 官网说开启试验个性能够反对，然而实测并没有（???）二、表单元素必填项先来看一个简略例子，上面有一个表单元素，有一些是必填项 <form> <item> <label>用户名</label> <input required> </item> <item> <label>备注</label> <input> </item></form> 当初能够通过:has在必填项的后面加上红色的星号 label:has(+input:required)::before{ content: '*'; color: red;}这个应该还比拟好了解，通过:has和+能够选中满足条件的label，而后再生成::before伪元素。如果是在以前，可能须要手动增加类名，或者扭转html的书写程序你也能够拜访线上残缺 demo：has+required(runjs.work) 三、拖拽指定区域有些时候列表须要有拖拽性能，但为了拖拽体验，不影响列表外部操作，可能须要指定小局部区域可拖拽，例如 HTML构造如下 <div class="content"> <div class="item">列表<span class="thumb"></span></div> <div class="item">列表<span class="thumb"></span></div> <div class="item">列表<span class="thumb"></span></div></div>当初咱们心愿在hover时呈现拖拽手柄，按住拖拽手柄才能够拖拽，看着如同十分麻烦，然而当初借助:has伪类能够轻易实现，要害CSS如下 .thumb{ /**/ opacity: 0}.item:hover .thumb{ opacity: 1;}.item:has(.thumb:hover){ -webkit-user-drag: element;}这里的:has示意当.thumb处于:hover状态时选中该元素，从而给.item增加可拖拽属性，成果如下你也能够拜访线上残缺 demo：drag_thumb(runjs.work) 四、多层级 hover再来看一个例子，早在四年前我就提到过的CSS 多层级hover问题，当初终于有解了~ 是这样的，有一个多层级的构造，例如 <div class="box-1"> <div class="box-2"> <div class="box-3"></div> </div></div>如果给div增加hover款式 div:hover{ outline:4px dashed rebeccapurple}成果是这样 ...

关于css:css-ms

一、程度垂直居中1、flex布局对父级元素设置 display: flex;justify-self: center;align-items: center;二、倒三角形<div></div><style> div{ width: 0; height: 0; border: 100px solid transparent; border-bottom: solid 100px pink; }</style>

关于css:css-ms

关于css:星号选择器的优先级问题

先看看这样的一个dom构造 <div class="parent"> <div class="child"> Child Text <span class="text">Hello CSS</span> </div></div>CSS这样设置 * { color: red;}.parent .child { color: green;}那么，Hello CSS，会是什么色彩呢？会是红色。能够间接点开这个Demo查看成果。 *和.parent .child都能对Hello World文字的色彩施加影响，而且.parent .child放在前面，也没有*的优先级高，所以显示了红色，而不是绿色。星号选择器（*），示意抉择所有元素（MDN链接）。在这个示例中，星号蕴含了对.text节点的色彩设置，其优先级，是高于从父节点.child继承过去的色彩属性的。

关于css:如何使用CSS伪类选择器

总览CSS选择器容许你通过类型、属性、位于HTML文档中的地位来抉择元素。本教程论述了三个新选项:is()、:where()和:has()。选择器通常在样式表中应用。上面的示例会找到所有<p>段落元素并将字重更改为粗体： p { font-weight: bold;}你也能够在JavaScript中应用选择器来找到DOM节点： document.querySelector()返回首个匹配的HTML元素。document.querySelectorAll()返回所有匹配的HTML元素，这些元素位于类数组NodeList中。伪类选择器依据HTML元素的以后状态来定位它们。兴许最广为人知的是 :hover，它在光标移到一个元素上时利用款式，所以它被用来高亮可点击的链接和按钮。其余受欢迎的选项包含： :visited：匹配拜访过的链接:target：匹配文档URL所指向的元素:first-child：指向第一个子元素:nth-child：抉择指定子元素:empty：匹配没有内容或子元素的元素:checked：匹配已勾选的复选框或单选按钮:blank：抉择用户输出为空的输入框:enabled：匹配一个被启用的输入框。如果一个元素可能被激活（如抉择、点击或承受文本输出），或者可能获取焦点，则该元素是启用的:disabled：匹配一个被禁用的输入框。在被禁用时，元素不能被激活或获取焦点:required：指向必填的输入框。所谓必填，就是在提交所属表单之前，用户必须为输入框指定一个值:valid：匹配一个内容验证正确的输入框:invalid：匹配一个内容未通过验证的输入框:playing：指向一个正在播放的audio或video元素浏览器最近又收到了三个伪类选择器… :is伪类选择器留神：这最后被指定为:matches()和:any()，但:is()曾经成为CSS规范。 MDN解释：:is()CSS伪类函数将选择器列表作为参数，并抉择该列表中任意一个选择器能够抉择的元素。这对于以更紧凑的模式编写大型选择器十分有用。你常常须要在不止一个元素下面利用雷同的款式。比如说，<p>段落文本色彩默认为彩色，然而当它位于<article>，<section>，<aside> 外面时，文本色彩为灰色： /* default black */p { color: #000;}/* gray in <article>, <section>, or <aside> */article p,section p,aside p { color: #444;}这是一个简略的例子，但更简单的页面将导致更简单和更简短的选择器字符串。任何选择器的语法错误都会毁坏所有元素的款式。像Sass这样的CSS预处理器容许嵌套（这也将呈现在原生CSS中）。 article, section, aside { p { color: #444; }}这能够创立雷同的CSS代码，缩小打字的工作量，并能够避免谬误。然而：在原生嵌套到来之前，你仍须要一个CSS构建工具。你可能想应用像Sass这样的计划，但这可能给一些开发团队引入复杂性。嵌套可能会导致其余问题。构建深度嵌套的选择器是很容易的，但它会变得越来越难以浏览以及输入简短的CSS。:is() 提供了一个原生CSS解决方案。该个性已被所有古代浏览器反对（IE除外）。 :is(article, section, aside) p { color: #444;}单个选择器能够蕴含任意数量的:is()伪类。比如说，上面的简单选择器将绿色文本色彩利用于所有<h1>、<h2>和<p>元素，这些元素是<section>的子元素，其蕴含类.primary或.secondary，并且不是<article>的第一个子元素。 article section:not(:first-child):is(.primary, .secondary) :is(h1, h2, p) { color: green;}没有 :is() 的等同代码须要六个CSS选择器。 article section.primary:not(:first-child) h1,article section.primary:not(:first-child) h2,article section.primary:not(:first-child) p,article section.secondary:not(:first-child) h1,article section.secondary:not(:first-child) h2,article section.secondary:not(:first-child) p { color: green;}留神，:is()无奈匹配::before和::after伪元素，因而上面示例代码会不起作用： ...

关于css:div-hover-时设置-border出现抖动如何解决

问题形容给 div 增加以下款式 div:hover { border: 1px solid red;}当鼠标挪动到 div 时，产生抖动或偏移。起因给 border 时设置了 1px 边框，多出的这 1px，与其它元素产生了挤压，导致 div 抖动或偏移。解决办法办法1: 给 div border 色彩设置为背景色 div { background: #aaa; border:1px solid #aaa; &:hover { border: 1px solid red; }}办法2: 给 div border 色彩设置为通明 div { border:1px solid transparent; &:hover { border: 1px solid red; }}

关于css:background-image-背景图片上的文字模糊

用image-rendering: pixelated; 参考资料：https://stackoverflow.com/que...https://developer.mozilla.org... 截图有点糊了，实际效果比照很显著

关于css:Flex-布局教程语法篇

网页布局（layout）是 CSS 的一个重点利用222。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些非凡布局十分不不便，比方，垂直居中就不容易实现。 2009年，W3C 提出了一种新的计划----Flex 布局，能够简便、残缺、响应式地实现各种页面布局。目前，它曾经失去了所有浏览器的反对，这意味着，当初就能很平安地应用这项性能。 Flex 布局将成为将来布局的首选计划。本文介绍它的语法，下一篇文章给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo，也能够参考。以下内容次要参考了上面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都能够指定为 Flex 布局。 .box{ display: flex;}行内元素也能够应用 Flex 布局。 .box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex;}留神，设为 Flex 布局当前，子元素的float、clear和vertical-align属性将生效。二、基本概念采纳 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素主动成为容器成员，称为 Flex 我的项目（flex item），简称"我的项目"。 ...

关于css:如何在CSS中使用变量

前言CSS变量（官网称为自定义属性）是用户定义的值，它能够在你的代码库中设置一次并屡次应用。它们使治理色彩、字体、大小和动画值变得更加容易，并确保整个web利用的一致性。举个例子，你能够将品牌色彩设置为一个CSS属性（--primarycolor: #7232FA），并在任何应用品牌色彩的组件或款式中应用这个值（background: var(--primarycolor);）。除了更加简洁以及不反复的代码，CSS变量可用于构建调色板，进步响应能力，并创立动静类型零碎。定义CSS变量要定义一个自定义属性，抉择一个名称并在其后面加上两个连字符。任何字母数字字符都能够是名称的一部分。连字符（-）和下划线（_）也是被容许的。大范畴的Unicode字符能够成为自定义属性名称的一部分。这也包含emoji，但为了清晰度和可读性，请保持应用字母数字名称。上面是个例子： --primarycolor: #0ad0f9ff; /* RGB alpha 16进制色彩 */--向CSS解释器表明这是一个自定义属性。当作为一个变量应用时，解释器引擎会将该属性替换为其值。自定义属性名称是辨别大小写的。这意味着--primaryColor 和 --primarycolor 被认为是两种不同的属性名称。这与传统的CSS不同，在传统的CSS中，属性和值的大小写并不重要。然而，它与ECMAScript中的变量名规定是统一的。与其余属性一样，比如说display或者font，CSS自定义属性必须定义在申明块内。一个常见的模式是应用 :root 伪元素作为选择器来定义自定义属性。 :root { --primarycolor: #0ad0f9ff;}:root是一个伪元素，它指向文档中的根元素。对HTML文档而言，指向的就是<html>元素。对SVG文档而言，指向的就是<svg>元素。应用:root 会让属性在整个文档中立刻可用。应用CSS变量为了让自定义属性作为变量来应用，咱们须要应用var()函数。例如，如果咱们想将--primarycolor自定义属性作为背景色彩来应用，咱们须要这么做： body { background-color: var(--primarycolor);}咱们自定义属性的值将成为background-color属性的计算值。到目前为止，自定义属性只能被用作变量来为规范的CSS属性设置值。例如，你不能把一个属性名称存储为一个变量，而后重用它。以下的CSS就无奈运行： :root { --top-border: border-top; /* Can't set a property as custom property's value */ var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */}你也不能把属性-值对存储为一个变量，而后重用它。上面的例子也是有效的： :root { --text-color: 'color: orange'; /* Invalid property value */}body { var(--text-color); /* Invalid use of a property */}最初，你不能把一个变量作为值的一部分拼接起来： ...

关于css:grid布局实现宽高比

<!DOCTYPE html><html> <head> <style> * { margin: 0; padding: 0; } .grid { /* 网格布局 */ display: grid; /* 每列每行之间的间距 */ gap: 20px; /* 网格布局列散布,repeat相当于for循环 */ /* grid-template-columns: 1fr 1fr 1fr 1fr; */ grid-template-columns: repeat(4, 1fr); } .grid-item { position: relative; } .grid-item::before { content: ' '; /* 设为块元素，宽度撑满 */ display: block; background-color: blue; /* padding-bottom和padding-top百分比是取的父元素的宽度 */ padding-bottom: 100%; /* 宽度是父元素的宽度，高度是父元素的宽度，而后grid-item被撑成了一个正方形 */ } /* 这中央应用相对定位脱离文档流，left:0,right:0,top:0;bottom:0，浏览器主动计算宽高，撑满整个父元素，不应用相对定位，他就排在before前面了*/ .con { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } </style> </head> <body> <div class="grid"> <div class="grid-item"> <div class="con"></div> </div> <div class="grid-item"> <div class="con"></div> </div> <div class="grid-item"> <div class="con"></div> </div> <div class="grid-item"> <div class="con"></div> </div> <div class="grid-item"> <div class="con"></div> </div> </div> </body></html>

关于css:css宽高比固定自适应浮动absolutepaddingtop

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高度自适应</title> <style> *{ margin: 0; padding: 0; } .main{ width: 100%; background-color: pink; position: relative; } .main:after{display:block;content: "";visibility: hidden;clear: both;} .main div{ float: left; width: calc((100vw - 24px)/3); position: relative; padding-top: 35%; margin-right: 8px; border:1px black solid; border-radius: 10px; box-sizing: border-box; } .main div:nth-child(1){ background: url(images/1.jpg) no-repeat; background-size: cover; } .main div:nth-child(2){ background: url(images/2.jpg) no-repeat; background-size: cover; } .main div:nth-child(3){ background: url(images/3.jpg) no-repeat; background-size: cover; } .p1{ position: absolute; height: 100%; width: 100%; left: 0; right: 0; top: 0; bottom: 0; background-color: red; overflow: hidden; } </style></head><body> <div class="main"> <div><p class="p1">图中三个DIV的宽高都会随着页面的大小放弃原有比例放大或放大。其核心思想就是利用padding来拓宽盒子高度。通过padding-top来设置百分比，使其百分比与宽度的百分比为须要的比例。这里须要留神的是：padding-top中设置的百分比与width中设置的百分比都是以父元素的width为参考的</p></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div></body></html>

关于css:CSS引用外部字体二优化

在页面上引入字体后，会带来一个性能的问题。通常字体文件都比拟大，差不多都是2、3M，有时候4、5M也是有的，因为里边有成千盈百的汉字嘛。可问题是，我的页面上很可能就只须要显示那么十七、八个字，为了这几个字，我得下载个4、5M的字体，有点儿划不来啊。这个问题怎么解决呢？咱们这样思考一下：能不能从现有的字体里把须要显示的字抽取进去呢？页面上要显示十七个字，我就抽十七个，须要显示二十三个字，我就抽二十三个字，而后把抽取进去的字，从新生成字体文件，这样新的字体文件就会大大缩减，同时也能满足页面显示的需要。 font-spider（字蛛）就能实现上述的工作。上面介绍一下它的应用办法。装置font-spider依赖。 npm install font-spider -g装置实现后，可通过font-spider -V查看是否装置胜利。新建一个目录，目录下蕴含一个css文件，一个html页面和一个font文件夹，font文件夹里蕴含咱们的原始字库（这里应用了可口可乐在乎体），如图所示：main.css的内容如下： @font-face { font-family: 'co'; src: url('./fonts/coca.ttf') format('truetype'); font-weight: normal; font-style: normal;}.medium { font-family:'co';}index.html的内容如下： <!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"> <title>Document</title> <link rel="stylesheet" href="main.css"></head><body> <div class="medium"> 处分查问管理系统登录 </div></body></html>这里html的写法只会把“处分查问管理系统登录”这十个字压缩成coca字体，也就是说新生成的字体里只蕴含这十个字。在命令行执行font-spider index.html，生成新字体，如图所示：能够看到，原始字库是4248.74KB，新的字库是9.24KB。目录构造也有所扭转，如图所示： —完—

关于css:CSS自定义属性引入-使用var-cal计算-css-与-js-的连接

引入自定义属性，是一种开发者能够自主命名和应用的CSS属性。浏览器在解决像 color 、position 这样的属性时，须要接管特定的属性值，而自定义属性，在开发者赋予它属性值之前，它是没有意义的。所以要怎么给 CSS 自定义属性赋值呢？这倒和习惯无异：.foo { color: red;--theme-color:gray;}复制代码自定义元素的定义由 -- 结尾，这样浏览器可能辨别自定义属性和原生属性，如果只是定义了一个自定义元素和它的属性值，浏览器是不会做出反馈的。如下面的代码， .foo 的字体色彩由 color 决定，但 --theme-color 对 .foo 没有作用。能够用 CSS 自定义元素存储任意无效的 CSS 属性值：.foo { --theme-color:blue;--spacer-width: 8px;--favorite-number: 3;--greeting: "How are you";--reusable-shadow: 0 3px 1px -2px rgba(0,0,0,0.85);}复制代码应用应用 var() 办法实现：.button { background-color: var(--theme-color);}复制代码这段代码中，咱们把.button的background-color属性赋值为 --theme-color的值。同时，这个--theme-color能用在任意选择器和属性上：.button { background-color: var(--theme-color);}p { color: var(--theme-color);}.title > .p { border-color: var(--theme-color);}复制代码缺省值如果开发者并没有定义过 --theme-color 这个变量呢？var()能够接管第二个参数作为缺省值：.button { background-color: var(--theme-color,gray);}复制代码或者把另一个自定义属性作为缺省值：.button { background-color: var(--theme-color,var(--default-bg-color));}复制代码传参数时总是传入一个缺省值是一个好习惯，特地是在构建 web components 的时候。为了让你的页面在不反对自定义属性的浏览器上失常显示，别忘了加上兼容代码：.button { background-color:gray;//兼容性解决background-color: var(--theme-color,gray);}复制代码作用域和级联自定义属性听从规范的作用域和级联规定，开发者依照平时应用的习惯来就能够了！你可能心愿将 --theme-color 设置为全局变量，处处可用。最简略的办法是应用 :root 伪元素：:root { --theme-color: gray;}复制代码这样，整个document，都能够应用--theme-color。但当你心愿不同的模块应用不同的 --theme-color 值怎么办呢？只须要在模块的作用域中给属性从新赋值，新的色彩就会分模块失效，而不须要开发者一个个重置应用到 --theme-color 的属性。 ...

关于css:常规修改滚动条样式

/定义滚动条款式（高宽及背景）/ ::-webkit-scrollbar { width: 7px; / 滚动条宽度， width：对应竖滚动条的宽度 height：对应横滚动条的高度/ background: #fff; box-shadow: 0;} /定义滚动条轨道（凹槽）款式/ ::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); / 较少应用 / border-radius: 3px; } /定义滑块款式/ ::-webkit-scrollbar-thumb { border-radius: 3px; // height: 100px; / 滚动条滑块长度 / background-color: #ccc; }

关于css:CSS变量在React中的应用

前言当咱们在编写CSS文件的时候，很多的值是大量反复的，如果每次用到都应用具体的值的话，前期不批改还好，一旦波及批改，工作量会很大。所以，实际中，为了保障可维护性，应用CSS变量成为必要。能够将此纳入CSS的编码准则：一个值只有呈现了不止一次，这个值就该当被定义为CSS变量。实现同一文件/* 定义 */:root { --size: 16px;}/* 应用 */div { width: var(--size); }不同文件/* index.css */:root { --systemBlue-Light: #007AFF;}/* someComponent.module.css */@import "../../index.css";div { color: var(--systemBlue-Light);}不同文件间变量的调用使得在React中能够轻松实现CSS全局变量。

关于css:CSS基础总结02

浮动传网页布局的实质：用 CSS 来摆放盒子，把盒子摆放到相应地位。 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"> <title>多个块级元素横向排列找浮动</title> <style> div { float: left; width: 150px; height: 200px; background-color: #d87093; } </style></head><body> <div>1</div> <div>2</div> <div>3</div></body></html>拓展：浮动的盒子不会产生外边距合并！什么是浮动？float 属性用于创立浮动框，将其挪动到一边，直到左边缘或右边缘涉及蕴含块或另一个浮动框的边缘。语法：选择器 { float: 属性值;}属性形容none元素不浮动（默认值）left元素向左浮动right元素向右浮动浮动个性加了浮动之后的元素，会具备很多个性，须要咱们把握。浮动元素会脱离规范流（脱标）浮动的元素会一行内显示并且元素顶部对齐浮动的元素会具备行内块元素的个性浮动元素会脱离规范流（脱标）脱离规范一般流的管制（浮）挪动到指定地位（动），（俗称脱标）浮动的盒子不再保留原先的地位 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动个性1</title> <style> /* 设置了浮动（float）的元素会： 1.脱离规范一般流的管制（浮）挪动到指定地位（动）。 2.浮动的盒子不再保留原先的地位 */ .box1 { float: left; width: 200px; height: 200px; background-color: pink; } .box2 { width: 300px; height: 300px; background-color: gray; } </style></head><body> <div class="box1">浮动的盒子</div> <div class="box2">规范流的盒子</div></body></html>浮动的元素会一行内显示并且元素顶部对齐如果多个盒子都设置了浮动，则它们会依照属性值一行内显示并且顶端对齐排列。浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动元素个性-浮动元素一行显示</title> <style> div { float: left; width: 200px; height: 200px; background-color: pink; } .two { background-color: skyblue; height: 249px; } .four { background-color: skyblue; } </style></head><body> <div>1</div> <div class="two">2</div> <div>3</div> <div class="four">4</div></body></html>浮动的元素会具备行内块元素的个性任何元素都能够浮动。不论原先是什么模式的元素，增加浮动之后具备行内块元素类似的个性。 ...

关于css:CSS基础总结01

CSS简介CSS 是层叠样式表的简称。也会称之为 CSS样式表或级联样式表。 CSS 是一种标记语言。语法标准CSS 规定由两个次要的局部形成：选择器以及申明。选择器是用于选出须要设置 CSS 款式的 HTML 标签，选择器后跟的花括号内是对该对象设置的具体款式属性和属性值以 “键值对” 的模式呈现属性: 属性值;属性是对指定的对象设置的款式属性，例如：字体大小、文本色彩等属性和属性值之间用英文 : 离开多个 “键值对” 之间用英文 ; 进行辨别（开端的键值对能够不加 ;）所有的款式，都蕴含在 <style> 标签内，示意是样式表。<style> 个别写到 <head> 里。 <head> <style type="text/css"> h4 { color: bule; font-size: 100px; } </style></head>注： <style> 标签能够写到其余标签外部并作用与该标签区域内，然而强烈不举荐这种写法！type="text/css" 能够省略。代码格调款式格局举荐开展 h3 { color: deeppink; font-size: 20px;}款式大小举荐小写：款式选择器，属性名，属性值关键字全副应用小写字母，非凡状况除外。 h3 { color: pink;}空格保留属性值后面，冒号前面，保留一个空格选择器（标签）和前花括号两头，保留一个空格h3 { color: pink;}根底选择器选择器就是依据不同的需要把不同的标签选出来，选择器就是抉择标签用的。选择器分为根底选择器和复合选择器两个大类。 ...

关于css:一文解读CSS语法注释使用方式选择器

写在开篇html的内容，想要扭转它的款式？比方色彩、字体、布局，等等，怎么破？CSS代码带你腾飞！css语法css的语法非常简单，如下：选择器 {属性: 值;属性:值}例如： h2 {color: cornflowerblue;font-size: 60px;}下面的h2是元素选择器，属性color，它的值是cornflowerblue。属性font-size，它的值是60px。应用css的3种形式有3种css的应用形式：内部 CSS外部 CSS行内 CSS 尽管有3种，但笔者只讲内部css，在理论开发中，内容必须和款式拆散，大有益处，缓缓领会吧！那么如何应用内部的css？须要在html的head中通过link来引入，如下： <head> <link rel="stylesheet" href="./test.css"></head>css代码中如何写正文在写代码的过程中，正文很重要。但不要自觉的正文，对要害的、重要的逻辑做简单明了的正文即可，不然写的代码看起来跟一坨屎没什么区别。那么在css代码中，也是能够做正文的。当然了，该正文的时候就正文，不该正文的时候就别正文。那到底要不要加正文？算了，随你吧！不！我还是啰嗦一下，对简单明了、见名知意的代码就没必要正文了，要尽量让咱们的代码看起来简洁、优雅。笔者已经接手过一个我的项目，看了他人写的代码之后，就是一坨屎。我看个屁啊！间接重写，看都不想看了。回到正题，解锁3种正文姿态。姿态1： /* 正文内容 */h2,h3,p{ text-align: center; color: cornflowerblue; font-size: 60px;}姿态2： /* 正文内容，正文内容，正文内容。*/h2,h3,p{ text-align: center; color: cornflowerblue; font-size: 60px;}姿态3： h2,h3,p{ text-align: center; color: cornflowerblue; /* 正文内容 */ font-size: 60px;}css选择器css的选择器很重要，所以笔者独自拿出来讲了。上面咱们分析一下5种抉择1. 元素选择器元素选择器就是通过元素来进行抉择，并设置css款式，看上面小栗子。创立home.html文件 <!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>全栈运维学习</title> <link rel="stylesheet" href="test.css"></head><body> <p>面向运维编程</p> <p>面向运维编程</p></body></html>创立test.css文件 p { text-align: center; color: red;}2. id选择器通过id选择器，来抉择元素，前提条件是元素须要设置了id，看上面的小栗子。创立home.html文件 <!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>全栈运维学习</title> <link rel="stylesheet" href="test.css"></head><body> <p id="a1">面向运维编程</p> <p id="a2">面向运维编程</p></body></html>创立test.css文件 #a1 { text-align: center; color: blue; font-size: 100px;}id选择器的语法是，后面须要加#号，而后跟着是id的名字，这样就能抉择到元素了，如这个例子只抉择了#a1，#a2并没有设置任何款式，成果见下图。效果图如下： ...

关于css:保姆级教程写出自己的移动应用和小程序篇五

在上期文章中，咱们次要聊了聊如何写出一个简略的小程序。既然聊到了编写小程序，那不得不提的就是如何编写其中的 CSS 款式内容，一起来看看吧。一、总体款式小程序容许在顶层搁置一个 app.fxss 文件，外面采纳 CSS 语法设置页面款式。这个文件的设置，对所有页面都无效。留神，小程序尽管应用 CSS 款式，然而款式文件的后缀名一律要写成 .fxss。关上上一篇教程的示例根目录 app.ftss 文件，内容如下。因为 FinClip 小程序放弃了与微信小程序的高度对立，来升高开发者的学习或迁徙门槛，事实上你也能够间接在 FIDE 中编辑基于微信小程序的我的项目内容，或者将基于微信小程序编辑的内容进行校验后，同步上传在 FinClip 之中。.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}FIDE 初始化小程序页面曾经给最外层标签增加了 container 类，此时在 container 类名下增加一个 color 款式： color: #ff0000;保留后页面从新渲染，文字变为红色：内容变红了这就是总体款式，设置之后会对所有页面失效。例如第二个页面中元素 view 也领有class：container，那么它的文字色彩也为红色。 page1 页面中的文字也变成了红色二、页面款式在小程序每个页面门路下 ftss 文件中款式内容只会影响以后页面。当咱们在 index 页给 view 元素增加一个 class：“unique-class”，并在页面 ftss 文件中扭转 font-size 款式： ...

关于css:CSS像素设备像素设备独立像素dprppi-之间的区别

前言大家好，我是HoMeTown，顺着计量单位，想持续聊一下CSS像素、设施像素、设施独立像素、dpr、ppi 之间的区别。家喻户晓，在CSS中咱们通常是应用px作为单位的场景多一点，在PC端，1个像素恰好对应电脑屏幕上的1个物理像素点，正因如此，会给刚开始理解CSS的同学一个错觉就是：css中的像素就是设施的物理像素。其实不然，css中的像素只是一个形象的单位，在不同的设施与环境中，css中的1px所代表的设施物理像素是不同的，以挪动端为，在做挪动端开发时，就会呈现1px的问题，在不同机型的挪动设施上，显示的成果却又很大的差别。这就波及到设施像素、css像素、设施独立像素、dpr、ppi的概念。 css像素css像素就是咱们在进行开发时，常常应用的px单位。px自身从主观的意义来讲，其实应该是一个相对单位，然而从主观的角度登程，在不同的机型下，他又绝对于设施像素，次要体现在两个方面：调整屏幕分辨率两个不同型号的手机在页面进行缩放的操作，其实也会引起css中px的变动，举个：有一个元素320px，正好填满整个屏幕，把页面放大1倍后，本来1px的元素变成2px，在理论宽度不变的状况下，1px变得跟原来的2px一样了，之前须要320px能力填满，当初只须要160px，此时元素会占据更多的设施像素。由此可见，px会受到dpr（设施像素比）与ppi（每英寸像素比）的影响。设施像素（device pixels）设施像素也就是物理像素，即设施管制显示的最新物理单位，不肯定是一个1x1 或者 2x2的小正方块，它其实不存在具体的规范宽高，只是用于显示残缺色调的一个形象“点”，能够参考公园里景观里的变色灯带，一个彩灯由红、蓝、绿三个小灯组成，混成各种色彩。从屏幕在工厂生产出的那天起，它下面设施像素点就固定不变了，单位为pt。设施独立像素（Device Independent Pixel）设施独立像素与就是，与设施无关的逻辑像素，代表能够通过程序控制应用的虚构像素，是一个总的概念，包含了css像素。在JavaScript中能够通过window.screen.width/window.screen.height查看。举个简略的：我有一台辣鸡笔记本，我想玩给他爱，而后电脑的分辨率为2560x1600，可能我感觉这个分辨率对我来说不太难受，我再设置--影响--图形--分辨率中把它调到1440x900。这里的分辨率其实不谨严的讲，就指的是设施独立像素，一个设施独立像素里可能会蕴含1个或者多个物理像素点，蕴含的越多，画质越高。为什么会呈现设施独立像素这种虚构像素单位概念呢？举个：假如，我有一个iPhone12 和 iPhone13，尺寸都是5.4，iphone12的分辨率是1040*960， iphone13的分辨率是2080×1170，那么，ihpone12有1170个物理像素，iphone有2532个物理像素。如果依照实在物理像素进行布局，以12为例，那么到13上，又会呈现一半的空白，为了防止这种状况的呈现，呈现了虚构像素单位，咱们对立12和13的虚构像素都是1040个，只是在12上，1个虚构像素被换算成1个物理像素，在13上，1个虚构像素，被换算成2个物理像素。这种n个虚构像素:n个物理像素比例式的换算，被统称为设施像素比，也就是dpr dpr（Device pixel ratio）设施像素比，代表设施独立像素到设施像素的转换关系。在JavaScript中能够通过window.devicePixelRatio获取。计算公式为： drp = dp / dipif(drp === 1:1) use 1dp show 1pxif(drp === 2:1) use 4dp show 1pxif(drp === 3:1) use 9dp show 1px如下图： ppi（pixel per inch）每英寸像素，即每英寸所蕴含的像素点数目，也就是像素密度，数值越高，屏幕越能以更高的密度显示图像。计算公式为：总结无缩放状况下，1px = 1dip设施像素不会扭转，然而设施虚构像素会变在挪动端的规范屏下，1dip = 1dpdpr = dp / dipppi越大，图像越清晰

关于css:这次彻底搞定CSS层叠优先级

层叠常识图谱 CSS实质CSS 实质上就是申明规定，即在各种条件下，咱们心愿产生特定的成果。浏览器会依据咱们书写的规定去决定如何渲染页面。什么是层叠层叠指的就是css中的一系列规定。决定了如何解决抵触，是 CSS 语言的根底。层叠规定这些规定就是拿来解决抵触的。 (1) 样式表的起源：款式是从哪里来的，包含你的款式和浏览器默认款式等。 (2) 选择器优先级：哪些选择器比另一些选择器更重要。 (3) 源码程序：款式在样式表里的申明程序术语解释 @规定（at-rules）是指用“@”符号结尾的语法。比方@import 规定或者@media 查问样式表的起源作者样式表咱们本人写的样式表就是作者样式表用户代理样式表浏览器有一个默认的样式表，也就是用户代理样式表。用户样式表这是第三种起源，它的优先级介于用户代理样式表和作者样式表之间。用户样式表很少见，并且不受网站作者管制，因而这里略过 1. 用户代理款式浏览器先利用用户代理款式后才会利用作者样式表，后者会笼罩前者。 2. !important 申明标记了!important 的申明会被当作更高优先级的起源，因而总体的优先级依照由高到低优先级别离是 !important > 作者样式表 > 用户代理样式表了解优先级1.行内款式在HTML 的 style 属性间接写款式，优先级最高，笼罩任何来自样式表或者<style>标签的款式。 2. 选择器优先级有3大类选择器。他们有不同的优先级。如果选择器的 ID 数量更多，则它会胜出（即它更明确）。如果 ID 数量统一，那么领有最多类的选择器胜出。如果以上两次比拟都统一，那么领有最多标签名的选择器胜出。口诀是遇同级比数量，遇不同级，找高级，全一样，看先后，后者胜。 3. 优先级标记一个罕用的示意优先级的形式是用数值模式来标记，通常用逗号隔开每个数。 “1,2,2” 示意选择器由 1 个 ID、2 个类、2 个标签组成。有3数和4个数的写法。4个数的写法多了一个数示意代表一个申明是否是用行内款式增加的。用0,1示意。源码程序如果两个申明的起源和优先级雷同，其中一个申明在样式表中呈现较晚，或者位于页面较晚引入的样式表中，则该申明胜出。 a链接属性书写程序a:link { color: blue; text-decoration: none;}a:visited { color: purple;}a:hover { text-decoration: underline;}a:active { color: red;}记忆：LV好啊（lvha） ...

关于css:今天真是热化了

欢送关注我的公众号：前端侦探明天真是太热了，不信你看题目今天真是热化了！也能够查看上面截图置信大家最近都能看到这样“热化了”的题目。那么，这是如何实现的呢？CSS 能够实现相似的成果吗？一起看看吧一、菊花字符 488首先，这类字符成果实现很简略，实质就是插入了一个非凡的“花漾字符”，能够在管制台上看到它的实在外貌这里长的像菊花一样的字符十分非凡，失常状况下是打不进去的，只能通过复制或者一些非凡的输入法输出。咱们还能够将这个字符串拆散开来，如下通过转换，这里借助了张鑫旭的在线转换工具，能够看到Unicode值是488 所以，在 HTML 中，还能够通过转义字符҈来手动输出 <h2>今҈天҈真҈是҈热҈化҈了҈~</h2>同样能够失去雷同的成果二、通过伪元素生成如果心愿页面展现的是“热化了”款式，然而复制进去的是失常的文字，该如何解决呢？首先，须要将文字拆分开来，用标签包裹，如下 [...'明天真是热化了'].map(el => `<span>${el}</span>`).join('')后果如下 <h2><span>今</span><span>天</span><span>真</span><span>是</span><span>热</span><span>化</span><span>了</span></h2>而后，通过伪元素在每个标签前面增加一个菊花字符\488 span::after{ content:'\488'}看，成果进去了这样下来，页面中就不会有特殊字符了，对搜索引擎也更为敌对三、通过文本装璜生成下面通过伪元素的形式简直和原有实现形式一样，然而须要将每个字符都包裹一层标签，稍微繁琐。有没有方法不拆分呢？也是能够模仿实现的，那就是借助文本装璜属性：text-emphasis 有趣味的能够参考张鑫旭的这篇文章：应用CSS text-emphasis对文字进行强调装璜假如 HTML 是这样的 <p>明天真是热化了~</p>而后设置装璜属性，文案就是方才那个菊花字符\488 p{ text-emphasis: '\488';}成果如下当初有两个问题来了如何扭转菊花字符的大小？如何让这个菊花字符叠加在题目上？text-emphasis的大小是跟原文本字体和大小无关的，在中文字符下，大略是文本的 1/2 左右，所以为了不影响原题目大小，这里能够用伪元素生成一份雷同的文案，具体做法是 <p title="明天真是热化了~">明天真是热化了~</p>而后用伪元素动静生成属性，文本装璜也放在伪元素上，并且设置相对定位 p::before{ position: absolute; content: attr(title); text-emphasis: '\488';}为了辨别，伪元素给了非凡的色彩而后，将伪元素字号放大为原来的 2 倍 p::before{ position: absolute; content: attr(title); text-emphasis: '\488'; font-size: 200%;} 当初文字因为太大换行了，没关系，能够放大字符间距，用letter-spacing实现 p::before{ position: absolute; content: attr(title); text-emphasis: '\488'; font-size: 200%; letter-spacing: -.5em;} ...

关于css:掌握CSS中的zindex

前言z-index是一个用于管制文档中图层程序的属性。具备较高z-index值的元素将会呈现在具备较低值的元素之上。就像页面上的x轴和y轴决定一个元素在程度和垂直方向上的地位一样，z-index管制它们在z轴上互相层叠的形式。默认层叠程序当咱们编写HTML时，呈现在文档靠后地位的元素，会天然层叠到靠前地位的元素之上。 <body> <header class="site-header"></header> <main class="site-content"></main> <footer class="site-footer"></footer></body>基于下面给定的HTML片段，如果它们的地位互相重叠的话，footer将会层叠在main内容区域之上，main将会层叠在header之上。元素能够通过应用position属性和偏移属性的组合来进行重叠，偏移属性值包含top，right，bottom以及left。如果为每个元素设置position: absolute ，他们都会在彼此的根底上进行布局。footer元素在文档中最初呈现，因而默认状况下，该元素会层叠在前两个元素之上。 .site-header, .site-content, .site-footer { position: absolute; width: 400px; padding: 20px;}.site-header {top: 0; left: 0;}.site-content {top: 50px; left: 50px;}.site-footer {top: 100px; left: 100px;}如果应用偏移属性top和left，咱们能够更分明地看到层叠程序。层叠上下文尽管应用position: absolute能够创立互相重叠的元素，但咱们还没有创立所谓的层叠上下文。层叠上下文能够通过以下任意形式进行创立：元素的position属性值为absolute或者relative，且z-index值不为auto。flex容器的子元素，且z-index值不为auto。opacity属性值小于 1 的元素。transform属性值不为none的元素。到目前为止，最常见的创立和应用层叠上下文的形式是上述列表中的第一种，所以让咱们多花点工夫来关注它。回到先前的示例，咱们有三个元素彼此重叠，但目前为止它们并没有z-index值。 z-index属性容许咱们管制层叠的程序。如果在footer元素上设置z-index: 1，在main元素上设置z-index: 2，以及在header元素上设置z-index: 3，那么默认层叠程序将会齐全颠倒。外表上看起来很简略，更高的z-index值有更高的元素层叠程序。因而z-index: 9999 总是位于z-index: 9下面。事实果真如此吗？可怜的是，理论状况要更简单一些。层叠上下文中的z-index<header class="site-header blue">header</header><main class="site-content green">content <div class="box yellow"></div></main><footer class="site-footer pink">footer</footer>如果我在site-content容器内增加一个box，并将其定位在右下角之外，咱们能够看到它位于绿色盒子的下面和粉色盒子的上面。 .box { position: absolute; bottom: -25px; right: -25px; z-index: 4; /* won't work :( */ width: 75px; height: 75px; border: 1px solid #000;}.site-header {top: 0; left: 0; z-index: -1;}.site-content {top: 50px; left: 50px;}.site-footer {top: 100px; left: 100px; z-index: 3;}基于咱们所理解的z-index ，咱们可能会认为，为了使这个黄色的盒子呈现在粉色盒子的上方，咱们能够为z-index设置一个更高的值。 ...

关于css:聊聊那些css在ios中的兼容性

1.开发环境vue22.电脑系统 windows11专业版3.在开发的过程中,咱们会遇到各种各样的兼容性问题,那么上面我来给大家分享一下,心愿对你有所帮忙。4.聊聊filter:drop-shadow动静批改filter:drop-shadow导致的渲染异样问题 filter: drop-shadow(2PX 2PX 8PX #Ff3300);//留神:在android中显示失常,然而在ios(手机:iphone x;零碎 13.7)中显示异样// 解决办法:目前加了transform: translateZ(0);增加到gpu复合层渲染就失常了。100000.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

关于css:unocs在style模块中使用原子化css

unocssunocss能够间接在class中写原子化css，但有时候可能我不是很想把很多css的款式都堆在tag上，导致tag的class很长，或者tag属性过多。配置官网提供了插件实现在style中写原子化css，官网文档 #apply // vite.config.tsimport { defineConfig } from "vite";import Unocss from "unocss/vite";import transformerDirective from "@unocss/transformer-directives";export default defineConfig({ plugins: [ vue(), Unocss({ transformers: [transformerDirective()], }) ],});@unocss/transformer-directives插件后容许应用@apply指令在style中写原子化css <template> <div class="container">container</div></template><style lang="less">.container { @apply p-5 bg-pink c-white;}</style>成果

关于css:CSS中的五大选择器

最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。例如： html {background-color: black;} p {font-size: 30px; backgroud-color: gray;} h2 {background-color: red;}以上css代码会对整个文档增加彩色背景；将所有p元素字体大小设置为30像素同时增加灰色背景；对文档中所有h2元素增加红色背景。通过下面的例子也能够看出css的根本规定构造：由选择器和申明块组成。每个申明块中蕴含一个或多个申明。每个申明的格局为：属性名：属性值。每条申明以分号”;”结尾。如果在一个申明中应用了不正确的属性值，或者不正确的属性，则该条申明会被疏忽掉。另外请留神不要遗记每条申明前面的分号。咱们也能够同时对多个html元素进行申明： h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}这样会将文档中所有的h1~h6以及p元素字体设置为”黑体”。如果咱们心愿一锅粥地选取所有的元素，能够应用通配符""： { font-size: 20px;} 这样所有的元素都将被选中，尽管font-size属性对于某些元素是有效的，那么它将被疏忽。 2、类选择器(1)单类选择器单纯的元素选择器仿佛还过于毛糙了，比方咱们心愿在文档中突出加粗显示某种重要的内容，例如稿件的截至日期。问题在于咱们不能确定稿件的截至日期将会呈现在哪种元素中，或者它可能呈现在多种不同的元素中。这个时候，咱们能够思考应用类选择器(class selector)。要应用类选择器咱们须要首先对文件元素增加一个class属性，比方截至日期可能会呈现在以下元素中: <p class="deadline">...</p> <h2 class="deadline">...</h2> 这样咱们就能够用以下形式应用类选择器了： p.deadline { color: red;} h2.deadline { color: red;} 点号”.”加上类名就组成了一个类选择器。以上2个选择器会抉择所有蕴含”deadline”类的p元素和h2元素。而其余蕴含该属性的元素则不会被选中。如果咱们省略.deadline后面的元素名，那么所有蕴含该类的元素都将被选中： .deadline { color: red;} 通常状况下，咱们会组合应用以上2者失去更加乏味的款式： .deadline { color: red;} span.deadline { font-style: italic;} 以上代码首先会对所有的蕴含deadline的元素字体设置为红色，同时会对span元素中的文本增加额定的斜体成果。这样，如果你心愿某处文本领有额定的斜体成果将它们放在<span></span>中就能够了。 (2)多类选择器在实际的做法中，元素的calss属性可能不止蕴含一个单词，而是一串单词，各个单词之间用空格隔开。比方某些元素蕴含一个”warning”类，某些元素蕴含一个”important”类，某些元素同时蕴含”warning important”类。属性名呈现的程序没有关系： class = "warning important" class = "important warning"以上2者是等价的。咱们心愿蕴含warning类的元素有一个醒目的红色字体，蕴含important属性的元素有一个加粗的字体显示，而同时蕴含以上2中属性的元素另外领有一个蓝色背景(不论还能不能看清文字了)，咱们能够应用以下的css代码： ...

关于css:纯css实现自动显示全文链接

最近发现了一位大佬用纯css实现了主动显示“全文”链接的这样一个性能，用的办法挺奇妙的，于是我本人也试着实现了一下，借此来记录一下～性能成果文案较少时间接显示，文案较多时限度5行，显示省略号，而后再显示个全文链接，点击跳转，大略长这样：实现思路布局布局的话没什么简单的货色，很简略就能够实现： <div class="wrap"> <p class="text">一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案是不是真的很长很长如同还不够长持续再长一点。</p> <a class="link" href="#">全文</a></div>溢出显示省略号单行文本溢出这个大家都晓得，这样写，要害是要设置个宽度： overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行文本溢出，这样写： display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;这样写完之后的成果长这样：目前来看曾经实现了超出三行截取，然而全文链接还是始终都存在，接下来想方法用css来辨别这两种状况。计划一在文本的开端应用一个元素遮盖住上面的链接，能够用伪元素::after实现： .text::after { content: ''; position: absolute; display: block; width: 100%; height: 50px; //能遮住链接就行 background-color: red;}实现成果如下：因为在设置相对定位时，并没有设置 top 值，所以 ::after 依然紧跟在文本的前面。因而在文本超出的状况下，::after曾经位于可视范畴外了，所以不会遮蔽上面的链接，实际上是这个样子（借用一下大佬的图，如侵删）：最初再把背景色彩改成和父元素一样就能够了 .text::after { background-color: inherit; }大抵能实现性能，然而会有一个问题，那就是文案少的时候链接依然会占据地位，所以还应该让父元素在文案少的时候去掉链接的那一行高度。计划二负的margin可能缩小容器的高度，这次就不能用相对定位了，代码如下： .text::after { content: ''; display: block; margin-top: -24px;}文本多的时候曾经出界了，所以不会受影响，文本少的时候就能够缩小一行的高度，不过上面这个链接还是可见的，这时能够再复制一份文案笼罩在下面，要应用雷同的款式，并且要用定位，最重要的是要记得加上背景色彩。 <div class="wrap"> <p class="text">一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案是不是真的很长很长如同还不够长持续再长一点。</p> <p class="copy">一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案是不是真的很长很长如同还不够长持续再长一点。</p> <a class="link" href="#">全文</a> </div>.text,.copy { //雷同款式}.text::after { content: ''; display: block; margin-top: -24px;}.copy { position: absolute; left: 15px; right: 15px; top: 15px;}当然如果不想多减少一个标签的话还能够应用伪元素： ...

关于css:动画合成小技巧CSS-实现动感的倒计时效果

欢送关注微信公众号：前端侦探介绍一个 CSS 动画合成小技巧。先看成果这是一个十分“动感”的倒计时成果，通常在一些流动收场中比拟常见，剖析一下整个动画过程，不难发现，有以下几类动画数字的变动放大和放大透明度变动不晓得小伙伴是否观察出来呢？上面来一起来看看具体实现吧一、数字的变动先来看数字的变动。这个技巧在之前的文章：还在应用定时器吗？CSS 也能实现电子时钟中首次用到，这里再次介绍一下在以前，数字的变动可能须要创立多个标签，而后扭转位移来实现 <count-down> <span>5</span> <span>4</span> <span>3</span> <span>2</span> <span>1</span></count-down>这种形式须要创立多个标签，稍微繁琐，也不易扩大。当初有更简洁的形式能够实现了，那就是 CSS @property。这是干什么的呢？简略来讲，能够自定义属性，在这个例子中，能够让数字像色彩一样进行过渡和动画，可能不太懂，间接看例子吧假如 HTML 是这样的 <count-down style="--t: 5"></count-down>而后咱们通过 CSS 变量将数字渲染到页面，这里须要借助伪元素和计数器有趣味的能够参考这篇文章：小tips: 如何借助content属性显示CSS var变量值count-down::after{ counter-reset: time var(--t); content: counter(time);}成果如下如何让这个数字变动呢？能够用到 CSS 动画 @keyframes count { to { --t: 0 }}count-down::after{ --t: 5; counter-reset: time var(--t); content: counter(time); animation: count 5s forwards;}成果如下当初的成果仅仅是5秒后，数字从 5 变成了 0，并没有 5 => 4 => 3 => 2 => 1 这种阶段变动。而后最重要的一步来了，加上以下自定义属性 ...