Css

vivo 互联网前端团队-Wei XingHoudini被称之为Magic of styling and layout on the web，看起来非常神秘，但实际上，Houdini并非什么神秘组织或者神奇魔法，它是一系列与CSS引擎相干的浏览器API的总称。 一、Houdini 是什么在理解之前，先来看一些Houdini能实现的成果吧： 反向的圆角成果（Border-radius)： 动静的球形背景（Backgrond）： 黑白边框（Border）： 神奇吧，要实现这些成果应用惯例的CSS可没那么容易，但对CSS Houdini来说，却很easy，这些成果只是冰山一角，CSS Houdini能做的有更多。（这些案例均来自Google Chrome Labs，更多案例能够通过 Houdini Samples 查看）。 看完成果，再来说说Houdini到底是什么。 首先，Houdini 的呈现最间接的目标是为了解决浏览器对新的CSS个性反对较差以及Cross-Browser的问题。咱们晓得有很多新的CSS个性尽管很棒，但它们因为不被支流浏览器广泛支持而很少有人去应用。 随着CSS标准在一直地更新迭代，越来越多无益的个性被纳入进来，然而一个新的CSS个性从被提出到成为一个稳固的CSS个性，须要通过漫长地期待，直到被大部分浏览器反对时，能力被开发者宽泛地应用。 而 Houdini 的呈现正是洞察和解决了这一痛点，它将一系列CSS引擎API凋谢进去，让开发者能够通过JavasScript发明或者扩大现有的CSS个性，甚至发明本人的CSS渲染规定，给开发者更高的CSS开发自由度，实现更多简单的成果。 二、JS Polyfill vs Houdini有人会问，实际上很多新的CSS个性在被浏览器反对之前，也有可代替的JavaScript Polyfill能够应用，为什么咱们依然须要Houdini呢？这些Polyfill不是同样能够解决咱们的问题吗？ 要答复这个问题也很简略，JavaScript Polyfill绝对于Houdini有三个显著的缺点： 1.不肯定能实现或实现艰难。 CSSOM凋谢给JavaScript的API很少，这意味着开发者能做的很无限，只能简略地操纵DOM并对款式做动静计算和调整，光是去实现一些简单的CSS新个性的Polyfill就曾经很难了，对于更深层次的Layout、Paint、Composite等渲染规定更是无能为力。所以当一个新的CSS个性被推出时，通过JavaScript Polyfill不肯定可能残缺地实现它。2.实现成果差或有应用限度。 JavaScript Polyfill是通过JavaScript来模仿CSS个性的，而不是间接通过CSS引擎进行渲染，通常它们都会有肯定的限度和缺点。例如，大家熟知的css-scroll-snap-polyfill就是针对新的CSS个性Scroll Snap产生的Polyfill，但它在应用时就存在应用限度或者原生CSS体现不统一的问题。3.性能较差。 JavaScript Polyfill可能造成肯定水平的性能损耗。JavaScript Polyfill的执行机会是在DOM和CSSOM都构建实现并且实现渲染后，通常JavaScript Polyfill是通过给DOM元素设置内联款式来模仿CSS个性，这会导致页面的从新渲染或回流。尤其是当这些Polyfill和滚动事件绑定时，会造成更加显著的性能损耗。 Houdini的诞生让CSS新个性不再依赖于浏览器，开发者通过间接操作CSS引擎，具备更高的自由度和性能劣势，并且它的浏览器反对度在一直晋升，越来越多的API被反对，将来Houdini必然会减速走进web开发者的世界，所以当初对它做一些理解也是必要的。 在本文，咱们会介绍Houdini的APIs以及它们的应用办法，看看这些API以后的反对状况，并给出一些在生产环境中应用它们的倡议。 Houdini的名称与一位驰名美国逃脱魔术师Harry Houdini的名称一样，兴许正是取逃脱之意，让CSS新个性逃离浏览器的掌控。三、Houdini APIs上文提到CSS Houdini提供了很多CSS引擎相干的API，依据Houdini提供的标准阐明文件，API共分为两种类型：high-level APIs 和 low-level APIs 。 high-level APIs：顾名思义是高层次的API，这些API与浏览器的渲染流程相干。 Paint API提供了一组与绘制（Paint）过程相干的API，咱们能够通过它自定义的渲染规定，例如调整色彩（color）、边框（border）、背景（background）、形态等绘制规定。Animation API提供了一组与合成（composite）渲染相干的API，咱们能够通过它调整绘制层级和自定义动画。Layout API提供了一组与布局（Layout）过程相干的API，咱们能够通过它自定义的布局规定，相似于实现诸如flex、grid等布局，自定义元素或子元素的对齐（alignment）、地位（position）等布局规定。low-level APIs：低层次的API，这些API是high-level APIs的实现根底。 Typed Object Model APICSS Properties & Values APIWorkletsFont Metrics APICSS Parser API这些APIs的反对状况在不断更新中，能够看到以后最新的一次更新工夫是在2021年5月份，还是比拟沉闷的。（注：图片来源于Is Houdini ready yet? ） ...

vivo 互联网前端团队-Wei XingHoudini被称之为Magic of styling and layout on the web，看起来非常神秘，但实际上，Houdini并非什么神秘组织或者神奇魔法，它是一系列与CSS引擎相干的浏览器API的总称。 一、Houdini 是什么在理解之前，先来看一些Houdini能实现的成果吧： 反向的圆角成果（Border-radius)： 动静的球形背景（Backgrond）： 黑白边框（Border）： 神奇吧，要实现这些成果应用惯例的CSS可没那么容易，但对CSS Houdini来说，却很easy，这些成果只是冰山一角，CSS Houdini能做的有更多。（这些案例均来自Google Chrome Labs，更多案例能够通过 Houdini Samples 查看）。 看完成果，再来说说Houdini到底是什么。 首先，Houdini 的呈现最间接的目标是为了解决浏览器对新的CSS个性反对较差以及Cross-Browser的问题。咱们晓得有很多新的CSS个性尽管很棒，但它们因为不被支流浏览器广泛支持而很少有人去应用。 随着CSS标准在一直地更新迭代，越来越多无益的个性被纳入进来，然而一个新的CSS个性从被提出到成为一个稳固的CSS个性，须要通过漫长地期待，直到被大部分浏览器反对时，能力被开发者宽泛地应用。 而 Houdini 的呈现正是洞察和解决了这一痛点，它将一系列CSS引擎API凋谢进去，让开发者能够通过JavasScript发明或者扩大现有的CSS个性，甚至发明本人的CSS渲染规定，给开发者更高的CSS开发自由度，实现更多简单的成果。 二、JS Polyfill vs Houdini有人会问，实际上很多新的CSS个性在被浏览器反对之前，也有可代替的JavaScript Polyfill能够应用，为什么咱们依然须要Houdini呢？这些Polyfill不是同样能够解决咱们的问题吗？ 要答复这个问题也很简略，JavaScript Polyfill绝对于Houdini有三个显著的缺点： 1.不肯定能实现或实现艰难。 CSSOM凋谢给JavaScript的API很少，这意味着开发者能做的很无限，只能简略地操纵DOM并对款式做动静计算和调整，光是去实现一些简单的CSS新个性的Polyfill就曾经很难了，对于更深层次的Layout、Paint、Composite等渲染规定更是无能为力。所以当一个新的CSS个性被推出时，通过JavaScript Polyfill不肯定可能残缺地实现它。2.实现成果差或有应用限度。 JavaScript Polyfill是通过JavaScript来模仿CSS个性的，而不是间接通过CSS引擎进行渲染，通常它们都会有肯定的限度和缺点。例如，大家熟知的css-scroll-snap-polyfill就是针对新的CSS个性Scroll Snap产生的Polyfill，但它在应用时就存在应用限度或者原生CSS体现不统一的问题。3.性能较差。 JavaScript Polyfill可能造成肯定水平的性能损耗。JavaScript Polyfill的执行机会是在DOM和CSSOM都构建实现并且实现渲染后，通常JavaScript Polyfill是通过给DOM元素设置内联款式来模仿CSS个性，这会导致页面的从新渲染或回流。尤其是当这些Polyfill和滚动事件绑定时，会造成更加显著的性能损耗。 Houdini的诞生让CSS新个性不再依赖于浏览器，开发者通过间接操作CSS引擎，具备更高的自由度和性能劣势，并且它的浏览器反对度在一直晋升，越来越多的API被反对，将来Houdini必然会减速走进web开发者的世界，所以当初对它做一些理解也是必要的。 在本文，咱们会介绍Houdini的APIs以及它们的应用办法，看看这些API以后的反对状况，并给出一些在生产环境中应用它们的倡议。 Houdini的名称与一位驰名美国逃脱魔术师Harry Houdini的名称一样，兴许正是取逃脱之意，让CSS新个性逃离浏览器的掌控。三、Houdini APIs上文提到CSS Houdini提供了很多CSS引擎相干的API，依据Houdini提供的标准阐明文件，API共分为两种类型：high-level APIs 和 low-level APIs 。 high-level APIs：顾名思义是高层次的API，这些API与浏览器的渲染流程相干。 Paint API提供了一组与绘制（Paint）过程相干的API，咱们能够通过它自定义的渲染规定，例如调整色彩（color）、边框（border）、背景（background）、形态等绘制规定。Animation API提供了一组与合成（composite）渲染相干的API，咱们能够通过它调整绘制层级和自定义动画。Layout API提供了一组与布局（Layout）过程相干的API，咱们能够通过它自定义的布局规定，相似于实现诸如flex、grid等布局，自定义元素或子元素的对齐（alignment）、地位（position）等布局规定。low-level APIs：低层次的API，这些API是high-level APIs的实现根底。 Typed Object Model APICSS Properties & Values APIWorkletsFont Metrics APICSS Parser API这些APIs的反对状况在不断更新中，能够看到以后最新的一次更新工夫是在2021年5月份，还是比拟沉闷的。（注：图片来源于Is Houdini ready yet? ） ...

1、元素选择器最常见的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代码： .warning { color: red;}.important { font-weight: bold;}.warning.important { background: blue;}当然，第三条你也能够写成： .important.warning { background: blue;} 和词序没有关系。阐明一下，.warning会匹配所有蕴含warning属性的元素，不论该元素还蕴含多少其余的属性。.important同理。而.important.warning会匹配所有同时蕴含以上2种属性的元素，不论该元素还蕴含多少其余的类，也不论他们在类列表中呈现的程序，只有其中含有这2个属性，则会被抉择进来！ ...

欢送关注微信公众号： 前端侦探在网页中，常常会用暗影来突出层级关系，特地是顶部导航，但有时候设计感觉没必要一开始就显示暗影，只有滚动后才呈现。比方上面这个例子，留神察看头部暗影 能够看到，只有滚动当前才呈现暗影。个别状况下，应用 JS 监听滚动事件动静增加类名就能够实现，不过通过我的一番尝试，发现这种成果仅仅应用 CSS 也能轻易实现，上面是实现成果 你也能够提前拜访 CSS auto header shadow(codepen.io) 查看实际效果。那 如何实现的呢，花两分钟工夫看看吧~ 一、头部固定定位假如有这样一个布局 <header>LOGO</header><main>很多内容文本</main>简略润饰一下 header{ background: #fff; font-size: 20px; padding: 10px;}头部固定定位有很多种形式，比拟常见的是应用 fixed定位 header{ position: fixed; top: 0}然而，fixed定位是不占空间的，会导致遮挡内容区域，所以个别还须要预留头部一部分空间进去，比方这样 main{ margin-top: 头部的高度}在这里，我更举荐应用sticky定位，在吸顶的同时，还能保留原有的占位 header{ position: sticky; top: 0}成果如下，只是没有暗影 二、CSS 实现原理实现这个成果，须要一点点“CSS 障眼法”。假如有一层暗影，在默认状况下用一个元素遮挡起来，以下都称之为“遮挡物”。这里须要思考好各个局部的层级关系，略微有些简单，如下所示（侧面层级关系图） 层级关系为： 头部 > 遮挡物 > 暗影 > 内容在滚动过程中，暗影就主动就可见了，遮挡物正好又会被头部遮住，留神，遮挡物和内容是一起滚动的，动静演示如下 原理就是这样，上面看具体实现 三、CSS 具体实现依据以上原理，这里须要增加一个元素，暗影和遮挡物都能够用伪元素生成 <header>LOGO</header><shadow></shadow><main>很多内容文本</main>这里暗影的地位是固定的，也不须要占据空间，所以能够间接用fixed定位，也能够不设置top值，因为默认就位于非定位时的地位（又体现出 sticky 的益处了），也就是头部上面 shadow::before{ content: ''; box-shadow: 0 0 10px 1px #333; position: fixed; /*无需 top 值*/ width: 100%;}fixed 定位在不设置 top 或者 left 值时，依然位于原先地位，然而会在这个地位固定下来遮挡物能够用纯色填充，而且须要追随内容滚动，也不须要占据空间，同时也为了晋升层级，能够设置一个absolute定位 ...

属性选择器能够依据元素特定的属性来抉择元素，这样能够不必借助于“类选择器”或“id选择器”。 属性选择器的权重为 10。 1、抉择含有某属性的元素<input type="text" value="请输出用户名"><input type="text">如果我想选出具备 value 属性的 input 元素，能够这么写： input[value] { color: red;}2、抉择等于某属性值的元素<input type="text" value="请输出用户名"><input type="password">如果我想选出 input 类型为 password 的元素，能够这么写： input[type=password] { color: red;}3、匹配属性值以 xx 结尾的元素<div class="icon1"><div class="icon2"><div class="icon3"><div class="icon4">input[class^=icon] { ...}4、匹配属性值以 xx 结尾的元素<div class="top_box"><div class="bottom_box">input[class$=box] { ...}5、匹配属性值含有 xx 的元素<div class="icon1"><div class="icon2"><div class="nav_icon">input[class*=icon] { ...}

inset 属性用作定位元素的 top、right、bottom、left 这些属性的简写。相似于 margin 和 padding 属性，按照“上右下左”的程序。举个例子： inset: 0; /* 等同于 `top: 0; right: 0; bottom: 0; left: 0;` */inset: 1px 2px; /* 等同于 `top: 1px; right: 2px; bottom: 1px; left: 2px;` */inset: 1px 2px 3px; /* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 2px;` */inset: 1px 2px 3px 4px; /* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 4px;` */留神：inset 属性只作用于定位元素。Internet Explorer 浏览器上不反对该属性！！！

css管制滚动条宽度和色彩 ::-webkit-scrollbar { width: 7px; height: 7px;}::-webkit-scrollbar-track { background-color: transparent; border-radius: 0;}::-webkit-scrollbar-thumb { width: 4px; border-radius: 5px; background-color: #5e5e6a;}::-webkit-scrollbar-track:hover { background-color: transparent;}::-webkit-scrollbar-thumb:hover { background-color: #5e5e6a;}::-webkit-scrollbar-thumb:active { background-color: #5e5e6a;}指定某个div.custom的滚动条款式 前端加相应的选择器即可 div.custom::-webkit-scrollbar { width: 7px; height: 7px;}

line-height继承的三种状况 line-height=20pxbody { line-height: 20px; font-size: 30px;}p { font-size: 16px;}这时候p标签的line-height=20px，继承body的line-height=20px line-hieght=1.5 body { line-height: 1.5; font-size: 30px;}p { font-size: 16px;}这时候p标签的line-height=1.5，继承body的line-height=1.5。则p标签的line-height=16px * 1.5 = 24px line-hieght=200% body { line-height: 200%; font-size: 30px;}p { font-size: 16px;}这时候p标签的line-height=60px，先计算body的line-height=200% = 200% * 30px = 60px。再p标签继承body的line-height=60px

6月23日，由明道云编撰的《各行业零代码企业应用案例集锦》（以下简称“《集锦》”）电子书正式公布。《集锦》囊括来自14个行业的50个案例，搜罗各行业中高价值的利用场景。借助这本电子书，明道云心愿为正在理解和思考抉择明道云APaaS产品的用户提供更多参考实例。 笼罩十四个行业《集锦》中的案例来自金融、通信、能源、工业制作、互联网与IT软件、企业征询与服务、政府组织、酒店地产、医疗衰弱、交通运输、文化传媒、科研教培、电商贸易和餐饮快消，共计14个行业。 如果你想理解其余行业的案例，能够到明道云官网博客查问，或分割服务参谋获取。 搜罗简单高价值的利用场景在每个行业类目下，咱们精选出具备行业特色，以及客户常常问及的业务场景案例，尽可能让参考价值最大化。比方：在政府组织行业里，着重讲述上海市和江西省新余市的基层疫情排查案例；在企业征询与服务行业里，展现某“四大”税务审计公司打造的简单税务治理计划；在工业制作行业里，介绍天津钢管的设施巡检案例。 随同软硬件技术提高、产业协同化发展等社会趋势，各行业客户都使用明道云，发明出大量极具创新性和商业价值的利用计划——联结优锘科技打造的金融科技信息报送计划，栎皓科技独创的精细化商业地产经营零碎，某寰球出名食品快消公司的一体化实验室管理系统……这些精彩案例都收录到《集锦》中，置信能抛砖引玉，为各位读者带来不少启发。 不止利用，还有赋能不少大型企业组织在选型零代码/低代码平台的时候，除了关注产品能力和计划实现水平，还十分重视面向组织外部大范畴推广的可行性。而每家企业的组织架构、信息化水平、零碎架构各异，推广零代码/低代码的策略也不同。 如果你心愿借鉴更多大型组织外部推广零代码利用平台的做法，无妨参考《集锦》中的以下案例： 艾默生：零代码赋能基层，为500强数字化策略提速广汽本田：“无界共创”，批量上线200+数字化我的项目一步一印，实现天津钢管信息化供应侧结构性改革佛山铁投：零代码赋能一线骨干，助力轨道交通建设 大型组织深刻推广零代码利用平台的行动指南在往年三月，明道云公布了《大型组织深刻推广零代码利用平台的行动指南》。它秉承“循序渐进、分级分层、业技协同、全面赋能”的口头思路，为大型组织地方IT部门提供成功实践的外部全面推广零代码利用平台的教训领导。 书中凝合明道云服务山东挪动、浙江挪动、复星团体、华夏银行、民生银行、复旦大学从属中山医院、艾默生电气中国等大型企业的实战经验，值得中大型企业IT负责人、首席架构师浏览。 如果您对这本指南感兴趣，点击链接即可获取。 如何获取电子书如果您想获取《各行业零代码企业应用案例集锦》电子书，请扫描下方二维码，提交表单。咱们将发送至您的电子邮箱。

vertical-align 通常用于设置图片或者表单和文字的垂直对齐，只对于行内元素或行内块元素无效。 img { /* 默认，元素放在父元素基线上 */ vertical-align: baseline; /* 元素的顶端于行中最高元素的顶端对齐 */ vertical-align: top; /* 元素放在父元素的中部 */ vertical-align: middle; /* 元素的底部和整行的底部对齐 */ vertical-align: baseline;} 图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐，将属性设置为 middle，就能够让文字和图片垂直居中对齐了。 有个奇怪的景象，如果将图片和文字放在一行，图片底部会有一条缝隙，咱们给其父元素加个边框看起来更显著一点： 这是因为图片默认是和文字的基线对齐的，罕用的解决办法有两种： 1、给图片增加 vertical-align 属性，值设为 middle / top / bottom img { vertical-align: top ｜ middle ｜ bottom;}2、把图片转换为块级元素 img { display: block;}

引言本篇文章次要介绍的是对于CSS Sandbox的一些事件，为什么要介绍这个呢？在咱们日常的开发中，款式问题其实始终是一个比拟耗时的事件，一方面咱们依据 UI 稿一直的去调整，另一方面随着我的项目越来越大可能哪一次开发就发现——诶，我的款式怎么不起作用了，亦或是怎么被另一个款式所笼罩了。起因可能有很多： 不标准的命名导致反复为了简略，间接增加全局款式的批改款式的不合理复用多个我的项目合并时，每个子项目都有本人的独立款式和配置，可能在本人我的项目中不存在这样的问题，然而合并当前相互影响造成了款式净化第三方框架引入……而CSS Sandbox正式为了隔离款式，从而解决款式净化的问题 利用场景通过上述咱们理解了款式净化产生的起因，从中咱们也能够总结一下哪些场景时咱们须要应用CSS Sandbox进行款式隔离呢 微前端场景下的父子以及子子利用大型项目以及简单我的项目的款式抵触第三方框架以及自定义主题款式的笼罩……常见的解决方案既然说了这么多样式净化产生的起因和利用场景，那咱们该如何解决他们呢，目前有以下几种解决方案，其实解决的外围还是不变的——使CSS选择器作用的Dom元素惟一 Tips：当咱们在理论的开发中能够依据我的项目的理论状况进行抉择 CSS in JS看名字是不是感觉很高级，直译下就是用 JS 去写 CSS 款式，而不是写在独自的款式文件里。例如： <p style='color:red'>css in js</p>这和咱们传统的开发思维很不一样，传统的开发准则是关注点拆散，就比方咱们常说的不写行内款式、行内脚本，即 HTML、JS、CSS 都写在对应的文件里。 对于 CSS in JS 不是一个新兴的技术，他的热度次要呈现于一些 Web 框架的倒退，比如说：React，它所反对的 jsx 语法，能够让咱们在一个文件中同时写 js、html 和 css，并且组件外部治理本人的款式、逻辑，组件化开发的思维深入人心。 const style = { color: 'red'}ReactDOM.render( <p style={style}> css in js </h1>, document.getElementById('main'));每个组件的款式由本身的 style 决定，不依赖也不影响内部，从这一点来看的确实现了款式隔离的成果。 对于Css in js的库也有很多，比如说： styled-componentspolished······其中 styled-components 会动静生成一个选择器 import styled from 'styled-components'function App() { const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; return ( <div> <Title>Hello World, this is my first styled component!</Title> </div> );}优缺点| 长处 | • 没有作用域的款式净化问题（次要指的是通过写外行款式以及生成惟一的 CSS 选择器） ...

1、定位叠放秩序在应用定位布局时，有可能呈现盒子叠盒子的状况，此时，能够应用 z-index 来管制盒子的秩序。 div { position: absolute; z-index: 1;}z-index 的数值能够是正整数、负整数或 0，默认是 auto。数值越大，盒子越靠上；数值雷同，则依照书写程序后来者居上。 只有定位的盒子才有 z-index 属性。 相对定位/固定定位的盒子会齐全压住上面的盒子，而浮动元素只会压住它前面规范流的盒子，而不会压住盒子外面的文字或图片，因为浮动最后产生的目标就是为了做文字盘绕的成果。 2、偏移量属性的抵触如果一个定位的盒子既有 left 属性，又有 right 属性，则默认会执行 left 属性，同理，如果盒子同时有 top、bottom 的属性，默认执行 top 属性，疏忽 bottom 属性。

css格局阐明块内容文字超长后只显示1行， 且超过宽度，显示为省略号(...)html内容<body> <div>这是一段可能慧衣橱的啊kjkad安宁客家话接电话发来的易哈佛的环刀法就好啦对焊法兰很自豪了东航飞机氯化胆碱哈啊达到的</div></body>style款式div { width: 300px; height: 100px; border: 1px solid red; /** 只显示一行 超过显示省略号 */ text-overflow: ellipsis; /** 超过显示省略号 */ white-space: nowrap; /** 禁止文字主动换行 */ overflow: hidden; /** 超过的暗藏(默认"visible") */}原始款式图 加了款式后：

DOMContentLoaded和load咱们先理解两个事件，有助于前面的剖析。 load事件：load 应该仅用于检测一个齐全加载的页面 当一个资源及其依赖资源已实现加载时，将触发load事件。也就是说，页面的html、css、js、图片等资源都曾经加载完之后才会触发 load 事件。 DOMContentLoaded事件：当初始的 HTML 文档被齐全加载和解析实现之后，DOMContentLoaded 事件被触发，而无需期待样式表、图像和子框架的实现加载。也就是说，DOM 树曾经构建结束就会触发 DOMContentLoaded 事件。 js 阻塞了什么因为js在执行的过程中可能会操作DOM，产生回流和重绘，所以GUI渲染线程与JS引擎线程是互斥的。 在解析HTML过程中，如果遇到 script 标签，渲染线程会暂停渲染过程，将控制权交给 JS 引擎。内联的js代码会间接执行，如果是js内部文件，则要下载该js文件，下载实现之后再执行。等 JS 引擎运行结束，浏览器又会把控制权还给渲染线程，持续 DOM 的解析。 因而，js会阻塞DOM树的构建。 那么，是否会阻塞页面的显示呢？咱们用上面的代码来测试一下。 <!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> <div>hello world</div> <script> debugger </script> <div>hello world2</div></body></html>能够看到，这个页面的DOMContentLoaded产生在2.23s，可见js阻塞了DOM树的构建。然而，页面上却简直在一瞬间显示了hello world，阐明js不会阻塞位于它之前的dom元素的渲染。 古代浏览器为了更好的用户体验，渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有DOM解析实现后才布局渲染树。而是当js阻塞产生时，会将曾经构建好的DOM元素渲染到屏幕上，缩小白屏的工夫。 这也是为什么咱们会将script标签放到body标签的底部，因为这样就不会影响后面的页面的渲染。 css 阻塞了什么当咱们解析 HTML 时遇到 link 标签或者 style 标签时，就会计算款式，构建CSSOM。 css不会阻塞dom树的构建，然而会阻塞页面的显示。咱们仍然用一个例子来测试： <!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" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css"></head><body> <div class="woo-spinner-filled">hello world</div> <div>hello world2</div></body></html>应用一个内部css文件，关上Slow 3G模仿比较慢的网速，能够看到，DOMContentLoaded事件触发只用了30ms，页面此时仍然是空白，而简直是loaded事件2.92s产生时，页面才呈现内容。 起因是，浏览器在构建 CSSOM 的过程中，不会渲染任何已解决的内容。即使 DOM 曾经解析结束了，只有 CSSOM 不没构建好，页面也不会显示内容。 ...

依据需要批改表格边框的色彩，应用的是elementUI的table中的cell-style属性进行批改，改完后如图，表格的左边框和下边框批改不胜利 各种尝试后发现这是应用伪元素弄的，将其改为通明即可，其余边框同理

说起css3的旋转成果，那就要说为什么不必js去实现，CSS3的动画成果，可能缩小对JavaScript和Flash文件的HTTP申请这是起因之一。然而css3可能要求浏览器执行很多的工作来实现这个动画成果的渲染，这有可能导致浏览器响应迟缓,因而，在应用一些简单的特效时，大家须要思考分明。不过这样的景象毕竟为数不多。其实很多CSS3技术可能在任何状况下都大幅提高页面的性能。就这一条足以让咱们应用CSS3。 HTML代码： <span class="closeBox" style="margin:0px 120px;"> <img src="images/cross26.png" class="close"></span>CSS代码： .closeBox{ display: inline-block; width: 50px; height: 50px; transition: transform 0.5s; -moz-transition: -moz-transform 0.5s; /* Firefox 4 */ -webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */ -o-transition: -o-transform 0.5s;}.closeBox img{ width: 100%;}.closeBox:hover{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg);} HTML代码： <div class="menu" id="cssmenu"> <ul class="clearfix"> <li class="has-sub"> <a href="">信息公開<img src="./img/xia.png"></a> <ul> <div class="ul"> <li><a href="">資訊</a></li> <li><a href="">白皮書</a></li> <li><a href="">關於我們</a></li> <li><a href="">幫助核心</a></li> </div> </ul> </li> <ul></div>CSS代码： .menu>ul>li.has-sub a img{ margin-left: 10px; transition: transform 0.5s;}.menu>ul>li.has-sub a:hover>img{ transform: rotate(180deg);} ...

border-box的应用场合子元素有padding和border，或者至多有其一，并且须要给子元素设定100%宽度（或者50%宽度等等），这时候显然须要border-box。设为border-box之后，padding和border的厚度能够随便调，并不会溢出父元素。如果是content-box，那么，宽度必然会溢出，而且，为了不溢出，你设定子元素的宽度就只能是一个定值，或者是一个计算值（比方calc(100% - 20px)）。 作者：microkof链接：https://www.jianshu.com/p/006...起源：简书著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

浏览器渲染原理浏览器渲染过程 依据HTML构建HTML树（DOM）依据CSS构建CSS树（CSSOM）将两棵树合并成一棵渲染树Layout 布局（文档流、盒模型、计算大小和地位）Paint 绘制（把边框色彩、文字色彩、暗影等画进去）Compose 合成（依据层叠关系展现画面）transition与animation的区别1、transition 须要去触发比方：点击事件、鼠标移入事件；而 animation 能够配合 @keyframe 能够不触发事件就触发这个动画 2、transition 触发一次播放一次；而 animation 则是能够设置很多的属性，比方循环次数，动画完结的状态等等； 3、transition关注的是款式属性的变动，属性值和工夫的关系是一个三次贝塞尔曲线；而animation作用于元素自身而不是款式属性，能够应用关键帧的概念，能够实现更自在的动画成果； 4、在性能方面：浏览器有一个主线程和排版线程；主线程个别是对 js 运行的、页面布局、生成位图等等，而后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程申请位图等等；咱们在用应用 aniamtion 的时候这样就能够扭转很多属性，像咱们扭转了 width、height、postion 等等这些扭转文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比拟大，然而咱们用 transition 的时候个别会联合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了。

明天看到一个CSS款式：html{height:100%}，感觉挺奇怪，为什么html还须要设置height:100%呢，html不就是整个窗口吗？我是这样认为的。而后就把html去掉只剩下body的height:100%，就呈现了上面的场景：登录界面上移不见了大部分！！！解释：我晓得一个事实：一个div块级元素没有被动为其设置宽度和高度，浏览器会为其调配可应用的最大宽度(比方全屏宽度)，然而不负责调配高度，块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。 还有，元素高度百分比须要向上遍历父标签要找到一个定值高度能力起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用，此时的状况是父元素高度依赖子元素堆砌撑高，而子元素依赖父元素的定高起作用，相互依赖，却都无奈依赖，死循环了。 那如何解决这个问题呢，能够让子元素先定高，这样是能够解决；然而如果子元素肯定要依赖父元素高度呢？ 下面的html代码能够看出，div的父元素是body，body的父元素是html，通过height:100%层层向上，找到顶级获取定高。 所以呈现了html和body同时设置height:100%，那html的下级是谁呢？ 通过下面的事实晓得，浏览器负责调配块级元素宽度，那么浏览器也肯定能够调配高度(只是没有做)，那么浏览器自身是有宽度和高度的，设置html的height:100%，就能够获取浏览器的定高了，前面的body和div也就有了依赖。转自：https://www.cnblogs.com/huash...

几种常见的布局场景1. 瀑布流布局(瀑布流式布局)特点：参差不齐的排列形式，布局的元素等宽，当元素占满一行时，后续布局的元素顺次搁置在最小高度的列上，父容器的高度取列表的最大值布局成果: js实现实现思路：(1) 计算须要布局的列数：文档宽度/图片宽度(outerWidth等)(2) 创立一个数组（长度为列数），数组元素为每一列已布局元素的总高度(3) 将未安排的元素，顺次安排到高度最小的那一列，而后更新这一列的高度 tips: 浏览器窗口尺寸变动时，将图片重新排列图片尺寸计算时留神maigin、border等属性css实现css布局无奈实现真正意义上的瀑布流布局flex布局次要实现思路：容器元素设置横向布局，子元素设置纵向布局grid布局次要实现思路：网格容器： display: grid;grid-template-columns: repeat(auto-fill,minmax(200, 1fr));grid-gap: 10px;grid-auto-flow: row dense;grid-auto-rows: auto; 网格我的项目：grid-row: 2; (跨域几个网格)Multi-columns布局(多列布局、分栏布局)次要实现思路：容器元素设置以下属性：column-count: 3;column-width: 240px;column-gap: 20px;子元素设置: break-inside: aviod;瀑布流布局的长处： 升高页面复杂度，节俭空间联合懒加载，加强用户体验感，应用js实现2. 程度垂直居中(1).parent{display:table-cell; vertical-align:middle; text-align:center;}.child{display:inline-block;}(2) 相对定位.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}(3) flex.parent{display:flex;justify-content:center;align-items:center;} 3. div实现高度依据宽度自适应// 以宽高1：1为例(1) padding实现padding-bottom: 50%; // 高低内边距与左右内边距统一，百分数会绝对于父元素宽度设置height: 0;width: 50%;(2)vw实现width: 50vw;height: 50vw;(3)js实现(不举荐)div{width:50%;}window.onresize = () => {div.height(div.width);}(4)zoom实现(ie专属)width: 50%;zoom: 1;(5) float实现几种罕用的布局形式a. 响应式布局meta标签<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />媒体查问b. rem布局挪动端实现自适应所有分辨率 c. 流式布局百分比布局 d. flex布局e. grid布局grid布局与弹性布局的比拟: grid布局基于二维实现，flex布局基于一维布局（只按行或者按列布局）grid布局从布局动手（元素内容依照网格排列主动搁置），flex布局从内容动手（内容大小决定元素占用的空间）图片素材Grid布局

