Home » Categories

Css

关于css:CSS选择器常见的五种类型

根本选择器 选择器名称备注class类选择器类元素idid选择器ID元素*通用元素选择器任何元素element元素选择器HTML元素组合选择器 选择器名称备注A,B多元素选择器同时匹配A元素或B元素A B后辈选择器匹配A元素所有的后辈B元素A>B子元素选择器匹配A元素的所有间接子元素A+B间接相邻选择器匹配A元素之后的相邻的同级元素BA~B一般相邻选择器匹配A元素之后的同级元素B属性选择器 选择器名称备注[attribute][target]抉择所有带有target属性元素[attribute=value][target=-blank]抉择所有应用target="-blank"的元素[attribute~=value][title~=flower]抉择题目属性蕴含单词"flower"的所有元素[attribute ^= language][lang ^= en]抉择一个lang属性的起始值="EN"的所有元素[attribute $= language][lang $= en]抉择一个lang属性的结尾值="EN"的所有元素[attribute *= language][lang *= en]抉择一个lang属性的蕴含"EN"的所有元素伪类选择器 选择器名称备注:linka:link抉择所有未拜访链接:visiteda:visited抉择所有拜访过的链接:hovera:hover把鼠标放在链接上的状态:activea:active抉择正在流动链接:focusinput:focus抉择元素输出后具备焦点伪元素选择器 选择器名称备注::before/:before在被选元素前插入内容。须要应用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。::after/:after在选被元素后插入内容其用法和个性与:before类似。::first-letter/:first-letter匹配元素中文本的首字母。被润饰的首字母不在文档树中。::first-line/:first-line匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。

September 9, 2020 · 1 min · jiezi

关于css:Flex布局实现一部分元素左对齐一部分右对齐

单个Flex容器内有三个内联的靠右对齐的按钮，成果如图： 如想让红色按钮靠左，而另外两个蓝色按钮放弃靠右 这个时候咱们能够为红色按钮独自加上：margin-right: auto; 成果如图： 此成果的原理是： margin-right不设置的话默认是0，父容器width定宽之后，margin-right取值为 auto ，则主动占据了残余的全副宽度

September 2, 2020 · 1 min · jiezi

关于css:CSS中flex和inlineflex的区别

两者的区别形容： flex： 将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示一句话来形容就是 当Flex Box 容器没有设置宽度大小限度时，当display 指定为 flex 时，FlexBox 的宽度会填充父容器，当display指定为 inline-flex 时，FlexBox的宽度会包裹子Item，如下图所示：对应的代码如下所示： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*Flex 容器*/ .flex__container { display: inline-flex; background-color: gray; } /*Flex 子 Item */ .flex__item { width: 50px; height: 50px; background-color: aqua; border: 1px solid black; } </style></head><body><!--Flex容器--><div class="flex__container"> <!--Flex容器中的子Item--> <div class="flex__item"></div> <div class="flex__item"></div> <div class="flex__item"></div> <div class="flex__item"></div></div></body></html>结束

August 30, 2020 · 1 min · jiezi

关于css:CSS单位的大概描述

第一个：px毫无疑问，当年第一次学习的单位就是1px，俗称像素。如果有人用过PS就应该晓得图片的方格就是一个一个的px拼起来的 第二个：rem这个rem其实取决于html，他的价值就在于你用的时候都是20px或者25px。当初你用的时候间接一个2rem或者2.5rem html{ font-size:10px}span{ font-size:1rem}

August 29, 2020 · 1 min · jiezi

关于css:CSS-入门