最近我打算对我的集体网站增加明暗模式的自动检测。这个解决方案不应用 JavaScript。相同，它通过CSS 媒体查问来检测用户的零碎设置，并应用两个自定义CSS属性来确定一个根本的配色计划。 定义 2 个自定义的 CSS 属性CSS 自定义属性也被称为 CSS变量或级联变量。你能够在 CSS 文件的任何中央定义 CSS 自定义属性，它们遵循与其余 CSS 规定雷同的级联和特定模式。例如，您能够在 document root 中定义 CSS 变量，并在更具体的 CSS类 中笼罩它们。您还能够检查和调试浏览器开发工具中申明的CSS变量，这些变量显示在样式表规定上面。 CSS自定义属性由前缀为两个破折号(——)的单词申明组成，并应用var()函数拜访。 :root { --my-color-variable: #000000;}.element { color: var(--my-color-variable);}您还能够向 var() 函数传递第二个参数，当您尝试应用自定义属性时，如果自定义属性不存在，它将充当回退值。 .element { color: var(--my-new-color, #ff0000);}对于这种明/暗模式解决方案，在文档根 document.root 定义两个色彩变量—一个用于前景色，一个用于背景色。我偏向于默认抉择暗模式，所以我将背景色设置为彩色(--color-bg)，前景色设置为红色(--color-fg)。 :root { --color-bg: #000000; --color-fg: #ffffff;} 媒体查问：prefers-color-scheme接下来，咱们将应用 preferences-color-scheme CSS 媒体查问连贯到零碎设置。当检测到 light 主题设置时，上面的代码将--color-bg设置为红色，--color-fg设置为彩色。 @media (prefers-color-scheme: light) { :root { --color-bg: #ffffff; --color-fg: #000000; }}增加 body 款式最初，应用 CSS 自定义属性，设置 HTML 主体元素的背景色彩(页面色彩)和文本色彩，如果没有笼罩，所有的子元素都将继承它们。 ...

1、层叠性雷同选择器给元素设置雷同的款式，此时一个款式会 笼罩（层叠）另一个抵触的款式。层叠性次要解决款式抵触问题。 <style> div { color: red; font-size: 18px; } ... div { color: green; /*和上方的红色抵触*/ }</style>最终文字色彩显示为绿色。层叠性遵循的准则是就近准则，也就是哪个离构造近，哪个款式就会失效。（简略说后写的款式会笼罩后面写的） 在笼罩款式时，不抵触的属性不会被笼罩，比方下面的代码，最终 div 的字体大小仍为 18px。 2、继承性在 CSS 中，子标签会继承父标签的某些款式，如文本色彩和字号。失当地应用继承能够简化代码，升高 CSS 款式的复杂性。 <style> body { font-size: 18px; line-height: 24px; } div { font-size: 14px; }</style><body> <!-- div 继承了 body 的行高 --> <div> 我的字体大小为 14px，行高为 24px </div> <!-- p 继承了 body 的字号和行高 --> <p> 我的字体大小为 18px，行高为 24px </p></body>子元素能够继承的款式：text-，font-，line- 结尾的属性，以及 color 属性 在继承性中，有一个特地的属性 —— line-height。body { font: 12px/1.5 Microsoft YaHei;}div { font-size: 16px;}p { font-size: 14px; color: grey;}行高能够设置为具体的值，比方 18px，也能够不跟单位，比方 1.5，意思是行高为字体大小的 1.5 倍。下面 body 的行高为 12 * 1.5 = 18px。 ...

<!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> @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); }}body { perspective: 1000px;}section { position: relative; width: 300px; height: 200px; margin: 300px auto; transform-style: preserve-3d; animation: rotate 6s linear infinite;}section:hover { /* 鼠标放入section，进行动画 */ animation-play-state: paused;}section div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(./media/dog.jpg) no-repeat;}section div:first-child { transform: translateZ(300px);}section div:nth-child(2) { /* 先旋转好之后，向我推过来 translateZ(300px) */ transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) { transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) { transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) { transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) { transform: rotateY(300deg) translateZ(300px);}section div:last-child { background: url(./media/pig.jpg) no-repeat center center;}</style> ...

1.字体1.1 字体font-family: 微软雅黑;font-family: 'Microsoft Yahei'; 1.2 粗体font-weight: normal|bold|bolder|lighter;也能够用数字： 100-700 1.3 斜体font-style: italic|normal; 斜体 1.4 合乎字体font: italic 700 16px 'Microsoft Yahei';程序不能变： font-stylefont-weightfont-sizefont-family能够只有3和4，但此时两者都得有：font: 16px 'Microsoft Yahei';2. 文本2.1 文本程度对齐text-align: center|left|right; 2.2 装璜文本(上中下加条线)text-decoration: none|underline|overline|line-through;a: {text-decoration: none;} // a标签都不显示下划线p: {text-decoration: underline;} // p标签都加下划线overline=上划线line-through=删除线 2.3 首行缩进text-indent: 20px; // 每个段落的首行缩进p: { text-indent: 20px; }p: { text-indent: 2em; } // 2个文字

<!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>3D导航栏</title> <style> * { margin: 0; padding: 0;}ul { margin: 200px 100px; /* 增加透视间隔 */ perspective: 400px;}ul li { list-style: none; float: left; width: 180px; height: 40px; margin: 5px;}.box { width: 100%; height: 100%; /* background-color: pink; */ font-size: 30px; color: #000; position: relative; transition: all .4s; /* 保留子元素的3d成果 必写 */ transform-style: preserve-3d;}.box:hover { transform: rotateX(90deg);}li .child { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}li .bottom { background-color: purple; color: white; /* 咱们如果有挪动和其余款式，必须先写挪动translate */ transform: translateY(50%) rotateX(-90deg);}li .front { z-index: 1; background-color: pink; transform: translateZ(20px);}</style></head> ...

<!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> body { /* 增加透视点 */ perspective: 400px; /* 给父亲增加 子元素放弃3d成果 必写 */ transform-style: preserve-3d;}.box { width: 300px; height: 300px; border-radius: 150px; margin: 100px auto; /* background-color: pink; */ position: relative; /* 谁做过渡给谁加 */ transition: all .3s;}.box:hover { transform: rotateY(180deg);}.child { position: absolute; width: 100%; height: 100%; line-height: 300px; text-align: center; border-radius: 50%; top: 0; left: 0; background-color: hotpink; color: white; font-size: 30px;}.negtive { transform: rotateY(180deg); background-color: skyblue;}</style></head> ...

<!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 { perspective: 500px;}.box { width: 200px; height: 200px; margin: 100px auto; position: relative; transition: all 2s; /* 给父盒子增加transform-style属性preserve-3d，让子元素放弃3d平面成果 */ transform-style: preserve-3d;}.box:hover { transform: rotateY(60deg);}.box>div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: pink;}.box>div:last-child { background-color: blue; transform: rotateX(45deg); transition: all 1s;}</style></head><body> <div class="box"> <div></div><div></div></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>奔跑的狗熊</title> <style> @keyframes run { 0% { left: 0; } 100% { left: -1600px; }}@keyframes move { 0% { left: 0; } 100% { left: 50%; transform: translateX(-50%); }}@keyframes bg_move { 0% { background-position: 0; } 100% { background-position: -1840px; }}body { /* background-color: gray; */ background: url(./media/bg1.png) no-repeat center center ; animation: bg_move 10s infinite;}div { position: relative; width: 200px; height: 100px; margin: 300px 0; /* background-color: skyblue; */ overflow: hidden; animation: move 3s linear forwards;}img { position: absolute; top: 0; left: 0; width: 1600px; height: 100px; animation: run .7s steps(8) infinite;}</style></head><body> <div> ...

　本文将介绍7个对于CSS 的外围概念，心愿对初学者有些许帮忙。　1 、Display　你是否已经尝试过将两个div 并排搁置，但另一个div 最终位于独自的一行？或者尝试将链接放在独自的行上，但其余元素以某种形式在它旁边完结？我曾经笼罩了你！应用display 属性，您能够管制元素在页面上的显示方式。尽管很多网站都在应用flexbox 和grid，但您必定会遇到一个依然应用旧显示属性进行布局的网站。　1.1 、显示块　块元素默认占用100% 的可用空间，并且不容许任何元素搁置在同一行上，即便您减小宽度 ，元素大小也会减小，但依然不会容许在它旁边搁置另一个元素。大多数HTML 元素默认是块元素。　1.2 、显示内联块　Inline-Block 元素容许将其余非块元素搁置在它们旁边，并且只有在没有空间留给这些元素时才会将其余元素推到下一行。　1.3 、显示内联　内联元素相似于inline-block ，因为它们容许将其余元素放在它们旁边，然而内联元素的尺寸( 宽度和高度) 不能更改，它们的尺寸由它们的内容( 文本和填充) 。留神：您能够应用< br> 元素在inline/inline-block 元素之后换行。　2 、盒子模型　在HTML 中，一切都是一个盒子 。然而，这些盒子是如何工作的呢？盒子内的空白空间是如何增加的？盒子里面呢？“盒子”到底是什么？留神：这是假如上面的代码块在应用的CSS 文件中，它十分风行，你甚至不须要晓得如果它不存在会产生什么。　{box-sizing:border-box ；}　“盒子”基本上是HTML 元素的构建块，它由四个次要块组成：边距(margin) 、边框(border) 、填充(padding) 和内容(content) 。　2.1 、边距　边距在所选元素及其四周的所有元素之间增加空白空间，并且不会影响元素内容的大小。当初有个奇妙的小机密，从边框的外边缘开始，margin-top 将选定的元素向下推动而不挪动其余元素，而margin-bottom 将所述元素放弃在原位并向下推动其余元素。margin-left 将所选元素推到右侧，并且不挪动其余元素，而margin-right 将所述元素放弃在原位并将其余元素推到右侧。尽管一开始可能听起来令人困惑，但它的工作原理是这样的，因为HTML 是从上到下、从左到右出现的。我强烈建议在开发工具中应用边距，以便更好地理解它的工作原理。当初提出一个开创性的问题：假如我有两个块元素——A 和B ，A 在B 之上——如果我增加margin-bottom:15px ；会产生什么；到A 和margin-top:10px ；给B ？如果您认为它们之间的间隔为25 像素，我很道歉地告诉您您错了。为什么？因为边距解体！基本上，如果您有两个方向相同的边距，则只会渲染较大的边距，而另一个将被疏忽。所以在咱们的例子中，A 和B 仅相隔15px 。我晓得这须要消化很多，但我保障其余属性没有那么简单。　2.2 、边框　边框定义了元素边缘的外观，它还带走了内容并将内容向内推。因而，如果咱们有一个100x100px 的元素，增加一个10px 的边框将为咱们留下90x90px 的内容。　2.3 、填充　padding 在元素的边界内增加空白空间——不是空白，这意味着如果元素具备背景色彩，它将不会受到影响——从内容大小中移除，并将其向内推。应用与下面雷同的示例，领有10 像素的边框和10 像素的内边距将为咱们留下80x80 像素的内容。　2.4 、内容　内容基本上就是计算完padding 和border 后剩下的空间。它是文本或图像或子HTML 元素开始呈现在所选元素中的地位。　3 、定位　我晓得你试过给top:50px ；你的元素，想晓得为什么它没有挪动，咱们都去过那里。这就是为什么咱们须要探讨position 属性，它容许您管制元素的地位。　3.1 、static　所有HTML 元素都是position:static ；默认状况下。这意味着您不能应用top 、left 、right 、bottom 属性来挪动它们，它们依然能够应用margin 、flexbox 等来挪动。但在某些状况下，您只想将该元素略微挪动到没有在它四周挪动元素。　3.2 、relative　地位：绝对；意味着元素将绝对于其原始地位搁置，而与边距不同，不会挪动它四周的任何其余元素。通过应用relative ，您当初能够应用top 、left 、right 和bottom 属性来从新定位您的元素。　3.3 、absolute　地位：相对；绝对于最近的非地位定位所选元素：动态；parent( 如果没有这样的元素，它绝对于body 搁置) ，并将元素从HTML 流中取出，导致元素浮动在其余元素之上。您相对应该只在创立须要浮动在其余元素之上的货色( 例如弹出或敞开按钮) 时才应用此属性，通常，您应用该属性的次数越少越好。　3.4 、Fixed 地位　固定；与absolute 相似，它使元素浮动在其余元素之上。然而，它始终是绝对于注释搁置的，即便您滚动页面，它也会放弃在原来的地位。　4 、选择器　只管我很想探讨这个话题，但曾经有上千篇对于它的文章了，我没有太多要补充的，我最喜爱的一篇是MDN 官网文档，( 地址：#/en-US/docs/Web/CSS/Specificity) 您应该在大多数工夫应用类来设置元素的款式，并尽可能防止应用！　5 、继承　一些CSS 属性——font-size 、font-family 和color 等等——是从它们最近的父级继承的，当且仅当它们没有为给定元素指定时。以下HTML ：< ；divclass="grand-parent"> ；< ；divclass="parent"> ；< ；divclass="child"> ；< ；/div> ；< ；/div> ；< ；/div> ；　如果咱们给祖父母div 色彩：红色；思考到所述div 没有指定色彩属性，父div 和子div 都将具备红色文本色彩。如果它们中的任何一个指定了色彩，它将笼罩继承，不，在祖父母上增加！important 不会笼罩其孩子的色彩。同样，我将在调试局部探讨更多对于如何查找哪些属性被继承的内容。　6 、z-index 堆栈　我也心愿z-index 像具备更高z-index 的元素将显示在顶部一样简略，但这不是它的工作原理。再次看以下HTML ：< ；divclass="sibling-1parent"> ；< ；divclass="child"> ；< ；/div> ；< ；/div> ；< ；divclass="sibling-2"> ；< ；/div> ；　思考到兄弟1 的z-index:10 ；兄弟2 的z-index:20 ；在这种状况下，兄弟2 将位于兄弟1 之上，这很棒！当初，思考child 的z-index:30 ；在这种状况下，它不会显示在兄弟2 的顶部，因为它的父级(sibling-1) 的z-index 较小。因而z-index 仅实用于兄弟元素，如果该兄弟元素的z-index 高于父元素，则子元素不能显示在其父兄弟元素的顶部。您可能能够应用position:absolute ；做一些巫术魔术。以及所有这些，但不倡议这样做，因为它简直不可能保护您的布局。如果您心愿一个元素始终位于其余元素之上，建议您将其间接附加到注释中。　7 、调试　尽管调试不是CSS 的一部分，但您能够应用开发工具来帮忙您理解正在产生的事件。我在上面的例子中应用Chrome 关上元素选项卡并从那里抉择要查看的元素。　7.1 、盒子模型　在款式选项卡的最底部，您能够看到盒子模型的不同局部以及它们所笼罩的区域，将鼠标悬停在它们上方，元素的相应局部将突出显示。　7.2 、计算款式　在Styles 选项卡旁边有Computed 选项卡，您能够在其中看到利用于所选元素的所有不同CSS 属性。例如，如果您的元素在没有指定任何内容的状况下具备红色，您能够单击箭头图标以查看该款式的起源，它可能是继承的，也可能是由另一个选择器意外提供的。如果一个属性变暗 ，很可能是因为应用了flexbox 或网格来指定所述属性 。　7.3 、选择器　在Styles 选项卡中，您能够看到所有针对所选元素的选择器，在以下示例中，从5 个不同的选择器中为span 赋予了色彩。蓝色没有被划掉的起因是它具备最高的特异性。所以选择器的特异性越高，它在列表中的地位就越高。 ...

<!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>轮播图demo</title> <style> @keyframes move { /* 动画开始 */ 0% { transform: translate(0%, 0); } 25% { transform: translateX(0%); } /* 动画完结 */ 50% { transform: translateX(-33%); } 75% { transform: translateX(-67%); } 100% { transform: translateX(0); }}@keyframes p1 { /* 动画开始 */ 0% { width: 0%; } 25% { width: 100%; } 50% { width: 100%; } 75% { width: 100%; } 100% { width: 100%; }}@keyframes p2 { /* 动画开始 */ 0% { width: 0%; } 25% { width: 0%; } 50% { width: 100%; } 75% { width: 100%; } 100% { width: 100%; }}@keyframes p3 { /* 动画开始 */ 0% { width: 0%; } 25% { width: 0%; } 50% { width: 0%; } 75% { width: 100%; } 100% { width: 100%; }}* { margin: 0; padding: 0; box-sizing: border-box;}.main { position: relative; width: 1000px; height: 500px; margin: 100px auto; overflow: hidden;}li { list-style: none;}.progress { position: absolute; width: 200px; height: 20px; /* background-color: pink; */ bottom: 10px; left: 50%; transform: translate(-50%);}.progress ul li { float: left; width: 60px; height: 4px; border-radius: 2px; margin: 2px; background-color: #444;}.progress ul li em { background-color: #666; display: block; /* background-color: red; */ width: 100%; height: 100%; border-radius: 2px;}.progress ul li:first-child em { animation: p1; animation: p1 9s infinite;}.progress ul li:nth-child(2) em { animation: p2; animation: p2 9s infinite;}.progress ul li:nth-child(3) em { animation: p3; animation: p3 9s infinite;}/* .progress ul li:hover { background-color: #666;} */.md { width: 3000px; height: 500px; /* transform: translateX(-67%); */ /* animation-name: move; animation-duration: 9s; */ animation: move 9s infinite;}img { width: 1000px; height: 500px;}.md .one,.two,.three { float: left; color: white; width: 1000px; height: 500px; position: relative; font: 36px 'Microsoft Yahei'; font-weight: 700;}.two,.three { color: #000;}h2 { background-color: transparent; position: absolute; top: 30%; left: 40%;}.span1 { background-color: transparent; position: absolute; top: 45%; left: 35%; font-weight: 400; font: 24px 'Microsoft Yahei';}.span2 { background-color: transparent; position: absolute; top: 50%; left: 40%; font-weight: 400; font: 24px 'Microsoft Yahei';}.span3 { background-color: transparent; position: absolute; top: 45%; left: 30%; font-weight: 400; font: 24px 'Microsoft Yahei';}.three h2 { background-color: transparent; position: absolute; top: 30%; left: 25%; font-size: 30px;}.three h3 { background-color: transparent; position: absolute; top: 40%; left: 45%; font-size: 30px;}</style></head> ...

<!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 { width: 200px; height: 200px; border: 1px solid pink; margin: 10px; float: left; overflow: hidden;}div::after { content: '黑马'; display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: hotpink; transform: rotate(90deg); transform-origin: left bottom; transition: all .7s;}/* 鼠标通过div 外面的before还原 */div:hover::after { transform: rotate(0);}</style></head> <body> <div></div> <div></div> <div></div> <div></div></body> </html>

1.开发环境 vue2.电脑系统 windows11专业版3.在开发的过程中,咱们会遇到ios的一些兼容性的问题,上面我来分享一下position: fixed;在ios中的兼容性问题。4.废话不多说,间接上代码: //解决思路:给元素设置position: fixed;父元素增加position: absolute;最外层的元素要设置position: relative;// position: fixed; 元素.g-index-hjqweb { width: 100%; height: 48px; background-color: #b8d9d9; z-index: 10; position: fixed; //position: absolute; top: 0; overflow:scroll;}// position: fixed; 父元素.g-index-wrap { width: 100%; //height: 100%; min-height: 100vh; //overflow-x: hidden; overflow: hidden;//要害代码 box-sizing: border-box; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; position: absolute; top: 0; height: 670px;//留神:如果子元素都脱离了文档流,没有高度撑开父元素,须要增加高度,不然可能会有兼容性问题}5.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

.sk_bd ul li { width: 290px; height: 460px; / background-color: pink; / float: left; margin-right: 13px; / 重点：防图片抖动(事后增加通明色边框) / border: 1px solid transparent; overflow: hidden;}.sk_bd ul li:hover { border: 1px solid #c81523;}

.main .newsFlash .news .content ul li{ height: 24px; line-height: 24px; / 超出局部显示省略号 / / 暗藏超出局部 / overflow: hidden; / 强制单行显示 / white-space:nowrap; / 文字超出局部显示省略号 / text-overflow: ellipsis;}

重要属性写在后面：上午始终在温习编译原理，还有两天考试了，明天又捡回了好多知识点，LR(1)的瞻望符的求法、好几个易错的判断题等，下午还要接着看属性文法，和第一章的概念，概念了解就容易记住了，Continuing pursue。 盒子模型（Box Model）是将CSS设置款式的区域形象为一个个盒子，一个套着一个，这些盒子就是一个个矩形区域，通过扭转这些区域的款式，从而达到想要的成果。 属性阐明Margin(外边距)革除边框外的区域，外边距是通明的。Border(边框)围绕在内边距和内容外的边框。Padding(内边距)革除内容四周的区域，内边距是通明的。Content(内容)盒子的内容，显示文本和图像。应用示例： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>盒子模型演示</title> <style> div { background-color:cadetblue; width: 200px; border: 10px solid lightblue; padding: 25px; margin: 50px; } </style></head><body> <p>CSS盒模型实质上是几个封装四周的HTML元素，它包含：边距，边框，填充，和理论内容。</p> <div>这里是盒子内的理论内容。能够计算出这个盒子的总大小是：200+2*10+2*25+2*50=370</div></body></html>实现成果：阐明：1、Content区域是必备的，其余三个都是可选的，它有三个属性：width、height、overflow。当内容的区域装不下的时候设置overflow属性来指定溢出局部解决的形式。2、Margin、Padding都有-top, -bottom, -left, -right四个方向的属性，能够别离设置间隔，都能够应用像border一样的简写形式。3、border就是和我之前的博客写的border是一样的，有-width, -style, -color三个属性。大家学习完之后肯定要保持敲完代码，不要间接复制粘贴。

超链接伪类上面有四种状态的链接： 伪类阐明a:link定义a元素未拜访时的款式a:visited定义a元素拜访后的款式a:hover定义鼠标通过a元素时的款式a:active定义鼠标点击激活时的款式在应用这四个伪类时，肯定要依照“link、visited、hover、active”的程序进行，不然可能无奈失常显示这4种款式。个别咱们记住一个就够了：a:hover。a:link间接在a标签中批改款式就行了。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>超链接伪类</title> <style type="text/css"> a{color: red;text-decoration: none;} a:hover{color:cadetblue;text-decoration: underline;} </style></head><body> <a href="https://www.baidu.com">百度首页</a></body></html>显示成果： hover的深刻应用hover不仅能够应用在标签中 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>超链接伪类</title> <style type="text/css"> /* a{color: red;text-decoration: none;} */ /* a:hover{color:cadetblue;text-decoration: underline;} */ img{width: 350px;height:150px;} img:hover{border:aqua solid 10px; } </style></head><body> <!-- <a href="https://www.baidu.com">百度首页</a> --> <img src="./HTML.png" alt="html"></body></html>显示成果：鼠标没有通过时：鼠标通过时：

边框款式（border）上午温习了编译原理和概率论，工夫一下子就过来了，感觉也没做什么，所以要更加抓紧时间，六级逼近，这次肯定要管制好工夫。记住蕴含三个属性： 1、border-width 边框的宽度，单位是px2、border-style 边框的外观，有none、solid（实线）、dashed（虚线）等。3、border-color 边框的色彩，须要同时设置三个， <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>边框border</title> <style type="text/css"> div{border: 2px solid red; width: 500px;height:50px;} #C{border-width: 10px; border-style: solid; border-color:blanchedalmond;} img{border: 2px dashed black;} </style> </head> <body> <div id="A">这里是第一局部</div> <div id="B">这里是第二局部</div> <div id="C">这里是第三局部</div> <img src="./HTML.png" alt="HTML"> </body></html>显示成果：阐明：在下面有两种写法，其实是等价的，也就是说 border: 2px solid red;与 border-width: 10px; border-style: solid; border-color:blanchedalmond;等价。还有别忘了图片也能够有边框；最初一个是：border-top, border-left, border-right, border-bottom, 都能够别离设置款式。 表格款式（list-style-type）表格款式list-style-type是针对ol、ul元素的，而不是对于li元素， <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>列表款式list</title> <style type="text/css"> ol,ul{list-style: decimal;} #A{list-style: none;} </style> </head> <body> <ol> <li>C++</li> <li>Python</li> <li>Java</li> </ol> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Oracle</li> </ul> <ul id="A"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Oracle</li> </ul> </body></html>显示成果：阐明：感觉带上属性比拟丑的时候能够应用none属性，将他们去除。其实list还能够利用list-style-image属性来将后面的序号改为难看的图片模式。语法： ...

文本text属性写在后面：上午我在做计组试验就没有去写博客，当初连忙补上，还有五门期末考试要温习，加油。 留神辨别text和font，text是是对文本的整体构造排版的调整，而font的对文字自身的一个成果。 属性阐明text-indent首行缩进text-align程度对齐text-decoration文本润饰text-transform大小写转换line-height行高letter-spacing字母间距word-spacing词间距加深了解：1、text-indent indent就是缩进的意思，之前咱们缩进的时候应用的是&nbsp；而且如果是文字的话，段落首行要应用6个&nbsp；如果应用这个的话，咱们就更加不便了。这里的距离单位咱们能够应用px（pxcel像素）来示意。如果是首段空两个文字就是font-size的两倍2、text-align align是对齐的意思。个别会应用center属性就够了3、text-decoration decoration是润饰的意思。有两个罕用属性，none，line-through，后面一个是默认的，它最常常用于链接款式的批改，因为标签中的链接会默认有下滑线。而后者中划线罕用于商品价格的变动。4、text-transfrom transform是转换的意思。能够将英文字符转变大小写。5、line-height 管制一行文字的段落，单位也能够用px，这个在CSS的进阶教程中有十分具体的介绍(我还没有学习到)，这里只是一个非常简单的理解。最终示例： <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS font Style</title> <style type="text/css"> p{ /* font-family: "宋体"; */ font-weight: 400; /* font-size:14px; */ text-indent:32px;/*要记得默认字体像素大小是16px;*/ } #A{text-align: left;} #B{text-align: center;} #C{text-align: right;} #D{text-decoration: underline;} #E{text-decoration: line-through;} a{text-decoration: none;} #F{text-transform: lowercase;} #G{text-transform: uppercase;} #H{text-transform: capitalize;} #I{line-height: 15px;} #J{line-height: 20px;} #K{line-height: 25px;} </style> </head> <body> <h1>阿Q正传</h1> <div id="A"><strong>鲁迅</strong></div> <div id="B">鲁迅</div> <div id="C">鲁迅</div> <p id="D">《阿Q正传》</p> <p id="E">是鲁迅创作的中篇小说</p> <p>阿Ｑ要画圆圈了，那手捏着笔却只是抖。于是那人替他将纸铺在地上，阿Ｑ伏下去，使尽了平生的力量画圆圈。 他惟恐被人笑话，立志要画得圆，但这可恶的笔岂但很惨重，并且不听话，刚刚一抖一抖的简直要合缝， 却又向外一耸，画成瓜子模样了。 阿Ｑ正惭愧本人画得不圆，那人却不计较，早已掣了纸笔去，许多人又将他第二次抓进栅栏门。 </p> <a href="https://segmentfault.com/u/y_luoe_hai_61a734cbf3c94/articles" >欢送拜访我的思否主页</a> <div id="F">Love the life you live, live the life you love.</div> <div id="G">Love the life you live, live the life you love.</div> <div id="H">Love the life you live, live the life you love.</div> <div id="I">阿Ｑ要画圆圈了，那手捏着笔却只是抖。于是那人替他将纸铺在地上，阿Ｑ伏下去，使尽了平生的力量画圆圈。 他惟恐被人笑话，立志要画得圆，但这可恶的笔岂但很惨重，并且不听话，刚刚一抖一抖的简直要合缝， 却又向外一耸，画成瓜子模样了。 阿Ｑ正惭愧本人画得不圆，那人却不计较，早已掣了纸笔去，许多人又将他第二次抓进栅栏门。 </div> <hr> <div id="J">阿Ｑ要画圆圈了，那手捏着笔却只是抖。于是那人替他将纸铺在地上，阿Ｑ伏下去，使尽了平生的力量画圆圈。 他惟恐被人笑话，立志要画得圆，但这可恶的笔岂但很惨重，并且不听话，刚刚一抖一抖的简直要合缝， 却又向外一耸，画成瓜子模样了。 阿Ｑ正惭愧本人画得不圆，那人却不计较，早已掣了纸笔去，许多人又将他第二次抓进栅栏门。 </div> <hr> <div id="K">阿Ｑ要画圆圈了，那手捏着笔却只是抖。于是那人替他将纸铺在地上，阿Ｑ伏下去，使尽了平生的力量画圆圈。 他惟恐被人笑话，立志要画得圆，但这可恶的笔岂但很惨重，并且不听话，刚刚一抖一抖的简直要合缝， 却又向外一耸，画成瓜子模样了。 阿Ｑ正惭愧本人画得不圆，那人却不计较，早已掣了纸笔去，许多人又将他第二次抓进栅栏门。 </div> <br> </body></html>效果图： ...

font今天上午温习了编译原理还有概率论就到中午了，吃完饭持续学习CSS，看看几天能够学完根底。加油 属性阐明font-family字体类型font-size字体大小font-weight字体粗细font-style字体格调color字体色彩1、font-family <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS font Style</title> <style type="text/css"> #f1{font-family: Arial, Helvetica, sans-serif;} #f2{font-family: "Times New Roman";} #f3{font-family: "微软雅黑";} </style> </head> <body> <div id="f1">font 1</div> <div id="f2">font 2</div> <div id="f3">font 3</div> </body></html>显示成果：阐明：这一行#f1{font-family: Arial, Helvetica, sans-serif;}代码示意f1局部优先应用Arial字体，如果电脑中没有装置该字体，则应用前面的，以此类推，如果都没有装置的话，默认显示宋体。2、font-size <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS font Style</title> <style type="text/css"> #f1{font-family: Arial, Helvetica, sans-serif; font-size: 3em;} #f2{font-family: "Times New Roman"; font-size:xx-small;} #f3{font-family: "微软雅黑";font-size: 80%;} #f4{font-family: "楷体";font-size: 32px;} </style> </head> <body> <div id="f1">字体font 1</div> <div id="f2">字体font 2</div> <div id="f3">字体font 3</div> <div id="f4">字体font 4</div> </body></html>显示成果：px是pixel（像素），默认大小是16px，em = 心愿失去的像素大小 / 父元素字体像素大小（这里就相当于16*3px=48px）%是绝对于原来字体大小的百分比3、font-weight ...

<!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>CSS三角制作</title><style> .box1 { /* float: left; */ width: 0; height: 0; /* border: 10px solid pink; */ border-top: 10px solid red; border-right: 10px solid pink; border-bottom: 10px solid yellow; border-left: 10px solid black; } .box2 { /* float: left; */ margin: 100px auto; width: 0; height: 0; border: 100px solid transparent; border-left: 100px solid pink; } /* 京东的小三角成果 */ .jd { position: relative; width: 120px; height: 249px; background-color: pink; } .jd span { position: absolute; right: 10px; top: -10px; width: 0; height: 0; line-height: 0; font-size: 0; border: 5px solid transparent; border-bottom: 5px solid pink; } .xiaomi { position: relative; margin: 100px auto; width: 100px; height: 200px; background-color: pink; } .xiaomi span { position: absolute; top: 10px; right: -10px; width: 0; height: 0; line-height: 0; font-size: 0; border: 5px solid transparent; border-left: 5px solid pink; }</style></head> <body> ...

在日常的开发中，通过应用css属性，做一些动效、动画时，会发现在页面有卡顿；在Android低端机尤为显著，故须要晓得浏览器渲染以及优化伎俩浏览器渲染流程 构建 DOM 树：浏览器将 HTML 解析成树形构造的 DOM 树，一般来说，这个过程产生在页面首次加载，或页面 JavaScript 批改了节点构造的时候。构建渲染树：浏览器将 CSS 解析成树形构造的 CSSOM 树，再和 DOM 树合并成渲染树。布局（Layout）：浏览器依据渲染树所体现的节点、各个节点的CSS定义以及它们的从属关系，计算出每个节点在屏幕中的地位。Web 页面中元素的布局是绝对的，在页面元素地位、大小发生变化，往往会导致其余节点联动，须要从新计算布局，这时候的布局过程个别被称为回流/重排（Reflow）。绘制（Paint）：遍历渲染树，调用渲染器的 paint() 办法在屏幕上绘制出节点内容，实质上是一个像素填充的过程。这个过程也呈现于回流或一些不影响布局的 CSS 批改引起的屏幕部分重画，这时候它被称为重绘（Repaint）。实际上，绘制过程是在多个层上实现的，这些层咱们称为渲染层（RenderLayer）。渲染层合成（Composite）：多个绘制后的渲染层依照失当的重叠程序进行合并，而后生成位图，最终通过显卡展现到屏幕上。以上是浏览器渲染的根本步骤，简述： DOM tree + CSS tree == Render tree ==> Layout tree ==> PaintLayer => Composite PaintLayer => Composite 只有页面上元素有扭转，都会反复渲染以上局部步骤，在一帧内实现（16.77ms）;通过设置css 款式 ，做动画，在一帧内无奈渲染完，甚至来不及渲染，就会卡顿；其中局部渲染卡顿，跟渲染层合成（Composite）有关系。 Composite什么是渲染层合成在 DOM 树中每个节点都会对应一个渲染对象（RenderObject），当它们的渲染对象处于雷同的坐标空间（z 轴空间）时，就会造成一个 RenderLayers，也就是渲染层。渲染层将保障页面元素以正确的程序重叠，这时候就会呈现层合成（composite），从而正确处理通明元素和重叠元素的显示，这步叫做“层叠上下文”这个模型相似于 Photoshop 的图层模型，在 Photoshop 中，每个设计元素都是一个独立的图层，多个图层以失当的程序在 z 轴空间上叠加，最终形成一个残缺的设计图。对于有地位重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并程序出错，将会导致元素显示异样。 渲染对象（RenderObject）一个 DOM 节点对应了一个渲染对象，渲染对象仍然维持着 DOM 树的树形构造。 渲染层（RenderLayer）这是浏览器渲染期间构建的第一个层模型，处于雷同坐标空间（z轴空间）的渲染对象，都将归并到同一个渲染层中，因而依据层叠上下文，不同坐标空间的的渲染对象将造成多个渲染层，以体现它们的层叠关系。因而满足造成层叠上下文条件的 RenderObject 肯定会为其创立新的渲染层，当然还有其余的一些非凡状况，为一些非凡的 RenderObject 创立一个新的渲染层，比方 overflow != visible 的元素。依据创立 RenderLayer 的起因不同，能够将其分为常见的 3 类： ...

CSS简介在昨天我学完HTML根本语法之后，我明天筹备减速学习CSS，加油！！！CSS指的是Cascading Style Sheet（层叠样式表），是用来管制网页外观的一项技术。首先咱们得晓得，HTML是用于管制网页的构造，而CSS用于管制网页的外观，JavaScript管制的是网页的行为。 CSS款式的引入形式有三种形式： （1）内部样式表 （2）外部样式表 （3）行内样式表(1)内部样式表语法： <link rel="stylesheet" type="text/css" href="文件门路" />在这里：rel、type、href都是固定的值。(2)外部样式表 <style type="text/css"> …………</style>将style标签放在head标签外面(3)行内样式表语法： <div style="color:red;">放松温习</div>在理论开发中，个别都是应用内部样式表。还有设置款式时留神他的id和class，通过这两个属性能够精准管制每个局部的款式，id不能雷同，class能够雷同。 CSS选择器选择器就是为了抉择你想要批改款式的中央的工具，相当于一个定位工具，精准定位。有五种最实用的选择器：（1）元素选择器（2）id选择器（3）class选择器（4）后辈选择器（5）群组选择器 （1）元素选择器抉择不同的标签，来批改款式，如div、p、h1等示例： <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS选择器练习</title> <style type="text/css"> p{ color: red; } </style> </head> <body> <p>元素选择器</p> <hr> <div> <p>这是一个段落</p> <h4>这是一个大题目</h4> <div>最初一行</div> </div> <p>元素选择器</p> <hr> <p>元素选择器</p> <hr> <p>元素选择器</p> <hr> <p>元素选择器</p> <hr> </body></html>显示成果：（2）id选择器通过标签的属性的id来抉择，id名后面加上"#"来批改款式。示例： <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS选择器练习</title> <style type="text/css"> #abc { color: red; } </style> </head> <body> <p>元素选择器</p> <hr> <div> <p>这是一个段落</p> <h4>这是一个大题目</h4> <div>最初一行</div> </div> <p id="abc">元素选择器</p> <hr> <p>元素选择器</p> <hr> <p>元素选择器</p> <hr> <p>元素选择器</p> <hr> </body></html>显示成果：（3）class选择器通过标签的属性的class来抉择，class名后面加上"."来批改款式。示例： ...

<!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> * { margin: 0; padding: 0; } .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 100px auto; } .tudou > img { width: 100%; height: 100%; } .tudou .mask { /* 暗藏遮罩层 */ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4) url(./images/arr.png) no-repeat center center; } /* 当咱们鼠标通过了 土豆这个盒子，就让外面的遮罩层显示进去 */ .tudou:hover .mask { /* 显示元素 */ display: block; }</style></head> <body> ...

/** initialize css counter */#write { counter-reset: h1}h1 { counter-reset: h2}h2 { counter-reset: h3}h3 { counter-reset: h4}h4 { counter-reset: h5}h5 { counter-reset: h6}/** put counter result into headings */#write h1:before { counter-increment: h1; content: counter(h1) ". "}#write h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". "}#write h3:before,h3.md-focus.md-heading:before /** override the default style for focused headings */ { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}#write h4:before,h4.md-focus.md-heading:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}#write h5:before,h5.md-focus.md-heading:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}#write h6:before,h6.md-focus.md-heading:before { counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}/** override the default style for focused headings */#write>h3.md-focus:before,#write>h4.md-focus:before,#write>h5.md-focus:before,#write>h6.md-focus:before,h3.md-focus:before,h4.md-focus:before,h5.md-focus:before,h6.md-focus:before { color: inherit; border: inherit; border-radius: inherit; position: inherit; left:initial; float: none; top:initial; font-size: inherit; padding-left: inherit; padding-right: inherit; vertical-align: inherit; font-weight: inherit; line-height: inherit;}/* 侧边栏 */.sidebar-content { counter-reset: h1} .outline-h1 { counter-reset: h2} .outline-h2 { counter-reset: h3} .outline-h3 { counter-reset: h4} .outline-h4 { counter-reset: h5} .outline-h5 { counter-reset: h6} .outline-h1>.outline-item>.outline-label:before { counter-increment: h1; content: counter(h1) ". "} .outline-h2>.outline-item>.outline-label:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". "} .outline-h3>.outline-item>.outline-label:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "} .outline-h4>.outline-item>.outline-label:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "} .outline-h5>.outline-item>.outline-label:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "} .outline-h6>.outline-item>.outline-label:before { counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}

apipost 如何设置 mock 变量，多个接口同时调用这个变量，如何保障调用的变量值是雷同的？这里咱们应用的 mock 变量不能是 apipost 内置的 mock 字段，能够在登录接口的预执行脚本本人编写一个 mock 变量，apipost 的脚本编写反对 js 语法。在登录的与执行脚本中编写一个自定义 mock 变量，在应用环境变量获取自定义 mock 变量，const phonePrefix = ['132', '135', '189']const index = Math.floor(Math.random() * phonePrefix.length)var phone = phonePrefix[index] + Mock.mock(/\d{8}/)apt.variables.set("phone", phone);调用 mock 变量 phone发送申请，查看发送的参数和参数值在到查问接口调用 phone 这个 mock 变量，发送申请查看响应查问响应的值和登录的响应值统一。 Apipost官网链接：https://console.apipost.cn/re...

CSS暗影成果三剑客：box-shadow、text-shadow、drop-shadow 想要盒子的轮廓产生暗影成果，应用box-shadow想要文本的轮廓产生暗影成果，应用text-shadow想要PNG图片非通明局部的轮廓产生暗影成果，应用fliter: drop-shadow() 当然，如果想要根据元素自身色彩产生映射的暗影色彩，可应用fliter的blur()、brightness()、opacity()三者搭配调色产生暗影成果

大家好，我是半夏，一个刚刚开始写文的沙雕程序员.如果喜爱我的文章，能够关注➕ 点赞 加我微信：frontendpicker，一起学习交换前端，成为更优良的工程师～关注公众号：搞前端的半夏,理解更多前端常识! 点我摸索新世界！ 原文链接 ==>http://sylblog.xin/archives/70 前言在敲打本人的集体博客时，在博客的详情页，对于不同的内容，我是想有不同的复制形式的。例如代码块我就想读者单击就能够复制，这样不便读者本地调试，而对于文字描述局部，心愿能够不容许读者复制。作为一个动摇的能用CSS绝不上JS的极其份子，我最终找到了CSS3中的user-select。 兼容性 user-select用来管制用户是否能够选中文本。全选，局部选中。 全选在很多时候用户心愿的可能是一次性复制残缺的内容，例如一段代码，明码，一些key。 user-select:all : 让用户能够单击选中元素。 这里咱们演示了三个不同的Html标签下的成果。 h2 { user-select: all; } code { user-select: all; width: 500px; display: block; padding: 10px; color: #31808c; background-color: #f5f4ef; } div { user-select: all; } <h2>点击试试看</h2> <pre> <code> const num = 1; const result = (function () { delete num; return num; })(); console.log(result); </code> </pre> <p> const num = 1; const result = (function () { delete num; return num; })(); console.log(result); </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>革除浮动之双伪元素法</title><style> .box { width: 800px; border: 1px solid blue; margin: 0 auto; background-color: gray; } /* 革除浮动 */ .clear:before,.clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .damao { width: 300px; height: 200px; background-color: purple; float: left; } .ermao { width: 200px; height: 200px; background-color: pink; float: left; } .footer { height: 200px; background-color: black; }</style></head> <body> ...

<!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>革除浮动之after伪元素法</title><style> .box { width: 800px; border: 1px solid blue; margin: 0 auto; background-color: gray; } /* 革除浮动 */ .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; } .damao { width: 300px; height: 200px; background-color: purple; float: left; } .ermao { width: 200px; height: 200px; background-color: pink; float: left; } .footer { height: 200px; background-color: black; }</style></head> <body> ...