本教程咱们来学习根本的 CSS 常识，在学习 CSS 之前，大家必定曾经学习过了 HTML，在学习 HTML 的时候咱们就曾经讲到过，有很多的标签和属性其实都能间接通过 CSS 款式来代替实现，并且通过 CSS 款式来实现会更加不便。 绝对于咱们平时看到的网页来说，如果仅仅通过 HTML 代码是无奈达到某些比较复杂视觉效果的，然而如果配合 CSS 就能很容易实现啦。 CSS 介绍CSS 的英文全称为 Cascading Style Sheets，翻译成中文叫做层叠样式表，是一种用来体现 HTML 或 XML 等文件款式的计算机语言。CSS 不仅能够动态地润饰网页，还能够配合各种脚本语言动静地对网页各元素进行格式化。 也就是说咱们能够通过 CSS 款式来定义如何显示 HTML 代码，CSS 中的款式多种多样，比如说字体的款式，有设置字体大小、色彩、加粗、歪斜，还有列表款式、背景款式等等，前面咱们都会缓缓的学到。 示例：咱们来看一段 CSS 代码： div{ font-size: 16px; line-height: 20px; color: #ccc; margin: 0; padding: 0;}其实从这段 CSS 代码中，咱们也不难看出 CSS 的语法格局。 CSS 语法格局每个 CSS 款式都是由两个局部组成的，即选择器和申明，而申明又包含属性和属性值，每个申明前面都有一个分号。 语法： 选择器{ 属性1: 属性值1; 属性2: 属性值2; ...}选择器的品种挺多的，像比方标签选择器、类选择器、ID选择器、后辈选择器等，前面咱们都会讲到。 要留神的是，每一句款式申明前面的分号 ; 千万别遗记，特地是有多个款式申明的时候。 ...

August 28, 2020 · 1 min · jiezi

关于css:CSS三栏布局圣杯布局双飞翼布局和flex布局

三栏布局就是两边宽度固定,两头自适应的布局. 扭转浏览器的宽度,两边的宽度不会变,只会两头区域的宽度变长变短. 实现三栏布局的办法有圣杯布局、双飞翼布局和flex布局 圣杯布局成果: html代码:<header>header</header><div class="main clear-fix"> <div class="center">玩亚索</div> <div class="left">睡觉</div> <div class="right">吃饭</div></div><div class="bottom">bottom</div>这里把center区域放在第一位是为了让浏览器先加载center区域. css代码:* { color: #fff;}header { background-color: blue;}.main { background-color: orange; padding: 0 100px; /* 左右两边的padding来搁置left和right区域 */}.left,.center,.right { float: left;}.center { background-color: purple; width: 100%; /* 这会把left和right挤到下一行 */}.left { background-color: red; width: 100px; margin-left: -100%; /* 把left挪动到和center同一行并且右边对齐 */ position: relative; left: -100px; /* 再向左挪动到main的padding区域,就不会挡住center了 */}.right { background-color: grey; width: 100px; margin-left: -100px; /* 把left挪动到和center同一行并且左边对齐 */ position: relative; left: 100px; /* 向右挪动到左边的padding区域*/}footer { background-color: pink;}/* 革除浮动 */.clear-fix::after { content: ""; display: block; clear: both;}负边距margin-left: 只会在包围住你的父元素外部进行挪动 ...

August 27, 2020 · 1 min · jiezi

关于css:test2

test2新出的给FWQ1、设置-Xms=-Xmx 这个不用说了 2、 JVM初始调配的堆内存由-Xms指定，默认是物理内存的1/64；JVM最大调配的堆内存由-Xmx指定，默认是物理内存的1/4。默认空余堆内存小于40%时，JVM就会增大堆直到-Xmx的最大限度；  空余堆内存大于70%时，JVM会缩小堆直到-Xms的最小限度。因而服务器个别设置-Xms、-Xmx 相等以防止在每次GC 后调整堆的大小。  阐明：如果-Xmx 不指定或者指定偏小，利用可能会导致java.lang.OutOfMemory谬误，此谬误来自JVM，不是Throwable的，无奈用try...catch捕获。 3、JVM内存限度(最大值) 首先JVM内存限度于理论的最大物理内存，假如物理内存无限大的话，JVM内存的最大值跟操作系统有很大的关系。简略的说就32位处理器尽管可控内存空间有4GB,然而具体的操作系统会给一个限度，这个限度个别是2GB-3GB（一般来说Windows零碎下为1.5G-2G，Linux零碎下为2G-3G），而64bit以上的处理器就不会有限度了。 验证：应用 java -Xmx512M -version 命令来进行测试，而后逐步的增大 512 的值,如果执行失常就示意指定的内存大小可用，否则会打印错误信息， 在64位的平台上用无论实在内存是2G还是32G，版本jdk1.8.0_101和jdk1.8.0_141，用以上命令测试的可用值都超过了700G。!![计算机生成了可选文字:[root@dididu-apilbinl#java-Xmx7ßßG-versionjavaversion·1．8．6141·Java(TM)SERuntineEnvironment(build1.8．e141一b15）JavaHotSpot（）64-BitServer(build25彐41．blmixedmode)丫ouhavemaitin/var/spoot/mait/root[root@dididu-apilbinl#《] ## 具体操作实例： 以我司的一个RPC服务为例。 BTW：刚上线的新服务，不晓得该设置多大的内存的时候，能够先多设置一点内存，而后依据GC之后的状况来进行剖析。 初始JVM内存参数设置为： Xmx=2G Xms=2G xmn=1G  应用jstat 查看以后的GC状况。如下图：

August 27, 2020 · 1 min · jiezi

关于css:CSS和常用属性总结

CSS总结什么是CSScss是层叠样式表，能够对网页进行润饰和渲染的一门技术。如何在网页中应用CSS1.间接应用（不举荐）起因：标签中的属性很多，会造成页面凌乱，并且不能被复用。通过标签上的style属性给div设置款式 边框:2px solid red 字体大小:26px背景色彩为:pink<div style="border:2px solid red;font-size:26px; background:pink;">这是一个div...</div>`<div style="border:2px solid red;font-size:26px; background:pink;">这是一个div...</div>` 2.在< head>中通过< style>标签引入CSS实现了代码的拆散和复用，初步实现了代码的拆散。<head><style type="text/css"> span{ border:2px solid blue; font-size:22px; background:red; }</style></head>3.应用link连贯援用内部CSS文件在html中引入css文件 <link ref="stylesheet" href="CSS文件门路">xx.css文件 @charset "utf-8"; span{ border:2px solid blue; font-size:22px; background:red; }CSS选择器1.通过元素名（标签名）抉择指定名称所有被选中的标签span{}div{}2.class选择器每个标签都能够设置一个class属性值，通过抉择class的值抉择。 .s1{}.s2{}*如果一个标签的class值由多个 < span class = "s1 s2">，s2的设置会笼罩s1的设置。 3.id选择器也能够依据id的属性值抉择标签。 #d1{}#d2{}4.后辈选择器格局：先人 后辈{} div p{ /* 匹配所有div中的p标签*/}罕用属性文本属性1.text-align:设置元素内的文本内容对齐形式。2.text-decoration：设置文本的下划线形式。3.text-indent：设置文本的缩进，单位：px/%。4.letter-spacing：设置字符间距。5.text-shadow:x（程度位移）x（垂直位移） x（暗影扩散值） x（色彩）;设置文本暗影。字体属性1.font-siez:字体大小。2.font-weight:文字粗细。3.font-family：字体的格局。4.color:字体色彩背景属性background-color：背景色彩。background-img：设置背景图片，url=“”*background-repeat：设置或检索背景图片的排列形式（repeat默认值,repeat-x横向反复，no-repeat没有反复） background-position:设置或检索背景图片地位background: 背景色彩 背景图片 背景图片是否反复 背景图片的地位边框borderborder-width: 2px; -- 设置元素边框的宽度border-style: solid; -- 设置元素边框的款式border-color: red; -- 设置元素边框的色彩 margin: 设置元素的外边距display属性display属性用来设置元素的类型；罕用的值： block：块级元素的默认值 默认状况下独占一行 能够设置宽高 //比方: div/p/h1~h6/form/table 等元素都是块级元素inline：行内元素的默认值 默认状况下多个行内元素能够处在同一行 个别不能设置宽高 //比方: span/input/img/i/b 等元素都是行内元素inline-block：行内块元素 多个元素既能够显示在同一行, 也能够设置宽和高none：示意暗藏元素

August 27, 2020 · 1 min · jiezi

关于css:网站图标开发指南

图标是页面中十分敌对的附加物，许多网站都会应用各种图标来丑化页面款式，给用户提供更好的指引。本文将会和大家一起学习页面图标的发展史，以及以后的最优解决方案。 传统图标字体图标SVG 图标传统图标编写图标最简略的形式就是应用一张图片，如： <html> <body> 图标 <img src="xxx.png" /> </body></html>我在刚开始写页面的时候就是这样做的，感觉 so easy，直到业务变得越来越简单，我就不得不思考以下几个问题： 图标须要适配多个客户端图标太多须要优化图标须要动静批改色彩对于适配多个客户端的问题，设计师们通常都会给咱们提供多个尺寸的设计图（@1x 图、@2x 图），于是咱们就能够依据不同的客户端来抉择对应尺寸的图片。 通常应用形式是：媒体类型 或者 配置 srcset 。 例如： <html> <head> <style> /* 应用媒体查问，为每个端适配不同尺寸的图片 */ .@media screen and (max-width: 300px) { .img { background-image: url("1x.png"); } } .@media screen and (max-width: 600px) { .img { background-image: url("2x.png"); } } </style> </head> <body> <!-- srcset 能够让不同的客户端主动匹配适合尺寸的图片--> <!-- 如：当设施像素比为 2 时，浏览器会主动抉择 2x 图进行渲染--> <img src="1x.png" srcset="1x.png 1x, 2x.png 2x" /> </body></html>通过下面的办法，多客户端适配问题解决了，但咱们应用了多张内容雷同、尺寸不同的图标，这无疑减少了图片的数量。 ...

August 27, 2020 · 3 min · jiezi

关于css:lineheight的其中之一作用

html构造： <div class="money-options active"> <p class="txt">月会员</p> <p class="money">￥XX</p> <p class="times">1个月</p> </div>css构造： .money-options { display: inline-block; width: 106px; height: 108px; /*line-height: 1;*/ /*没有line-height的时候*/ margin-right: 10px; border: 1px solid #D7D7D7; border-radius: 8px; text-align: center;}.money-options .txt { padding: 18.5px 0 0 0; color: #656565; font-size: 13px;}.money-options .money { padding: 15.5px 0 18px 0; color: #F7B529; font-size: 20px;}.money-options .times { margin: 0 0 12.5px 0; color: #999999; font-size: 11px;}解释：如果在一个div设置的高度而没有设置line-height，那么这个div外面的内容就会撑进来，加上line-height：1后，那么外面的padding就不会乱撑开，就会放在div外面了

August 24, 2020 · 1 min · jiezi

关于css:CSS样式全部属性和难记忆点归纳

有一些CSS的冷门款式太多了，然而又想记住，能够看这篇文章，这篇文章包含了一些css须要记忆的一些属性，不包含平时常常应用的（置信你曾经接触的太多了） 伪类选择器:link未拜访:visited已拜访:hover鼠标挪动到链接上:active选定的链接文字暗影简写：text-shadow:程度地位 垂直地位 含糊间隔 暗影色彩; text-indent：首行缩进 ; word-spacing: 单词间距;letter-spacing:字间距;link答疑type="text/css"在link中能够疏忽不写，写了比拟标准,rel定义以后文档和被链接文档之间的关系，在这里须要指定为“stylesheet”，示意被链接的文档是一个款式文件 行内元素&块级元素行内元素：高宽有效，程度的padding和margin无效，但垂直方向有效 常见的行内元素：<a> <strong> <b> <i> <del> <s> <ins> <u> <span> 块级元素：高宽无效，都能够自定义 选择器交加选择器p.one{color:red;font-size:14px;}是“即...又...的意思”，p.one抉择的是类名为.one的 段落标签 并集选择器(逗号宰割).one,p,#test{color:red;}伪元素选择器E::first-letter 文本的第一个单纯或字 E::first-line 文本第一行 E::selection 扭转文本选中的款式（有点好用） E::befor和E::after 该元素是行内元素 联合content应用 “:”和“::”在于辨别伪类和伪元素背景（background）background-image:none/url(url)属性作用 background-color背景色彩色值/inherit（继承父元素）/transparent(默认)background-image背景图片地址none/url()background-repeat是否平铺repeat/no-repeat/repeat-y/repeat-xbackground-position背景地位length length (百分数) / positon postion（top/center/bottom/left/right）background-attachment背景是固定还是滚动scroll(滚动) fixed(固定)背景的合写（复合属性） background:背景色彩 背景图片地址 背景平铺 背景滚动 背景地位; background: transparent url(*1111.jpg*) no-repeat scroll 50% 0;background-size设置图片尺寸px 百分比/cover(保障填充斥背景区域，溢出局部暗藏)/contain(保障图片始终残缺显示在背景区域) 例如：background-size:50%;比原来小一半个别应用习惯(参考): .img { width: 400px; height: 400px; border: 1px solid #fff; background: #fff url(1111.jpg) no-repeat; background-position: 30px 50px; background-size: 200px 210px; }文本润饰`text-decoration` 润饰文本值形容none默认underline定义文本下的一条线。下划线自带的overline定义文本上的一条线line-through定义穿过文本的一条线盒子模型应该都比拟相熟，只讲几个比拟容易遗记的属性 ...

August 24, 2020 · 2 min · jiezi

关于css:css-样式总结

始终记录更新~css 文字边框款式 -webkit-text-fill-color: #fff; // 文字外部色彩 -webkit-text-stroke-color: #FF3E16; // 文字边框色彩 -webkit-text-stroke-width: 1px; // 文字边界宽度css 块级元素自适应文字宽度 width: fit-content; width: -webkit-fit-content; width: -moz-fit-content;

August 24, 2020 · 1 min · jiezi

关于css:CSS知识点总结

August 23, 2020 · 0 min · jiezi

关于css:块级元素与行内元素整理

块级元素:大多数为结构性标记: <address>...</adderss><center>...</center> 地址文字<h1>...</h1> 题目一级<h2>...</h2> 题目二级<h3>...</h3> 题目三级<h4>...</h4> 题目四级<h5>...</h5> 题目五级<h6>...</h6> 题目六级<hr> 程度分割线<p>...</p> 段落<pre>...</pre> 预格式化 ,用于保留计算机源码.<blockquote>...</blockquote> 段落缩进 前后5个字符<marquee>...</marquee> 滚动文本<ul>...</ul> 无序列表<ol>...</ol> 有序列表<dl>...</dl> 定义列表<table>...</table> 表格<form>...</form> 表单<div>...</div>行内元素：<span>...</span><a>...</a> 链接<br> 换行<b>...</b> 加粗<strong>...</strong> 加粗<img > 图片<sup>...</sup> 上标<sub>...</sub> 下标<i>...</i> 斜体<em>...</em> 斜体<del>...</del> 删除线<u>...</u> 下划线<input>...</input> 文本框<textarea>...</textarea> 多行文本<select>...</select> 下拉列表块级元素的特点:1.总是从新的一行开始2.高度、宽度都是可控的3.宽度没有设置时，默认为100%4.块级元素中能够蕴含块级元素和行内元素 行内元素的特点:1.和其余元素在一行中；2.高度、宽度以及内边距都是不可控的3.宽高就是内容的高度，不能够扭转4.行内元素只能行内元素，不能蕴含块级元素

August 22, 2020 · 1 min · jiezi

关于css:css选择器的使用

前言这周始终在写数据校验，前台单元测试的时候，有时候v层没有渲染出数据，这时就须要手动让他渲染。 it('should create', () => // 如下断言保障了组件在初始化的过程中未产生异样 expect(component).toBeTruthy(); // 模仿生产环境后盾异步返回数据 getTestScheduler().flush(); // 保障接管模仿数据后，组件从新渲染未产生异样 fixture.detectChanges();});咱们能够从潘老师的博客中明确语句的具体含意。然而这还是不够，咱们最终确认v层数据渲染了与否还是通过咱们肉眼判断的，这就失去了单元测试的意义。为了进一步欠缺，咱们还须要在单元测试中退出断言，断言以后v层胜利渲染了数据。 css选择器要断言以后v层的某一项胜利渲染了数据，首先要获取这个v层元素。学习的教程中也有通过table元素和input元素断言的实例。然而我这里获取的是一个div里的值。具体v层代码如下 <div class="row"> <div class="col-md-2 text-right"> <label>科目</label> </div> <div class="col-md-8"> {{subject.course?.name}} </div></div> 咱们想要断言subject.course.name的值。然而这是一个一般的div，没有什么非凡的属性。这时我就想趁此机会理解一下css选择器。css选择器能够通过多种形式来获取一个v层的元素，介绍几种罕用的。一、相对定位 const nameInput: HTMLInputElement = fixture.debugElement.query(By.css('"html > body > div > div > form > input')).nativeElement;这种定位就是通过一层一层的父子元素关系来找到某一元素，长处是能够精确地找到某一元素。然而，一旦v层相干的元素扭转，这里也要跟着变。 二、绝对定位了解了相对定位，绝对定位也就好了解了。 const nameInput: HTMLInputElement = fixture.debugElement.query(By.css('" div > table')).nativeElement;他会匹配所有在某个div下的table元素。 三、属性定位 属性定位又能够分为id定位，class定位和（其余）属性定位。咱们在实例中用的就是属性定位。 const nameInput: HTMLInputElement = fixture.debugElement.query(By.css('input[name="name"]')).nativeElement;expect(nameInput.value).toEqual(student.name);这里咱们就是在匹配一个input元素，且此input的name属性为name。具体能够看这篇文章：CSS 选择器 应用控制台取得css选择器咱们也能够应用控制台打印某一元素的地位。找到这个元素，右键copy，有copy selector选项，让咱们看看打印进去了什么 #root0 > div:nth-child(1) > div.col-md-8找到了元素地位，剩下的断言就很好写了。然而也遇到了点问题。 我先用的实例的代码 const subjectCourseNameDiv: HTMLDivElement = fixture.debugElement.query(By.css('#root0 > div:nth-child(1) > div.col-md-8')).nativeElement;expect(subjectCourseNameDiv.value).toContain('科目名称');然而断言总是过不去，说我断言的值为undefined。然而对subjectCourseNameDiv进行打印获取到的元素也没有问题。 ...

August 22, 2020 · 1 min · jiezi

关于css:探究行高是个啥东西

行高介绍(W3C)定义和用法line-height 属性设置行间的间隔（行高）。 正文：不容许应用负值。 阐明该属性会影响行框的布局。在利用到一个块级元素时，它定义了该元素中基线之间的最小间隔而不是最大间隔。 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，别离加到一个文本行内容的顶部和底部。能够蕴含这些内容的最小框就是行框。 原始数字值指定了一个缩放因子，后辈元素会继承这个缩放因子而不是计算值。 图示行高由图所示，增加文本内容会造成行高，就是蕴含文本内容和相等的文本内容顶部半行距、底部半行距的一个区域,这个区域是属于盒子内容局部。能够通过元素中基线之间间隔来定义。 话不多说，通过理解行高的作用来理解行高吧！行高的次要作用使文本文字垂直居中 如下案例：1.起始行高默认值，此时行高是默认值 .line_height { width: 200px; height: 200px; background-color: pink; border: solid 1px red; padding: 30px; } <div class="line_height">hello line-height</div>运行后果：(1)(2)结构图 此图为盒子结构图，蓝色为盒子内容区域，绿色为内边距，由图可知文本内容绝对盒子高的中线偏上。 2.当行低等于盒子内容大小时，即不含padding值和border值。 .line_height{ width: 200px; height: 200px; background-color: pink; border: solid 1px red; padding: 30px; line-height: 200px; }运行后果：由图可知此时文本内容处于盒子内容的垂直居中，位于盒子高的中线上,实现了文本居中成果。 3.当行高大于盒子内容大小时。 .line_height{ width: 200px; height: 200px; background-color: pink; border: solid 1px red; padding: 30px; line-height: 250px; }运行后果：此时文本内容绝对盒子高的中线偏下 ...

August 20, 2020 · 1 min · jiezi

关于css:玩转-CSS-变量

如果当年的 CSS 预处理器变量对于初入前端的我来说是开启了新世界的大门，那么 CSS 变量对于我来说无疑就是晴天霹雳。其性能岂但能够优雅的解决之前 js 不好解决或不适宜的业务需要。更在创造力无穷的前端开发者手中大放异彩。 根底用法在前端的畛域中，规范的实现总是比社区的约定要慢的多，前端框架最喜爱的 $ 被 Sass 变量用掉了。而最罕用的 @ 也被 Less 用掉了。官网为了让 CSS 变量也可能在 Sass 及 Less 中应用，无奈只能斗争的应用 --。 <style> /* 在 body 选择器中申明了两个变量 */ body { --primary-color: red; /* 变量名大小写敏感，--primary-color 和 --PRIMARY-COLOR 是两个不同变量 */ --PRIMARY-COLOR: initial; } /** 同一个 CSS 变量，能够在多个选择器内申明。优先级高的会替换优先级低的 */ main { --primary-color: blue; } /** 应用 CSS 变量 */ .text-primary { /* var() 函数用于读取变量。 */ color: var(--primary-color) }<style> <!-- 出现红色字体,body 选择器的色彩 --> <div class="text-primary">red</div> <!-- 出现蓝色字体，main 选择器定义的色彩 --> <main class="text-primary">blue</main> <!-- 出现紫色字体，以后内联样式表的定义 --> <div style='--primary-color: purple" class="text-primary">purple</main> 这里咱们能够看到针对同一个 CSS 变量，能够在多个选择器内申明。读取的时候，优先级最高的申明失效。这与 CSS 的"层叠"（cascade）规定是统一的。 ...

August 20, 2020 · 4 min · jiezi

关于css:清楚浮动的四种方法

分明浮动四种办法 案例解说代码 .container { width: 500px; background-color: black; } .left { width: 200px; height: 300px; background-color: red; float: left; } .right { width: 200px; height: 200px; background-color: green; float: left; } .footer { width: 600px; height: 50px; background-color: blue; }<div class="container"> <!-- black --> <div class="left">大毛</div> <!-- red --> <div class="right">二毛</div> <!-- green --> </div> <div class="footer">三毛</div> <!-- blue -->运行后果 能够看见,left、right脱标不占据空间，footer元素与之重叠，footer内容'三毛'被排斥，可见浮动元素不占据空间却占据内容。 一、额定标签法（W3C举荐）在开端的浮动元素增加一个带有clear:both属性的块级标签。 .clear{ clear: both; }<div class="container"> <!-- black --> <div class="left">大毛</div> <!-- red --> <div class="right">二毛</div> <!-- green --> <div class="clear"></div> </div> <div class="footer">三毛</div> <!-- blue -->运行后果 ...

August 19, 2020 · 1 min · jiezi

关于css:单行文字垂直居中

html构造： <div class="pay"> 立刻领取 ￥XXX</div>css代码： .pay{ position: fixed; left: 0; bottom: 0; width: 100%; height: 44px; font-size: 17px; font-weight: bold; color: #080304; background: #F7B529; border-radius: 6px; text-align: center;}解释：line-height与里面的height的高度一致height: 44px;line-height: 44px; html构造： <div class="pay"> <p class="txt">立刻领取 ￥XXX</p></div>css代码： .pay{ position: fixed; left: 0; bottom: 0; width: 100%; height: 44px; font-size: 17px; font-weight: bold; color: #080304; background: #F7B529; border-radius: 6px; text-align: center; display: table; }.pay .txt{ display: table-cell; vertical-align: middle;}解释：父元素display: table; 子元素display: table-cell;vertical-align: middle; ...

August 18, 2020 · 1 min · jiezi

关于css:CSS

background:背景图片属性，能够有多个，写法如下：

August 18, 2020 · 1 min · jiezi

关于css:CSS

background:背景图片属性，能够有多个，写法如下：

August 18, 2020 · 1 min · jiezi

关于css:css实现简单的3d效果

css实现简略的3d成果1.开发环境 html,css2.电脑系统 windows 10 专业版3.在开发的过程中,咱们依据需要可能会应用到 一些简略的3d,理解过3d的敌人都晓得,要实现3d成果,很麻烦,须要学习很多的常识,这些常识是很宏大的!然而想要做好3d,须要有大量的积攒,然而当咱们没有这些的时候,想要做一些简略的3d,能够应用到 css (留神:只能实现一些简略的 3d 成果)。办法如下: <div class="juxing-r"> <ul class="juxing7-r"> <li>7</li> <li>7</li> <li>7</li> <li>7</li> <li>7</li> <li>7</li> </ul> </div> 4.css代码如下: .juxing7-r{ /*width: 100%;*/ width: 50px; height: 50px; /*height: 80%;*/ box-sizing: border-box; position: relative; transform-style: preserve-3d; } .juxing7-r li { width: 100%; height: 100%; position: absolute; left: 0; top: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; border: 1px solid #46B8DA; } .juxing7-r li:nth-of-type(1) { transform: rotateY(0deg) translateZ(25px); /* background-color: rgb(255, 118, 19); */ background-color: red; } .juxing7-r li:nth-of-type(2) { transform: rotateY(90deg) translateZ(25px); /*background-color: rgb(231, 78, 72);*/ background-color: yellow; } .juxing7-r li:nth-of-type(3) { transform: rotateX(90deg) translateZ(25px); /*background-color: rgb(75, 165, 165);*/ background-color: blue; } .juxing7-r li:nth-of-type(4) { transform: rotateX(0deg) translateZ(0px); background-color: rgb(129, 182, 62); /*background-color: black;*/ } .juxing7-r li:nth-of-type(5) { transform: rotateX(-90deg) translateZ(25px); background-color: rgb(129, 182, 62); /*background-color: black;*/ } .juxing7-r li:nth-of-type(6) { transform: rotateY(90deg) translateZ(-25px); background-color: rgb(244, 208, 114); /*background-color: black;*/ } .juxing7-r{ position: absolute; left: 10%; top: 0%; }//在浏览器中,你能够看到生成对应的立方体.//本期的教程到了这里就完结啦!是不是很简略!让咱们一起致力走向巅峰! ...

August 15, 2020 · 1 min · jiezi

关于css:css实现简单的3d效果

css实现简略的3d成果1.开发环境 html,css2.电脑系统 windows 10 专业版3.在开发的过程中,咱们依据需要可能会应用到 一些简略的3d,理解过3d的敌人都晓得,要实现3d成果,很麻烦,须要学习很多的常识,这些常识是很宏大的!然而想要做好3d,须要有大量的积攒,然而当咱们没有这些的时候,想要做一些简略的3d,能够应用到 css (留神:只能实现一些简略的 3d 成果)。办法如下: <div class="juxing-r"> <ul class="juxing7-r"> <li>7</li> <li>7</li> <li>7</li> <li>7</li> <li>7</li> <li>7</li> </ul> </div> 4.css代码如下: .juxing7-r{ /*width: 100%;*/ width: 50px; height: 50px; /*height: 80%;*/ box-sizing: border-box; position: relative; transform-style: preserve-3d; } .juxing7-r li { width: 100%; height: 100%; position: absolute; left: 0; top: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; border: 1px solid #46B8DA; } .juxing7-r li:nth-of-type(1) { transform: rotateY(0deg) translateZ(25px); /* background-color: rgb(255, 118, 19); */ background-color: red; } .juxing7-r li:nth-of-type(2) { transform: rotateY(90deg) translateZ(25px); /*background-color: rgb(231, 78, 72);*/ background-color: yellow; } .juxing7-r li:nth-of-type(3) { transform: rotateX(90deg) translateZ(25px); /*background-color: rgb(75, 165, 165);*/ background-color: blue; } .juxing7-r li:nth-of-type(4) { transform: rotateX(0deg) translateZ(0px); background-color: rgb(129, 182, 62); /*background-color: black;*/ } .juxing7-r li:nth-of-type(5) { transform: rotateX(-90deg) translateZ(25px); background-color: rgb(129, 182, 62); /*background-color: black;*/ } .juxing7-r li:nth-of-type(6) { transform: rotateY(90deg) translateZ(-25px); background-color: rgb(244, 208, 114); /*background-color: black;*/ } .juxing7-r{ position: absolute; left: 10%; top: 0%; }//在浏览器中,你能够看到生成对应的立方体.//本期的教程到了这里就完结啦!是不是很简略!让咱们一起致力走向巅峰! ...

August 15, 2020 · 1 min · jiezi

关于css:8月12日京津冀暴雨预报背后的海量信息挖掘

更多精彩，请点击上方蓝字关注咱们！ 8月12-13日，京津冀迎来了入汛以来最强降水。这次轰动了全国人民的降水过程体现如何？ 据统计，截至2020年8月13日06时，北京、天津北部和西部、河北大部等地呈现大到暴雨，北京中部、天津静海及河北保定、沧州、邢台、邯郸、衡水等地大暴雨（100～190毫米），雄安新区局地达241毫米；上述地区最大小时降雨量50～126毫米。河北北部、北京东南部和西北部呈现7～9级雷暴大风。（起源：中央气象台天气公报） 从预报角度，能够说下得不多不少，刚刚好。 京津冀地区8月12日04时-8月13日07时24小时降水(起源：北京市气象局)其中，北京强降雨次要集中在夜间时段（12日21时至13日01时） 62.0%的气象观测站呈现暴雨， 20.3%的气象观测站呈现大暴雨， 对于翘首盼了一天的北京er来说， 这次暴雨岂但没有爽约，而且 超过了“依萍找他爸要钱那天”（102.9毫米）、“白素贞给许仙送伞那天”（100毫米），但远不迭“杉菜来到道明寺”那天（400+毫米），也小于“721大暴雨”的163毫米，小于台风温比亚的432毫米，小于“638大暴雨”的最大464毫米，间隔758大暴雨的1600+毫米还差的远。。。。如果还晓得这些，阐明你曾经是资深“天气玩家”了 这次暴雨过程，中央气象台24小时时段预报与实况基本一致。 那么你晓得现在预报员是如何制作降水预报的吗？ 咱们从大数据信息开掘的角度来一窥到底。 家喻户晓，数值模式预报已成为古代天气预报业务的基石。然而，随着数值模式的疾速倒退，预报员或用户不得不面对信息过载的问题。为了缓解或解决该问题，咱们基于汇合预报的思维，设计“QPF权重评估举荐平台”，帮忙预报员在海量数据的根底上实现本身价值。 为什么要进行海量信息的集成？ 来自不同预报核心的模式零碎异化了不同的观测材料、采纳不同的能源框架、物理参数过程，因而对不同区域、节令、时效和类型的天气体现各有优缺点。不同类型的数据源可提供互相补充的降水预报（QPF，Quantitative Precipitation Forecast）信息，例如： 寰球数值模式零碎可能提供大尺度零碎的降水信息;汇合模式零碎可能提供预报的不确定性和低概率的极其天气信息;高分辨率的中尺度模式能够提供对流性降水零碎的状态、演变等特色已有国内外钻研均表明，集成多模式预报信息的QPF比单个模式体现出更好的预报技巧，如Ebert(2001)指出简略汇合均匀的预报技巧和精度要远高于任何繁多模式。世界气象组织(WMO)发动的THORPEX迷信打算中的TIGGE打算建设了寰球超级汇合预报,用这种超级集成办法来改良1-14天的天气预报。 什么是QPF权重评估举荐平台？ 国家气象中心设计建设的定量降水预报（QPF）权重评估举荐平台V1.0（以下简称平台）已于往年7月投入运行，是在现有主客观交融定量降水平台的根底上（唐健,代刊,宗志平等,2018.主客观交融定量降水预报办法及平台实现.气象, 44(8),http://qxqk.nmc.cn/html/2018/...），撑持预报员实时评估多模式性能，向预报员举荐近期体现性能突出的模式或者主观办法，并定量给出最优组合及权重，无效撑持预报员实现主客观交融的定量降水预报流程。该平台包含实时与近实时评估、将来评估、历史个例检索等四个模块。上面咱们以本次京津冀暴雨过程为例，介绍各个模块的利用。QPF权重评估举荐平台设计示意图 1.QPF实时/近实时评估模块 通过实时评估和近实时评估模块，在平台首页会主动为预报员展现过来两周内各家模式逐日最优权重组合的状况，通过柱状图在右侧进行显示，用不同的色系辨别了寰球模式、区域高分辨率模式以及主观办法预报逐日最佳权重组合的状况，平台中部显示对应模式实时评估（相似图形能够通过meteva来实现详见前文，https://www.showdoc.com.cn/me...?page_id=3975618837938759） 在平台右侧，预报员能够通过仪表盘形式实现实时监控模式性能，5个饼图别离显示的是逐1日、7日、14日、30日以及选定时间段内多模式最优权重配比状况，后盾算法会依据选取时间段主动举荐排名前5的模式或者主观办法，并计算其最优权重组合，预报员能够高深莫测获取以后模式性能的比照，通过权重定量集成多模式降水预报。平台首页，QPF权重实时评估模块 通过近期权重举荐后果能够发现，近2周内体现权重较好的模式别离为Grapes3KM、GrapesMeso（权重别离为18%、16%），体现较好的主观办法别离为Logistic勘误降水（30%）、GrapesMeso频率勘误（15%）以及频率勘误ECMWF（20%）。而近1天的权重则举荐：频率勘误EC（30%）、自适应集成降水（10%）、Logistic勘误降水（30%）、ECMWF（20%）、频率勘误GRAPESmeso（10%）。然而因为近期降水较为扩散，暴雨站数较少，权重举荐的后果还须要预报员再进一步进行剖析、研判。 2.多模式比照模块 预报员还能够通过多模式比照以及稳定性比照模块，对模式进行事先评估。模块中提供了实时缩放和定位性能，不便预报员进行多模式比照，同时后盾的图片压缩技术也确保浏览的便捷性。如下图所示，预报员能够非常便捷的在预报模式、预报时效、预报区域中进行疾速切换，浏览关怀的降水区域，比照模式差别和模式演变。就这次暴雨过程而言，从多模式预报比照和稳定性比照发现，通过选取ECMWF寰球、汇合最优百分位降水、自适应集成降水及Logistic勘误降水进行比照，发现各家模式或者主观办法都预报了这次京津冀暴雨过程，然而也存在肯定一致：从不同预报时效看，随着时效的邻近，各家模式和主观办法的一致性均在一直进步；从预报稳定性来看，汇合最优百分位降水预报的预报最为稳固，阐明汇合成员之间的相似性随着时效邻近而减少，预报确定性水平更高。 稳定性比照模块，能够便捷地浏览多模式比照和稳定性比照状况 3.历史个例检索模块 预报员还能够应用平台中的历史检索模块，查问历史类似个例。首先，预报员能够通过选定关注区域：全国或者6个预设区域（别离是华北、华东、华南、华中、东南以及西南地区），或者能够通过自定义经纬度的形式进行设定指标区域；设定后，会以热力求的形式返回指标区域内的类似过程暴雨过程工夫，热力求中色彩越深示意类似水平可能越高。当点击某个热力求模块，就会失去当天关注模式的实况预报比照评分图以及对应24小时预报两头时刻的局势场预报图。 历史个例检索模块 历史个例检索模块-2020年8月7日一次降水过程通过历史个例检索模块检索剖析能够发现近期与本次预报较为类似的个例是2020年8月7日华北地区的一次降水过程（如上图所示），咱们通过平台第一模块，追溯其当日最优举荐权重模式和相应权重为：频率勘误EC：频率勘误GRAPEmeso：ECMWF=6：2：2。预报员也能够进而应用咱们的另外建设的历史天气图剖析模块，进一步对历史天气进行检索和剖析（将另文介绍）。 本次降水过程测验 综合思考模式近期体现、多模式比照、稳定性比照、及8月7日历史个例检索的状况：1）在上一次暴雨过程之后，全国整体降水较为扩散，实时权重评估的后果可能较为孤立；2）8月7日降水过程尽管较本次过程略有不同，但整体天气形势靠近，模式的权重配置、误差体现特色可能是相似的；3)GRAPES-3KM和Logistic勘误因为近期体现佳，且这次过程后期为暖区过程，须要参考中尺度模式带来对流性降水的特色。咱们最终选取频率勘误EC、频率勘误GRAPEmeso、ECMWF、GRAPES-3KM、Logistic勘误降水进入最初的交融过程，并给定权重别离为30%、10%、10%、30%、20%。 这次京津冀暴雨预报咱们权重举荐的体现如何呢？根据所抉择的模式、主观办法及相应权重放入MICAPS主客观交融降水预报平台中，实现降水交融的操作，并选取GRAPES-3KM作为概率匹配的量级场。通过下图中采纳MICAPS中主客观交融降水模块进行模仿预报，交融的雨区后果也与实况较为靠近。从降水统计评分测验状况来看，最终交融预报暴雨（24小时降水量50mm以上）的TS评分可达0.31，BIAS评分为1.01（EC模式对应TS评分在0.25，BIAS在0.90）;如果仅思考京津冀区域，交融预报暴雨TS评分可达0.4，对应EC评分为0.35，大暴雨（24小时100mm以上）TS评分可达0.115，对应EC评分为0.03,晋升率靠近3倍。（注：TS评分批示预报准确率，数值越高越好；BIAS评分批示预报与实况范畴比率，数值越靠近于1越好）MICAPS主客观交融平台V3.5界面： 多模式抉择比照、模式权重交融 以上是针对本次降水过程中平台应用的一些剖析后果，心愿平台能给预报员在日常的定量降水预报提供帮忙，也期待听到您的意见和倡议，有任何意见欢送后盾留言或分割文章作者：cooperation@cma.gov.cn  往期精选  ·END· 中央气象台科技翻新服务 翻新·绿色·共享 微信号:kjcx_nmc 我就晓得你“在看”

August 14, 2020 · 1 min · jiezi

关于css:HTML5CSS3前端入门教程从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第11章有路网移动端主页实战

本教程案例在线演示有路网PC端有路网挪动端 收费配套视频教程收费配套视频教程 教程配套源码资源教程配套源码资源 本章指标 LESS1.什么是lessLess 是一门 CSS 预处理语言,它扩大了 CSS 语言,减少了变量、Mixin、嵌套等个性。Less的语法更简洁，能够被翻译为CSS。 在vs code装置less的编译插件 装置插件Easy LESS，如下图所示 有了这个后，能够在编辑器新建less文件，后缀名是.less,保留后会主动编译成css 2. 变量less能够申明变量，在其它中央间接援用。 @background-color: #ffffff;@text-color: #1A237E;p{ background-color: @background-color; color: @text-color; padding: 15px;}ul{ background-color: @background-color;}li{ color: @text-color;}将其编译成 CSS 代码如下： p{ background-color: #ffffff; color: #1A237E; padding: 15px;}ul{ background-color: #ffffff;}li{ color: #1A237E;}当初咱们要切换二者的值，也就是彩色的背景和红色的文本，咱们只须要批改两个变量的值就能够了，而不是手动的去批改每个值。 3. MixinsLess 容许咱们将罕用的款式，打包封装到 class 或 id 选择器中。 其它中央能够不便的援用。 #circle{ background-color: #4CAF50; border-radius: 100%;}#small-circle{ width: 50px; height: 50px; #circle}#big-circle{ width: 100px; height: 100px; #circle}将其转换成 CSS 代码如下 ...

August 13, 2020 · 10 min · jiezi

关于css:CSS圣杯布局双飞翼布

三栏布局中，经典中的经典应该就是圣杯布局、双飞翼布局没跑了。 先相熟一下圣杯布局、双飞翼布局中的特点： 两侧定宽，两头自适应次要内容优先渲染圣杯布局<div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div></div>(1) 首先设置好.main、.left、.right的宽度并浮动，为左右两列预留出空间。 .container { padding-left: 200px; /* 预留左侧空间，为.left宽度*/ padding-right: 300px; /* 预留右侧空间，为.right宽度*/}.main { float: left; width: 100%; height: 300px; background: #67c23a;}.left { float: left; width: 200px; height: 300px; background: #e6a23c;}.right { float: left; width: 300px; height: 300px; background: #f56c6c;}(2) 通过负margin、position把<div class="left">left</div>挪动到左侧预留地位。 .left { float: left; margin-left: -100%; /* 挪动到左侧，100%是一个父元素宽度，这里也就是.container的宽度 */ position: relative; /* 因为.container设置了padding */ right: 200px; /* 所以须要再向左挪动本身宽度,left: -200px;也是能够的 */ width: 200px; height: 300px; background: #e6a23c;}(3) 通过负margin把<div class="right">right</div>挪动到右侧预留地位。 ...

August 13, 2020 · 2 min · jiezi

关于css:CSS圣杯布局双飞翼布

三栏布局中，经典中的经典应该就是圣杯布局、双飞翼布局没跑了。 先相熟一下圣杯布局、双飞翼布局中的特点： 两侧定宽，两头自适应次要内容优先渲染圣杯布局<div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div></div>(1) 首先设置好.main、.left、.right的宽度并浮动，为左右两列预留出空间。 .container { padding-left: 200px; /* 预留左侧空间，为.left宽度*/ padding-right: 300px; /* 预留右侧空间，为.right宽度*/}.main { float: left; width: 100%; height: 300px; background: #67c23a;}.left { float: left; width: 200px; height: 300px; background: #e6a23c;}.right { float: left; width: 300px; height: 300px; background: #f56c6c;}(2) 通过负margin、position把<div class="left">left</div>挪动到左侧预留地位。 .left { float: left; margin-left: -100%; /* 挪动到左侧，100%是一个父元素宽度，这里也就是.container的宽度 */ position: relative; /* 因为.container设置了padding */ right: 200px; /* 所以须要再向左挪动本身宽度,left: -200px;也是能够的 */ width: 200px; height: 300px; background: #e6a23c;}(3) 通过负margin把<div class="right">right</div>挪动到右侧预留地位。 ...

August 13, 2020 · 2 min · jiezi

关于css:HTML5CSS3前端入门教程从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网

本教程案例在线演示有路网PC端有路网挪动端 收费配套视频教程收费配套视频教程 教程配套源码资源教程配套源码资源 制作有路网程度导航菜单 category-nav.css .red-nav{ height: 38px; background-color: #d80000; width: 100%;}.red-nav ul{ display: flex; width: 1200px; margin: 0 auto;}.red-nav li{ flex: 0 0 auto; line-height: 38px; font-size: 16px; padding: 0 24px; font-weight: bold;}.red-nav li a{ color: white;}.red-nav li:hover{ background-color: #c90000;}.red-nav li:nth-child(1){ padding-right: 100px; padding-left: 20px; background-color: #c90000;}youlu-category-nav.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="category-nav.css"></head><body> <div class="red-nav"> <ul> <li><a href="#">全副图书分类</a></li> <li><a href="#">首页</a></li> <li><a href="#">特卖</a></li> <li><a href="#">入驻商家</a></li> <li><a href="#">文具</a></li> <li><a href="#">考试</a></li> <li><a href="#">电子书</a></li> </ul></div></body></html>制作有路网搜寻栏 ...

August 13, 2020 · 8 min · jiezi

关于css:HTML5CSS3前端入门教程从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局

本教程案例在线演示有路网PC端有路网挪动端 收费配套视频教程收费配套视频教程 教程配套源码资源教程配套源码资源 Flex容器<ul> <!--parent element--> <li></li> <!--first child element--> <li></li> <!--second child element--> <li></li> <!--third child element--></ul>这就是一个无序列表(ul)里有三个列表元素(li)。 你能够把ul称为父元素，li称为子元素。 要开始应用Flexbox，必须先让父元素变成一个Flex容器。 你能够在父元素中显式的设置display:flex或者display:inline-flex。这样你就能够开始应用Flexbox模块。 理论是显式申明了Flex容器之后，一个Flexbox格式化上下文（Flexbox formatting context）就立刻启动了。 应用一个无序列表(ul)和一群列表元素(li)，启动Flexbox格式化上下文的形式如下： /* 申明父元素为flex容器 */ul { display:flex; /*或者 inline-flex*/}给列表元素(li)增加一点根本款式。 li { width: 100px; height: 100px; background-color: #8cacea; margin: 8px; list-style: none;}你将看到的成果如下图所示： 默认状况下，li是块级元素，在CSS中垂直排布的，也就是说从上到下排列显示，就像下图这样： 然而，简略的写一行代码display:flex，你立刻就能够看到布局扭转了。 当初列表元素(li)程度排列，从左到右。 Flexbox模块的开始，正如后面的介绍，在任何父元素上应用display:flex。 一旦你显式的设置了display属性的值为flex，无序列表ul就会主动变成Flex容器，而其子元素（在本例中是指列表元素li）就变成了Flex我的项目。 应用了两个关键词，咱们把重点放到他们身上。理解他们对于了解前面的常识至关重要。 Flex容器（Flex Container）：父元素显式设置了display:flexFlex我的项目（Flex Items）：Flex容器内的子元素这些只是Flexbox模块的根底。 Flex容器属性flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content通过下面的内容，咱们理解了一些基础知识。晓得了Flex容器和Flex我的项目是什么，以及如何启动Flexbox模块。 ...

August 13, 2020 · 5 min · jiezi

关于css:HTML5CSS3前端入门教程从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位

本教程案例在线演示有路网PC端有路网挪动端 收费配套视频教程收费配套视频教程 教程配套源码资源教程配套源码资源 定位position属性 static：默认值，没有定位 relative：绝对定位 absolute：相对定位 fixed：固定定位 规范文档流规范文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简略的失常的布局形式。 个别在HTML元素分为两种：块级元素和行内元素。像div,p这些的元素属于块级元素，块级元素是从上到下一行一行的排列；默认一个块级元素会占用一行，而跟在前面的元素会另起一行排列； 行内元素是在一行中程度安排，从左到右的排列；span,strong等属于行内元素。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body><div style="background-color:dodgerblue">我是块级元素，我独自占一行 我独自占一行 我独自占一行</div><div style="background-color:yellow">我是块级元素，我一行一行的排列，我一行一行的排列，我一行一行的排列</div><span style="background-color:green">我的行内元素，我程度的排列，我程度的排，我程度的排，我程度的排列，我程度的排列</span><span style="background-color:gray">我是行内元素，没有那么王道，没有那么王道，没有那么王道，没有那么王道，没有那么王道</span></body></html></body></html>static定位position:static 元素没有定位，以规范流形式显示 <!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>position属性</title><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>@charset "gb2312";/* CSS Document */div { width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px;}#father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px;}#first { background-color:#FC9; border:1px #B55A00 dashed;}#second { background-color:#CCF; border:1px #0000A8 dashed;}#third { background-color:#C5DECC; border:1px #395E4F dashed;}绝对定位relative属性值 ...

August 13, 2020 · 3 min · jiezi

关于css:HTML5CSS3前端入门教程从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单

本教程案例在线演示有路网PC端有路网挪动端 收费配套视频教程收费配套视频教程 教程配套源码资源教程配套源码资源 表格table标签（表格）、tr标签（行）、td标签（规范单元格）、caption标签（题目）、th标签（表头单元格）。 为了更深一层对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。 这三个标签把表格分为三局部：表头、表身、表脚。 table 表格 caption 题目 thead 表头（语义划分） tbody 表身（语义划分） tfoot 表尾（语义划分） tr 行 th 表头单元格 td 表格单元格 <table> <caption>考试成绩表</caption> <thead> <tr> <th>姓名</th> <th>语文</th> <th>英语</th> <th>数学</th> <tr> </thead> <tbody> <tr> <td>小明</td> <td>80</td> <td>80</td> <td>80</td> </tr> <tr> <td>小红</td> <td>90</td> <td>90</td> <td>90</td> </tr> <tr> <td>小杰</td> <td>100</td> <td>100</td> <td>100</td> </tr> </tbody> <tfoot> <tr> <td>均匀</td> <td>90</td> <td>90</td> <td>90</td> </tr> </tfoot> </table> 表格款式丑化<style>table, th, td { border: 1px solid black; border-collapse: collapse; }th, td { padding: 6px; color: blue; }</style>给表格增加边框，设置字体色彩，以及给单元格设置一些padding ...

August 13, 2020 · 2 min · jiezi

关于css:替代floatright的一种有浮动写法

margin-left: auto; 可代替float：right，且不必清浮动

August 12, 2020 · 1 min · jiezi

关于css:CSS两栏布局

两栏布局（一侧固定宽度，一侧自适应），在工作中应该是常常应用到，能够说是前端根底了。然而在一次面试中，面试官：在纸上写出你能想到的两栏布局所有形式。我心想：这还不简略。认真想了想...猝！ 话不多说，上菜！ absolute + margin 形式<div class="container"> <div class="sidebar">固定</div> <div class="main">自适应</div></div>.container { position: relative;}.sidebar { position: absolute; top: 0; left: 0; height: 300px; width: 200px; background: #67c23a;}.main { margin-left: 200px; height: 300px; background: #e6a23c;}批改 css 就可实现 地位调换，如下： .sidebar { right: 0; /* ... */}.main { margin-right: 200px; /* ... */}长处： 替换<div class="sidebar">固定</div> 、 <div class="main">自适应</div>程序 ，实现次要内容优先加载渲染。 毛病：absolute 定位，脱离文档流，当 sidebar 列的高度，超过 main 列的高度，会遮住上面的元素。须要给父盒子设置 overflow 属性。 float + margin 形式<div class="container"> <div class="sidebar">固定</div> <div class="main">自适应</div></div>.sidebar { float: left; top: 0; right: 0; height: 300px; width: 200px; background: #67c23a;}.main { margin-left: 200px; height: 300px; background: #e6a23c;}也反对地位调换： ...

August 11, 2020 · 2 min · jiezi

关于css:css绘制眼镜练习

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>眼镜黑心圆半径为10,外圆半径为40,眼镜架长度100,歪斜45度</title></head><style type="text/css"> .content { background: rgb(77, 203, 249); height: 300px; width: 300px; display: flex; align-items: center; justify-content: center; } .round { border: 3px solid blue; height: 90px; width: 90px; border-radius: 100px; position: relative; } .circle { background: black; height: 20px; width: 20px; border-radius: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .line { background: blue; height: 100px; width: 3px; position: absolute; bottom: 85%; left: 85%; transform: rotate(45deg); }</style><body> <div class="content"> <div class="round"> <div class="line"></div> <div class="circle"></div> </div> <div class="round"> <div class="line"></div> <div class="circle"></div> </div> </div></body></html>效果图: ...

August 11, 2020 · 1 min · jiezi

关于css:京津冀辽迎入汛以来最强降雨四川盆地西部形成暴雨结界

大范畴降雨席卷南方 8月上旬北方地区呈现一次强降雨过程，其余时段多阵雨或雷阵雨，局地降雨强，累计雨量大，青海东部、甘肃东部、陕西、山西南部、河北南部、山东、内蒙古东北部、黑龙江等地降雨量较长年同期显著偏多。 明日起，将有强降雨过程自西向东席卷我国，十余省份雨势强劲，其中北京、天津、河北、辽宁等地降雨量将达入汛以来最强。值得关注的是，四川盆地西部好像被暴雨结界笼罩，将间断三天呈现大到暴雨，甚至大暴雨、特大暴雨，14日后结界仍难突破。 南方自西向东呈现强降雨 11日至13日，西北地区中东部、内蒙古、华北、东北地区大部自西向东先后有中到大雨，其中甘肃南部、陕西南部、河南北部、山西南部、河北北部和南部、北京、天津北部、辽宁等地局部地区有暴雨，局地大暴雨。甘肃东南部、陕西西南部、北京北部和西部沿山地区、河北北部、辽宁中部和东部累计降雨量有60～120毫米，局地可达150～180毫米，并伴有雷电和短时强降水（最大小时降雨量30～50毫米），局地有冰雹或8～9级雷暴大风等强对流天气。 <svg viewBox="0 0 1 1" style="vertical-align:top;"></svg> 11日：甘肃东部、内蒙古西部 <svg viewBox="0 0 1 1" style="vertical-align:top;"></svg> 12日：甘肃东部、陕西、山西、内蒙古中部、河北、北京、天津、辽宁 <svg viewBox="0 0 1 1" style="vertical-align:top;"></svg> 13日：辽宁、吉林、内蒙古东北部 四川盆地西部暴雨不挪窝 11日至13日，四川盆地西部继续有强降雨，日降雨量以大到暴雨为主，局部地区有大暴雨或特大暴雨；累计降雨量有100～200毫米，盆地西北部局地可达250～400毫米，最大小时降雨量50～90毫米。14日后，四川盆地西部仍维持强降雨，降雨强度大、持续时间长，局部站点雨量可能超当地历史记录。 气象灾祸危险预警 11日至13日的降雨强度强、影响范围广，四川盆地西北部、甘肃南部、陕西西南部及河北北部、北京等局地产生山洪、地质灾害、中小河流洪水气象危险高。 警觉！ 11-13日，北方地区降雨强度强、影响范围广，需防备次生灾祸和强对流天气对交通出行的不利影响，远离高风险地区。长江上游、海河、辽河等流域需做好防汛和城乡内涝的进攻，辽宁还要防备旱涝急转可能导致的不利影响。 台风“米克拉”号外 一入8月，台风一窝蜂的往出冒，往年第6号台风“米克拉”也于明天11时在南海东北部海面生成。 下午5时，“米克拉”由热带风暴级增强为强热带风暴级，其核心位于福建厦门偏北方约390公里的海面上，核心左近最大风力有10级（25米/秒）。 预计，“米克拉”将以每小时25~30公里的速度向偏北方向挪动，强度还将有所增强，将于11日晚上到上午在福建漳浦到平潭一带沿海登陆（23~28米/秒，9~10级，热带风暴级或强热带风暴级），登陆后强度逐步削弱。 受其影响，10日夜间至11日，南海东北部和南部、巴士海峡、台湾海峡、福建沿海、东海大部将有6～8级大风，其中，福建沿海、台湾海峡和南海东北部的局部海域风力有9～11级，阵风12～13级；福建中南部和台湾岛有大到暴雨，局地大暴雨。

August 11, 2020 · 1 min · jiezi

关于css:超长待机梅雨季

点击上方“蓝字”关注咱们吧！ 7月18日，浙江发表“出梅”，辞别长达50天的2020年超长待机梅雨季。 作为包邮区首位解脱梅雨的“幸运儿”，状态尚未回归，便一头又栽入低温陷阱。7月19日，浙江大部地区最高气温破35℃，温州市文成站气温高达38.6℃！中央气象台预计，7月21日，我国主雨带将北抬，次要位于四川盆地北部至黄淮一带。这是否意味着北方的“暴力梅”已进入序幕？ <svg viewBox="0 0 1 1" style="vertical-align:top;"></svg> <svg viewBox="0 0 1 1" style="vertical-align:top;"></svg> 萌台降雨大数据 答复这个问题之前，让咱们再来回顾一下近2个月的强降雨数据单。6月1日至7月19日，长江流域均匀降雨量479.5毫米，为1961年以来历史同期最多；按地区统计，安徽、湖北、重庆3省（市）降雨量为历史同期最多，江苏、浙江、江西、贵州4省降雨量为历史同期第2多。 7月17日至19日，新一轮强降雨集结淮河中上游，安徽六安、合肥和河南信阳的局部地区累计降雨量有300～500毫米，六安局地达642毫米，安徽六安、霍山等4个国家气象观测站日雨量冲破建站以来极值。受强降雨影响，淮河流域产生1号洪水；20日，王家坝水文站呈现超保障水位并泄洪。 王家坝泄洪 <svg viewBox="0 0 1 1" style="vertical-align:top;"></svg> <svg viewBox="0 0 1 1" style="vertical-align:top;"></svg> 21日雨带北抬，山东河南大暴雨来袭 20日晚上，暴雨蓝色预警解除，标记着本轮强降雨已进入削弱阶段，然而北方的“暴力梅”并未打算就此隐没。21日至23日，我国主雨带将较后期有所北抬，次要位于四川盆地北部至黄淮一带，而导致此次雨带挪动的背地推手仍然是副热带低压。随着副高的再一次西伸北抬，雨水阵地转移至四川盆地、陕西南部、河南、山东、苏皖北部等地。 期间，重庆北部、四川东北部、陕西南部、河南东部、山东中南部、安徽北部、江苏北部等地局部地区累计降雨量有100～200毫米，局地200毫米以上；最大小时降雨量20～50毫米，局地60毫米以上。 萌台报天气 目前来看，长江中下游一带尽管雨势暂缓，但苏皖北部、湖北北部仍难逃暴雨“魔咒”。尤其是24日至26日，雨带将再次调整，四川盆地、西北地区东南部、黄淮、江淮以及长江中下游沿江地区还将有强降雨，安徽、江苏等地的“出梅”事宜恐怕要再拖后。 <svg viewBox="0 0 1 1" style="vertical-align:top;"></svg> <svg viewBox="0 0 1 1" style="vertical-align:top;"></svg> 防汛局势仍严厉，江南华南低温扩张 将来一周，防汛抗洪局势依然严厉。在长江流域，受四川、重庆强降雨影响，长江上游需警觉新一轮洪水的造成，以及对中下游的压力；在淮河流域，前几日安徽的继续暴雨使得会集到淮河中上游的水量上涨迅速，本周内还将有2次强降雨过程，进一步加大了流域性洪水的危险。 萌台科普工夫 从水系特点上来看，淮河上游地势差大容易汇水、中下游地势平缓泄洪难，且北侧干流泛滥，这样的特点一旦碰上区域性的继续强降雨，容易导致重大内涝。 气象专家揭示：将来一周，我国主雨带变动较大，次要的强降雨区集中在四川盆地、西北地区东南部、黄淮、江淮等地。请上述地区公众亲密关注当地的水、雨情和汛情变动，及时查看最新天气预报预警信息；留神防备强降雨可能引发的城乡内涝、山洪和地质灾害等。 及时关注天气预报信息 最初再多唠叨一句低温，明后两天，低温群再退出几位新成员，势力范围扩张。 其中浙江南部、福建、江西中南部、湖南南部、广东东北部和西南部、新疆吐鲁番盆地等地的局部地区最高气温可达37～39℃，局地可达40℃以上。大家防暑降温措施肯定要做好！ 天气有我 科技为你 中央气象台“艾天气”小程序公布 欢送试用  往期精选  ...

August 11, 2020 · 1 min · jiezi

关于css:CSS-静态流式自适应弹性响应式布局

简略总结一下对于css布局的了解: 动态布局：元素均采纳px设置宽高； 流式布局：子元素次要采纳%来设置宽度，特点是屏幕太大或太小均不能较美的显示子元素，然而子元素的绝对布局不会变动，比如说，一行是5个div,每个宽度设为20%，父元素宽为500px时，每个100px,然而子元素最完满的宽度却是80px，通常搭配min-width、max-width应用，不至于过大过小； 自适应布局：每个屏幕分辨率对应一个动态布局，常常采纳@media联合min-width、min-height应用，给不同尺寸的设施切换不同款式； 弹性布局：子元素采纳remem的布局，也是一种绝对布局，强调等比缩放，绝对于%更灵便，em是绝对父元素（用的少），rem是绝对html根元素，而页面的整体布局仍采纳px和%，另外，字体不适宜应用rem,字体的大小和字体宽度不成线性关系； 响应式布局：一个页面在所有的终端上均有较好的展成果，强调不同屏幕要有不同的显示，通常采纳弹性布局+流式布局+媒体查问，优良页面布局的规范；

August 9, 2020 · 1 min · jiezi

关于css:CSS水平垂直居中回顾总结

前言用了一段时间的 material-ui，都很少本人入手写原生的款式了。但 html, css, js 始终是前端的三大根底，这周忽然想到 CSS 程度居中计划，因为用多了 flex 和 margin: auto等这类计划解决，在回顾还有还有几种计划能够解决，于是打算温故知新，从新打下代码，写下该文作为笔记。 html 代码 <div class="parent"> <div class="child"></div></div>css 代码 .parent { width: 300px; height: 300px; background-color: blue;}.child { width: 100px; height: 100px; background-color: red;}上面代码基于上述代码减少，不会再反复写。要实现的成果是让子元素在父元素中程度垂直居中 一、flex 布局.parent { display: flex; justify-content: center; align-items: center;}这是最经典的用法了，不过，也能够有另一种写法实现： .parent { display: flex;}.child { align-self: center; margin: auto;}二、absolute + 负 margin该办法实用于晓得固定宽高的状况。 .parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}三、absolute + transform.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}四、absolute + margin auto.parent { position: relative;}.child { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}五、absolute + calc该办法实用于晓得固定宽高的状况。 ...

August 9, 2020 · 1 min · jiezi

关于css:使用css的filter写鼠标滑过效果

应用css的filter写鼠标滑过成果<div class="filter-div"> <img class="filter-img" src="../assets/images/01list.png"/></div><style> .filter-div { width: 67px; height: 50px; background: #fff; &:hover { background: #5d7aae; } } .filter-img { width: 67px; height: 50px; &:hover { filter: brightness(100); } }</style>鼠标没有放上之前 鼠标放上之后这里用到css filter:brightness(100)给图片利用一种线性乘法，使其看起来更亮或更暗。如果值是0%或者0，图像会全黑。值是100%，则图像无变动。其余的值对应线性乘数成果。值超过100%也是能够的，图像会比原来更亮。如果没有设定值，默认是1，如果想染图片设置成红色，值为100。

August 7, 2020 · 1 min · jiezi

关于css:极细边框1px边框实现方式

挪动端 web开发遇到的问题：UI稿上要求设置边框为1px，css设置border: 1px solid #eee;之后，UI又说边框太粗了。 这是因为devicePixelRatio个性导致。css设置的1px是css像素，而UI稿上指的是设施像素，它们之间存在一个比例关系，即，devicePixelRatio。iPhone的devicePixelRatio == 2，而border-width: 1px形容的是css像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。 像素基本概念（术语）device pixel / physical pixel （设置像素、物理像素、硬件像素）： 显示屏中最小的物理单元。 挪动设施出厂时，不同设施自带的不同像素，每个像素点依据操作系统的批示设置本人的色彩和亮度。 density-independent pixel(DIP)（设施无关像素或密度无关像素）：能够认为是计算机坐标零碎中得一个点，这个点代表一个能够由程序应用的虚构像素，而后由相干零碎转换为物理像素。 CSS pixel （css 像素）：浏览器应用的形象单元，用于准确地，统一地在网页上绘制内容。 通常，CSS 像素被称为与设施无关的像素（DIP）。 devicePixelRatio（设施像素比）：物理像素和逻辑像素的比例关系，通常能够通过js的 window.devicePixelRatio 来获取。 devicePixelRatio能够用来辨别视网膜设施还是非视网膜设施。 devicePixelRatio 值为 1 的屏幕称之为规范屏（也称，非视网膜屏）；目前，大部分挪动设施都是高清屏（也称，视网膜屏），即 devicePixelRatio 值大于 1 的屏幕，对于苹果设施来说，咱们常常听到 Retina屏（视网膜屏），其中 iPhone6/6s/7 的 devicePixelRatio 值为 2；而 iPhone6 plus/6s plus/7 plus 的 devicePixelRatio 值为 3。 设置0.5px边框长处：实现简略 毛病：retina 屏的浏览器可能不意识0.5px的边框，将会把它解释成0px，没有边框。包含 iOS 7 和之前版本，OS X Mavericks 及以前版本，还有 Android 设施。 //判断手机是否反对0.5pxif (window.devicePixelRatio && devicePixelRatio >= 2) { var divElem = document.createElement('div') divElem.style.border = '.5px solid transparent' document.body.appendChild(divElem) if (divElem.offsetHeight == 1) { document.querySelector('html').classList.add('hairlines'); } document.body.removeChild(divElem);}//在html中，加上此款式.hairlines { *:not(table tr td), *:not(.noHairlines) { border-width: 0.5px!important; }}box-shadow（暗影）长处：能够设置圆角 ...

August 6, 2020 · 2 min · jiezi

关于css:css弹性盒子

css中弹性盒子display:flex; 实现了真正的弹性盒子； flex-direction: 弹性盒子的排列形式； row:从左到右； row-reverse:从右向左； column:从上往下； column-reverse：从下往上； flex-warp：设置我的项目的换行形式； warp：超出一行主动换行； nowarp：不换行，自适应； warp-reverse：将内容颠倒换行； justify-content:内容的对齐形式； flex-start：内容靠左对齐； flex-end：内容向右对齐； center：内容居中对齐； space-between：两端对齐，两端固定值，两头平分； space-around：两端居中对齐，每个div两端成果都是一样的； align-items:容器内额定空间的解决 flex-start:向右对齐； flex-end：向左对齐； flex-center：居中对齐； base-line：成果同flex-start； stratch:默认成果； flex：让容器按比例调配 值：间接写数字 例如： flex：2；意思是一行排只能排两个元素； order：排序； 值：数字 例如： order：2；意思就是这个标签显示进去的程序 //本期的教程到了这里就完结啦,是不是很简略!是不是很棒!让咱们一起致力走向巅峰!

August 6, 2020 · 1 min · jiezi

关于css:px转vwvh

vw和vh是绝对于视口的宽度和高度，因而他俩都是绝对单位，随着视口宽度和高度的扭转而扭转 1vw等于视口宽度的1% 1vh等于视口宽度的1% 举例宽度为1920px， 高度为1080px， 设计稿中有一个div， 宽为960px， 高位100px，如何把这个按钮的宽高从px转换为vw和vh。 咱们能够应用以下公式 `宽度(vw) = 100 / 1920 * 960; 默认1920px = 100vw 1px =（100/1920）vw ` `高度(vh) = 100 / 1080 * 100; 默认1080px = 100vh 1px =（100/1080）vh` <div> <div class="left">left</div> <div class="right">right</div></div>css款式 .left { float: left; width: 50vw; height: 9.259vh; /*width: 960px; (100/1920)*960 =50vw 默认1920px = 100vw 1px =（100/1920）vw height: 100px; (100/1080)*100 =9.259vh 默认1080px = 100vh 1px =（100/1080）vh */ background-color: blue; text-align: center; } .right { float: right; width: 50vw; height: 9.259vh; /*width: 960px; height: 100px;*/ background-color: green; text-align: center; }

August 6, 2020 · 1 min · jiezi

关于css:css隐藏元素的背景图到底加不加载

知乎上有探讨“元素display:none之后background-image 还会加载吗？”取得赞的答案却是“不加载”我感觉这个回答者答错了！ 想必这是很多人都感兴趣的问题，而我的测试后果是：元素display:none时，IE浏览器会发送图片申请；Firefox浏览器不会发送申请；chrome和safari浏览器更非凡一些，如果display:none设置在了父级元素上，则子元素背景图不会发送申请，如果display:none和background-image都设置在同一元素上，则会发送图片申请。 用base64图片可节约一个网络申请，但base64图片的渲染性能并不高，只适宜尺寸比拟小的图片，大尺寸图片不举荐。 公众号搜寻：webs100 喜爱文章就请点赞关注我！

August 4, 2020 · 1 min · jiezi

关于css:css隐藏元素的背景图到底加不加载

知乎上有探讨“元素display:none之后background-image 还会加载吗？”取得赞的答案却是“不加载”我感觉这个回答者答错了！ 想必这是很多人都感兴趣的问题，而我的测试后果是：元素display:none时，IE浏览器会发送图片申请；Firefox浏览器不会发送申请；chrome和safari浏览器更非凡一些，如果display:none设置在了父级元素上，则子元素背景图不会发送申请，如果display:none和background-image都设置在同一元素上，则会发送图片申请。 用base64图片可节约一个网络申请，但base64图片的渲染性能并不高，只适宜尺寸比拟小的图片，大尺寸图片不举荐。 公众号搜寻：webs100 喜爱文章就请点赞关注我！

August 4, 2020 · 1 min · jiezi

关于css:css隐藏元素的背景图到底加不加载

知乎上有探讨“元素display:none之后background-image 还会加载吗？”取得赞的答案却是“不加载”我感觉这个回答者答错了！ 想必这是很多人都感兴趣的问题，而我的测试后果是：元素display:none时，IE浏览器会发送图片申请；Firefox浏览器不会发送申请；chrome和safari浏览器更非凡一些，如果display:none设置在了父级元素上，则子元素背景图不会发送申请，如果display:none和background-image都设置在同一元素上，则会发送图片申请。 用base64图片可节约一个网络申请，但base64图片的渲染性能并不高，只适宜尺寸比拟小的图片，大尺寸图片不举荐。 公众号搜寻：webs100 喜爱文章就请点赞关注我！

August 4, 2020 · 1 min · jiezi

关于css:品优购

首页Classname命名标准Classname命名标准，类名尽量简短，首字母必须要小写，且单词之间用'_'示意我的项目文件夹我的项目文件夹 ：pinyougou款式图片类文件夹：img产品类图片文件夹 upload字体文件夹 fonts款式文件夹 CSSjs文件夹 js款式文件的分类 初始化及原子类文件 base.css 公共款式文件：commen.cssfavicon图标如何查看网站的favicon图标吗 只须要在以后网站里输出/favicon.ico即可网站优化三大标签SEO:简称搜索引擎常见的搜索引擎：谷歌 雅虎 百度 搜狗网站优化的三大标签：title Description keywordstitle:网站题目 Description:网站内容 keywords：网站关键字 字体图标字体图标的长处跟图片一样能够扭转透明度，旋转，并且反对所有的浏览器字体图标的应用流程 下载兼容性字体包罕用的两大网站 icomoon: icomoon.io/ 阿里巴巴矢量图www.iconfont.cn/ 如何把字体引入html构造中1.把fonts文件夹放在根目录中 2.在HTML中申明构造 3.在款式中申明字体 @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal;}4.给盒子指定字体 span { font-family: "icomoon"; }如何追加新的字体图标利用selection.json从新上传追加字体图标，从新下载字体包替换原来的字体包即可难点logo局部logo外面放一个h1 目标是为了提权，通知搜索引擎，这个中央很重要h1外面放一个a标签，a标签的地址是首页的地址，并且要在a标签外面写上字，目标是为了让搜索引擎收录咱们如何让a标签的字隐没？1.overflow:hidden text-indent:-99999px ２.font-size:0 挪动到链接时，要显示文字。html <!-- logo局部 --> <div class="logo"> <h1> <a href="index.html" title="优品汇">优品汇</a> </h1> </div>css .header .logo { position: absolute; left: 2px; top:25px; width: 172px; height:55px; background-color: blue; } .header .logo a { display: inline-block; width: 172px; height:55px; background: url("../img/logo.png") no-repeat; /* 让文字隐没 */ text-indent: -99999px; overflow: hidden; } ...

August 4, 2020 · 2 min · jiezi

关于css:学成网

项目前期筹备筹备工具ps(切片工具)+ Vs code或其它的开发工具+chorm浏览器 筹备文件创立根目录 根目录外面创立html文件 css文件夹 image文件夹 js文件(目前用不上) css书写程序 布局流程 难点搜寻局部html <div class="search "> <input type="text" id="" value="输出关键词" /> <button></button> </div>css search input { float: left; height: 40px; width: 340px; padding-left: 20px; border: 1px solid #00a4ff; border-right: none; color: #cececf; outline: none;}.search button { float: left; width: 50px; height: 42px; border: none; cursor: pointer; background: url(../images/search_03.png) center;} 侧边导航栏局部 html <!-- 侧边导航栏模块 --> <div class="side-nav"> <ul> <li><a href="#">前端开发<span>></span></a></li> <li><a href="#">后端开发<span>></span></a></li> <li><a href="#">挪动开发<span>></span></a></li> <li><a href="#">人工智能<span>></span></a></li> <li><a href="#">商业预测<span>></span></a></li> <li><a href="#">云计算&大数据<span>></span></a> </li> <li><a href="#">运维&设计<span>></span></a></li> <li><a href="#">UI设计<span>></span></a></li> <li><a href="#">产品<span>></span></a></li> </ul> </div>css ...

August 4, 2020 · 2 min · jiezi

关于css:css图文样式-lineheight如何继承

css款式 body{ font-size:20px; line-height:30px;}p{ background:#ccc; font-size:16px;}html <body> <p>这是一段文字</p></body>注解：~~~~ 如果body元素中line-height:30px;则p元素line-height：30px;如果body元素中line-height:1.5;则p元素line-height：24px;(p 元素的font-size乘body元素的line-height)如果body元素中line-height:200%;则p元素line-height：40px; (body元素的font-size乘body元素的line-height)

August 4, 2020 · 1 min · jiezi

关于css:CSS预编译器

以后环境中，间接手写 css 的越来越少，次要是通过各种预编译器来做，次要起因会通过如下几点进行形容。 先看一下 css 的一些根底点，这里只说要害的，残缺的能够本人查看 css2.1标准 。 css 根底知识点css 盒模型 页面都是通过盒模型来拼凑的，首先须要晓得都有哪些块模型（也就是 display 的值）： inline: 行内元素inline-block: 行内块元素block: 块元素none: 不显示元素，不占地位table 及其相干: 次要用于设置以表格的模式展现内容flex 及其相干: 弹性布局grid 及其相干: 网格布局个别最罕用的 div 就 display: block 的通用块。 css 变量定义语法 --* ，应用语法 var(--*) * 示意变量名称，能够是 数字字母下划线短横线 [0-9a-zA-Z_-] 进行组合。 无论变量定义还是应用都只能在申明块 {} 内： /* 全局变量 */:root { --theme: #f00;}/* 局部变量 */.side { --color: #0f0;}.content { color: var(--theme);}.footer { color: var(--color);}<div class="content"> <div class="body"></div> <div class="side"></div> <div class="footer"></div></div>javascript 能够获取和设置 css 中的变量： // 获取 css 变量值getComputedStyle(document.documentElement).getPropertyValue('--color')// 设置 css 变量值document.documentElement.style.setProperty('--color', '#' + Math.random().toString(16).slice(2,8))例子： ...

August 4, 2020 · 8 min · jiezi

关于css:CSS小技巧8

技巧一在某些状况下，子元素的宽度能够大于父元素的宽度 案例中，ul的宽度大于版心的宽度，且不影响布局 技巧二 如何让固定定位的元素紧贴版心？ 答：应用固定定位，left:50% margin-left的值等于版心的一半加本身宽度，留神为负值 技巧三如何让父元素中子元素居中对齐(针对于行内及行内块元素) 答：保障子元素必须为行内块元素或行内元素及文字 text-align:center即可 技巧四：focus 伪类选择器 用来获取焦点元素 个别指焦点元素 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input:focus { border: 1px solid red; background-color: red; } </style></head><body> <input type="text"></body></html> 文字省略单行 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;多行 word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

August 3, 2020 · 1 min · jiezi

关于css:CSS之高级技巧-7

元素的显示与暗藏display显示（暗藏）显示与暗藏 display:none(暗藏) display:block（显示）特点 先暗藏元素 不占地位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; margin: 20px 20px; background-color: blue; } .box1 { background-color: yellow; display: none; } </style></head><body> <div class="box1"></div> <div class="box2"></div></body></html> visibility(显示与暗藏) visibility:hidden visibility:visible特点 先暗藏元素 占地位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; margin: 20px 20px; background-color: blue; } .box1 { background-color: yellow; /* 设置元素的显示与暗藏 */ visibility: hidden; } </style></head><body> <div class="box1"></div> <div class="box2"></div></body></html> ...

August 3, 2020 · 5 min · jiezi

关于css:CSS定位及圆角矩形6

定位布局的外围：css摆放盒子的地位定位：将盒子定在某一个地位，自在的沉没其它盒子下面 定位=定位模式+边偏移边偏移 三种布局机制的高低程序规范流 + 浮动 + 定位定位模式选择器 {position:属性值} 动态定位（理解）static:动态定位 动态定位是定位模式中的默认属性，没有边偏移，在网布布局中简直不必<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background-color: blue; position: static; top: 200px; left: 200px; } </style></head><body> <div></div></body></html> relative（理解）绝对定位依据本身规范流的地位来进行边偏移。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background-color: blue; /*改为绝对定位*/ position: relative; top: 200px; left: 200px; } </style></head><body> <div></div></body></html> ...

August 3, 2020 · 5 min · jiezi

关于css:CSS项目及chorm调试工具-5

项目前期筹备筹备工具ps(切片工具)+ Vs code或其它的开发工具+chorm浏览器 筹备文件创立根目录 根目录外面创立html文件 css文件夹 image文件夹 js文件(目前用不上) css书写程序 布局流程 chorm调试工具关上控制台f12 或ctrl+shift+I 或右击查看 疾速定位css行数 疾速定位到以后行ctrl+g css拼写单词谬误 注意事项子元素的宽度能够大于父元素在某些状况下 子元素的宽度能够大于父元素，例如在某些布局中，子元素的宽度能够大于版心宽度在这个案例中，每个li的宽度为300px，margin-right的值为20，等于每行的宽度为（300px+20px）X4=1280px,能够container的值设为1280px且大于nav的1200px,且不受影响失常的布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 革除默认款式 */ * { margin: 0; padding: 0; } /* 革除浮动 */ .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; } /* 款式 */ .nav { width: 1200px; margin: 20px auto; background-color: pink; } .container { width: 1280px; } .container ul li { float: left; height: 200px; width: 300px; list-style: none; margin-right: 20px; margin-bottom: 10px; background-color: blue; } </style></head><body> <div class="nav "> <div class="container "> <ul class="clearfix"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div></body></html> ...

August 3, 2020 · 1 min · jiezi

关于css:CSS布局模式之浮动-4

css布局的三种模式规范流依照元素的显示模式进行排列，故称为规范流浮动次要用于多个块级盒子在同一行显示定位次要把盒子定位到浏览器的某个地位 前面会常常用到定位行内块元素和浮动的区别行内块元素能够让元素在同一行显示，然而两头有空隙，而浮动却恰好解决这个问题float(浮动)设置浮动属性的元素会脱离规范流，会将元素挪动到指定的地位浮动的作用 能让多个块级盒子在同一行显示能够实现盒子的左右对齐浮动最早是用来实现图片盘绕成果 选择器 {float: 属性值;} 浮动之浮篇浮动的盒子会脱标，且不占地位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { height: 200px; width: 200px; background-color: blue; float: left; } .box2 { width: 400px; height: 400px; background-color: brown; } </style></head><body> <div class="box1"></div> <div class="box2"></div></body></html> 浮动的盒子之漏篇浮动的盒子，会把原来的地位漏给上面规范流的盒子，且不占地位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { height: 200px; width: 200px; background-color: blue; /*浮动的盒子不占地位，地位会漏给上面的盒子*/ float: left; } .box2 { width: 400px; height: 400px; background-color: brown; } </style></head><body> <div class="box1"></div> <div class="box2"></div></body></html> ...

August 3, 2020 · 5 min · jiezi

关于css:css基础border边框

border-width 不反对百分比值。 border-style的默认值是none。只设置border-width或border-color是看不到边框的。 border-style:solid实线边框。 border-style:dashed虚线边框。 brder-style:dotted虚点边框。虚点边框在Chrome和Firefox上是小方点，而在IE浏览器上是小圆点。 border-color默认色彩就是color属性的值。就是当没有指定 border-color 色彩值的时候会应用以后元素的color值作为边框色。 例如下段代码边框色彩就是红色。 .box{ border:1px solid; color:red} 喜爱文章就请关注我！ 大家遇到什么问题能够留言给我，期待一起成长！

August 3, 2020 · 1 min · jiezi

关于css:css的小知识点

知识点1：transform: translate(-50%, -50%)在position: fixed的状态下将transform横竖调成-50%，之后用它弄成鼠标的精准度。top和left都为0 知识点2：pointer-events: none解决层数关系，说白了抉择他的div都将成为 “只能看不能用的货色”因为获取以后的div都会时时跟着你！你本来点击的按钮点上来是有效的！因为被你以后圆形的盒子挡住了！只有你用了pointer-events: none那么这个圆形就成了陈设！不信你就点击下方的 干死我 这个按钮 知识点3：addEventListener多动能的一个，在ec5里都是onclick，onmousemove！有他你就能间接写click，mousemove等而且还有删除事件，比方当初的圆形圈太碍眼！那么就做一个按钮 function oooooo(){ 本来的圆形函数 } xxx.removeEventListener("click", oooooo)知识点4：a.style.cssTexta 和b一样 a.style.cssText = b.style.cssText = "left:" + e.clientX + "px;top:" + e.clientY + "px" 意思是a的style的 {} 里装 left：xxxx! 外面的e就是获取以后通过的相干参数！咱们抉择了e.clientX和Y <p class="box">此处省略6万字</p><div class="a"></div><div class="b"></div><button id="xx"> 干死我 </button><style>body { background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596380156120&di=c9f3e71c29a91d37ddf77038a1812357&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F56f62bab021a8.jpg') no-repeat; background-size: cover;} #xx { margin: auto; display: block; padding: 10px 64px; background: none; border: 1px solid #fff; color: #fff; } .box { line-height: 1.7; color: #fff; margin-top: 280px; padding: 10px 250px; text-align: center; } .a { width: 50px; height: 50px; background: none; border-radius: 100px; border: 1px solid #fff; position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); transition: 0.1s all; pointer-events: none; } .b { width: 8px; height: 8px; background: none; border-radius: 100px; border: 1px solid #fff; position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); transition: 0.15s all; pointer-events: none; } p:hover~.a { background: rgba(255, 255, 255, 0.22); border: none; } p:hover~.b { opacity: 0; }</style><script>var a = document.querySelector('.a');var b = document.querySelector('.b');document.addEventListener('mousemove', function(e){ a.style.cssText = b.style.cssText = `left:${e.clientX}px;top:${e.clientY}px`})document.getElementById("xx").addEventListener('click', function(){ alert("此时胜利")})</script>

August 2, 2020 · 1 min · jiezi

关于css:css的小知识点

知识点1：transform: translate(-50%, -50%)在position: fixed的状态下将transform横竖调成-50%，之后用它弄成鼠标的精准度。top和left都为0 知识点2：pointer-events: none解决层数关系，说白了抉择他的div都将成为 “只能看不能用的货色”因为获取以后的div都会时时跟着你！你本来点击的按钮点上来是有效的！因为被你以后圆形的盒子挡住了！只有你用了pointer-events: none那么这个圆形就成了陈设！不信你就点击下方的 干死我 这个按钮 知识点3：addEventListener多动能的一个，在ec5里都是onclick，onmousemove！有他你就能间接写click，mousemove等而且还有删除事件，比方当初的圆形圈太碍眼！那么就做一个按钮 function oooooo(){ 本来的圆形函数 } xxx.removeEventListener("click", oooooo)知识点4：a.style.cssTexta 和b一样 a.style.cssText = b.style.cssText = "left:" + e.clientX + "px;top:" + e.clientY + "px" 意思是a的style的 {} 里装 left：xxxx! 外面的e就是获取以后通过的相干参数！咱们抉择了e.clientX和Y <p class="box">此处省略6万字</p><div class="a"></div><div class="b"></div><button id="xx"> 干死我 </button><style>body { background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596380156120&di=c9f3e71c29a91d37ddf77038a1812357&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F56f62bab021a8.jpg') no-repeat; background-size: cover;} #xx { margin: auto; display: block; padding: 10px 64px; background: none; border: 1px solid #fff; color: #fff; } .box { line-height: 1.7; color: #fff; margin-top: 280px; padding: 10px 250px; text-align: center; } .a { width: 50px; height: 50px; background: none; border-radius: 100px; border: 1px solid #fff; position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); transition: 0.1s all; pointer-events: none; } .b { width: 8px; height: 8px; background: none; border-radius: 100px; border: 1px solid #fff; position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); transition: 0.15s all; pointer-events: none; } p:hover~.a { background: rgba(255, 255, 255, 0.22); border: none; } p:hover~.b { opacity: 0; }</style><script>var a = document.querySelector('.a');var b = document.querySelector('.b');document.addEventListener('mousemove', function(e){ a.style.cssText = b.style.cssText = `left:${e.clientX}px;top:${e.clientY}px`})document.getElementById("xx").addEventListener('click', function(){ alert("此时胜利")})</script>

August 2, 2020 · 1 min · jiezi

关于css:CSS盒子模型-3

css盒子模型网页布局的关键点：盒子盒子模型组成部分盒子的组成 margin(外边距)border(边框)padding(内边距)content(内容) borderborder-width:盒子的宽度border-style:边框的款式 默认值：none(无款式) solid(实线) dashed(虚线) dotted(点线)border-color:边框的色彩简写形式 border:border-width border-style border-color<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 200px; height: 200px; background-color: #0000FF; border: 10px solid #008000; } </style> </head> <body> <div></div> </body></html>border的边框写法 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> input { border: none; border-bottom:1px solid red; } </style> </head> <body> 账号：<input type="text" name="username"> <br /> 明码：<input type="password" name="password"> <br /> </body></html> border-collapseborder-collapse:表格合并因为表格中的行标签和单元格标签都领有本人的边框 因而须要合并边框 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> table, tr, td, th { border-collapse: collapse; } .t-red { background-color: hotpink; } </style> </head> <body> <table border="1" cellspacing="0" cellpadding="0" align="center" height="300" width="500"> <caption> <h2>小说排行耪</h2> </caption> <tr class="t-red"> <th>排名</th> <th>关键词</th> <th>今日搜寻</th> <th>最近七日</th> <th>相干链接</th> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td>345</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>2</td> <td>盗墓笔记</td> <td>34555</td> <td>123444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>3</td> <td>西游记</td> <td>24555</td> <td>13444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr class="t-red"> <td>4</td> <td>东游记</td> <td>3455</td> <td>3444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>5</td> <td>甄嬛传</td> <td>3555</td> <td>1444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr> <td>6</td> <td>水浒传</td> <td>355</td> <td>12344</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> <tr class="t-red"> <td>7</td> <td>三国演义</td> <td>3555</td> <td>13444</td> <td> <a href="#">贴吧</a> <a href="#">百度</a> <a href="#">图片</a> </td> </tr> </table> </body></html> ...

August 2, 2020 · 4 min · jiezi

关于css:CSS选择器及三大特性-2

复合选择器为什么要应用复合选择器？可能疾速高效的选中指标元素标签复合选择器是由一个或者多个根本选择器 通过不同的组合形式组合而成的后辈选择器 父级 子级 {属性1:属性值1；属性2:属性值2； }注意事项 后辈选择器又被称为蕴含选择器 能够选中指标元素的子孙后代父元素写在后面 子元素写在前面 两头用空格隔开<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .item a { color: red; } </style> </head> <body> <div class="item"> <a href="#">外部链接</a> <a href="#">外部链接</a> <a href="#">外部链接</a> <a href="#">外部链接</a> </div> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> </body></html>子元素选择器 父级>子级 {属性1:属性值1；属性2:属性值2；}注意事项 子元素选择器只能抉择指标元素的亲儿子元素父元素写在后面 子元素写在前面 两头用>隔开<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> ul>li { color: yellow; } </style> </head> <body> <ul> <li><a href="#">链接</a></li> <li><a href="#">链接</a></li> <li><a href="#">链接</a></li> <li><a href="#">链接</a></li> </ul> </body></html>交加选择器交加选择器是由两个选择器组成的 。 找到的标签必须满足：既有标签一的特点，又有标签二的特点。 标签1.标签2 {属性1:属性值1；属性2:属性值2；}注意事项 两个标签选择器之间用.连贯，且不能有空格<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> p.red { color: #0000FF; } </style> </head> <body> <p class="red">段落</p> <p class="red">段落</p> <p class="red">段落</p> <p class="red">段落</p> <div class="red">宰割 分区</div> <div class="red">宰割 分区</div> <div class="red">宰割 分区</div> <div class="red">宰割 分区</div> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> </body></html>并集选择器并集选择器能够抉择多个款式雷同的标签元素，两头用逗号隔开<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> p,div,span { color: #0000FF; } </style> </head> <body> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <div>宰割 分区</div> <div>宰割 分区</div> <div>宰割 分区</div> <div>宰割 分区</div> <span>跨度 跨距</span> <span>跨度 跨距</span> <span>跨度 跨距</span> <span>跨度 跨距</span> </body></html>测试 1.将登录改为红色 2.将所有的主导航栏的链接改为橙色 3.将主导航和测导航栏的字体改为14px且为楷体 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .site-r>a { color: red; } .nav a { color: orange; } .nav,.site-nav { font:14px "楷体"; } </style> </head> <body> <!-- 主导航栏 --> <div class="nav"> <ul> <li><a href="#">公司首页</a></li> <li><a href="#">公司产品</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">分割咱们</a></li> </ul> </div> <!-- 侧导航栏 --> <div class="site-nav"> <div class="site-1">左侧导航栏</div> <div class="site-r"><a href="#">登录</a></div> </div> </body></html>链接伪类选择器 a:link:为拜访的链接 a:visited:拜访过的链接 a:hover:鼠标通过时选定的链接 a:active:鼠标选定时的链接记忆小窍门: 依照love hate来记忆 ...

August 2, 2020 · 6 min · jiezi

关于css:CSS选择器及三大特性-2

复合选择器为什么要应用复合选择器？可能疾速高效的选中指标元素标签复合选择器是由一个或者多个根本选择器 通过不同的组合形式组合而成的后辈选择器 父级 子级 {属性1:属性值1；属性2:属性值2； }注意事项 后辈选择器又被称为蕴含选择器 能够选中指标元素的子孙后代父元素写在后面 子元素写在前面 两头用空格隔开<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .item a { color: red; } </style> </head> <body> <div class="item"> <a href="#">外部链接</a> <a href="#">外部链接</a> <a href="#">外部链接</a> <a href="#">外部链接</a> </div> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> </body></html>子元素选择器 父级>子级 {属性1:属性值1；属性2:属性值2；}注意事项 子元素选择器只能抉择指标元素的亲儿子元素父元素写在后面 子元素写在前面 两头用>隔开<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> ul>li { color: yellow; } </style> </head> <body> <ul> <li><a href="#">链接</a></li> <li><a href="#">链接</a></li> <li><a href="#">链接</a></li> <li><a href="#">链接</a></li> </ul> </body></html>交加选择器交加选择器是由两个选择器组成的 。 找到的标签必须满足：既有标签一的特点，又有标签二的特点。 标签1.标签2 {属性1:属性值1；属性2:属性值2；}注意事项 两个标签选择器之间用.连贯，且不能有空格<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> p.red { color: #0000FF; } </style> </head> <body> <p class="red">段落</p> <p class="red">段落</p> <p class="red">段落</p> <p class="red">段落</p> <div class="red">宰割 分区</div> <div class="red">宰割 分区</div> <div class="red">宰割 分区</div> <div class="red">宰割 分区</div> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> </body></html>并集选择器并集选择器能够抉择多个款式雷同的标签元素，两头用逗号隔开<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> p,div,span { color: #0000FF; } </style> </head> <body> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <div>宰割 分区</div> <div>宰割 分区</div> <div>宰割 分区</div> <div>宰割 分区</div> <span>跨度 跨距</span> <span>跨度 跨距</span> <span>跨度 跨距</span> <span>跨度 跨距</span> </body></html>测试 1.将登录改为红色 2.将所有的主导航栏的链接改为橙色 3.将主导航和测导航栏的字体改为14px且为楷体 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .site-r>a { color: red; } .nav a { color: orange; } .nav,.site-nav { font:14px "楷体"; } </style> </head> <body> <!-- 主导航栏 --> <div class="nav"> <ul> <li><a href="#">公司首页</a></li> <li><a href="#">公司产品</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">分割咱们</a></li> </ul> </div> <!-- 侧导航栏 --> <div class="site-nav"> <div class="site-1">左侧导航栏</div> <div class="site-r"><a href="#">登录</a></div> </div> </body></html>链接伪类选择器 a:link:为拜访的链接 a:visited:拜访过的链接 a:hover:鼠标通过时选定的链接 a:active:鼠标选定时的链接记忆小窍门: 依照love hate来记忆 ...

August 2, 2020 · 6 min · jiezi

关于css:CSS基本知识1

为什么呈现CSS?HTML满足不了设计者的需要HTML操作属性不不便HTML外面增加款式带来的是臃肿和繁琐CSSCSS：层叠样式表 设置网页外观的款式css的书写形式行内样式表通过style的属性值来设置元素的款式<标签名 style="属性1:属性值1; 属性2:属性值2;">内容</标签名>注意事项 1. style便是元素的属性2. 属性与属性值之间用:相隔3. 多组属性值之间用;相隔4. 没有实现元素款式和构造相拆散代码案例 <h2 style="font-family: '楷体'; color: blue; ">二级题目</h2>内联样式表将CSS代码写在<head></head>之间 并用style标签定义<head> <style> 选择器 { 属性1：属性值1; 属性2：属性值2; 属性3：属性值3; } <style><head>注意事项 type="text/css"能够省略只能管制以后页面没有彻底实现款式和构造相拆散 <head> <meta charset="utf-8"> <title></title> <style> h2 { color:red; font-family: 楷体; } </style> </head>内部样式表将样式表放入一个或多个以.css扩展名的文件中 ，用link标签将样式表引入html文件中 <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./stylesheet.css"> </head> CSS样式表总结 选择器作用：找到特定的页面HTML元素标签选择器长处: 可能疾速为某一类元素设置款式 毛病： 不能设计差异化款式。 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { color: blue; font-family: "楷体"; font-size: 20px; } span { color: green; font-family: "宋体"; } </style> </head> <body> <div>宰割 分区</div> <div>宰割 分区</div> <div>宰割 分区</div> <div>宰割 分区</div> <span>跨度 跨距</span> <span>跨度 跨距</span> <span>跨度 跨距</span> <span>跨度 跨距</span> </body></html> ...

August 2, 2020 · 3 min · jiezi

关于css:BFC

定义：Block format context 块级格局上下文BFC原理：1.BFC元素垂直方向上边距会产生重叠（哪个px大就抉择哪个）2.BFC区域不会与浮动元素产生重叠3.BFC是一个独立容器，容器外面的元素不会影响到里面的元素，里面的元素也不会影响他。4.计算BFC的高度时，浮动元素也参加计算。 创立BFC：float属性不为noneposition属性为absolute或fixeddisplay属性为inline-block、table-cell、table-caption、flex、inline-flexoverflow属性不为visible BFC应用场景1.自适应两栏布局（浮动时，右浮动高于左浮动）在浮动元素上加overflow:hidden2.革除外部浮动（当子元素均浮动时，其无奈撑开父元素）在父元素上加 overflow: hidden;3、避免marin重叠在其中一个元素上减少一个父元素，加属性：overflow: hidden;

July 31, 2020 · 1 min · jiezi

关于css:css基础概念

css知识点盒子模型：w3c规范盒子模型： width只包含 contentie盒子模型： width只包含 content + padding + border分明浮动的办法分明浮动是为了，解决 子元素浮动导致父元素高度塌陷的问题 伪类 clear：both罕用 overflow：hidden罕用居中形式1、text-align: cneter 2、margin： 0 auto 3、dispaly: flex;justfly-content： center； 4、父元素设置绝对定位，子元素设置相对定位，而后： left： 50%;top: 50%;transform：translatē（-50%， —50%） 伪类与伪元素状态类： ：hover 鼠标悬停时触发：visited 抉择拜访过的链接：link 抉择未拜访的链接：focus 抉择获取焦点的输出字段构造类： ：first-child 匹配第一个子元素：last-child 最初一个子元素： nth-child(2n) 抉择偶素类元素表单类： :chencked 选中:deafult 默认:disabled 禁止css动画与突变动画次要分三种： 1、transition 实现突变动画2、transform 实现转动动画3、animation 实现自定义动画 css渐变色次要分为两种： 1、linear-gradients 线性渐变色 线性突变（Linear Gradients）- 向下/向上/向左/向右/对角方向 2、 radial-gradients 径向突变径向突变（Radial Gradients）- 由它们的核心定义 HTML5与CSS3新增元素HTML5: 标签 视频标签 video音频标签 audio语义化标签 nav/ aside等属性 加强表单 input的type属性meta的charest设置字符集script 减少 async 实现异步加载贮存loacalStorgesessionStrogeindexDBapi canvas绘图svg 绘图api拖放天文定位等 CSS3: ...

July 29, 2020 · 1 min · jiezi

关于css:css通用问题记录

css挪动端字体设置http://caibaojian.com/font-fa...

July 28, 2020 · 1 min · jiezi

关于css:CSS进阶巧用伪元素before和after制作绚丽效果

原创：叫我詹躲躲起源：思否链接：巧用伪元素before和after制作壮丽成果 所谓‘伪元素’，就是自身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些原本不存在的元素施展着作用。本文次要探索伪元素beforce和after的罕用应用场景。 CSS :before 选择器定义和阐明:before 选择器向选定的元素前插入内容。应用content 属性来指定要插入的内容。 CSS :after 选择器定义和阐明:after 选择器向选定的元素之后插入内容。应用content 属性来指定要插入的内容。 这两个伪元素会在真正页面元素之前和之后插入一个额定的元素，从技术角度上讲，它们与上面的HTML标记是等效的。 1.伪类光圈 <div class="hover-circle">CSS</div>.hover-circle { width: 100%; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; letter-spacing: 0.3rem; font-weight: bold; position: relative; cursor: pointer; color: #666;}.hover-circle::before { width: 8.5rem; height: 8.5rem; border: 3px solid pink; content: ""; border-radius: 50%; position: absolute; opacity: 0;}.hover-circle::after { width: 7.2rem; height: 7.2rem; border: 6px solid pink; content: ""; border-radius: 50%; position: absolute; opacity: 0;}.hover-circle:hover::before,.hover-circle:hover::after { animation-duration: 0.8s; animation-delay: 0.2s; animation: circle 0.8s;}@keyframes circle { 0% { opacity: 0; scale: 1; } 25% { opacity: 0.25; } 50% { opacity: 0.5; scale: 1.03; } 75% { opacity: 0.75; } 100% { opacity: 1; scale: 1.03; }}2.伪类括号成果 ...

July 27, 2020 · 10 min · jiezi

关于css:CSS进阶巧用伪元素before和after制作绚丽效果

原创：叫我詹躲躲起源：思否链接：巧用伪元素before和after制作壮丽成果 所谓‘伪元素’，就是自身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些原本不存在的元素施展着作用。本文次要探索伪元素beforce和after的罕用应用场景。 CSS :before 选择器定义和阐明:before 选择器向选定的元素前插入内容。应用content 属性来指定要插入的内容。 CSS :after 选择器定义和阐明:after 选择器向选定的元素之后插入内容。应用content 属性来指定要插入的内容。 这两个伪元素会在真正页面元素之前和之后插入一个额定的元素，从技术角度上讲，它们与上面的HTML标记是等效的。 1.伪类光圈 <div class="hover-circle">CSS</div>.hover-circle { width: 100%; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; letter-spacing: 0.3rem; font-weight: bold; position: relative; cursor: pointer; color: #666;}.hover-circle::before { width: 8.5rem; height: 8.5rem; border: 3px solid pink; content: ""; border-radius: 50%; position: absolute; opacity: 0;}.hover-circle::after { width: 7.2rem; height: 7.2rem; border: 6px solid pink; content: ""; border-radius: 50%; position: absolute; opacity: 0;}.hover-circle:hover::before,.hover-circle:hover::after { animation-duration: 0.8s; animation-delay: 0.2s; animation: circle 0.8s;}@keyframes circle { 0% { opacity: 0; scale: 1; } 25% { opacity: 0.25; } 50% { opacity: 0.5; scale: 1.03; } 75% { opacity: 0.75; } 100% { opacity: 1; scale: 1.03; }}2.伪类括号成果 ...

July 27, 2020 · 10 min · jiezi

关于css:CSS进阶巧用伪元素before和after制作绚丽效果

原创：叫我詹躲躲起源：思否链接：巧用伪元素before和after制作壮丽成果 所谓‘伪元素’，就是自身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些原本不存在的元素施展着作用。本文次要探索伪元素beforce和after的罕用应用场景。 CSS :before 选择器定义和阐明:before 选择器向选定的元素前插入内容。应用content 属性来指定要插入的内容。 CSS :after 选择器定义和阐明:after 选择器向选定的元素之后插入内容。应用content 属性来指定要插入的内容。 这两个伪元素会在真正页面元素之前和之后插入一个额定的元素，从技术角度上讲，它们与上面的HTML标记是等效的。 1.伪类光圈 <div class="hover-circle">CSS</div>.hover-circle { width: 100%; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; letter-spacing: 0.3rem; font-weight: bold; position: relative; cursor: pointer; color: #666;}.hover-circle::before { width: 8.5rem; height: 8.5rem; border: 3px solid pink; content: ""; border-radius: 50%; position: absolute; opacity: 0;}.hover-circle::after { width: 7.2rem; height: 7.2rem; border: 6px solid pink; content: ""; border-radius: 50%; position: absolute; opacity: 0;}.hover-circle:hover::before,.hover-circle:hover::after { animation-duration: 0.8s; animation-delay: 0.2s; animation: circle 0.8s;}@keyframes circle { 0% { opacity: 0; scale: 1; } 25% { opacity: 0.25; } 50% { opacity: 0.5; scale: 1.03; } 75% { opacity: 0.75; } 100% { opacity: 1; scale: 1.03; }}2.伪类括号成果 ...

July 27, 2020 · 10 min · jiezi

关于css:CSSposition

首先解释一下什么是文档流，其实应该是normal flow，不晓得为什么中文叫文档流。。。文档流是指元素按从上到下，从左到右的形式显示，是HTML默认的排列布局形式。 上面是position的几个属性 staticposition默认属性，元素在页面流中失常呈现，并作为页面流的一部分，不能通过z-index进行档次分级 absolute相对定位，元素绝对离它最近的开启定位的父元素定位（absolute和fix除外），能够通过z-index进行档次分级。开启absolute的元素会脱离失常的文档流，它所占据的地位会被前面的元素顶上 relative绝对定位，元素绝对它本来的地位进行定位，能够通过z-index进行档次分级 fix固定定位，元素绝对浏览器窗口左上角定位，能够通过z-index进行层级分级。开启fix的元素也会脱离失常文档流

July 25, 2020 · 1 min · jiezi

关于css:HTML5CSS3前端入门教程从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS

本教程案例在线演示有路网PC端有路网挪动端 收费配套视频教程收费配套视频教程 教程配套源码资源教程配套源码资源 思考对人的形容形式 人 { 身高:175cm; 体重:70kg; 肤色:黄色}CSS根本语法结构选择器 { 申明1; 申明2; }h1 { font-size:12px; color:#F00;}style标签<style type="text/css">h1 { font-size:12px; color:#F00;}</style>标签选择器HTML标签作为标签选择器的名称 <h1>…<h6>、<p>、<img/>p { font-size:16px;}类选择器<标签名 class= "类名称">标签内容</标签名> .类名称 { font-size:16px;}ID选择器<标签名 id= "id名称">标签内容</标签名> #id名称 { font-size:16px;}标签选择器间接利用于HTML标签 类选择器可在页面中屡次应用 ID选择器在同一个页面中只能应用一次 制作《浣溪沙》应用标签选择器设置题目字体大小为20px 页面中所有段落中的文本字体大小为16px 应用类选择器设置注释和译文内容字体色彩为绿色 应用ID选择器设置译文题目色彩为蓝色 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>《浣溪沙》</title> <style type="text/css"> h1 { font-size: 20px; } p { font-size: 16px; } .poem { color: green; } #title { color: blue; } </style></head><body> <h1>浣溪沙</h1> <hr /> <p class="poem">一曲新词酒一杯，<br /> 去年天气旧亭台。<br /> 夕阳西下几时回？<br /> 无可奈何花落去，<br /> 似曾相识燕归来。<br /> 小园香径独彷徨。 </p> <p id="title">译文</p> <p class="poem">听一支新曲喝一杯美酒，还是去年的天气旧日的亭台，西落的夕阳何时再回来？ 那花儿落去我也无可奈何，那归来的燕子似曾相识，在小园的花径上单独彷徨。</p></body></html>CSS复合选择器后辈选择器 ...

July 24, 2020 · 2 min · jiezi

关于css:CSS-列表模型之counter计数器

CSS 列表模型之counter计数器计数器是一种非凡的数字跟踪器，通常用于为CSS列表项主动编号。你能够在我的项目中通过counter-increment、counter-set、counter-reset来创立一个计数器，并在counter()/counters()中应用。在CSS语法中，须要定义一个counter-name作为计数器的惟一标识，这是必不可少的。解析计数器个别有以下几个步骤： 以后计数器从父元素继承而来，遵循父元素的计数规定通过counter-reset实例化一个新的计数器通过counter-increment设置计数器的递增值通过counter-set为计数器设置计数初始值通过counter()/counters()应用计数器 counter-reset你能够应用counter-reset实例化元素上的新计数器，作用是给这个新计数器起一个名字并附上初始值。[<counter-name> <integer>]中<counter-name>就是计数器名字，<integer>为初始化，初始值默认为0。上面是罕用的两个例子： h1 { counter-reset: zhaodao } /* 计数器名称'zhaodao' */h1 { counter-reset: zhaodao 99 } /* 计数器名称'zhaodao', 并附初值99 */你也能够给初值设置正数或者小数，不过设置小数时，比方2.99，在IE和Firefox中无奈辨认，会当做0解决；在Chrome下向下取整，当成2解决。你也能够利用它给多个计数器同时命名。 H1 { counter-reset: zhaodao -1 zhaodaom 99 } counter-set 用法与 counter-reset 一样，这里不做解释，如果你感兴趣，能够移步https://www.w3.org/TR/2020/WD-css-lists-3-20200709 规范文档自行浏览 counter-increment你能够应用counter-increment为你定义的计数器设置每一次递增的值。计数规定能够简述为：counter-reset惟一，每counter-increment1次，计数值就加1。你能够像上面的例子一样应用它们。 .counter { counter-reset: zhaodao 2; counter-increment: zhaodao; }.counter:before { content: counter(zhaodao); }这里值得细说一下，.counter作用的第一个元素的计数值显示为3，而不是定义的zhaodao初始值2。这是因为counter-increment的起因，在渲染第一个元素的时候，counter-increment就曾经再起作用，使得初始值递增1，最初渲染进去的就是3，而不是2。 counter()/counters()你能够应用最简略的组合应用形式： counter(zhaodao) /* zhaodao就是counter-reset的名称 */根底应用语法counter(name, style)，其中style在此与list-style-type代表统一，示意一种计数的字符模式。比方你能够像上面一样去应用： counter(zhaodao, lower-roman); /* 以小写罗马数字格局示意以后计数器zhaodao的值 */你还能够应用counters()进行级联计数，应用语法counter(name, string)，其中string为字符串，必须值，代表计数序号的连贯字符串。能够实现相似1-1,1-2的成果，其中的strting为-。 <style> .reset { padding-left: 20px; counter-reset: zhaodao; line-height: 1.6; color: #666; } .counter:before { content: counters(zhaodao, '-') '. '; counter-increment: zhaodao; }</style><div class="reset"> <div class="counter">zhaodao1 <div class="reset"> <div class="counter">zhaodao1-1</div> <div class="counter">zhaodao1-2 <div class="reset"> <div class="counter">zhaodao1-2-1</div> <div class="counter">zhaodao1-2-2</div> <div class="counter">zhaodao1-2-3</div> </div> </div> <div class="counter">zhaodao1-3</div> </div> </div> <div class="counter">zhaodao2</div> <div class="counter">zhaodao3 <div class="reset"> <div class="counter">zhaodao3-1</div> </div> </div></div>成果如下： ...

July 24, 2020 · 2 min · jiezi

关于css:CSS-列表模型之marker标记

CSS 列表模型之marker标记本文次要对::master伪元素、list-item下的list-style-image、list-style-type款式属性进行介绍，并介绍了在理论中如何应用。list-item下还有其余不罕用的款式属性这里不做介绍。感兴趣的能够自行移步CSS 规范文档::marker 是什么::marker是一个标记伪元素，可能定义内容填充在list-item上代表列表项的标记，先附上一个例子，就能很分明地看出它的作用。 <style>li::marker { content: "(" counter(list-item) ")"; }li { display: list-item; }</style><ul> <li>zhaodao88.com 找商机</li> <li>zhaodao88.com 找人脉</li> <li>zhaodao88.com 找洽购</li></ul>效果图： 在这里，marker为元素定义的是每一项列表项后面的标记符，在伪元素内的content的内容就是要在列表项后面所填充的内容。 应用::marker填充标记内容须要留神的是，一般元素要想应用marker，必须将元素定义成display: list-item，list-items在创立的时候会主动生成marker和counter。 标记的款式能够应用list-style-type和 list-style-image属性或者间接应用::marker伪元素进行款式编写。上面展现一个例子。 用::marker伪元素对标记进行管制，伪元素内content的内容就是标记符的内容<style> p { margin-left: 12 em; } p.note { display: list-item; counter-increment: note-counter; } p.note::marker { content: "Note " counter(note-counter) ":"; color: blue; font-weight: bold; }</style><p>zhaodao88.com 找商机</p><p class="note">zhaodao88.com 找洽购</p><p>zhaodao88.com 找人脉</p>成果如图: 当然也能够为标记设置字体款式、色彩等属性，相似下面成果li::marker { color: blue; font-weight:bold; } 值得注意的是：目前只有以下属性可能作用于marker伪元素上 所有的字体款式：font相干white-space属性color属性text-combine-upright, unicode-bidi, direction属性content属性所有的animation和transition属性有issue提出，在标记应用white-space: pre可能不会有很好的成果，能够尝试text-space-collapse: preserve-spaces和text-space-trim: discard-after一起应用，更能达到想要的成果，感兴趣的请移步 issue 4448和issue 4891 ...

July 24, 2020 · 1 min · jiezi

关于css:positionfixed基于父元素定位

position: fixed 是基于浏览器进行定位的想设置基于父元素定位，须要给父元素设置款式transform:translate(0)也能够给父元素下级，上下级....在该元素下层就能够，亲测无效。

July 22, 2020 · 1 min · jiezi

关于css:『真香警告』这33个超级好用的CSS选择器你可能见都没见过

作者：陈大鱼头github： KRISACHAN前言CSS 选择器是 CSS 世界中十分重要的一环。 在 CSS 2 之后，所有的 CSS 属性都是按模块去保护的。 CSS 选择器也是如此，然而现在也曾经公布了第四版 —— CSS Selectors Level 4 ，这一版最早的草案公布于2011年09月29日，最初更新是2018年11月21日。 上面让咱们一起来看看 Level 4 新推出的一些选择器。 注释上面咱们依照类型来划分逻辑组合（Logical Combinations）在这个分类下，咱们有以下四个选择器： :not()其实 :not() 不算是新标签，不过在 Level 4 里，减少了多选的性能，代码如下： /* 除了.left, .right, .top之外所以的div的盒子模型都会变成flex*/div:not(.left, .right, .top) { display: flex;}/* 等价于 */div:not(.left), div:not(.right), div:not(.top) { display: flex;}兼容性如下： .png) 额。。。还不能用 :is():is() 伪类将选择器列表作为参数，并抉择该列表中任意一个选择器能够抉择的元素。这对于以更紧凑的模式编写大型选择器十分有用。 看个栗子： /* 抉择header, main, footer里的任意一个悬浮状态的段落(p标签) */:is(header, main, footer) p:hover { color: red; cursor: pointer;}/* 等价于 */header p:hover,main p:hover,footer p:hover { color: red; cursor: pointer;}兼容如下： ...

July 21, 2020 · 5 min · jiezi

关于css:换肤功能css文件中准备三套颜色

1.知识点1.document.documentElement// 获取html的办法（document.documentElement）// document.documentElement是专门获取html这个标签的document.documentElement.setAttribute('data-skin', key)效果图:key=‘white’时~~~~ 2. :root 选择器定义和用法：:root 选择器匹配文档根元素。在 HTML 中，根元素始终是 html 元素。 2.应用1.剖析性能点a.点击按钮，切换一套css（这个性能很简略） b.把皮肤设置保留到全局变量，在拜访其它页面时也能有成果 c.把设置保留到本地，退出利用再进来时，仍然加载上次设置的皮肤

July 20, 2020 · 1 min · jiezi

谈谈对你对BFC的理解呢

谈谈对你对BFC的了解？它是什么？书面解释：BFC (Block Formatting Context) 这几个英文拆解 Block: Block在这里能够了解为Block-level Box,指的是块级盒子的规范Formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规定，它决定了其子元素将如何定位，以及和其余元素的关系和相互作用BFC是指一个独立的渲染区域，只有Block-level Box参加， 它规定了外部的Block-level Box如何布局，并且与这个区域内部毫不相干.它的作用是在一块独立的区域，让处于BFC外部的元素与内部的元素相互隔离. 如何造成的？BFC触发条件: 根元素，即 HTML 元素position 的值, 为 fixed/absolutefloat, 不为 noneoverflow, 不为 visibledisplay 的值为 inline-block、table-cell、table-caption作用是什么呢？避免margin产生重叠 案例地址：https://codepen.io/xiaomuzhu/pen/NZGjYQ 两栏布局，避免文字盘绕等案例地址：https://codepen.io/xiaomuzhu/pen/XLmRPM 避免父级元素塌陷案例地址：https://codepen.io/xiaomuzhu/pen/VJvbEd Can you talk about your understanding of BFC ?What is it ?Explanation: BFC ( Block Formatting Context ) Block: Block can be understood as Block-level Box here, which refers to the standard of block-level boxFormatting context: block-level context formatting, it's a rendering area in the page, and has a set of rendering rules, which determines how its child elements will be positioned, as well as the relationship and interaction with other elementsBFC refers to an independent rendering area. Only the Block-level Box participates. It specifies the internal Block-level Box how to lay out and has no relationship with the outside of this area.Its function is to isolate the elements inside the BFC from the outside elements in a separate area. ...

July 17, 2020 · 1 min · jiezi

CSS-实现居中

程度居中程度居中是咱们在开发的过程中，遇见的十分十分常见的布局，上面???? 我就简略来说一说常见的办法 margin: autotext-alignflexposition 定位margin: auto最简略实现 程度居中 的形式，指标元素必须要有宽度才能够，留神，此办法只对 块级元素(block)无效 <style> .box { background: #ddd; } .target { width: 200px; height: 100px; background: red; margin: auto; }</style><div class="box"> <div class="target"></div> </div>text-align能够实现块级元素外部的行内元素程度居中，留神，此办法只对 行内元素(inline)、行内块(inline-block)、行内表(inline-table)、inline-flex 元素 程度居中都无效 当有多个行内元素相邻时，也能失效 <style> .box { text-align: center; background: #ddd; } .target { display: inline-block; width: 50px; height: 50px; background: red; }<style><div class\="box"> <span class\="target"></span></div>flex利用弹性布局flex，通过 justify-content 设置弹性盒子元素在主轴(默认横轴)方向上的对齐形式 <style> .box { display: flex; justify-content: center; background: #ddd; } .target { width: 50px; height: 50px; background: red; }</style><div class="box"> <span class="target"></span></div>position 定位看下方代码，能够很清晰的看出，首先父元素要加一行 position: relative，其次必须晓得指标元素的宽度，如果不晓得就必须应用 js 动静的去计算 ...

July 15, 2020 · 2 min · jiezi

如何理解层叠上下文How-to-understand-the-cascading-context

如何了解层叠上下文？概念简述层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的绝对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延长，HTML元素根据其本身属性依照优先级程序占用层叠上下文的空间。 如何产生？触发以下条件则会产生层叠上下文： 根元素 (HTML),z-index 值不为 "auto"的 相对/绝对定位，一个 z-index 值不为 "auto"的 flex 我的项目 (flex item)，即：父元素 display: flex|inline-flex，opacity 属性值小于 1 的元素（参考 the specification for opacity），transform 属性值不为 "none"的元素，mix-blend-mode 属性值不为 "normal"的元素，filter值不为 "none" 的元素，perspective值不为“none”的元素，isolation 属性被设置为 "isolate"的元素，position: fixed在 will-change 中指定了任意 CSS 属性，即使你没有间接指定这些属性的值（参考 这篇文章）-webkit-overflow-scrolling 属性被设置 "touch"的元素How to understand the cascading context?What is it?The cascading context is a three-dimensional concept of HTML elements. These HTML elements extend on a hypothetical z-axis relative to the user facing the (computer screen) window or web page. The HTML elements occupy the space of the cascading context according to their own attributes in order of priority . ...

July 13, 2020 · 1 min · jiezi

Awesome-Grid-Layout-Flex-Layout

阐明：本文整顿网络空间内优良的 Grid 布局 和 Flex 布局的文章。因为集体常常遗记这两种布局的属性，故在此记录之。Awesome Grid LayoutW3C 的 Grid 布局指南【有彩图】几个 Grid 布局的经典案例如何用一行 CSS 实现 10 种古代布局【GIF 丰盛】Awesome Flex LayoutFlex 布局可视化教程Flex 布局是如何工作的【有彩图和Gif】

July 12, 2020 · 1 min · jiezi

CSS实现水波纹扩散动画

// html<div class="animation"></div>// JavaScript.animation { position: relative; width: 10px; height: 10px; background: #409eff; border-radius: 50%; &:after { content: ''; position: absolute; top: -5px; left: -5px; width: 100%; height: 100%; border: 5px solid #ff1883; border-radius: 50%; animation: antStatusProcessing 1.2s ease-in-outinfinite; }}@-webkit-keyframes antStatusProcessing { 0% { -webkit-transform: scale(.8); transform: scale(.8); opacity: .5 } to { -webkit-transform: scale(2.4); transform: scale(2.4); opacity: 0 }}@keyframes antStatusProcessing { 0% { -webkit-transform: scale(.8); transform: scale(.8); opacity: .5 } to { -webkit-transform: scale(2.4); transform: scale(2.4); opacity: 0 }}

July 10, 2020 · 1 min · jiezi

使用flex对页面进行平均分布局

页面效果 代码： <div class="container"> <div class="row"> <div class="child" style="background-color: lightblue;">1</div> <div class="child" style="background-color: lightgreen;">2</div> <div class="child" style="background-color: lightsalmon;">3</div> <div class="child" style="background-color: pink;">4</div> </div> <div class="row"> <div class="child1" style="background-color: lightblue;">1</div> <div class="child" style="background-color: lightgreen;">2</div> <div class="child" style="background-color: lightsalmon;">3</div> </div> <div class="row"></div></div><style>.container { height: calc(100vh - 70px); padding: 10px 10px 0 10px; display: flex; flex-direction: column;}.row { flex: 1; background-color: lightblue; border: 1px solid #ccc; display: flex;}.child{ flex:1;}.child1{ flex:2;}</style>

July 8, 2020 · 1 min · jiezi

Css技巧

移动端横竖屏样式转换横屏 @media all and (orientation : landscape) {  h1{color:red}}竖屏 @media all and (orientation : portrait){   h1{color:yellow}}

July 7, 2020 · 1 min · jiezi

前端基础进阶二十三BFC

BFC

July 6, 2020 · 1 min · jiezi

完全搞懂-BFC

什么是 BFCBFC 全称是 Block Formatting Context，即块格式化上下文。 除了 BFC，还有： IFC（行级格式化上下文）- inline 内联GFC（网格布局格式化上下文）- display: gridFFC（自适应格式化上下文）- display: flex或display: inline-flex注意：同一个元素不能同时存在于两个 BFC 中它是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。怎么理解呢？实际就是说 BFC 是一个渲染区域，并且有自己的一套渲染规则，使其内部布局的元素具有一些特性。 BFC 提供一个独立的布局环境，BFC 内部的元素布局与外部互不影响。 块级元素CSS 属性值 display 为 block，list-item，table 的元素。 块级盒具有以下特性： CSS 属性值 display 为 block，list-item，table 时，它就是块级元素布局上，块级盒呈现为竖直排列的块每个块级盒都会参与 BFC 的创建每个块级元素都会至少生成一个块级盒，称为主块级盒；一些元素可能会生成额外的块级盒，比如 <li>，用来存放项目符号创建 BFC以下元素会创建 BFC 根元素（<html>）浮动元素（float不为none）绝对定位元素（position为absolute或fixed）表格的标题和单元格（display 为 table-caption，table-cell）匿名表格单元格元素（display 为 table 或 inline-table）行内块元素（display 为 inline-block）overflow 的值不为 visible 的元素弹性元素（display 为 flex 或 inline-flex 的元素的直接子元素）网格元素（display 为 grid 或 inline-grid 的元素的直接子元素）以上是 CSS2.1 规范定义的 BFC 触发方式，在最新的 CSS3 规范中，弹性元素和网格元素会创建 F(Flex)FC 和 G(Grid)FC。 ...

July 5, 2020 · 2 min · jiezi

简析CSS盒模型Box-Model

CSS 盒子模型(Box Model)每个HTML元素都可以看作是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 个人觉得盒模型主要是用来区分元素的大小标准盒模型 (W3C盒模型)标准的盒模型由content内容+padding内填充+border边框+margin外边距组成盒子的大小由:内容的宽高+内填充的大小+边框的大小+外边距的大小决定div{ width: 200px; height: 200px; background: red; padding:10px; border:10px solid #ccc; margin:10px;}//盒子宽：260px;高：260px;//div元素宽：240px;高：240px;//content宽200px,高:200px; 怪异盒模型 (IE盒模型)怪异盒模型由content内容+padding内填充+border边框组成盒子的大小由：width、height决定div{ width: 200px; height: 200px; background: red; padding:10px; border:10px solid #ccc; margin:10px;}//盒子宽：200px;高：200px;//div元素宽：200px;高：200px;//content宽160px,高:160px; 既标准盒模型的width、height是指content的大小，怪异盒模型的width、height是指content+padding+border的大小当box-sizing为content-box时，使用的是W3C盒模型，当box-sizing为border-box时，使用的是IE盒模型。内边距paddingpadding-方向（left,right,top.bottom）表示给指定方向设置内边距。padding 简写，其属性值遵循上右下左的顺序，若缺值找反向的值。若只有一个值，则上右下左方向的值都一样。div{ width: 200px; height: 200px; background: red; padding:10px 20px; padding-left:30px;} 外边距marginmargin-方向（left,right,top.bottom）表示给指定方向设置外边距。margin 简写，其属性值遵循上右下左的顺序，若缺值找反向的值。若只有一个值，则上右下左方向上的值都是一样的。div{ width: 200px; height: 200px; background: red; margin:10px 20px 30px 40px; margin-top:50px;}边框属性 border1.边框宽度 border-width 2.边框样式 border-style,属性值为：solid实线 dashed虚线 dotted点线 double双线 3.边框颜色 border-color div{ width: 200px; height: 200px; border-width:3px; border-style: double; border-color:red; <!--border:1px solid #ccc;合并写法-->}4.改变某条边框的属性值,border-方向left、right、top、bottom） ...

July 2, 2020 · 1 min · jiezi

CSS-Emphasis-Marks-文本强调标记

我们常常会在网页中对文本某一关键词进行凸显强调，加粗、高亮、下划线等等一系列相对匹配的样式去装饰进而引起用户注意，今天我们看看另一种实现方法text-emphasis。页面文本段落中，有时我们会根据上下文语境对某一关键词进行凸显（如，加粗、高亮、斜体、文本渐变、下划线等等）标记对文本中某一关键词进行装饰，以便引起用户的关注，进而让用户理解段落文本中心意思。 现在我们可以了解一个新的文本强调装饰属性，即：text-emphasis。 看上去没多大用途，实际项目中可能很少用到，但是，多一份关注，多一份选择嘛，了解一下也无妨。 CSS Emphasis Marks 首先，我们了解下关于这个Emphasis标记的属性。 字面上我们可以看出是强调的意思，其读音 [emfss]。 text-emphasis是text-emphasis-style与text-emphasis-color的缩写。还有一个属性是text-emphasis-position，不在text-emphasis的缩写范围内。即： p{text-emphasis: '•'orange}p{text-emphasis-style: '•'; text-emphasis-color: orange;}两者渲染结果是一样的。 其次，了解下具体属性。 1、text-emphasis-style属性 - 强调标记的样式。 text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>none 初始值，无标记。 [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] 关键字装饰 dot • | circle ● | double-circle ◉ | triangle ▲ | sesame ﹅string 自定义字符装饰。 如一些特殊字符或文本等等。 ...

June 30, 2020 · 1 min · jiezi

引入Bootstrap45工具类的方法

为什么要使用bootstrap工具类bootstrap工具类集成了开发过程中常用的一些样式，如paddiing,margin,flex,color等，有利于提升开发效率。 如何引入npm i bootstrap --save引入bootstrap工具类相关文件@import "~bootstrap/scss/functions";@import "~bootstrap/scss/variables";@import "~bootstrap/scss/mixins";@import "~bootstrap/scss/root";@import "~bootstrap/scss/utilities";如何使用如何自定义主题如何使用工具类

June 30, 2020 · 1 min · jiezi

CSS有几种定位方式How-many-positioning-methods-in-css

CSS有几种定位方式？static: 正常文档流定位，此时 top, right, bottom, left 和 z-index 属性无效，块级元素从上往下纵向排布，行级元素从左向右排列。relative：相对定位，此时的『相对』是相对于正常文档流的位置。absolute：相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素它的父级、和祖父级元素都为 relative，它会相对他的父级而产生偏移。fixed：指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应用中的近似效果就是IOS通讯录滚动的时候的『顶屁股』。How many positioning methods in css ?static: normal document flow positioning, meanwhile, the attributes of top, right, bottom, left 和 z-index are invalid, and the block-level elements are arranged vertically from top to bottom, the inline-level are arranged horizontally from left to right.relative: relative positioning, the relative at this time is related to the position of the normal document flow.absolute: related to the nearest no-static positioning the offset of ancestor element to determine the positioning of element. Such as an absolute positioning element, its parent and grandparent elements all are realtive, it will offset from its parent.fixed: specify the position of element realted to the viewport of screen to specify the position of element. the potion of element will not change when the screen is scrolled. For example, the button that back to top generally uses this positioning methods.sticky: Sticky positioning, the characteristics of it is similar to the combination of realtive and fixed, and its approximate effect in pratical applications is the top butt when the IOS address book scrolls.

June 29, 2020 · 1 min · jiezi

关于padding被计算在width中问题boxsizing相关

前一阵子遇到一个小问题，在同样的样式（主要是宽高边距之类的）条件下，DIV在移动端和PC端的宽度不一样，排除了绝大多数样式的问题，但是有个比较陌生，就是box-sinzing，其实经常看到，只不过没怎么注意过，连具体的值都不知道有哪些，在开发者工具里面试了一下，果然和这个样式有关，因此查了一些资料并记录一下。 盒子模型首先，盒子模型大家都知道，W3C标准的Box Model由四部分组成——content、padding、border、margin Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.如果我们给一个应用了标准盒模型的div设置一个宽度，那么，实际上我们设置的是上文提到的content的宽度，也就是下图这个样子 Element空间高度 = content height + padding + border + margin还有个不那么“标准”的盒模型，就是IE6以下（也就是处于Quirks怪异模式）的浏览器所使用的，在这种情况下： Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)这个时候如果我们给div设置一个宽度，那就是为元素的内容+边框+内边距设置了一个总值，如图所示 上面张图片都使用以下这段代码 div { width: 200px; height: 100px; margin: 40px; padding: 20px; border: 10px solid blue;}与box-sizing有什么关系通过box-sizing这个样式我们可以改变这种宽度计算方式，它的属性值有两个：content-box和border-box。默认值为content-box，也就是标准的盒子模型，此时的计算公式为 width = 内容的宽度height = 内容的高度另一个属性为border-box，它的width和height属性包括内容，内边距和边框，但不包括外边距。看到这里相信大家都已经明白了，我们用了一个新的属性重现了一个不太“标准”的标准，被设置为border-box的元素在计算宽高时使用的就是IE6的模式。 ...

June 27, 2020 · 1 min · jiezi

双飞翼布局

双飞翼布局实现双飞翼布局的五种方法 浮动绝对定位flex布局tablegrid浮动浮动的实现，就是直接将左右两边的块实现左右浮动，中间实现自适应 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动</title> <style> * { margin: 0; padding: 0; } section div { height: 200px; } .left { width: 300px; float: left; background-color: pink; } .right { width: 300px; float: right; background-color: blue; } .center { background-color: red; } </style></head><body> <section> <div class="left"></div> <div class="right"></div> <div class="center"> 浮动布局 </div> </section></body></html>绝对定位实现方法将三块div实现绝对定位，将左右两块div分别设置left和right为0，中间实现left和right各为左右两边的宽度 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位</title> <style> * { margin: 0; padding: 0; } section div { height: 200px; position: absolute; } .left { width: 300px; left: 0; background-color: pink; } .right { width: 300px; right: 0; background-color: blue; } .center { left: 300px; right: 300px; background-color: red; } </style></head><body> <section> <div class="left"></div> <div class="center"> absolute布局 </div> <div class="right"></div> </section></body></html>flex布局 ...

June 25, 2020 · 2 min · jiezi

弹性盒模型解析

弹性盒模型解析一、什么是弹性盒模型 1、弹性盒模型是一种更优秀的布局方式，使用弹性布局模式可 以控制子元素排列方式，不需要通过计算控制元素间隙。 2、弹性盒模型本质是通过两轴来控制的，一个是换行轴，一个 是排列方向，开启弹性模式以后称之为弹性容器，内外边距都可 以正常使用。二、布局的默认方式 1、display:block 默认是block-block 对外块元素对内块元素 2、display:inline 默认是inline-inline 对外是行内元素对内行内元素 3、display:inline-block 对外是行内元素对内是行内元素 4、display:flex 默认是display:block-flek 对外是块元素对内是弹性盒模型 5、display:inline-flek 对外是inline对内是弹性盒模型三、弹性盒模型的特点 1、默认从左往右排列 2、子元素有了弹性可以自动伸缩 3、默认不换行，因为换行需要手动控制四、语法与取值(主轴) 1、父级定义弹性盒模型容器 display:flex; 定义排列方向 (主轴)flex-direction:row(默认从左到右) row-reverse(从 右到左排列) culumn(排列从上到下) culumn-reverse(从下到 上排列)五、换行方式(交叉轴 辅轴) 1、默认是不换行，并且均分子元素宽高。 2、flex-warp:warp;(正常换行 向右 向下) flex- warp:warp-reverse(反向换行 向上 向左) 默认nowrap不换行。总结: 1、不管任何时候，主轴永远垂直与交叉轴 2、flex-warp: 主轴 交叉轴;(是主轴与交叉轴的简写方式) 3、子元素不设置宽的时候由内容撑开 4、子元素不设置高的时候等比例填充 5、不设置宽高由内容撑开六、(justify-centent)主轴的布方案 1、just-centent:flex-start(默认 主轴的开始位置) 2、just-centent:flex-ent(主轴结束的位置) 3、just-centent:center(主轴元素居中排列) 4、just-centent:space-around(空白元素均分给子元素并且子元素空白是父元素的两倍) 5、just-centent:space-between(只有子元素有间距) 6、just-centent:space-evenly(父元素与之元素间距相等)七、交叉轴的布局方案

June 21, 2020 · 1 min · jiezi

弹性盒模型解析

弹性盒模型解析一、什么是弹性盒模型 1、弹性盒模型是一种更优秀的布局方式，使用弹性布局模式可 以控制子元素排列方式，不需要通过计算控制元素间隙。 2、弹性盒模型本质是通过两轴来控制的，一个是换行轴，一个 是排列方向，开启弹性模式以后称之为弹性容器，内外边距都可 以正常使用。二、布局的默认方式 1、display:block 默认是block-block 对外块元素对内块元素 2、display:inline 默认是inline-inline 对外是行内元素对内行内元素 3、display:inline-block 对外是行内元素对内是行内元素 4、display:flex 默认是display:block-flek 对外是块元素对内是弹性盒模型 5、display:inline-flek 对外是inline对内是弹性盒模型三、弹性盒模型的特点 1、默认从左往右排列 2、子元素有了弹性可以自动伸缩 3、默认不换行，因为换行需要手动控制四、语法与取值(主轴) 1、父级定义弹性盒模型容器 display:flex; 定义排列方向 (主轴)flex-direction:row(默认从左到右) row-reverse(从 右到左排列) culumn(排列从上到下) culumn-reverse(从下到 上排列)五、换行方式(交叉轴 辅轴) 1、默认是不换行，并且均分子元素宽高。 2、flex-warp:warp;(正常换行 向右 向下) flex- warp:warp-reverse(反向换行 向上 向左) 默认nowrap不换行。总结: 1、不管任何时候，主轴永远垂直与交叉轴 2、flex-warp: 主轴 交叉轴;(是主轴与交叉轴的简写方式) 3、子元素不设置宽的时候由内容撑开 4、子元素不设置高的时候等比例填充 5、不设置宽高由内容撑开六、(justify-centent)主轴的布方案 1、just-centent:flex-start(默认 主轴的开始位置) 2、just-centent:flex-ent(主轴结束的位置) 3、just-centent:center(主轴元素居中排列) 4、just-centent:space-around(空白元素均分给子元素并且子元素空白是父元素的两倍) 5、just-centent:space-between(只有子元素有间距) 6、just-centent:space-evenly(父元素与之元素间距相等)七、交叉轴的布局方案

June 21, 2020 · 1 min · jiezi

高清屏下正确显示1px宽度的圆角边框

直接设置border:1px solid #ccc;在手机下看会比设计稿粗，浏览器边框的最小的显示像素是1px,设置0.5px也是会渲染成1px的效果，而在css的1px根据手机的品牌或型号不同在高清屏的物理像素是2像素或者3像素 <div class="list-wrapper border-1px"> </div>border-1px:after保存公用样式，list-wrapper:after 进行个性化设置，如圆角大小，边框颜色 .list-wrapper { width: 300px; height: 200px; margin: 100px auto;}.list-wrapper:after { border-radius: 20px; border-color:#ccc ;}.border-1px { position: relative}.border-1px:after { content: ""; pointer-events: none; display: block; position: absolute; left: 0; top: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; border-width: 1px; border-style: solid; box-sizing: border-box; width: 100%; height: 100%;}@media (-webkit-min-device-pixel-ratio: 2) { .border-1px:after { width: 200%; height: 200%; -webkit-transform: scale(.5); transform: scale(.5) }}@media (-webkit-min-device-pixel-ratio: 3) { .border-1px:after { width: 300%; height: 300%; -webkit-transform: scale(.333); transform: scale(.333) }}

June 20, 2020 · 1 min · jiezi

Grid-布局介绍

grid 里面属性名称在学习grid标签前,要先认清下列属性代表的含义,方便学习. 容器内的属性 grid-template-columns grid-template-rows 数字 百分比 fraction分数 grid-rwo-gap grid-column-gap grid-gap(缩写) grid-templete-areas grid-auto-flow(改变排版方向) justift 改变主轴(横向)布局 align副轴(纵向) justify-items align-items place-items(缩写) justify-content 默认stretch align-content place-content(缩写) grid-auto-columns grid-auto-rowsgrid-template-columns 设置的是元素有列,每列的宽度是多少. 单位可以用fr(fraction, 按比例分配宽度), px固定宽度, % 百分比宽度.grid-template-columns: 100px 100px 100px,定义网格内 共3竖每竖宽度100px. 当然这里会发现如果有10竖的话那不得敲一堆100px???这里为了省事我们可以用repeat(3,100px)重复3次,每个都是100px; 嫌麻烦不想去计算个数的话也可以用repeat(auto-fill,100px)自动用100px 铺满.grid-template-rows 的话就是同样的理解方式,只不过row定义的是行的高度.没有设置到的元素 默认回事stretch拉伸平分空白空间.row-gap column-gap row-gap 和column-gap 刚开始的写法是 grid-row-gap/grid-column-gap 后来改为现在的row-gap/column-gap. 分别是定义行间的距离和列间距离.可以缩写为gao:列间距 行间距. 如果两个数值相同的话,可以所写成一个.grid-template-area分划区域,分化的时候要注意,我们的布局是盒子(方方正正的),因此划分区域也要是方形区域,不然会导致代码错误不能识别.grid-auto-flow和flex的direction很想,定义排列方式.横向row 竖向columns.不过这里多了个属性row dense, column dense. 是为了节约页面空间,自动补满.justify-

June 20, 2020 · 1 min · jiezi

Sass-环境语法手机优先项目实践

分享一下这两天搞 sass 的学习成果。 直接点击下图，可观看视频教程 本文主要分为三个部分，分别是 环境语法实践环境安装 sass 工具， 很简单，参考官方文档 链接在这里 https://www.sasscss.com/install 主要介绍一下开发环境。以 VSCODE 为例， 我安装了这样几个插件分别是： sass,提供 sass 语法高亮sass live compile 自动生成 css 插件，可 watch 本地文件发生修改，自动触发生成live server 启用一个简单 http 服务，提供 html 页面快速预览需要修改插件配置话，快捷键 command + , ，打开 vscode 配置。 查找 sass live找到相应的配置，增加个人配置： "liveSassCompile.settings.formats": [ { "format": "compressed", "extensionName": ".css", "savePath": "./dist" } ],语法这里主要介绍实际项目中最常用的基础语法。 语法格式在 sass 中主要支持两种语法格式，分别以 .scss、 .sass作为后缀。 .scss 语法类似 css 语法 .sass 语法更简洁，但是切换起来有点麻烦 所以，推荐使用 .scss 语法 ...

June 18, 2020 · 1 min · jiezi

记一次grid布局实战应用分享会

记一次grid布局实战应用分享会记录了组内技术分享会, 有同样需求的同学可以参考一下分享全程下来时间大约 45分钟最终画图如下:↓ 一. 到底能不能用在工程??(兼容性)老生长谈的问题了, 但也是决定性的问题,如下图:对于不用兼容ie浏览器的工程可以玩起来了, grid也不算新技术了, 技术的发展需要coder的推动, 有时候问问自己不用grid的原罪是不是'懒得学'哈哈哈哈, 我查了一下 chrome 57版本是 2017.3月发布的 . ie使用display: -ms-grid的写法也可以有效, 但是网上看到很多同学遇到了未知错误, 所以如果真的必须兼容ie的话还是不要使用grid. 二. 技能定位(flex的好战友)grid不会代替flex, 相反他两位是非常棒的搭档, 配合使用简直开始螺旋人生, grid布局可以打破dom位置的限制,使用不好的话容易造成语义混乱, 导致鲁棒性下降, 这次我们就一起来探究一下grid布局的实战场景. 三. 从上下左右居中'新方法'引导兴趣烂大街的一个面试题, 居中的方法. 你可以秀出grid了, 那么分数一定多加一分到两分.. 此处我介绍'四种'之后的内容会解释为什么会这样, 而且还有很多qiyinqiaoji... 可以说学会了grid布局那么你的居中技巧就多出了6种以上! 整体dom结构如下<div class="wrap"> <div class="box"></div> </div>固定的样式.box{ width: 100px; height: 100px; border: 1px solid red; }实现方法: 有点玩赖, 就是两个属性的随意组合,突出一个'秀'注意这里的属性不是flex的, 他在grid布局模式下就是属于grid. .wrap{ // 当然了开启布局的方式也与flex一样 display: inline-grid | grid; width: 300px; height: 300px; // 第一种 align-items: center; justify-items: center; // 第二种 align-items: center; justify-content: center; // 第三种 align-content: center; justify-items: center; // 第四种 align-content: center; justify-content: center; }四. 横排的排列开启布局时, 我们打开调试模式鼠标悬停在dom上会出现网格与flex不一样, 单纯的开启布局并不会影响元素的布局,不会压缩抻拉宽高. <style> /* 只是开启grid布局不会有变化, 不像flex布局默认把内部的元素排成一排 */ .wrap{ display: grid; height: 100px; width: 300px; border: 1px solid; } .box{ height: 50px; width: 50px; border: 1px solid red; } </style></head><body> <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div></body> ...

June 18, 2020 · 8 min · jiezi

css中子元素zindex与父元素兄弟节点的层级问题

1.问题的出现写了一个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展示。元素的结构大致如下： <div class="list"> <div class="unit"> <div class="content">列表项1</div> <div class="hover">弹出框1</div> </div> <div class="unit"> <div class="content">列表项2</div> </div> <div class="unit"> <div class="content">列表项3</div> <div class="hover">弹出框3</div> </div></div>部分样式如下： .unit{ position: relative； z-index: 1;}.hover{ position: absolute; z-index: 10;}实际效果如下： 列表项1的弹出框虽然可以遮盖住自身的内容，却无法遮盖住列表项2的内容。 2.原理看起来，弹出框的z-index值是大于列表项父元素的z-index值（包括兄弟元素的），所以应该会把所有列表项的内容都遮盖住才对。但是，实际上，这里我忽略了一个最基本的点。因为弹出框是列表项的子元素，所以其z-index值的大小，仅仅跟弹出框的兄弟元素对比才有意义。而对于与父元素（列表项）内容的层级，应该看父元素的层级关系。 我们可以想象为，每一个列表项，是一个平行世界，一个平行世界内部设置的z-index，只有跟这个世界内部的其它内容比较起来才有意义，你要跟别的平行世界去比较，那对不起，这玩意有次元压制。如果另一个平行世界的层级比你这个世界高，你自己的z-index设置的再高，那也是内部称霸王，再高也不会超过另一个世界的地板高。 在上边的示例中，虽然所有的列表项z-index都设置为了1，但是根据出现顺序，由于第二个列表项的层级关系会比第一个高，因此，列表项1的所有内容都会被列表项2遮盖。 3.解决方案目前能想到的解决方案就是将弹出框和列表项设为平级（变为兄弟元素），让弹出框的z-index值大于列表项的z-index，另外js手动设置每一个弹出框的定位。如果还有其它解决方案，可以留言一起讨论。

June 17, 2020 · 1 min · jiezi

从一个现象出发理解CSS层叠上下文

现象在实现Loading组件的时候，不知道大家有没有遇到下面的问题： 首先看看正常的情况： 如果试着在这个Loading组件下面的图片加上样式position: relative; z-index: 1，就会出现下面的情况： 这里的Loading组件是使用opacity以及transition去实现的（参考了Taro的实现），上述实现的具体代码可以从这里查看；Loading框的显示通过设置opacity从0到1的转换，中间通过transtition实现渐变的效果； // opacity从0到1转换，transtition实现渐变<div id="toast" style="opacity: 0; transition: opacity 0.5s linear 0s;"> <div class="mask"></div> <div class="loading"> ...省略代码 </div></div>可以发现当页面中存在其他的定位元素时，Loading框就有一部分显示异常，异常表现为opacity小于1时，被遮挡，opacity等于1时，才完全展示； 本质如果要修复这个问题，其实有多种方法： 比如说，通过移除定位元素的样式，比如上述情况可以去掉图片的样式position: relative; z-index: 1；但是显然，这是不可取的，治标不治本；或者修改Loading框的样式，比如说去掉tansition的渐变样式，但是这种方式导致Loading框的出现，失去了渐变的效果；要想出一种比较好的解决方案，需要看清现象的本质； 其实导致这种问题的原因，是因为opacity的css属性使得元素产生了层叠上下文；在MDN的文档里面有提到，在某些场景下是会产生层叠上下文，其中opacity小于1时，也会产生； 在产生层叠上下文的dom节点中，其内部的层叠顺序，不会影响到外部的元素； 所以在展示这个Loading组件的过程中，由于其opacity是逐渐从0转换到1的，所以： 当opacity小于1时，id为toast的div内形成层叠上下文，内部loading的样式不会影响到外部的元素，所以z-index为1的img-wrap会覆盖Loading组件；当opacity大于1时，id为toast的div不形成层叠上下文，所以z-index为1的img-wrap会被Loading组件的z-index:5000覆盖；<style> .loading { z-index: 5000; position: fixed; top: 30%; left: 50%; }</style><div class="wrapper"> <div class="img-wrap" style="position: relative; z-index: 1;"> <img src="https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180" alt=""> </div></div><div id="toast" style="opacity: 0; transition: opacity 0.5s linear 0s;"> <div class="mask"></div> <div class="loading"> ...省略代码 </div></div>了解了这个问题的本质是由于层叠上下文引起的，那首先我们要先掌握层叠上下文的原理，然后才能针对这个现象给出更好地解决方案； 什么是CSS层叠上下文在引出层叠上下文概念之前，首先需要说明的是，HTML中的每个元素的位置都存在三维的概念，即存在x,y,z轴的位置数值表示元素的位置；其中z轴方向上的HTML元素是存在层叠关系的，元素会按照一定优先级进行渲染；这里，在z轴方向的元素层叠顺序优先级就是基于层叠上下文(stacking context)这个概念实现的； 跟BFC一样，这个概念第一次看层叠上下文也是感觉比较抽象，在张鑫旭大神的文章中，用了官员来比喻层叠上下文，不同等级的官员来比喻层叠水平，这对理解概念更加容易了； 在本文中，我将使用自己的另外一个比喻来重新解释层叠上下文，前面提到，层叠顺序是基于层叠上下文的，元素在同一个层叠上下文中按照层叠顺序的规则进行排序，那么，层叠上下文可以比喻成一个装有卡片的盒子，在盒子中的卡片，按照一定的层叠规则进行排序； 例如，如下的HTML代码中，各个元素之间的层叠关系可以直观表示为： <div class="wrapper"> <div class="div1">div1</div> <div class="div2" style="position: fixed: z-index: 1"> <div class="child">child</div> </div> <div class="div3">div3</div></div> ...

June 9, 2020 · 2 min · jiezi

技能文字描边的三大方法

该文章参考了张鑫旭的两博文：paint-orderwebkit-text-stroke webkit-text-stroke文字描边描边效果：居中描边现象：text-stroke-width会削弱文字的字重，导致文字变细 -webkit-text-stroke: 2px red;//等同-webkit-text-stroke-width: 2px;-webkit-text-stroke-color: red;完美描边效果可以使用-webkit-text-stroke描边文字和非描边文字相互重叠覆盖的方法模拟。技巧就在于-webkit-text-stroke描边文字的描边宽度要是要实现的外描边效果宽度的2倍。 <div class="texts"> <p class="text1">我是苗冰的小哇啊</p> <p class="text2">我是苗冰的小哇啊</p></div>//css.texts { position: relative;}.text1 { font-size: 40px; position: absolute; z-index: 2; font-weight: bold;}.text2 { font-size: 40px; font-weight: bold; -webkit-text-stroke: green 6px; position: absolute;}text-stroke属性不行不断累加，如果想要实现多重描边效果，可以借助伪元素多层叠加模拟。 text-shadow.strok-outside { text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;}由于text-shadow不支持阴影扩展（box-shadow支持），因此，我们使用四向阴影叠加实现。如图，当文字特别大的时候，会有齿轮问题。 svgCSS paint-order作用在SVG图形元素上，设置是先绘制描边还是先绘制填充。在SVG中，描边和填充同时都有设置是很常见的，而SVG图形的描边和-webkit-text-stroke是一样的，都是居中描边。 svg { background-color:deepskyblue; fill:crimson; stroke:white; stroke-width:6px; font-size:40px; font-weight:bold;}.paint-order { paint-order:stroke;}<svg xmlns="http://www.w3.org/2000/svg"> <text x="10" y="50">我是测试小霸王</text> <text x="10" y="120" class="paint-order">我是测试小霸王</text></svg> //`||`表示或者，可以并存paint-order: normal | [ fill || stroke || markers ]paint-order: markers stroke;normal:默认值。绘制顺序是fill stroke markers。图形绘制是后来居上的，因此默认是描边覆盖填充，标记覆盖描边。fill:先填充。stroke:先描边，然后再填充或者标记。markers:先标记。下图坐标值的两个箭头，以及折线上的红色小圆点就是标记，<marker>元素绘制的CSS paint-order可以作用在SVG的以下这些元素上：<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>,~~~~ 以及<tspan>。 ...

June 9, 2020 · 1 min · jiezi

日常开发常用技巧与方法

CSS部分盒子边倾斜clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); 禁止点击事件/鼠标事件“穿透”div * { pointer-events: none; /*链接啊，点击事件啊，都没有效果了*/ }用来控制元素在移动设备上使用滚动回弹效果.main{ -webkit-overflow-scrolling: touch;}可解决在IOS中使用overflow:auto 形成的滚动条，滚动不流畅的情况 文字渐变效果.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue); -webkit-background-clip: text; color: transparent;}css三角形#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}JS部分JavaScript中检测数组的方法(1)、typeof操作符 这种方法对一些常用的类型检查没有问题，但对array和null 都判断为object(2)、instanceof操作符 这个操作符是检测对象的原型链是否指向构造函数的prototype对象的(3)、对象的constructor属性 const arr = []console.log(arr.constructor === Array) // true(4)、Object.prototype.toString const arr = []console.log(Object.prototype.toString.call(arr) === '[object Array]') // true(5)、Array.isArray() 常用的字符串操作字符串转化toString()字符串分隔split()字符串替换replace()获取长度length查询子字符串 indexOf返回指定位置的字符串或字符串编码 charAt charCodeAt字符串匹配 match字符串拼接concat字符串的切割或提取slice() substring() substr()字符串大小写转化 toLowerCase toUpperCase字符串去空格 trim() 用来删除字符串前后的空格其中第9中三者的区别如下：（1）slice(), 参数可以是负数，负数表示从字符串最后一个位置开始切割到对应结束位置（2）substring()，参数不可为负数，切割第一个位置到第二个位置的字符串（3）substr()， 参数不可为负数，第一个参数是开始位置，第二个参数为切割的长度字符串去重const str = '11122223333'const arr = str.split('')const uniqueStr = [...new Set(arr)].join('') ...

June 7, 2020 · 1 min · jiezi

常用页面布局-flex写法

Flex兼容性写法父级元素写法.box{ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ }子元素.flex1 { -webkit-flex: 1; /* Chrome */ -ms-flex: 1 /* IE 10 */ -webkit-box-flex: 1 /* 老版本语法 - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* 老版本语法 - Firefox 19- */ flex: 1; /* Spec - Opera 12.1, Firefox 20+ */} 1、水平垂直居中样式 ...

June 6, 2020 · 2 min · jiezi