<!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>革除浮动之overflow</title> <style> .box { width: 800px; border: 1px solid blue; margin: 0 auto; background-color: gray; /* 革除浮动 */ overflow: hidden;}.damao { width: 300px; height: 200px; background-color: purple; float: left;}.ermao { width: 200px; height: 200px; background-color: pink; float: left;}.footer { height: 200px; background-color: black;}</style></head><body> <div class="box"> <div class="damao">大毛</div><div class="ermao">二毛</div><div class="ermao">二毛</div><div class="ermao">二毛</div><div class="ermao">二毛</div><div class="ermao">二毛</div></div> <div class="footer"></div></body></html>

@media only screen and (max-width: 750px) {}@media only screen and (min-width: 750px) and (max-width: 1024px) {}@media only screen and (min-width: 1024) {}

flex-grow、flex-shrink、flex-basis三个属性的作用： 在flex布局中，父元素在不同宽度下，子元素是如何调配父元素空间的。 (留神：这三个属性都是在子元素上设置的，上面小编要讲的是父元素，指以flex布局的元素(display:flex)) 小编这里先教一下大家如何疾速记住这三个属性： 首先是 flex-basis ，basis英文意思是<次要成分>，所以他和width放在一起时,必定把width干掉，basis遇到width时就会说我才是最次要的成分，你是主要成分，所以见到我的时候你要靠边站。 其次是 flex-grow，grow英文意思是<扩充，扩大，减少>,这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有残余，这时，flex-grow就会说我要成长，我要长大，怎么样能力成长呢，当然是分享父元素的空间了。见上面第二个属性的内容 最初是 flex-shrink， shrink英文意思是<膨胀，>，这就代表当父元素的宽度小于子元素宽度之和时，并且超出了父元素的宽度，这时，flex-shrink就会说里面的世界太苦了，我还是回到父亲的怀抱中去吧！因而，flex-shrink就会依照肯定的比例进行膨胀。见上面第三个属性的内容 第一个属性：flex-basis 该属性用来设置元素的宽度，其实，width也能够设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis笼罩掉。 <style type="text/css" media="screen"> .box{ display: flex; margin:100px auto; width:400px; height:200px; } .inner{ width:200px; height:100px; flex-basis:300px; background:pink; }</style></head><body><div class="box"> <div class="inner"></div></div></body>见下图：小编我把宽度设置为width:200px; flex-basis:300px;结果显示表明子元素.inner利用了属性flex-basis; 第二个属性：flex-grow 该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有残余空间），子元素如何调配父元素的残余空间。 flex-grow的默认值为0，意思是该元素不索取父元素的残余空间，如果值大于0，示意索取。值越大，索取的越厉害。 举个例子: 父元素宽400px，有两个子元素：A和B。A宽为100px，B宽为200px。 则空余空间为 400-（100+200）= 100px。 如果A，B都不索取残余空间，则有100px的空余空间。 <body><div class="box"> <div class="inner"></div><div class="inner1"></div></div></body>.box{ display: flex; flex-direction: row; margin:100px auto; width:400px; height:200px; border:1px solid red; } .inner{ flex-basis:100px; height:100px; background:pink; } .inner1{ flex-basis:200px; height:100px; background:blue; }见下图： 如果A索取残余空间:设置flex-grow为1，B不索取。则最终A的大小为 本身宽度（100px）+ 残余空间的宽度（100px）= 200px 。 ...

不晓得大家有没有碰到这样的问题：很多时候一个我的项目会存在多个环境，当浏览器标签页比拟多的时候就齐全分不清了 其实这里是有3个开发环境的 然而独自从 favicon 是没法疾速辨别哪个跟哪个的，为此，我做了一个 Chrome 插件能够很不便的解决这个问题，成果如下 是不是十分清晰呢？ 装置和应用在 Chrome 网上商店 间接搜寻 "auto dev favicon"，或者间接拜访这个链接 https://chrome.google.com/webstore/detail/auto-dev-favicon/obgfnmomampmgjefiodpcknepcecgijg，如下 胜利装置后，须要进入到配置页，也就是能够自定义匹配域名的页面，有 3 个入口 间接点击右上角插件图标（举荐）右键右上角插件图标，点击“选项”进入插件详情页，点击“扩大程序选项” 上面就是一个简略的配置页面 这里简略阐明一下 色彩是指小标签的背景色，这里预置了 8 种颜色可供选择名称是指小标签的文本内容，因为宽度无限，最多反对两个中文字符或3个英文字符匹配是指域名匹配，这里仅匹配 hostname，匹配规定是“模式匹配”，用英文逗号分隔能够填写多个，比方这里的dev*示意匹配所有以dev结尾的域名，具体规定可参考 URL_Pattern_API操作实现之后记得点击一下保留，会主动同步到 Chrome 账号其余阐明如果因为网络环境暂不可拜访利用商店，能够在 github 获取源文件，通过开发者模式装置即可 https://github.com/XboxYan/auto-dev-favicon-chrome-plugin或者装置 Edge 外接程序 Microsoft Edge Addons，益处是对网络条件比拟敌对 有任何问题或者意见能够提 issue 或者与我分割：yanwenbin1991@live.com Enjoy!

本文将专一于应用 CSS text-shadow 属性来实现乏味的鼠标悬停成果，然而实际上并不会为这些文本制作任何文本暗影成果。 text-shadow 没有文字暗影？通过以下的gif图中的鼠标悬停成果，置信你能了解应用 text-shadow 却为什么没有暗影。 看到此图你的第一感觉是不是复制了一份文本，比方创立伪元素，设置 content: 'text'，而后为其设置独自的动画。然而本文齐全应用text-shadow 实现，接下来将为大家开展阐明四种悬停动画的实现形式。 text-shadow 语法text-shadow为文字增加暗影，能够为文字增加多个暗影，增加多个时暗影值之间用逗号隔开。每个暗影值由元素在X和Y方向的偏移量、含糊半径和色彩值组成。 text-shadow: h-shadow v-shadow blur color;参数形容h-shadow必须。程度暗影的地位。容许负值。v-shadow必须。垂直暗影的地位。容许负值。blur可选。含糊的间隔。color可选。暗影的色彩。悬停成果#1 CSS代码如下，咱们将文本理论的色彩设置通明（color: #0000）；而后通过text-shadow创立两个暗影，可选参数blur不设置，这样咱们就失去了一份清晰的暗影，通过设置不同的色彩和垂直的数值即可产生炫酷的成果。 .hover-1 { line-height: 1.2em; color: #0000; text-shadow: 0 0 #000, 0 1.2em #1095c1; overflow: hidden; transition: .3s;}.hover-1:hover { text-shadow: 0 -1.2em #000, 0 0 #1095c1;}如下图所示，红色虚线区域是咱们页面可视区。通过设置overflow: hidden，反复的文本也就看不见了，在悬停过程中减少transition过渡工夫，看起来就像是两个文本在交替显示，这就是本文示例中的次要技巧。 接下来能够持续优化咱们的CSS代码，如下面代码所示，咱们屡次应用了1.2em来定义了暗影的高度及挪动的偏移量，通过CSS var() 自定义属性值优化后的代码如下： .hover-1 { --h: 1.2em; line-height: var(--h); color: #0000; text-shadow: 0 0 #000, 0 var(--h) #1095c1; overflow: hidden; transition: .3s;}.hover-1:hover { text-shadow: 0 calc(-1 * var(--h)) #000, 0 0 #1095c1;}这样还是不够简洁，还能够通过calc()持续优化： ...

做挪动端页面有一段时间了，总结下工作中罕用的几种挪动端适配计划。 根底网上曾经有十分多的基础知识总结，不再赘诉，详情能够见 《对于挪动端适配，你必须要晓得的》 《不要再问我挪动适配的问题了》 其中容易搞混的概念是视口 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">meta标签中的viewport属性，就是视图的含意 视口分为 布局视口视觉视口现实视口布局视口也就是<meta name="viewport" content="width=device-width">中width属性的含意 咱们在css中写的所有款式，就是绝对于布局视口进行布局的 默认状况下，挪动端的布局视口并不是屏幕宽度，而是个别在768px ~ 1024px间(大部分状况下980px) 能够通过document.documentElement.clientWidth获取 (依据width和initial-scale来确定) 视觉视口视觉视口是指用户通过设施屏幕看到的区域，默认等于以后浏览器的窗口大小(当initial-scale为1) 当用户对浏览器进行缩放时，不会扭转布局视口的大小，所以页面布局是不变的，然而缩放会扭转觉视口的大小 能够通过window.innerWidth获取 (会随着缩放进行扭转) 放大页面，此时window.innerWidth反而减小 (页面放大，你看到的货色也变少了) 现实视口现实视口是指网站在挪动设施中的现实大小，这个大小就是设施的屏幕大小 也就是<meta name="viewport" content="width=device-width">中device-width的含意 能够通过screen.width获取 (常量，不会扭转) initial-scale<meta name="viewport" content="width=device-width, initial-scale=0.5"> 依据公式initial-scale = 现实视口宽度 / 视觉视口宽度 假如现实视口宽度为414px(device-width)，此时设置initial-scale为0.5，那么视觉视口宽度就是414 / 0.5 = 818 如果这时你获取document.documentElement.clientWidth(布局视口)的值，会发现不是414px而是818px 论断: 布局视口宽度取的是width和视觉视口宽度的最大值 思考题: <meta name="viewport" content="width=600, initial-scale=2"> 假如现实视口宽度为414px(device-width)，此时document.documentElement.clientWidth(布局视口)的值是多少? 视觉视口 = 414 / 2 = 207布局视口 = Math.max(207, 600)布局视口 = 600总结document.documentElement.clientWidth: 布局视口，css中个别写成width=device-widthwindow.innerWidth: 视觉视口，页面缩放都会实时扭转该值screen.width: 现实视口，页面屏幕大小(设施独立像素)，也就是css中的device-width常见适配计划简略一句话概括：挪动端适配就是在进行屏幕宽度的等比例缩放： 平时咱们开发中，拿到的挪动端设计稿个别是750 * 1334 尺寸大小（ iPhone6 的设施像素为规范的设计图）。那如果在750px设计稿上量出的元素宽度为100px，那么在375px宽度的屏幕下，这个元素宽度就应该等比例缩放成50px。 所以适配的难点是：如果实现页面的等比例缩放？ Rem 计划该计划的外围就是：所有须要动静布局的元素，不再应用px固定尺寸，而是采纳rem绝对尺寸 rem的大小是绝对于根元素html的字体大小：如果html的font-size为100px，那么1rem就等于100px 当初咱们假设: ...

CSS (英文全称：Cascading Style Sheets)是一种用来体现 HTML（规范通用标记语言的一个利用）或 XML（规范通用标记语言的一个子集）等文件款式的计算机语言。CSS 不仅能够动态地润饰网页，还能够配合各种脚本语言动静地对网页各元素进行格式化。 小编整顿了思否社区对于 CSS 的优质技术文章，欢送大家浏览 ~~ CSS 个性《2022 年最受注目的新个性 CSS @layer 到底是个啥？》 步入 2022，CSS 的新个性层出不穷，而最近在 CSS 圈最受注目的新个性，非 CSS @layer 莫属。本文将用最简洁的语言，疾速让读者们搞懂，到底什么是 CSS @layer 新标准。《革命性翻新，动画杀手锏 @scroll-timeline》 在 CSS 标准 Scroll-linked Animations 中，推出了一个划时代的性能。也就是 -- The @scroll-timeline at-rule，直译过去就是滚动工夫线。本文将带大家一探到底，从入门到学会应用 CSS @scroll-timeline。《说一说 CSS 中的变量》 大部分的编程语言，在语言呈现的那一刻就反对变量。然而，CSS 一开始就不反对原生变量。所以大家开始抉择 CSS，LESS 等兼容的 CSS 扩大语言。不过庆幸的是 CSS 目前也曾经反对变量，下文就来聊一聊 CSS 中的变量。《CSS 中的简写到底有多少坑？当前不敢了...》 简写（语法糖）可能给咱们的编码带来了很多便当，但凡事都有好有坏，简写也会带来一些问题，所以明天就来讨论一下 CSS 中的简写的 "好" 和 "坏"。《CSS 自定义属性指北》 自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它蕴含的值能够在整个文档中重复使用。由自定义属性标记设定值（比方： --main-color: black;），由var() 函数来获取值（比方： color: var(--main-color);）《CSS 也能主动补全字符串？》 很多时候都会碰到字符串补全的需要，典型的例子就工夫或者日期中的补零操作，例如 ...

欢送关注微信公众号： 前端侦探最近在我的项目中碰到了一个这样的树状构造目录，成果如下 如果用到了 Ant Design 这样的框架，那能够间接用现成的组件。如果没有用到这样的框架呢？其实纯 CSS 也是能够搞定的，上面看看如何实现的，还有很多你可能不晓得 CSS 小技巧哦~ 一、details 和 summary首先，实现这样一个交互须要利用到 details 和 summary，人造地反对内容开展和收起。这里有一个 MDN 的例子 <details> <summary>System Requirements</summary> <p>Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.</p></details>成果如下 还能够反对多层嵌套，比方 <details> <summary> <span class="tree-item">我的项目1</span> </summary> <details> <summary> <span class="tree-item">文件夹0</span> </summary> </details> <details> <summary> <span class="tree-item">文件夹1-1</span> </summary> <details> <summary> <span class="tree-item">文件夹1-1-2</span> </summary> </details> <details> <summary> <span class="tree-item">文件夹1-1-3</span> </summary> <details> <summary> <span class="tree-item">文件夹1-1-3-1</span> </summary> </details> <details> <summary> <span class="tree-item">文件夹1-1-3-2</span> </summary> </details> </details> <details> <summary> <span class="tree-item">文件夹1-1-4</span> </summary> </details> </details> <details> <summary> <span class="tree-item">文件夹1-2</span> </summary> <details> <summary> <span class="tree-item">文件夹1-2-1</span> </summary> </details> </details> <details> <summary> <span class="tree-item">文件夹1-3</span> </summary> </details> <details> <summary> <span class="tree-item">文件夹1-4</span> </summary> </details></details>成果如下 ...

https://www.jianshu.com/p/91c... 个别写法全边框 @mixin border_1px($color: #dfe0e1 ) { position: relative; &::after { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid $color; border-radius: 4px; transform: scale(0.5); transform-origin: 0 0; }}不同地位分析判断 默认全边框 $color: #bfbece;position: relative;@if $type == default { &::after { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid $color; transform: scale(0.5); transform-origin: 0 0; }} @else if $type == top { &::before { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 200%; height: 1px; background: $color; transform: scale(0.5); transform-origin: 0 0; }} @else if $type == bottom { &::after { content: ""; box-sizing: border-box; position: absolute; bottom: 0; left: 0; width: 200%; height: 1px; background: $color; transform: scale(0.5); transform-origin: 0 0; }} @else if $type == left { &::before { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 1px; height: 200%; background: $color; transform: scale(0.5); transform-origin: 0 0; }} @else if $type == right { &::before { content: ""; box-sizing: border-box; position: absolute; top: 0; right: 0; width: 1px; height: 200%; background: $color; transform: scale(0.5); transform-origin: 0 0; }}全功能混合封装 ...

以后页面无法访问，可能没有权限或已删除。 作为一个从事互联网行业的你是不是见过各种各种的404页面，明天刚好发现一个比拟乏味的404页面，如上图所示，是不是感觉挺炫酷呢，本文将和大家分享一下实现原理。 前言看到下面的404你的第一感觉会是这么做呢？ 来，UI同学给我上GIF。当然这种形式对于前端同学来说必定是最简略的实现形式，单纯的加载一张图片即可。 然而对于一个有谋求的前端，相对不会许可这么干，加载一张GIF图片的老本太高了，网络差的状况下会导致白屏工夫过长，所以咱们尽可能的用代码实现，缩小这种不必要的网络申请。 实现当你认真看这个动画的时候能够发现其实主体只有一个标签，内容就是404，另外的几个动画都是基于这个主体实现，所以咱们先写好这个最简略的html代码。 <h1 data-t="404">404</h1>仔细的同学应该看到了咱们自定义了一个相熟data-t，这个咱们后续在css中会用到，接下来实现主体的动画成果，次要的动画成果就是让主体抖动并减少含糊的成果，代码实现如下所示。 h1 { text-align: center; width: 100%; font-size: 6rem; animation: shake .6s ease-in-out infinite alternate;}@keyframes shake { 0% { transform: translate(-1px) } 10% { transform: translate(2px, 1px) } 30% { transform: translate(-3px, 2px) } 35% { transform: translate(2px, -3px); filter: blur(4px) } 45% { transform: translate(2px, 2px) skewY(-8deg) scaleX(.96); filter: blur(0) } 50% { transform: translate(-3px, 1px) }}接下来减少主体动画后体面两个子动画内容，基于伪元素实现，伪元素的内容通过下面html中自定义data-t获取，次要还用了clip中的rect，具体css代码如下。 h1:before { content: attr(data-t); position: absolute; left: 50%; transform: translate(-50%,.34em); height: .1em; line-height: .5em; width: 100%; animation: scan .5s ease-in-out 275ms infinite alternate,glitch-anim .3s ease-in-out infinite alternate; overflow: hidden; opacity: .7;}@keyframes glitch-anim { 0% { clip: rect(32px,9999px,28px,0) } 10% { clip: rect(13px,9999px,37px,0) } 20% { clip: rect(45px,9999px,33px,0) } 30% { clip: rect(31px,9999px,94px,0) } 40% { clip: rect(88px,9999px,98px,0) } 50% { clip: rect(9px,9999px,98px,0) } 60% { clip: rect(37px,9999px,17px,0) } 70% { clip: rect(77px,9999px,34px,0) } 80% { clip: rect(55px,9999px,49px,0) } 90% { clip: rect(10px,9999px,2px,0) } to { clip: rect(35px,9999px,53px,0) }}@keyframes scan { 0%,20%,to { height: 0; transform: translate(-50%,.44em) } 10%,15% { height: 1em; line-height: .2em; transform: translate(-55%,.09em) }}伪元素after的动画与before中的统一，只是局部参数改变，如下所示。 ...

欢送关注我的公众号：前端侦探最近在我的项目中须要做一个标签输入框，还挺实用的，演示成果如下 次要交互要求是这样的 点击输入框能够输出内容按回车能够生成标签按退格键能够删除标签点击标签上的敞开按钮能够删除标签习惯了各种 react 框架或者UI库，大家有多久没接触没有原生开发了呢？有时候页面比较简单，没必要引入一个残缺的框架，原生实现就齐全满足了，一起看看吧 一、自适应输入框布局不论什么组件，布局都是最重要的。这个布局分为标签和输入框两个局部，假如 HTML 如下 <div class="tags-content"> <tag>CSS<a class="tag-close"></a></tag> <input class="tags-input" placeholder="增加标签"></div>简略润饰一下 .tags-content{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; width: 400px; box-sizing: border-box; padding: 8px 12px; border: 1px solid #D9D9D9; border-radius: 4px; font-size: 16px; line-height: 24px; color: #333; outline-color: #4F46E5; overflow: auto; cursor: text;}tag{ display: flex; align-items: center; padding: 4px 0 4px 8px; font-size: 16px; line-height: 24px; background: #F5F5F5; color: rgba(0, 0, 0, 0.85); cursor: default;}tag-close{ width: 18px; height: 18px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.578 5l2.93-3.493a.089.089 0 0 0-.068-.146h-.891a.182.182 0 0 0-.137.064l-2.417 2.88-2.416-2.88a.178.178 0 0 0-.137-.064h-.89a.089.089 0 0 0-.069.146L4.413 5l-2.93 3.493a.089.089 0 0 0 .068.146h.89a.182.182 0 0 0 .138-.064l2.416-2.88 2.417 2.88c.033.04.083.064.137.064h.89a.089.089 0 0 0 .069-.146l-2.93-3.493z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E") center no-repeat;}.tags-input{ flex: auto; border: 0; outline: 0; padding: 4px 0; line-height: 24px; font-size: 16px;}.tags-content:focus-within,.tags-content:active{ outline: auto #4F46E5;}留神几点实现技巧： ...

CSS权重的知识点算是一个难点，须要把握所有的选择器，起码看到选择器能分辨出是哪种选择器。我集齐了 3 张图，看看这 3 张图能不能帮你搞懂 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>Document</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } .warp_height { min-height: 100vh; padding-bottom: 120px; /* padding-bottom: 120px这个等于底部的高度 */ box-sizing: border-box; } .header, .footer { height: 120px; background-color: red; width: 100%; } .header { position: sticky; top: 0; left: 0; } .content{ background-color: blue; height: 180px; } .footer { margin-top: -120px;/* margin-top: 120px这个等于底部的高度 */ } </style></head><body> <div class="warp_height"> <div class="header"> 头部,固定顶部，不会滚动 </div> <div class="content"> 都是内容 </div> </div> <div class="footer"> 底部,有余一屏固定在底部； <br> 超过一屏，置底 </div></body></html>

用CSS画三角形，利用border属性，把一个边设置成看到的款式，其余两边或三边用transparent办法变成通明。 一、案例 HTML代码： <div></div>CSS代码： div { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 70px solid red;} HTML代码： <div></div>CSS代码： div { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 70px solid red;} HTML代码： <div></div>CSS代码： div { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 70px solid red;} HTML代码： <div></div>CSS代码： div { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 70px solid red;} ...

作者：安小轩 原文链接：https://juejin.cn/post/708627... 实现一个旋转的立方体，只须要用css的根本属性就能够实现。咱们一起看看吧~ 一：transform 根本属性transform能够实现元素的2D或3D转换，能够对元素进行旋转，缩放，挪动，歪斜等。 根本属性有： 1. 挪动 能够整个设置设置属性（translate）,也能够单个设置某个方向的转换translate(x,y) 2D 转换translate3d(x,y,z) 定义 3D 转换translateX(x) X 轴转换translateY(y) Y 轴转换translateZ(z) Z 轴转换2. 缩放 能够整个设置设置属性（scale）,也能够单个设置某个方向的缩放scale(x[,y]?) 2D 缩放转换scale3d(x,y,z) 3D 缩放转换scaleX(x) 设置 X 轴的值来定义缩放转换scaleY(y) 设置 Y 轴的值来定义缩放转换scaleZ(z) 设置 Z 轴的值来定义 3D 缩放转换3. 旋转 能够整个设置设置属性（rotate）,也能够单个设置某个方向的旋转rotate(angle) 2D 旋转rotate3d(x,y,z,angle) 3D 旋转rotateX(angle) 沿着 X 轴的 3D 旋转rotateY(angle) 沿着 Y 轴的 3D 旋转rotateZ(angle) 沿着 Z 轴的 3D 旋转4. 歪斜 能够整个设置设置属性（skew）,也能够单个设置某个方向的歪斜skew(x-angle,y-angle) 沿着 X 和 Y 轴的 2D 歪斜转换skewX(angle) 沿着 X 轴的 2D 歪斜转换<!----> ...

引言面对这样的状况，有人就会有疑难：难道须要从新购买新的设施吗？就没有一个可能承载所有设施、数据兼容的平台吗？答案是有的，比方最常见的Home Assistant在这下面就能够实现，不同品牌设施之间联动。 但面对homeassistant的搭建，通过都是须要借助树莓派、群晖docker等进行搭建，从而也体现出一个景象，就是搭建国外的Home Assistant过程大多数都是英文较多，并且须要懂点技术的人群，对于纯老手不太敌对；再一个就是能接入HomeKit的产品类目并不多。 但除了这些外，还有像国内的小米lot开发者以及华为HiLink都是很多不错的智能家居零碎。当然除此之外，像一些新智能家居品牌智汀生态，也是能够实现跨品牌联动的，并且和Home Assistant一样也是全开源生态来着。 例如通过智汀家庭云App并且搭配智慧核心，就能通过插件去实现品牌设施之间的联动！ 在这里咱们就不再对于家庭的创立以及SA的创立了，感兴趣的敌人能够翻看以往的文章 首先咱们先将品牌的插件增加到零碎中，而后再增加管制设施； 其次在增加设施页面，抉择咱们所需的管制的设施【TPLINK】； 而后再场景页面中，点击上方加号+，创立场景名称，以及增加触发条件→【手动执行】； 最初再增加执行工作【智能设施】，而后抉择lifx灯，并设置好灯开关、色温、亮度等抉择； 常规如果你对本文有任何疑难或者浅见，关注智汀公众号独特交换探讨（欢送退出qq：567570418,能够收费赠送“智能开关或其余智能硬件”哦）。 ![上传中...]()

超级居中：place-items: center父元素，首先指定 grid 作为 display 办法，而后在同一个元素上写入 place-items: center。place-items 是同时设置 align-items 和 justify-items 的疾速办法。通过将其设置为 center ， align-items 和 justify-items 都将设置为 center。 .parent { display: grid; place-items: center;}flex如果您想让您的框填充到它们的 <flex-basis> 大小，放大到更小的尺寸，但不拉伸以填充任何额定的空间 .parent { display: flex;}.child { flex: 0 1 150px;}换到下一行时拉伸并填充空间，请将 <flex-grow> 设置为 1 .parent { display: flex;} .child { flex: 1 1 150px;} 定位.parent { position: relative}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}设置为行内块元素.parent { height:100px; text-align: center;}.child { display:inline-block; line-height:100px;}其余能实现不罕用的：table布局。。。

办法一：行高法办法二：内边距法办法三：CSS3的box办法办法四： 相对定位法办法五：模仿表格法<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>DIV中的元素程度垂直居中</title><style>#wrap{width:990px; height:400px;background:#CCCCCC;}#wrap{position:absolute;left:50%;top:50%;margin-left:-495px;margin-top:-200px}#wrap2{width:200px; margin:0 auto; padding-top:35px;}/*办法一：行高法*/#box{ width:200px; height:50px; background: #FFCC00;margin-bottom:20px; position:relative; font-size:16px;}.box1{line-height:50px; text-align:center;}/*办法二：内边距法*/.box2{width:200px;font-size:16px; background:#FFCC00; margin:20px 0;} .box2{text-align:center; padding:16px 0px;}/*办法三：CSS3的box办法*/.box3{ justify-content:center; align-items:center; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; -o-box-align: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; -ms-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center;}/*办法四:相对定位法*/.div4{position: absolute;left: 50%;top:50%;display:block;margin-top:-8px;margin-left:-40px;}/*办法五: 模仿表格法*/.div5{display:table;}.div5a{display:table-cell; vertical-align:middle; text-align:center;}</style></head><body><div id="wrap"> <div id="wrap2"> <div id="box" class="box1">行高法居中</div> <div class="box2">内边距法居中</div> <div id="box" class="box3">CSS3中的box法</div> <div id="box" ><span class="div4">相对定位法<span></div> <div id="box" class="div5" ><div class="div5a">模仿表格</div></div></div></div></body></html>

Flexbox 是一种 CSS 布局机制，能够说是目前浏览器原生反对的最好、应用最宽泛的布局机制了。本文通过一些例子来阐明 Flexbox 布局的工作原理，能够让咱们更好的应用 Flexbox。 与 CSS Grid 能够同时在横向和纵向两个方向进行布局不同，Flexbox 只能在繁多方向上进行布局，即要么横向，要么纵向。所谓布局，其实就是空间的调配过程，也就是说计算元素尺寸和容器残余空间尺寸的过程。 Flexbox 的布局原理整个布局过程咱们能够简略的总结如下： 计算 flex 容器内的可用空间。整个容器的尺寸减去容器的 border、padding 等所得的残余空间尺寸。计算每个 flex 元素的 flex base 尺寸和元素的假如尺寸。具体计算方法是取 flex-basis、min-width 和 flex 元素内容尺寸的较大者。flex base 尺寸是 flex 元素须要的最小尺寸，这个尺寸不能小于元素内容的尺寸。元素的假如尺寸是指在 flex 因子失效前元素的尺寸，flex 因子失效后可能导致元素产生伸缩。计算容器内所有 flex 元素的假如尺寸总和。将所有元素的假如尺寸总和与容器内可用空间尺寸做比拟，来确定 flex 因子，也就是说当假如尺寸总和超过容器内可用空间尺寸时，应用 flex-shrink，否则应用 flex-grow。在同一时间，flex-shrink 和 flex-grow 只有一个失效。所谓 flex 因子，简略来说就是放大和放大。浏览器在进行 flexbox 布局时会先确定应用哪种 flex 因子，而后再依据选用的 flex 因子来对元素尺寸进行调整。 在进行调整的时候，就会波及到一个残余空间的计算问题。如果 flex 元素明确指定了尺寸大小（definite size，比方设置了 width），那么这个元素就是不可伸缩的。如果没有显式指定尺寸，则会依照下面第2步那样计算假如尺寸。残余空间的尺寸就是容器内的可用空间尺寸减去这些元素的尺寸之和。 例子阐明咱们有如下 dom 构造： <div id="flex"> <div id="a">Antidisestablishmentarianism</div> <div id="b">B</div> <div id="c">Cherries jubilee</div> <div id="d">D</div> <div id="e">E</div></div>款式如下： [id=flex] { font-weight: 300; display: flex; outline: 1px dashed #555; width: 1200px; margin: 3rem auto;}/*其余款式已省略*/页面展现成果如下： ...

参考地址：css怎么引入内部字体 WHAT在CSS中通过应用@font-face标签，能够将服务器端的字体下载到用户本机。 WHY在展示网页时，有时会用非凡字体来进行共性表白，通常是设计师做好图片，再由咱们前台工程师放到网页中。如果干活的只有你老哥一个，没有设计师给你设计图片，就退而求其次，通过font-family款式援用非凡字体。 不过这有一个前提，就是援用的字体都要先在本机装置好。比方我给题目设置的是微软雅黑字体，用户机子上如果装了微软雅黑字体就能失常显示，那我要是给题目设置的是方正郑文公碑楷书体呢？这种状况下只有用户机子上装置了此种字体能力失常显示。可咱们怎么能确保每个用户的机子上都装置过咱们页面须要的各种字体呢？ 此时，就能够应用@font-face标签，从服务器上把字体包下载到本机。 HOW在css中应用@font-face标签: /*字体后缀和浏览器无关，如下所示* .TTF或.OTF，实用于Firefox 3.5、Safari、Opera* .EOT，实用于Internet Explorer 4.0+* .SVG，实用于Chrome、IPhone*/@font-face { font-family: 'qigongti'; // 启功体 src: url('../fonts/qigongti.eot'); src: url('../fonts/qigongti.eot?#iefix') format('embedded-opentype'), url('../fonts/qigongti.woff') format('woff'), url('../fonts/qigongti.ttf') format('truetype'), url('../fonts/qigongti.svg') format('svg'); font-weight: normal;}在对应的节点上应用非凡字体： div { font-family: 'qigongti'; font-size: 16px;}

欢送关注我的公众号：前端侦探最近在某思看到这样一个问题：须要绘制一个自适应尺寸的菱形，并且还有边框，个别在流程图中很常见，成果如下 如果没有边框的话，用 CSS clip-path 也能很不便的裁剪出一个菱形，然而边框不太好解决（通常用嵌套一层的形式或者投影来模仿，然而成果不太好），这里介绍一个 SVG 形式，充分利用缩放个性来实现这样一个成果 一、SVG 从何而来SVG 通常都不须要手写代码（除大量根本形态以外），个别都能够用设计软件生成（SVG 在设计之初就是给机器看的，十分不利于人工浏览）。比方，我这里是用 Figma 绘制的（一个多边形就搞定），轻易什么尺寸都行 而后就失去了这样一段 SVG <svg width="167" height="90" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/></svg>在浏览器中成果如下 二、SVG 的缩放个性当初 SVG 有一个默认尺寸，如果手动扭转 SVG 的默认尺寸，如下 是不是有点相似于object-fit:contain的成果？如果想整个铺满，强制拉伸该怎么做呢？这里须要用到 SVG 的缩放属性preserveAspectRatio，示意当 SVG 的理论尺寸和viewBox尺寸不统一时的缩放规定，有点相似于 object-fit 和 object-position 组合。这里的取值十分多，默认值是xMidYMid，示意强制等比缩放，并且居中对齐。 有趣味的能够参考这篇文章：了解SVG viewport,viewBox,preserveAspectRatio缩放，案例十分具体这里咱们不须要等比缩放，能够间接设置为none <svg preserveAspectRatio="none">...</svg>成果如下 三、SVG 的描边缩放在设置不等比缩放后，其实描边还有一点小问题，不同尺寸下，描边的粗细不同，如下 有没有方法让描边不会追随 SVG 尺寸缩放呢？当然也是有的！SVG 中有一个属性 vector-effect能够管制描边不缩放，永远放弃默认设置的尺寸，有趣味的能够参考这篇文章 CSS vector-effect与SVG stroke描边缩放，这里只须要在 path增加属性vector-effect="non-scaling-stroke"就行了，示意描边不追随缩放，如下 <svg preserveAspectRatio="none"> <path vector-effect="non-scaling-stroke">...</path></svg> 这样就实现了一个自适应尺寸的菱形了，描边也不会缩放，残缺 SVG 代码如下 <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg"> <path vector-effect="non-scaling-stroke" d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/></svg>四、SVG 内联 base64通常状况下，这样一个图形用作背景图更为适合（SVG代码放在页面上不太好看）。让人诧异的是，将 SVG 转换成 base64 后，以上个性依然是存在的。这里应用张鑫旭老师的 SVG在线压缩合并工具，如下 ...

(图片地址：https://panjiachen.github.io/...)如图示这种竖向排列的菜单栏，展现成果比拟好，而且交互比拟直观，上面来介绍一下实现步骤1.先把整体布局写进去 1.1因为子菜单开展膨胀会变动div大小，所以应用flex弹性盒子。 <div class="box"> <ul class="ulList"> <li class="liList"> <p onclick="menu_active(ulOne)">这是第一个子菜单</p> <ul class="childUl" id="ulOne" style="display: none;"> <li>选项1.1</li> <li>选项1.2</li> </ul> </li> <li class="liList"> <p onclick="menu_active(ulTwo)">这是第二个子菜单</p> <ul class="childUl" id="ulTwo" style="display: none;"> <li>选项2.1</li> <li>选项2.2</li> </ul> </li> <li class="liList"> <p onclick="menu_active(ulThree)">这是第三个子菜单</p> <ul class="childUl" id="ulThree" style="display: none;"> <li>选项3.1</li> <li>选项3.2</li> <li>选项3.3</li> </ul> </li> <li class="liList"> <p onclick="menu_active(ulFour)">这是第四个子菜单</p> <ul class="childUl" id="ulFour" style="display: none;"> <li>选项4.1</li> </ul> </li> </ul></div> *{ margin: 0; padding: 0;}.box{ width: 300px; top: 10%; left: 10%; display: flex; position: absolute;}.ulList{ width: 100%; display: flex; left: 20%; top: 20%; flex-direction: column; background-color: grey; position: absolute; list-style: none;}.liList{ width: 100%; height:100px; display: flex; flex-direction: column; background-color: #FF9900; position: relative;}.liList p{ font-size: 20px; text-align: center;}1.2先把子菜单下的ul暗藏。这里要留神一点：list-style设置为none时，会发现li前边的点尽管隐没了，但还是占着空间，如下图所示呈现此起因是因为默认状况下，li是有margin和padding的，此时只须要给其设置都为0即可，为了不便，间接全局批改： ...

盒子模型-规范盒模型、IE盒模型 CSS 三大个性、层叠性继承性优先级以及权重还有CSS选择器在浏览器中的渲染程序 CSS3新增伪类有那些？ 实现元素垂直居中的办法 文字水平居中，垂直居中的几种形式总结 标签显示模式（display）块级 行内 行内块 CSS的定位position CSS3新个性 CSS3的弹性盒子布局flexbox CSS画三角形 多种办法实现div两列等高（收集整理） 我的项目中遇到的一些兼容性问题和解决的hack办法 li与li之间有看不见的空白距离是什么起因引起的？有什么解决办法？ 为什么要初始化CSS款式。 absolute的containing block(容器块)计算形式跟失常流有什么不同？ CSS里的visibility属性 position跟display、margin collapse、overflow、float这些个性互相叠加后会怎么样？ BFC 打消浮动的几种形式 什么是外边距合并？ zoom:1的革除浮动原理? 预处理器LESS CSS优化、进步性能的办法有哪些？ 对于行高line-height以及vertical-align ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。 什么是CSS 预处理器 / 后处理器？

*透明度从00-FF，一共256个梯度。*以蓝色为例，规范蓝色是color:#0000FF;*透明度设置在色值后位，即#0000FFxx（XX代表透明度）。 实际效果如下： <div style="background:#0000FF00;width:25px;height:25px"></div><div style="background:#0000FF10;width:25px;height:25px"></div><div style="background:#0000FF20;width:25px;height:25px"></div><div style="background:#0000FF30;width:25px;height:25px"></div><div style="background:#0000FF40;width:25px;height:25px"></div><div style="background:#0000FF50;width:25px;height:25px"></div><div style="background:#0000FF60;width:25px;height:25px"></div><div style="background:#0000FF70;width:25px;height:25px"></div><div style="background:#0000FF80;width:25px;height:25px"></div><div style="background:#0000FF90;width:25px;height:25px"></div><div style="background:#0000FFA0;width:25px;height:25px"></div><div style="background:#0000FFB0;width:25px;height:25px"></div><div style="background:#0000FFC0;width:25px;height:25px"></div><div style="background:#0000FFD0;width:25px;height:25px"></div><div style="background:#0000FFE0;width:25px;height:25px"></div><div style="background:#0000FFF0;width:25px;height:25px"></div><div style="background:#0000FFFF;width:25px;height:25px"></div>

我的项目代码小结：对于DIV+CSS的盒子模型的布局练习对于favicon.ico，网页的seo，CSS精灵图，浮动和定位，表单，无序列表和自定义列表等设置更加纯熟1.首页布局引入ico图标favicon.ico的制作和插入 SEO三元素<head> <meta charset="UTF-8"> <title>品优购-综合网购首选-副品高价、品质保障、配送及时、轻松购物！</title> <meta name="description" content="品优购JD.COM-业余的综合网上购物商城,销售家电、数码通信、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" /> <!-- 引入facicon.ico网页图标 --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <!-- 引入css 初始化的css 文件 --> <link rel="stylesheet" href="css/base.css"> <!-- 引入公共款式的css 文件 --> <link rel="stylesheet" href="css/common.css"></head>网站的SEO font-icon字体图标 命名汇合：名称阐明快捷导航栏shortcut头部header标记logo购物车shopcar搜寻search热点词hotwrods导航nav导航左侧dorpdown 蕴含 .dd .dt导航右侧navitems1). shortcut 制作 通栏的盒子 命名为shortcut 快捷导航的意思， 留神，这里给行高，能够继承给外面的子盒子。外面蕴含 版心的盒子版心盒子外面蕴含1号左侧盒子左浮动版心盒子外面蕴含2号右侧盒子右浮动 两头的竖线 2). header 制作 header盒子必须要有高度1号盒子是 logo 标记 定位 LOGO区域留神写成利于SEO的写法 <!-- header制作 --> <div class="header w"> <!-- logo --> <h1 class="logo"> <a href="index.html" title="品优购">品优购</a> </h1> </div>将超链接作为logo的布局，外面放入文字，（文字能够被SEO） /*header区域*/.header { position: relative; height: 105px;}.logo { position: absolute; top: 25px; left: 0; width: 175px; height: 56px;}.logo a { display: block; /*overflow: hidden;*/ width: 175px; height: 56px; background: url(../img/logo.png) no-repeat; /*text-indent: -999px;*/ font-size: 0;}而后将logo设置为背景图：而后通过text-indent缩进的属性把文字赶走到眼帘以外的中央。 ...

一、浮动 浮动能够扭转元素的排列形式float left/right/none;撑开盒子：不给高度能够撑开盒子，问题：然而浮动之后高度就会变成0（没给高度）导致错位（浮动元素不再占有原文档流的地位，对前面的排版产生影响）解决：革除浮动（革除浮动元素产生的影响）clear:left/right/both1.额定标签法（w3c举荐的写法）在前面增加一个块级元素不能是行内元素：<div style="clear:both"></div>毛病：增加了无意义的标签2.overflow给父元素增加overflow属性overflow:hidden/auto/scroll毛病：无奈显示溢出的局部3.:after伪元素法给父元素增加实质：主动生成一个额定暗藏标签4.双级伪元素

实现栅格零碎布局的形式纯伸缩flex布局，实例如下：html: <div class="container"> <div class="row"> <div class="col-6">col-6</div> <div class="col-6">col-6</div> <div class="col-6">col-6</div> <div class="col-6">col-6</div> <div class="col-6">col-6</div> <div class="col-6">col-6</div> <div class="col-6">col-6</div> <div class="col-6">col-6</div> </div></div>css: .row{ display:flex; flex-wrap:wrap;}.col-6{ flex:0 0 25%;}

欢送关注我的公众号：前端侦探对于原生 input range 滑动输入条如何自定义款式始终都是我心里的一道坎，个别状况下，能够很轻易的丑化到这个水平 为什么很容易呢？因为这些都是有对应的伪元素能够批改的 ::-webkit-slider-container { /*能够批改容器的若干款式*/}::-webkit-slider-runnable-track { /*能够批改轨道的若干款式*/}::-webkit-slider-thumb { /*能够批改滑块的若干款式*/}可是，偏偏没有已滑过局部的款式，如果要定义上面这样的款式，单纯的 CSS 可能没方法实现了 留神：Firefox 有独自的伪类能够批改，本文探讨的是 Chrome 实现计划一、我的实现思路既然没有专门的伪元素能够批改已滑过局部的色彩，而且只有滑块是可动的，是不是能够在滑块上下手呢？ 假如滑块右边有一个矩形，是追随滑块一起的， 当这个矩形足够长时，可能齐全笼罩右边的轨道，在可视范畴内，是不是就能够示意右边的已滑过局部了呢？示意如下（右边半透明示意滑动条之外） 尝试过伪元素的想法，像这样 ::-webkit-slider-thumb::after{ /*本想绘制一个足够长的矩形*/}惋惜，伪元素里并不能再次生成伪元素。 所以，如何在元素之外绘制一个矩形呢？ 二、通过 border-image 在元素之外绘制图形有哪些形式能够在元素之外绘制图形呢？想了一下，有 box-shadow 和 outline，然而如同并不适宜这种状况，咱们须要绘制的是一个尺寸可控的矩形，而这两种形式都不能很好地管制形态。那还有其余形式吗？ 还真有！前两天刚看到张鑫旭老师的一篇文章：被低估的border-image属性，其中有一个个性就是在元素之外构建图像，并且不占据任何空间。连忙试试，这里绘制一个宽度为99vw的矩形（足够笼罩滑动条就行了），代码如下 ::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background-color: #f44336; border: 1px solid transparent; margin-top: -8px; border-image: linear-gradient(#f44336,#f44336) 0 fill / 8 20 8 0 / 0 0 0 99vw; /*绘制元素外矩形*/}成果如下 ...

1.border border-style:solid(实线)/dottedborder:1px solid red

css字体属性： font-family是字体font-weight=700(bold),=400(默认：normal)(100-900)相当于strong标签 理论开发中应用数字更好font-style=normal将歪斜转为失常 =italic变歪斜font-size 字体大小#lan { font-family: "微软雅黑"; font-size: 10px; font-weight: 700; font-style: italic; /*复合属性应用一行来写 程序不能颠倒 前2个能够省略，后2个不能够 font:font-style font-weight font-size/line-height font-family;*/font-size/line-height /*font-size/line-height: 10px/1.5代表行高是字体的1.5倍*/ font:italic 700 10px/10px '微软雅黑'; font: 10px/10px '微软雅黑'; }

一、单位px 固定的单位；em 是依据其父元素的字体大小来设置（太多的不确定性）；rem 是依据网页的根元素（html）来设置字体大小。vw window.innerWidth 的数值的 1%vh window.innerHeight 的数值的 1%字体适配html{ /* 以16px为基数*/ font-size: 100%;}@media screen and (max-width: 414px){ html{ /*// 以8px为基数*/ font-size: 50%; }}@media screen and (min-width: 1366px){ html{ /*// 以16px为基数*/ font-size: 100%; }}.lma{ font-size: 1rem; padding: 0.3rem;}二、 srcset 提供多图像源<img src="source.jpg" width="100%" srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">2x、3x 示意指标屏幕的像素密度；400w、600w示意指标浏览器的宽度的限度，如浏览器宽度550w时，匹配600w的src。通过window.devicePixelRatio来获取像素比 三、 边框1px适配：伪类+transform原理是把原先元素的 border 去掉，而后利用 :before 或者 :after 重做 border ，并 transform 的 scale 放大一半，原先的元素绝对定位，新做的 border 相对定位。 transform: scaleY(0.5);transform: scale(0.5);四、布局前端的布局倒退历程经验了上面几个过程： 表格布局 --> 定位布局 --> 浮动布局 --> flexbox布局 --> gridbox布局 ...

规定起源：https://stylelint.io/user-gui... namedesc躲避谬误 色彩 color-no-invalid-hex禁止有效的十六进制色彩。字体 font-family-no-duplicate-names不容许反复的字体系列名称。font-family-no-missing-generic-family-keyword不容许在字体系列名称列表中短少通用系列。命名网格 named-grid-areas-no-invalid不容许有效的命名网格区域。function function-calc-no-unspaced-operator不容许在 calc 函数中应用无空格运算符。function-linear-gradient-no-nonstandard-direction不容许在依据规范语法 linear-gradient()有效的调用中的方向值。function-no-unknown禁止未知性能。字符串 string-no-newline禁止（未本义）字符串中的换行符。单位 unit-no-unknown禁止未知单位。自定义属性 custom-property-no-missing-var-function不容许 var 自定义属性短少性能。property-no-unknown禁止未知属性。关键帧 keyframe-declaration-no-important!important在关键帧申明中禁止。申明块 declaration-block-no-duplicate-custom-properties不容许在申明块中反复自定义属性。declaration-block-no-duplicate-properties禁止申明块中的反复属性。declaration-block-no-shorthand-property-overrides禁止笼罩相干的速记属性的速记属性。块 block-no-empty禁止空块。选择器 selector-pseudo-class-no-unknown禁止未知的伪类选择器。selector-pseudo-element-no-unknown禁止未知的伪元素选择器。selector-type-no-unknown禁止未知类型选择器。媒体性能 media-feature-name-no-unknown禁止未知媒体性能名称。@at-rules at-rule-no-unknown不容许未知的规定。正文 comment-no-empty禁止空评论。个别/样式表 no-descending-specificity不容许较低特异性的选择器呈现在笼罩较高特异性的选择器之后。no-duplicate-at-import-rules@import禁止样式表中的反复规定。no-duplicate-selectors禁止样式表中呈现反复的选择器。no-empty-source禁止空源。no-invalid-double-slash-comments //...禁止 CSS 不反对的双斜线正文。no-invalid-position-at-import-rule@import禁止样式表中的有效地位规定。执行公约 阿尔法值 alpha-value-notation指定 alpha 值的百分比或数字表示法（可主动修复）。Hue hue-degree-notation指定度数或角度表示法（可主动修复）。色彩 color-function-notation为实用的色彩性能指定古代或传统符号（可主动修复）。color-hex-alpha要求或禁止十六进制色彩的 Alpha 通道。color-hex-length指定十六进制色彩的短或长符号（可主动修复）。color-named要求（在可能的状况下）或禁止命名色彩。color-no-hex禁止十六进制色彩。长度单位 length-zero-no-unit不容许应用零长度的单位（可主动修复）。字体 font-family-name-quotes指定是否应在字体系列名称四周应用引号（可主动修复）。字重 font-weight-notation须要数字或命名（如果可能）font-weight 值。此外，当须要命名值时，只须要无效的名称。性能 function-allowed-list指定容许的性能列表。function-disallowed-list指定不容许应用的性能列表。function-url-no-scheme-relative禁止计划相干的 url。function-url-quotes要求或禁止 url 引号。function-url-scheme-allowed-list指定容许的 URL 计划列表。function-url-scheme-disallowed-list指定不容许的 URL 计划列表。关键帧 keyframes-name-pattern指定关键帧名称的模式。数字 number-max-precision限度数字中容许的小数位数。工夫 time-min-milliseconds指定工夫值的最小毫秒数。单位 unit-allowed-list指定容许的单位列表。unit-disallowed-list指定不容许的单位列表。速写法 shorthand-property-no-redundant-values不容许速记属性中的冗余值（可主动修复）。值 value-no-vendor-prefix不允许值的供应商前缀（可主动修复）。自定义属性 custom-property-pattern指定自定义属性的模式。属性 property-allowed-list指定容许的属性列表。property-disallowed-list指定不容许的属性列表。property-no-vendor-prefix不容许属性的供应商前缀（可主动修复）。申明 declaration-block-no-redundant-longhand-properties禁止能够组合成一个速记属性的速记属性。declaration-no-important!important:在申明中禁止。declaration-property-unit-allowed-list在申明中指定容许的属性和单位对列表。declaration-property-unit-disallowed-list在申明中指定不容许的属性和单位对列表。declaration-property-value-allowed-list在申明中指定容许的属性和值对列表。declaration-property-value-disallowed-list在申明中指定不容许的属性和值对列表。申明块 declaration-block-single-line-max-declarations限度单行申明块中的申明数量。选择器 selector-attribute-name-disallowed-list指定不容许的属性名称列表。selector-attribute-operator-allowed-list指定容许的属性运算符列表。selector-attribute-operator-disallowed-list指定不容许的属性运算符列表。selector-attribute-quotes要求或不容许为属性值加上引号。selector-class-pattern指定类选择器的模式。selector-combinator-allowed-list指定容许的组合子列表。selector-combinator-disallowed-list指定不容许的组合子列表。selector-disallowed-list指定不容许的选择器列表。selector-id-pattern指定 ID 选择器的模式。selector-max-attribute限度一个选择器中属性选择器的数量。selector-max-class限度选择器中的类数。selector-max-combinators限度选择器中组合子的数量。selector-max-compound-selectors限度选择器中复合选择器的数量。selector-max-id限度一个选择器中 ID 选择器的数量。selector-max-pseudo-class限度选择器中伪类的数量。selector-max-specificity限度选择器的特异性。selector-max-type限度选择器中的类型数量。selector-max-universal限度一个选择器中通用选择器的数量。selector-nested-pattern为嵌套在规定中的规定选择器指定模式。selector-no-qualifying-type不容许按类型限定选择器。selector-no-vendor-prefix禁止选择器的供应商前缀（可主动修复）。selector-pseudo-class-allowed-list指定容许的伪类选择器列表。selector-pseudo-class-disallowed-list指定不容许的伪类选择器列表。selector-pseudo-element-allowed-list指定容许的伪元素选择器列表。selector-pseudo-element-colon-notation为实用的伪元素指定单冒号或双冒号表示法（可主动修复）。selector-pseudo-element-disallowed-list指定不容许的伪元素选择器列表。规定 rule-selector-property-disallowed-list为规定中的选择器指定不容许的属性列表。媒体性能 media-feature-name-allowed-list指定容许的媒体性能名称列表。media-feature-name-disallowed-list指定不容许的媒体性能名称列表。media-feature-name-no-vendor-prefix不容许媒体性能名称应用供应商前缀（可主动修复）。media-feature-name-value-allowed-list指定容许的媒体性能名称和值对列表。自定义媒体 custom-media-pattern指定自定义媒体查问名称的模式。@at-rules at-rule-allowed-list指定容许的规定列表。at-rule-disallowed-list指定不容许的规定列表。at-rule-no-vendor-prefix不容许在规定中应用供应商前缀（可主动修复）。at-rule-property-required-list为规定指定所需属性的列表。正文 comment-pattern指定正文模式。comment-word-disallowed-list在评论中指定不容许应用的单词列表。个别/样式表 max-nesting-depth限度嵌套深度。no-irregular-whitespace不容许不规则的空格。no-unknown-animations禁止未知动画。unicode-bom要求或禁止 Unicode BOM。格调问题咱们曾经解冻了这些规定——咱们不会修复谬误或增加选项，咱们将在将来的版本中弃用并删除它们。咱们建议您在 Stylelint 旁边应用丑陋的打印机（如 Prettier）而不是这些规定。如果你更喜爱应用 Stylelint 来强制格调一致性，你能够将你须要的规定迁徙到一个插件。值 不禁 pretty 解决 value-keyword-case为关键字值指定小写或大写（可主动修复）。函数 function-name-case为函数名指定小写或大写（可主动修复）。自定义属性 custom-property-empty-line-before在自定义属性之前要求或禁止空行（可主动修复）。选择器 selector-type-case为类型选择器指定小写或大写（可主动修复）。规定 rule-empty-line-before要求或不容许在规定之前有一个空行（可主动修复）。@at-rules at-rule-empty-line-before在规定之前要求或禁止空行（可主动修复）。正文 comment-empty-line-before要求或禁止正文前有空行（可主动修复）。comment-whitespace-inside要求或禁止正文标记外部的空格（可主动修复）。由 pretty 解决 色彩 color-hex-case为十六进制色彩指定小写或大写（可主动修复）。函数 function-comma-newline-after函数逗号后须要换行符或不容许空格（可主动修复）。function-comma-newline-before在函数的逗号之前须要换行符或不容许空格（可主动修复）。function-comma-space-after在函数的逗号后须要一个空格或不容许有空格（可主动修复）。function-comma-space-before在函数的逗号之前须要一个空格或不容许空格（可主动修复）。function-max-empty-lines限度函数内相邻空行的数量（可主动修复）。function-parentheses-newline-inside须要换行符或不容许函数括号内有空格（可主动修复）。function-parentheses-space-inside在函数的括号内须要一个空格或不容许有空格（可主动修复）。function-whitespace-after要求或禁止函数后有空格（可主动修复）。数字 number-leading-zero对于小于 1 的小数，要求或不容许前导零（可主动修复）。number-no-trailing-zeros不容许数字中的尾随零（可主动修复）。字符串 string-quotes在字符串四周指定单引号或双引号（可主动修复）。单位 unit-case为单位指定小写或大写（可主动修复）。值 value-list-comma-newline-after在值列表的逗号后须要换行符或不容许空格（可主动修复）。value-list-comma-newline-before在值列表的逗号之前须要换行符或不容许空格。value-list-comma-space-after在值列表的逗号后须要一个空格或不容许有空格（可主动修复）。value-list-comma-space-before在值列表的逗号之前须要一个空格或不容许空格（可主动修复）。value-list-max-empty-lines限度值列表中相邻空行的数量（可主动修复）。属性 property-case为属性指定小写或大写（可主动修复）。申明 declaration-bang-space-after申明后须要一个空格或不容许空格（可主动修复）。declaration-bang-space-before在申明的爆炸之前须要一个空格或不容许空格（可主动修复）。declaration-colon-newline-after在申明的冒号后须要换行符或不容许空格（可主动修复）。declaration-colon-space-after在申明的冒号后须要一个空格或不容许有空格（可主动修复）。declaration-colon-space-before在申明的冒号之前须要一个空格或不容许空格（可主动修复）。declaration-empty-line-before要求或不容许申明前有一个空行（可主动修复）。申明块 declaration-block-semicolon-newline-after在申明块的分号后须要换行符或不容许空格（可主动修复）。declaration-block-semicolon-newline-before在申明块的分号之前须要换行符或不容许空格。declaration-block-semicolon-space-after在申明块的分号后须要一个空格或不容许空格（可主动修复）。declaration-block-semicolon-space-before在申明块的分号之前须要一个空格或不容许空格（可主动修复）。declaration-block-trailing-semicolon要求或不容许在申明块中应用尾随分号（可主动修复）。块 block-closing-brace-empty-line-before在块的右大括号之前要求或禁止空行（可主动修复）。block-closing-brace-newline-after在块的右大括号后须要换行符或不容许空格（可主动修复）。block-closing-brace-newline-before在块的右大括号之前须要换行符或不容许空格（可主动修复）。block-closing-brace-space-after在块的右大括号之后须要一个空格或不容许空格。block-closing-brace-space-before在块的右大括号之前须要一个空格或不容许空格（可主动修复）。block-opening-brace-newline-after在块的左大括号之后须要一个换行符（可主动修复）。block-opening-brace-newline-before在块的左大括号之前须要换行符或不容许空格（可主动修复）。block-opening-brace-space-after在块的左大括号之后须要一个空格或不容许空格（可主动修复）。block-opening-brace-space-before在块的左大括号之前须要一个空格或不容许空格（可主动修复）。选择器 selector-attribute-brackets-space-inside在属性选择器内的括号内须要一个空格或不容许空格（可主动修复）。selector-attribute-operator-space-after在属性选择器中的运算符之后须要一个空格或不容许空格（可主动修复）。selector-attribute-operator-space-before在属性选择器中的运算符之前须要一个空格或不容许空格（可主动修复）。selector-combinator-space-after在选择器的组合符之后须要一个空格或不容许空格（可主动修复）。selector-combinator-space-before在选择器的组合符之前须要一个空格或不容许空格（可主动修复）。selector-descendant-combinator-no-non-space禁止选择器的后辈组合符应用非空格字符（可主动修复）。selector-max-empty-lines限度选择器中相邻空行的数量（可主动修复）。selector-pseudo-class-case为伪类选择器指定小写或大写（可主动修复）。selector-pseudo-class-parentheses-space-inside在伪类选择器中的括号内须要一个空格或不容许空格（可主动修复）。selector-pseudo-element-case为伪元素选择器指定小写或大写（可主动修复）。选择器列表 selector-list-comma-newline-after在选择器列表的逗号后须要换行符或不容许空格（可主动修复）。selector-list-comma-newline-before在选择器列表的逗号之前须要换行符或不容许空格（可主动修复）。selector-list-comma-space-after在选择器列表的逗号后须要一个空格或不容许空格（可主动修复）。selector-list-comma-space-before在选择器列表的逗号之前须要一个空格或不容许空格（可主动修复）。媒体性能 media-feature-colon-space-after在媒体性能中的冒号后须要一个空格或不容许空格（可主动修复）。media-feature-colon-space-before在媒体性能中的冒号前须要一个空格或不容许空格（可主动修复）。media-feature-name-case为媒体性能名称指定小写或大写（可主动修复）。media-feature-parentheses-space-inside在媒体性能内的括号内须要一个空格或不容许空格（可主动修复）。media-feature-range-operator-space-after在媒体性能中的范畴运算符之后须要一个空格或不容许空格（可主动修复）。media-feature-range-operator-space-before在媒体性能中的范畴运算符之前须要一个空格或不容许空格（可主动修复）。媒体查问列表 media-query-list-comma-newline-after在媒体查问列表的逗号后须要换行符或不容许空格（可主动修复）。media-query-list-comma-newline-before在媒体查问列表的逗号之前须要换行符或不容许空格。media-query-list-comma-space-after在媒体查问列表的逗号后须要一个空格或不容许空格（可主动修复）。media-query-list-comma-space-before在媒体查问列表的逗号之前须要一个空格或不容许空格（可主动修复）。@at-rules at-rule-name-case为规定名称指定小写或大写（可主动修复）。at-rule-name-newline-after在规定名称后须要换行符。at-rule-name-space-after在规定名称后须要一个空格（可主动修复）。at-rule-semicolon-newline-after在规定的分号后须要换行符（可主动修复）。at-rule-semicolon-space-before在规定的分号之前须要一个空格或不容许空格。个别/样式表 indentation指定缩进（可主动修复）。linebreaks指定 unix 或 windows 换行符（可主动修复）。max-empty-lines限度相邻空行的数量（可主动修复）。max-line-length限度一行的长度。no-eol-whitespace禁止行尾空格（可主动修复）。no-missing-end-of-source-newline不容许短少源代码结尾换行符（可主动修复）。no-empty-first-line不容许空的第一行（可主动修复）。no-extra-semicolons不容许额定的分号（可主动修复）。

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>svg-test</title> <style> .test { width: 160px; height: 160px; border-radius: 50%; background: linear-gradient(#6DB0FF, rgba(129, 255, 225, 0.5)); background: conic-gradient(from -40.08deg at 50% 50%, #6DB0FF 0deg, rgba(129, 255, 225, 0.5) 360deg); } </style></head><body> <svg width="160" height="160" viewbox="0 0 160 160"> <defs> <pattern id="fill-img" patternUnits="userSpaceOnUse" width="160" height="160"> <image id="test-img" xlink:href="http://test/assets/4890701-417c25e40509aefc.png" x="0" y="0" width="160" height="160"> </image> </pattern> </defs> <circle fill="none" stroke="url(#fill-img)" stroke-width="15" cx="80" cy="80" r="72" stroke-dasharray="100 0" stroke-dashoffset="100" stroke-linecap="round" /> </svg> <div class="test"></div> <canvas id="myCanvas">以后浏览器不反对canvas组件请降级！</canvas> <script> /** * * @param startColor 指定起始色彩 * @param endColor 指定完结色彩 * @param step 划分渐变色区域数量 * @returns {Array} 返回渐变色数组 */ let gradientColor = function(startColor, endColor, step) { let startRGB = this.colorRgb(startColor); //转换为rgb数组模式 let startR = startRGB[0]; let startG = startRGB[1]; let startB = startRGB[2]; let endRGB = this.colorRgb(endColor); let endR = endRGB[0]; let endG = endRGB[1]; let endB = endRGB[2]; let sR = (endR - startR) / step; //总差值 let sG = (endG - startG) / step; let sB = (endB - startB) / step; let colorArr = []; for (let i = 0; i < step; i++) { //计算每一步的hex值 let hex = this.colorHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')'); colorArr.push(hex); } return colorArr; }; // 将hex示意形式转换为rgb示意形式(这里返回rgb数组模式) gradientColor.prototype.colorRgb = function(sColor) { let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/; sColor = sColor.toLowerCase(); if (sColor && reg.test(sColor)) { if (sColor.length === 4) { let sColorNew = "#"; for (let i = 1; i < 4; i += 1) { sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1)); } sColor = sColorNew; } //解决六位的色彩值 let sColorChange = []; for (let i = 1; i < 7; i += 2) { sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2))); } return sColorChange; } else { return sColor; } }; // 将rgb示意形式转换为hex示意形式 gradientColor.prototype.colorHex = function(rgb) { let _this = rgb; let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/; if (/^(rgb|RGB)/.test(_this)) { let aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(","); let strHex = "#"; for (let i = 0; i < aColor.length; i++) { let hex = Number(aColor[i]).toString(16); hex = hex < 10 ? 0 + '' + hex : hex; // 保障每个rgb的值为2位 if (hex === "0") { hex += hex; } strHex += hex; } if (strHex.length !== 7) { strHex = _this; } return strHex; } else if (reg.test(_this)) { let aNum = _this.replace(/#/, "").split(""); if (aNum.length === 6) { return _this; } else if (aNum.length === 3) { let numHex = "#"; for (let i = 0; i < aNum.length; i += 1) { numHex += (aNum[i] + aNum[i]); } return numHex; } } else { return _this; } }; let color_list = new gradientColor("#706caa", "#f2f2b0", 180); //色彩值分为180等份 function toHighDPI(canvas) { const ctx = canvas.getContext('2d'); const { width, height } = canvas; const { devicePixelRatio = 1 } = window; canvas.width = width * devicePixelRatio; canvas.height = height * devicePixelRatio; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; ctx.scale(devicePixelRatio, devicePixelRatio); } var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); var mW = c.width = 300; var mH = c.height = 300; toHighDPI(c); var lineWidth = 5; var r = mW / 2; //两头地位 var cR = r - 4 * lineWidth; //圆半径 var startAngle = -(1 / 2 * Math.PI); //开始角度 var endAngle = startAngle + 2 * Math.PI; //完结角度 var xAngle = 2 * (Math.PI / 180); //偏移角度量 var cArr = []; //圆坐标数组 var center = {x: mW / 2, y: mH / 2}; //园的中心点坐标 //初始化圆坐标数组 for (var i = startAngle; i <= endAngle; i += xAngle) { //通过sin()和cos()获取每个角度对应的坐标 var x = r + cR * Math.cos(i); var y = r + cR * Math.sin(i); cArr.push([x, y]); } //挪动到开始点 var startPoint = cArr.shift(); // ctx.beginPath(); // ctx.moveTo(startPoint[0], startPoint[1]); //渲染函数 var i = 0; //计数 var img = document.getElementById('test-img') var render = function() { //画圈 if (cArr.length) { ctx.save(); ctx.beginPath(); ctx.lineWidth = lineWidth; // ctx.strokeStyle = '#1c86d1'; ctx.strokeStyle = color_list[i]; ctx.moveTo(center.x, center.y); var tmpPoint = cArr.shift(); ctx.lineTo(tmpPoint[0], tmpPoint[1]); ctx.stroke(); ctx.restore(); i++; } else { cArr = null; return; } c.toBlob(function(blob) { url = URL.createObjectURL(blob); img.setAttribute('xlink:href', url) }); requestAnimationFrame(render); }; render();//第二种画法，旋转坐标系// ctx.translate(250, 250);// var center = [0, 0];// var r = 100;// for (var i =0; i < 3600; i+=1) {// var angle = i / 10 * Math.PI / 180;// ctx.save();// ctx.rotate(angle);// ctx.beginPath();// ctx.strokeStyle = color_list[i];// ctx.moveTo(center[0] + r, center[1]);// ctx.lineTo(center[0], center[1]);// ctx.stroke();// ctx.restore();// } </script></body></html>

CSS选择器以及权重的设置 一个页面的搭建离不开css款式，而想要应用css对页面元素进行管制就须要用到css选择器。 依照引入形式能够说有外部款式（款式写到标签中的style里）、内部款式（款式通过引入内部的css文件）、内联款式（款式写在html文件中的style标签里） 依照选择器分类的话，常见的选择器有id选择器、类选择器、标签选择器、通配符选择器、派生选择器 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="content" class="container"> content1 <div id="content2" class="container"> content2 </div> </div></body><style> /* div { color: red; } */ #content { color: aquamarine; } .container { color: blue; } /* * { color: yellow } */ div .container { color: rgb(224, 34, 215) } #content2 { color: burlywood }</style></html>不同的选择器，权重是不一样咱们能够看到就下面的选择器而言 id>级联>class>标签>通配符 粗疏一点的话，再找几个例子的话，能够发现下面的并不完全正确 尤其是波及到id跟级联这块 div #content2 { color: rgb(9, 90, 45) } #content2 { color: burlywood }能够发现，下面这种是第一个色彩显示进去，而不是依据id显示进去。 起因css通配符选择器效率低，因为css匹配的程序不是从左向右，而是从右向左。应用通配符选择器时，浏览器会先匹配所有的元素，再进一步匹配其余规定，这样就导致了效率变低。 ...

uniapp的icon是从网上下载的，有时候会呈现下载失败问题。间接点开了一个新网页就下载了ttf的文件 @font-face { font-family: 'uicon-iconfont'; src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype'); }原来的代码是这样的，点开新网页就能下载了而后点开https://www.giftofspeed.com/b...把ttf的文件转换为base64的格局上面也有对应的导入办法，看你适宜哪一种去导入蓝色箭头是导入的格局办法，红色是转换后的内容须要填入的地位。这样就导入实现了，刷新下页面，看下是否曾经实现

先来介绍一下平移，顾名思义，就是在立体上挪动嘛，很容易了解。语法环节transform：translate（50px 50px）这里呢我应用的是简写的办法，代表该元素向x轴和y轴挪动50px当然也能够一个一个定义，只须要把transltate改成transltateX或Y，记住这里的x和y要大写，而且一旦独自定义那么括号里的值只能是一个，至于用两个会怎么样我不晓得，因为我没那么傻。而且能写一行我是不会想着多写一行的。translate这个就是代表平移了rotate这个是旋转，我同样用的是简写。想要不简写的参考平移就行。xxdeg代表旋转角度哦对，如果是间接加平移的话是会间接产生间隔的，想要察看分明的话加个过渡，这个我上一篇有提到如何应用。接下来咱们说一说旋转：也先进行一个介绍，旋转的话必定是要依据一个点或者一条线旋转对吧？然而当初是在2d里，所以咱们先介绍一下点上的旋转，话不多说，上案例css局部：.bigbox{ width: 500px; height: 600px; border:1px solid #f00; margin: auto;}.box { width: 200px; height: 400px; position: relative; margin-top: 100px; margin: auto; }.box img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition:all 2s; transform-origin: center bottom; }.bigbox:hover img:nth-child(1) { transform:rotate(-60deg);}.bigbox:hover img:nth-child(2) { transform:rotate(-50deg);}.bigbox:hover img:nth-child(3) { transform:rotate(-40deg);}.bigbox:hover img:nth-child(4) { transform:rotate(-30deg);}.bigbox:hover img:nth-child(5) { transform:rotate(-20deg);}.bigbox:hover img:nth-child(6) { transform:rotate(-10deg);}.bigbox:hover img:nth-child(8) { transform:rotate(10deg);}.bigbox:hover img:nth-child(9) { transform:rotate(20deg);}.bigbox:hover img:nth-child(10) { transform:rotate(30deg);}.bigbox:hover img:nth-child(11) { transform:rotate(40deg);}.bigbox:hover img:nth-child(12) { transform:rotate(50deg);}.bigbox:hover img:nth-child(13) { transform:rotate(60deg);}html局部：<div class="bigbox"> ...

3d嘛，就是比2d多一d，简略点讲，就是多了一个z轴。至于3d的平移旋转和缩放，和2d里的属性以及属性值齐全一样。不过须要留神的是想要3d成果，这三个属性不能少第一：加景深perspective: 1200px;留神啊，这个不是加在须要展现的3d元素上，是要加在该元素的父元素下面，个别取值800-1200px，也能够取更多，然而不举荐嗷。第二：transform-style：preserve-3d;这句呢代表在3d空间中展现，如果没加这一句呢，是没有成果的第三：加一个点来察看perspective-origin: 50% 50%;当然啊，这个50%是惯例取值，也能够取别的值。当初讲一下留神点了家喻户晓啊，3d的平移之类的属性和2d里的齐全一样那么上面的知识点要记住：1.transform: translateX(像素值); 程度方向挪动，正值向右，负值向左 transform: translateY(像素值); 垂直方向挪动，正值向下，负值向上 transform: translateZ(像素值); z轴方向挪动，正值间隔眼睛更近，负值间隔眼睛更远 transform: translate3d(程度方向像素值, 垂直方向像素值, z轴方向像素值); 简写 我更偏差与这个简写然而想要用简写要熟记正负值的挪动方向哦。

要依据子觉父相，也就是子元素加相对定位，给父元素加一个绝对定位，一个position：relative；就行如果不给父元素加绝对定位，那么加了相对定位的子元素会始终向外寻找增加了绝对定位的元素，如果没有会以body来定位。固定定位会脱离文档流，如果产生了高度塌陷就是这个起因导致的

要依据子觉父相，也就是子元素加相对定位，给父元素加一个绝对定位，一个position：relative；就行如果不给父元素加绝对定位，那么加了相对定位的子元素会始终向外寻找增加了绝对定位的元素，如果没有会以body来定位。固定定位会脱离文档流，如果产生了高度塌陷就是这个起因导致的

过渡就是给css单个或者是多个的属性产生的变动过程增加一个过程，时长的规定看我的项目需要个别应用简写语法transition：all这里的all代表选中所有的属性值 5s s代表秒，也能够用ms，1秒等于1000ms，所以不举荐用ms个别写上transition：all 5s；就能够有一个简略的过渡了，依据需要写过渡应该在哪里，如果是鼠标指向的话就加在hover的上面，如果过渡后须要回来也有过渡动画就须要加在须要过渡动画的元素里例:div{width: 100px;height: 100px;border：1px solid red；transition：all 3s；}div：hover{left：300px；}这样就是鼠标指向后有一个过渡，也有一个回来的过渡动画。div{width: 100px;height: 100px;border：1px solid red；}div：hover{left：300px；transition：all 3s；}像这样增加就是一旦鼠标移开该div，div会立马回到原点。过渡动画的减速过程是能够本人定义的，一共是七种。例：css局部： ul{ list-style-type: none; padding: 0;margin: 0; border: 1px solid #f00;}ul li{ width: 200px; height: 20px; line-height: 30px; background-color:#f00; margin: 2px 0; }ul li:nth-child(1):hover{ width: 500px; transition: all 5s linear;}ul li:nth-child(2):hover{ width: 500px; transition: all 5s ease;}ul li:nth-child(3):hover{ width: 500px; transition: all 5s ease-in;}ul li:nth-child(4):hover{ width: 500px; transition: all 5s ease-out;}ul li:nth-child(5):hover{ width: 500px; transition: all 5s ease-in-out;}ul li:nth-child(6):hover{ /* 贝塞尔曲线，是利用一些比较复杂的数学公式 */ width: 500px; transition: all 5s cubic-bezier(0.075, 1.650, 0.165, -0.600);}ul li:nth-child(7):hover{ width: 500px; transition: all 5s steps(7);}html局部： <ul> ...

简略介绍一下动画。就是多个过渡，够不够简略？然而语法和过渡是齐全不一样的哦，这个要记住。动画是定义多个关键帧来实现的例：@keyframes zhuan{ 0%{ }25%{ }50%{ }75%{ }100%{ }}这里呢就定义的四个关键帧了，然而会说那个zhuan是什么？这个就要用到应用动画了animation：zhuan 5s infinite这里三句就代表了动画名字是zhuan 5秒实现该动画过程 有限循环动画过程这是一个简写，个别咱们能用到的就是这三个值然而animation所领有的值是十分多的例：animation-name: 定义好的动画名称；animation-duration: 动画所需的时长; 单位能够是s秒，也能够是ms毫秒 -- 1s = 1000ms animation-timing-function: 速度形式;animation-delay: 提早的工夫;animation-iteration-count: 播放次数(数字)或infinite(有限次);animation-direction: normal/alternate; normal示意正向播放，alternate示意第一次正向播放，第二次就是反向播放，第三次又是正向播放 animation-fill-mode: forwards/none; 动画停在最初一帧或开始地位 animation-play-state: paused/running; 规定动画正在运行或暂停，默认为running 我个别应用简写，也就是下面写到的，个别取三个值就够了，别的看我的项目需要，值得注意一点，这个简写代表的值不是固定的，你取什么值就会执行什么值。

浮动！你是什么鬼！咳咳，明天来写一下CSS里的浮动，就是float，顾名思义，给某个元素加上浮动属性，就是飘起来了。举个例子，文档流就是一个房子里，房子里有一些砖块，有的砖块加了浮动属性，它就飘起来了，飘起来后它本来的地位就会被没飘动的砖块代替，从屋顶往下看砖块，飘动的砖块可能会笼罩未飘动的砖块，就像把房子宰割成两层，隔层是通明的，最底下一层是一般文档流，飘动后就脱离了文档流，说的还是有些形象，（下图红色的砖块尺寸过大所以笼罩了根底文档流的元素） [灵魂画师哭了:( ] Talk is cheap. Show me the code.设置了三个盒子（div），div是块状元素，所以每个盒子独占一行，顺次向下排列。 <html> <head> <style>body { background-color: gray; } .red { width: 200px; height: 200px; background-color: red; } .blue { width: 100px; height: 100px; background-color: blue; } .green{ width: 50px; height: 50px; background-color: green; } </style> </head> <body> <div class="red"></div> <div class="blue"></div> <div class="green"></div> </body></html>效果图： 扩大1：给红色盒子加上浮动，让它飘起来。（float：left） 诶！蓝色盒子呢！别着急，想想结尾的例子，红色盒子尺寸比蓝色要大，而且红色盒子飘起来了！所以蓝色盒子和绿色盒子就往上挪动，加上红色盒子太大把蓝色盒子笼罩了！细心地同学会发现绿色盒子也被笼罩了一部分。咱们把红色盒子加上透明度看看蓝色盒子的真身吧！给红色盒子加了款式 opacity:0.2。举个例子：原本小红 ，小蓝和小绿排队买货色（div块状元素），忽然小红说我不买了（float脱离文档流），而后小蓝和小绿就趁势补位了。这个例子只能阐明蓝盒子和绿盒子补位。再举个例子：原本小红，小蓝和小绿是共事，上下级关系是小红>小蓝>小绿，忽然有一天小红升职了（float），原本就只治理小蓝和小绿，当初要脱离原来的部门做更高的治理(脱离文档流)，而后小蓝和小绿就趁势补位。 效果图： 扩大2：给三个div都设置浮动（每个div的css款式里加float：left）效果图： 给大家都加上左浮动后，大家就顺次浮起来靠左排列。 扩大3：给蓝色和绿色加上浮动，红色不动。 诶不是说好了脱离文档流吗！蓝色和绿色为啥不上浮笼罩红色！因为有一个束缚，红色在蓝色的后面，如果红色没有设置浮动，而上面的元素设置了浮动，蓝色就被红色顶着了，无奈飘动。 扩大4：给红色和绿色加上浮动红色和绿色加了浮动后，蓝色就上移了，绿色仅挨着红色浮动，因为蓝色还是个div块状元素，所以绿色在上面。效果图： 那么问题来了，怎么革除浮动呢？等等作者，逻辑不对啊，为什么要革除浮动啊，浮动会有什么害处吗？当然啦。浮动导致的结果：（1）因为浮动元素脱离了文档流，所以父元素的高度无奈被撑开，影响了与父元素同级的元素（2）与浮动元素同级的非浮动元素会追随其后，因为浮动元素脱离文档流不占据原来的地位（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也须要浮动，否则容易影响页面的构造显示 咱们说的革除浮动是指革除因为子元素浮动带来父元素高度塌陷的影响。办法一：在父元素的最初减少一个冗余的元素其款式并设置为clear:both三个元素都设置浮动的代码：原来的不浮动的时候，三个盒子垂直排列 <html> <head> <style> body { background-color: gray; } .red { width: 200px; height: 120px; background-color: red; } .father1 { width: 700px; margin: 0 auto; border: 10px solid blueviolet; } .blue { width: 100px; height: 100px; background-color: blue; } .green { width: 50px; height: 50px; background-color: green; } </style> </head> <body> <div class="father1"> <div class="red"></div> <div class="blue"></div> <div class="green"></div> </div> </body></html>效果图： 上面咱们给三个盒子加上浮动（三个盒子的款式里加上：float：left）效果图： 瞧瞧父元素失去了价值！诶！父元素不是须要蕴含子元素的嘛！？因为三个盒子脱离了文档流，相当于父元素里的子元素跑了，边框就合并了。解决方案一：在父元素的最初减少一个冗余的元素其款式并设置为clear:both ...

之前看过一篇文章：CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪成果，十分奇妙，将 CSS 动画融入文本外部，次要利用了混合模式，成果是这样的 为什么要用到混合模式呢？因为这是文本，文本外部不可能放入 HTML 节点，所以上面介绍将另一种形式，在 HTML 齐全受限的状况下，借助 SVG foreignObject 也能很轻松的实现这一成果，而且会有更好的成果，一起看看吧 一、SVG foreignObject 是什么首先， foreignObject 是 SVG 中的一个元素，容许蕴含来自不同的XML命名空间的元素。在浏览器的上下文中，个别是 XHTML / HTML。什么意思呢？比方通常咱们在各种设计软件中导出的 SVG 可能是这样 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.1785 10.9999C2.1785 6.12799..." fill="#7A7A7A"/></svg>如果间接另存为 map.svg，而后放到浏览器中 留神到SVG 有个属性xmlns，这个就是命名空间，它规定这段内容在浏览器中是如何渲染的，这里的http://www.w3.org/2000/svg 就是 SVG 的命名空间。如果没有这个属性，浏览器中就间接以一般 xml 文档渲染了，如下 不过有一种状况能够不必指定这个命名空间：如果咱们的SVG文件是间接内联在XHTML页面中或者间接以.html作为后缀名，是能够不指定命名空间的，浏览器会自动识别。 那么，回到这里，foreignObject 能够干什么呢？置信你曾经猜到了，就是能够在 SVG 外部渲染 HTML 标签！具体的做法就是，给foreignObject 外部加上 xml 的命名空间就能够了，例如 <svg xmlns="http://www.w3.org/2000/svg"> <foreignObject width="100%" height="100%"> <body xmlns="http://www.w3.org/1999/xhtml"> <style> p{ color: red } </style> <p>xboxyan</p> </body> </foreignObject></svg>留神，body标签有一个属性xmlns="http://www.w3.org/1999/xhtml"，这个就是html的命名空间，渲染后果如下 ...

明天解析来自John Rosato的一篇文章“What is document flow?”，什么是文档流？ 结尾是摘要： 文档流是由 CSS 定位语句定义的页面元素的排列，以及 HTML 元素的程序。 也就是说，每个元素如何占用空间以及其余元素如何相应地定位本人。简略点说，就是 document flow 批示了页面上的元素如何去排列。 接着，讲到了 document flow 的三种影响元素地位的办法： 显示类型Float定位显示类型那么，第一种就是显示类型 HTML 元素最后按其显示类型定位。 这种显示类型决定了其余元素是否可能位于它们旁边，以及填充、边距和其余 CSS 属性如何影响它。 两种最重要的显示类型是： 块级内联陈词滥调的block和inline，这里不再开展，可参考鹏哥儿写的一篇总结性文章：inline, block, inline-block区别 [2] Float接下来就是float 一个float是在以后行向左或向右挪动的框。 浮动（或“浮动”或“浮动”框）最乏味的特色是内容可能沿其一侧流动（或被“革除”属性禁止这样做）。 内容从左侧浮动框的右侧向下流动，并从右侧浮动框的左侧向下流动。 — W3标准Float不太好翻译，第一句结尾的float是名词模式，还是称为“浮动框”更贴切一点！ 浮动框是一种CSS属性，它容许你利用在一个块级元素上，能够把这个块级元素推到父类块的左边界或者右边界。这十分有用，因为它容许你去应用块级元素所提供的所有益处，同时又能解脱无奈搁置每个块级元素在同一水平线上的次要限度。然鹅，应用浮动框须要衡量取舍。对于还未呈现flex、grid布局时，想要把多个块级元素放在同一行，除了用table，就是应用这个float了。 浮动元素来到了失常的文档流。一个周知的问题是当多个子元素都为浮动时，造成父类块高度的失落。失常来说，一个父类块的高度和宽度会拉伸去适应内容，然鹅浮动的内容不在这种状况中。父类容器的高度和宽度不会被浮动元素所批改。谢天谢地，这个臭名远扬的问题还很多解决方案，比方clearfix。你能够在这里读到更多对于clearfix。大量的网格零碎应用float来设计，它的确是一个网站的架构骨干。对于clearfix，实质上也是利用BFC[3]。 定位 这里有几个能够应该在元素上的定位值。应该在所有元素上的初始值是static，一个在“在流”类型，咱们将在之后谈到。 定位值： 值：static | relative | absolute | fixed | inherit初始值：static定位偏移属性 属性：top | right | bottom | left这里有两组定位属性 在流脱流在流 这里有两种在流定位值，他们别离是static和relative static在之前有提到，元素默认应用在流值static。这象征这他们失常体现，作为每一个元素的体现类型布局。他们同样不能与脱流元素相互作用。 relative定位和static十分类似，当次要是不同是他们可能和脱流元素交换。一个relative元素能够用作脱流子元素的容器。脱流定位元素会遵循relative元素的边界。很酷对吧？relative定位元素，不像static，同样能够应用定位偏移属性来去挪动它。当应用这些属性时，relative定位元素盒会依然占据它原有的定位，然而内容会变为脱流。脱流 这里有两种脱流定位属性，他们是absolute和fixed。 在absolute定位模型中，一个盒子齐全从失常文档流中移除（它不会影响前面的兄弟元素）并且调配一个绝对蕴含块的定位。— W3标准 absolute定位元素带来了层级的概念。设想一下元素只是页面上不同的小纸片而已，你能够重叠这些页面小纸片在彼此的顶部，这样一张小纸片会叠加在另外一张小纸片下面。W3标准同样提到它恪守一个蕴含块。这个蕴含块不是它的间接父块。在之前提到的，所有HTML元素都是static定位，不会影响脱流的元素。默认地，这个蕴含快是body标签。如果你心愿去创立一个HTML元素蕴含块，那么它应该是一个除了static之外的任意一个定位元素（fixed, relative, 或者absolute）。这里屡次提到蕴含块(Containing Block)，能够参考鹏哥儿写的文章：[司空见惯的CSS蕴含块]() [4] ...

实现左右居中：办法一： margin: 0 auto;办法二： display: flex;justify-content: center;办法三：（特定状况，比方标签内容居中，文字按钮内容居中） padding: 0 20px;办法四： position: relative;transform: translateX(-50%);办法五： position: relative;top: 50%;margin-left: -20px;办法六： display: gird;justify-items: center;办法七： display: table-cell;text-align: center;实现高低居中：办法一： margin auto 0;办法二： display: flex;align-items: center;办法三： display: gird;align-items: center;办法四： padding: 20px 0;办法五： position: relative;transform: translateY(50%);办法六： position: relative;top: 50%;margin-top: -20px;办法七： display: table-cell;vertical-align: middle;办法八： line-height: 40px;实现上下左右居中：办法一： position: relative;top: 0;left: 0;bootom: 0;right: 0;办法二： display: flex;align-items: center;justify-content: center;办法三： display: gird;align-items: center;justify-items: center;办法四： display: table-cell;text-align: center;vertical-align: middle;办法五： padding: 20px 20px;办法六： margin: 0 auto;line-height: 40px;

点击链接查看成果https://ihope_top.gitee.io/my... 本文章已同步公布到公众号：百里青山 前言前两天翻材料，找到了刚开始学习前端的时候学习的一个小案例，用css去画一个转动的表盘，也不晓得大家都写过没有，样子如下图所示 明天把这个小案例分享给大家，这个成果原案例是齐全用css实现的，因为表针转动都有法则可循，设置一个定时的动画就行，我为了简化代码量，并且能够获取以后的工夫，所以用js优化了一下，因为案例很小，所以就不必框架了，间接原生走起，因为这种简略的文章次要面向初学者，所以会说的具体一点 开发初始化第一步，找一个文件夹，建设 index.html ， 而后引入一个 style.css 并初始化一些款式 表盘制作接下来咱们来制作表盘 面板首先是面板局部，面板的html局部咱们就只用一个节点就够了，其余都用css来实现 <div id="watch"> <!-- 表盘 --> <div class="frame-face"></div> </div>首先咱们给表盘一个根底款式来确定根本构造，再加点突变和暗影，制作一点立体感 #watch .frame-face { position: relative; width: 30em; height: 30em; margin: 2em auto; border-radius: 15em; background: -webkit-linear-gradient(top, #f9f9f9, #666); background: -moz-linear-gradient(top, #f9f9f9, #666); background: linear-gradient(top, #f9f9f9, #666); box-shadow: 0.5em 0.5em 4em rgba(0, 0, 0, 0.8);} 之后咱们利用伪类元素，画一个径向突变，来营造一个层次感，让表盘的立体感更加强烈 #watch .frame-face:before { content: ''; width: 29.4em; height: 29.4em; border-radius: 14.7em; position: absolute; top: .3em; left: .3em; background: -webkit-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%); background: -moz-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%); background: radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);} ...

原由 & 前言如果你没有据说过tailwindcss，请先return，本篇不议论tailwindcss是什么怎么用，而是怎么优雅的应用。如果你据说过，请持续浏览并思考应用tailwindcss，因为看完之后： 开发上：可能为你甚至你们的前端团队节俭很多写款式的工夫，也能让你或者你们的我的项目开发体验有很大晋升生产上：你们的我的项目打进去的包体积中的款式代码占比将忽然骤降而后趋于不变。你真的须要css预处理器吗可能大多数同学在开发或者保护一个我的项目的时候，我的项目中应该都应用了诸如scss、less、stylus...等css预处理语言，甚至有的单个我的项目中应用了多种预处理语言，可能是为了应用变量，可能是为了复用款式不便，也可能是为了写一些函数不便咱们对一些款式值做一些解决，然而大部分时候咱们是为了能够写嵌套款式，总之是为了进步咱们的开发效率，这所有在tailwindcss呈现之前都是那么的美妙，直到咱们遇到了tailwindcss，你会发现你甚至连stylelint都不须要配置，因为你可能基本不必写css How & Which Versiontailwindcss v2 vs v3如果你的我的项目须要兼容IE，请应用v2版本，如果不须要请果决上v3版本 具体如何在你的我的项目中应用tailwindcss，请务必查看官网文档v2中文 v3English，举荐基于postcss来增加 装置vscode插件如果你决定应用tailwindcss，装置bradlc.vscode-tailwindcss这个官网提供的插件，能够提供提醒、补全、查看理论设置的款式的能力 配置你的tailwind如果你曾经依照文档教程创立了tailwind.config.js文件，那么接下来咱们要对这个文件进行进一步的配置 PC端我的项目如果你的我的项目是只针对PC端网页的，可能你只须要问你们的设计同学你们我的项目中的一些根底的设计准则有哪些，比方会应用的一些主题色彩，字体大小、梯度、内外边距大小、梯度，罕用的边框圆角大小、梯度，边框宽度、梯度，如果设计同学没有这些准则，就协商一下这些根本准则，比方都会用到哪些色彩啊，边距单位个别依照4px的倍数来设置啊…… 色彩如果设计同学提供了我的项目中的主题色，并且有语义化的名称，比方相似success，info，warning这种语义化的色彩，咱们就能够基于这些来配置咱们的色彩，包含但不限于字体、背景、边框、暗影色彩(配置完之后间接能够应用相似text-success的类来设置色彩)，能够替换css预处理器的变量性能 // tailwindcss v3const colors = { 'success': '#654321'， 'info': '#123456', 'warning': '#666666', // ...}module.exports = { content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { // ... colors, }, plugins: [],}// tailwindcss v2const colors = { 'success': '#654321'， 'info': '#123456', 'warning': '#666666', // ...}module.exports = { content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { // ... textColor: colors, backgroundColor: colors, borderColor: colors, }, plugins: [],}v2和v3版本的设置有些许区别，v2具体的设置什么类别的色彩须要特地指定。 ...

display和visbility顾名思义都是为了暗藏页面元素，上面来看看二者的区别。opacity最初再说。 一、display：none1、给元素设置了display:none属性后，该元素就暗藏了，占用的空间也隐没了。原来是这样： <div> <button>A按钮</button> <button>B按钮</button> <button>C按钮</button> </div> 加了display:none 属性后 <div> <button>A按钮</button> <button style="display: none">B按钮</button> <button>C按钮</button> </div> 事实证明，“B按钮” 占用的空间也隐没了。 2、给父元素设置display:none属性后，子属性也跟着暗藏。原来的样子： <div> <button>A按钮</button> <button>B按钮</button> <button>C按钮</button> <ol> <li>hello</li> <li>hello2</li> </ol> </div> 给父元素加上display:none后，子元素都隐没了 <div> <button>A按钮</button> <button>B按钮</button> <button>C按钮</button> <ol style="display: none"> <li>hello</li> <li>hello2</li> </ol> </div> 即便给子元素加上block也不会显示。 <div> <button>A按钮</button> <button>B按钮</button> <button>C按钮</button> <ol style="display: none"> <li style="display: block">hello</li> <li>hello2</li> </ol> </div>3、因为display:none后元素就隐没了，在li标签下会影响计数。比方原来的代码： <div> <button>A按钮</button> <button>B按钮</button> <button>C按钮</button> <ol> <li>hello</li> <li>hello2</li> <li>hello3</li> </ol> </div>给子元素加上暗藏： <div> <button>A按钮</button> <button>B按钮</button> <button>C按钮</button> <ol> <li>hello</li> <li style="display: none">hello2</li> <li>hello3</li> </ol> </div> ...

bootstrap 3原生的下拉菜单（DropDown）组件默认不反对鼠标移上去就开展下拉列表,只能点击后才显示.为了解决这个问题,我在网上无心发现了一个插件bootstrap-dropdown-hover,然而用起来很繁琐.感兴趣的敌人能够自行搜寻一下.相比拟插件来说 这三行代码用起来更香: .dropdown:hover .dropdown-menu { display: block;}html代码: <li class="nav-item ml-2 btn-group-vertical dropdown" id="underline"> <a class="nav-link" data-toggle="dropdown" href="#"><i class="ti-hand-point-down"></i> 与我相干</a> <ul class="dropdown-menu"> <li><a class="nav-link text-center" th:href="@{/contact}"> 与我分割</a></li> <li><a class="nav-link text-center" th:href="@{/about}"><i class="ti-crown"></i> 对于作者</a></li> </ul> </li>利用成果:

啥也不必多说，间接入正题，首发必定是本人的公众号了：https://mp.weixin.qq.com/s/_p... 至于代码么有具体的细化，只是无聊的人在做无聊的事，图个开心。代码是很长，优化的空间也是有的。 <div id="bingdundun"> <div class="body"></div> <div class="earLeft"></div> <div class="earRight"></div> <div class="face"></div> <div class="eyeLeft"></div> <div class="eyeLeft eyeRight"></div> <div class="nose"></div> <div class="mouth"></div> <div class="handLeft"></div> <div class="handRight"></div> <div class="footerLeft"></div> <div class="footerLeft footerRight"></div></div>在 CSS 局部中，用的不少 border-radius 的个性。 #bingdundun { position: relative; width: 400px; height: 400px;}#bingdundun .body { position: absolute; top: 76px; left: 93px; width: 211px; height: 237px; border-radius: 91px 105px 74px 84px/128px 119px 129px 114px; background-color: #fff; border: 5px solid #393939; box-sizing: border-box; z-index: 1;}#bingdundun .earLeft { position: absolute; top: 77px; left: 113px; width: 43px; height: 66px; transform: rotate(343deg); background-color: #393939; border-radius: 91px 52px 74px 84px/128px 68px 129px 114px;}#bingdundun .earRight { position: absolute; top: 76px; left: 243px; width: 39px; height: 50px; transform: rotate(190deg); background-color: #393939; border-radius: 7px 52px 74px 84px/33px 68px 129px 114px;}#bingdundun .face { position: absolute; top: 108px; left: 117px; width: 164px; height: 131px; border-radius: 98px 124px 82px 84px/104px 93px 66px 70px; background-color: #fff; box-shadow: rgb(102, 201, 253) 0 0 0 3px, rgb(173, 35, 96) 0 0 0 5px, rgb(81, 122, 183) 0 0 0 7px, rgb(250, 198, 70) 0 0 0 9px, rgb(128, 201, 111) 0 0 0 12px; z-index: 2;}#bingdundun .eyeLeft { position: absolute; top: 132px; left: 133px; width: 47px; height: 65px; transform: rotate(45deg); background-color: rgb(57, 56, 63); border-radius: 69px 62px 69px 69px/97px 93px 97px 97px; z-index: 4;}#bingdundun .eyeLeft::before { content: ""; position: absolute; top: 13px; left: 15px; width: 23px; height: 23px; border-radius: 50%; border: 3px solid #fff; background-color: rgb(60, 60, 57); z-index: 5; box-sizing: border-box;}#bingdundun .eyeLeft::after { content: ""; position: absolute; top: 18px; left: 25px; width: 6px; height: 6px; z-index: 6; border-radius: 50%; background-color: #fff; z-index: 6;}#bingdundun .eyeRight { left: 218px; transform: rotate(-45deg);}#bingdundun .eyeRight::before { top: 10px; left: 9px;}#bingdundun .eyeRight::after { top: 15px; left: 16px;}#bingdundun .nose { position: absolute; top: 175px; left: 188px; width: 26px; height: 14px; transform: rotate(180deg); z-index: 6; overflow: hidden;}#bingdundun .nose::after { width: 20px; height: 20px; background-color: #393939; border-radius: 6px 9px 9px 16px / 6px 8px 6px 6px; content: ""; position: absolute; top: -1px; left: 0; transform-origin: top left; transform: rotate(45deg) translate3d(50%, -50%, 0); box-sizing: border-box;}#bingdundun .mouth { position: absolute; top: 192px; left: 176px; width: 50px; height: 35px; background-color: #393939; border-radius: 50% 48% 60% / 48% 45%; transform: rotate(1deg); z-index: 5;}#bingdundun .mouth::before { content: ""; position: absolute; top: -12px; left: 4px; width: 35px; height: 20px; border-radius: 50%; background-color: #fff; z-index: 1;}#bingdundun .mouth::after { content: ""; position: absolute; bottom: 3px; left: 7px; width: 36px; height: 13px; background-color: rgb(163, 51, 51); border-radius: 50% 48% 80% 80% / 68% 45% 80% 60%;}#bingdundun .handLeft { position: absolute; top: 203px; left: 83px; width: 40px; height: 70px; background-color: #393939; transform: rotate(30deg);}#bingdundun .handLeft::after { content: ""; position: absolute; bottom: -22px; left: 0; width: 41px; height: 40px; background-color: #393939; border-radius: 50%;}#bingdundun .handRight { position: absolute; top: 160px; left: 270px; width: 40px; height: 70px; background-color: #393939; border-radius: 44px 0 80px / 100px 30px 100px; transform: rotate(40deg); transform-origin: bottom center;}#bingdundun .handRight::after { content: "❤"; position: absolute; top: -14px; left: 5px; width: 35px; height: 35px; font-size: 20px; text-align: center; letter-spacing: -2px; color: rgb(163, 51, 51); background-color: #393939; border-radius: 40px 40px 55px / 100px 40px 100px 0; transform: rotate(-55deg); transform-origin: center;}#bingdundun .footerLeft { position: absolute; top: 300px; left: 142px; width: 40px; height: 40px; background-color: #393939; border-radius: 0 50px / 0 18px 0 0; z-index: 7;}#bingdundun .footerLeft::before { content: ""; position: absolute; bottom: -14px; left: 0; width: 42px; height: 20px; background-color: #393939; border-radius: 0 14px 4px;}#bingdundun .footerRight { left: 220px; transform: rotateY(180deg);}