Css | 乐趣区

关于css:深究移动端适配那些坑小数像素图片模糊

一、适配计划的利弊缩放最早是间接用 px 来写，而后用 meta 标签里的 scale 来缩放整个页面，简略粗犷。益处是简略疾速，害处是不能管制局部款式的缩放，一些边框之类的在小屏会变得很细。据说晚期天猫首页就是这么干的。其实之后所有适配计划都是这个原理，在编码的时候以设计稿为规范，到手机显示时则依据不同机型的显示宽度而缩放，只是缩放的技术不同。 rem 1rem 等于 <html> 的 fontSize 大小；rem 适配计划只须要给 <html> 的 fontSize 设置任意大小。因为设计稿个别为 750px 宽，所以 fontSize 设置为 75px 是比拟常见的教训规范，太大或太小对最终后果的精准度可能有影响。之后就能够确定 1rem = 75px，而后在还原设计稿时将 px 计算转成 rem 即可。并且要在 JavaScript 中退出脚本（flexable.js），依据屏幕显示宽度来动静扭转 <html> 的 fontSize，屏幕宽度越大则 fontSize 越大；rem 的劣势是根节点 fontSize 可控（即 rem 的缩放规范齐全可控），兼容性好。但始终是为了模拟出 vw 的成果，存在多一层转换，麻烦、不直观且精准度稍差；vw 1vw 等于以后屏幕显示区域的百分之一；vw 就是为动静布局而生的，所以不须要辅助任何脚本。个别设计稿宽度为 750px，那么还原设计稿的时候，1vw = 7.5px，依据这个将设计稿上的 px 换算成 vw 即可；vw劣势是准确、便捷，但兼容性稍差，规范的实现比 rem 晚 3 年；em em当初个别不用来做挪动端适配，这里只是顺带一讲；em 是惟一一个能够在部分实现绝对长度的单位；em 在 font-size 中应用是绝对于父元素的字体大小，在其余属性中应用是绝对于本身的字体大小，如 width（来自：MDN)em的呈现是为了解决文字无奈跟着页面一起放大这个问题。在ie6的那个年代，若应用px来设置 font-size ，当用户应用 Ctrl+滚轮来放大页面时，文字是不会跟着放大的。然而古代的浏览器曾经没有这个问题了；利用 em 依据本身字体动静适配的个性，能够实现很多需要，如依据字体大小动静扭转行高、宽度、边距等；二、逻辑像素和物理像素逻辑像素就是咱们平时所讲的像素，也就是 CSS 中的 px ，所以逻辑像素是一种抽象化的数字单位。而物理像素是指电子屏幕的最小发光单元。 ...

关于css:在线CSS代码压缩美化工具

在线CSS代码压缩丑化工具在线CSS代码压缩丑化工具在线CSS代码压缩、格式化工具。能够删除正文 https://tooltt.com/css/

关于css:CSS的三大特性

1.继承性作用: 给父元素设置一些属性, 子元素也能够应用, 这个咱们就称之为继承性 **留神点:** 1.并不是所有的属性都能够继承, 只有以color/font-/text-/line-结尾的属性才能够继承 2.在CSS的继承中不仅仅是儿子能够继承, 只有是后辈都能够继承 3.继承性中的特殊性 3.1 a标签的文字色彩和下划线是不能继承的，当做子元素，款式批改要在子元素解决 3.2 h标签的文字大小是不能继承的，当做子元素 **利用场景:** 个别用于设置网页上的一些共性信息, 例如网页的文字色彩, 字体,文字大小等内容2.层叠性概念：层叠性是指当一个标签被设置了多个反复的款式的时候，一个属性会笼罩另外一个属性。作用: 层叠性就是CSS解决抵触的一种能力 ** 留神点:** 层叠性只有在多个选择器选中"同一个标签", 而后又设置了"雷同的属性", 才会产生层叠性例子：先给div设置背景色彩为红色，而后设置背景色彩为粉红色，那么最终色彩可能为红色，也可能为粉红色（显著的两种色彩设置不能并立，所以只为其一，这里没给出确定答案是因为还要思考“优先级”） ** 实现准则：**层叠性次要遵循的准则是就近准则，在不思考优先级的状况下，在多个款式中最终失效的款式是离标签最近的款式。3.优先级作用:当多个选择器选中同一个标签, 并且给同一个标签设置雷同的属性时, 如何层叠就由优先级来确定优先级：!important>行内款式>id选择器>类选择器>标签选择器>通配符>继承【优先级高的规定会漠视层叠性，漠视就近准则来定义款式。比方定义了!important，即便行内款式离得近，最终失效的还是!important标注的属性】 3.1优先级判断的三种形式 1. 间接选中就是指继承如果是间接选中, 那么就是谁离指标标签比拟近就听谁的 2.雷同选择器(间接选中) 如果都是间接选中, 并且都是同类型的选择器, 那么就是谁写在前面就听谁的 3.不同选择器(间接选中) 如果都是间接选中, 并且不是雷同类型的选择器, 那么就会依照选择器的优先级来层叠 id>类>标签>通配符>继承>浏览器默认 3.2优先级之!important作用: 用于晋升某个间接选中标签的选择器中的某个属性的优先级的, 能够将被指定的属性的优先级晋升为最高留神点: 1.!important只能用于间接选中, 不能用于间接选中 2.通配符选择器选中的标签也是间接选中的 3.!important只能晋升被指定的属性的优先级, 其它的属性的优先级不会被晋升 4.!important必须写在属性值得分号后面 5.!important后面的感叹号不能省略 6.然而个别倡议不应用"!important",因为它会扭转级联的工作形式，使得调试变得艰难。 3.3优先级权重作用: 当多个选择器混合在一起应用时, 咱们能够通过计算权重来判断谁的优先级最高 ...

关于css:CSS-单边阴影

语法 box-shadow: h-shadow v-shadow blur spread color inset;box-shadow 向框增加一个或多个暗影。该属性是由逗号分隔的暗影列表，每个暗影由 2-4 个长度值、可选的色彩值以及可选的 inset 关键词来规定。省略长度的值是 0。 box-shadow属性值-- 单边暗影 .showdow-top{ box-shadow: 0px -10px 10px -10px #333; }.shadow-bottom{ box-shadow: 0px 10px 10px -10px #333; }.shadow-right{ box-shadow: 10px 0px 10px -10px #333; }.shadow-left{ box-shadow: -10px 0px 10px -10px #333; }box-shadow 配置阐明值形容h-shadow必须程度暗影的地位 ,容许负值v-shadow必须垂直暗影的地位。容许负值blur可选暗影的尺寸spread可选含糊间隔color可选暗影的色彩。请参阅 CSS 色彩值inset可选将内部暗影 (outset) 改为外部暗影

关于css:术语

对于元素布局上的扭转(增删节点，触发resize事件，批改style属性等)会触发回流对于元素视觉上的扭转(如扭转outline，background-color，visibility等)会触发重绘

关于css:Scss与Less区别

转自：https://www.cnblogs.com/lzy66...

关于css:解决-CSS3-多列样式-columnwidth-布局时内容被截断错乱

一、问题应用 CSS3 的 column-width: auto | <length> 属性时，呈现排列的内容被截断，呈现错位的景象。二、起因须要为图片容器设置高度，不然会崩掉。三、解决办法给须要分列的容器加上 height:100%;overflow: auto;。版权申明本博客所有的原创文章，作者皆保留版权。转载必须蕴含本申明，放弃本文残缺，并以超链接模式注明作者后除和本文原始地址：https://blog.mazey.net/412.html （完）

关于css:CSS中content属性的妙用

前言本文解说CSS中应用频率并不高的content属性，通过多个实用的案例，带你由浅入深的把握content的用法，让代码变得更加简洁、高效。定义W3school中这样定义： content 属性与 :before 及 :after 伪元素配合应用，来插入生成内容。该属性用于定义元素之前或之后搁置的生成内容。默认地，这往往是行内内容，不过该内容创立的框类型能够用属性 display 管制。在前端日常开发中，content属性应用频率并不高，所以开发者个别对它的了解并不深刻，通常会在革除浮动、字体图标时偶然应用。上面通过各种案例，来一起看看content的妙用。案例1. 革除浮动.left {float: left}.right {float: right}.clear:after { content: ''; clear: both; display: block;}<div class="container clear"> <div class="left">左</div> <div class="right">右</div></div>父元素.container中两个子元素.left和.right浮动后会脱离文档流，无奈撑起容器，造成.container高度为0。应用伪元素:after革除浮动，三个属性缺一不可： content: ''; 通过:after增加一个内容为空的伪元素。clear: both; 伪元素:after两侧浮动革除。dispaly: block; 设置块元素，因为clear只对块元素无效。说到clear属性，应用最多的就是clear: both，left/right用的却很少，因为both曾经蕴含left/right个性，简略间接还无效。想更加深刻理解clear属性，能够看看张鑫旭大神的精确了解CSS clear:left/right的含意及理论用处。 2. 小三角的气泡窗口.box { width: 200px; height: 100px; border-radius: 5px; background: #fff; position: relative;}.box:after { content: ''; position: absolute; bottom: -20px; right: 20px; width: 0; height: 0; border-top: 10px solid #fff; border-bottom: 10px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent;}<div class="box"></div>成果： ...

关于css:CSS简介与选择器

1.CSS3什么是CSS CSS (Cascading Style Sheets) 层叠样式表，是一个用于润饰文档（能够是标记语言HTML，也能够是XML或者SVN）的语言，能够将文档以更优雅的模式出现给用户。HTML和CSS之间的关系？ HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，能够蕴含文字、图片、视频等。 CSS款式是体现。就像网页的外衣。比方，题目字体、色彩变动，或为题目退出背景图片、边框等。所有这些用来扭转内容外观的货色称之为体现。 HTML就像是一个人，而CSS就像是衣服和化妆品，用来装璜HTML。通过标签来批改款式的毛病: 须要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有成果。当需要变更时咱们须要批改大量的代码能力满足现有的需要。HTML只有一个作用就是用来增加语义。通过CSS来批改款式有什么益处? 不必记忆哪些属性属于哪个标签。当需要变更时咱们不须要批改大量的代码就能够满足需要。在前端开发中CSS只有一个作用, 就是用来批改款式。2.语法2.1.CSS申明（CSS declarations） CSS语言的外围性能就是为特定的属性设定特定的值，CSS引擎通过计算出申明的每个属性来显示元素。CSS的属性和值都是大小写敏感的。属性与值通过“:”分隔开。并不是所有的值都实用于同一个属性，不同的属性有一系列不同的值。 2.2.CSS申明块（ CSS declaration blocks）将多个CSS申明写在一起，每个CSS申明通过“;”分隔开，最初一个css申明无需应用“;”分隔开。应用“{”“}”将多个CSS申明括起来，这样就形成了一个CSS申明块。 2.3.CSS规定集选择器（Selector）HTML 元素的名称位于规定集开始。它抉择了一个或多个须要增加款式的元素（在这个例子中就是 p 元素）。要给不同元素增加款式只须要更改选择器就行了。申明（Declaration）一个独自的规定，如 color: red; 用来指定增加款式元素的属性。属性（Properties）扭转 HTML 元素款式的路径。（本例中 color 就是 <p> 元素的属性。）CSS 中，由编写人员决定批改哪个属性以扭转规定。属性的值（Property value）在属性的左边，冒号前面即属性的值，它从指定属性的泛滥外观中抉择一个值（咱们除了 red 之外还有很多属性值能够用于 color ）。留神其余重要的语法：每个规定集（除了选择器的局部）都应该蕴含在成对的大括号里（{}）。在每个申明里要用冒号（:）将属性与属性值分隔开。在每个规定集里要用分号（;）将各个申明分隔开。 2.4.CSS可读性空白（ White space）空白意味着理论空格、制表符和新行，能够增加空白使样式表更加可读。正文（ Comments）/ 这里就是CSS的正文 / 速记写法（ Shorthand）相似于font，background， padding， border， margin 这些都被称为速记属性。这些属性容许在一行中写多个属性值。速记属性能够节省时间，使代码整洁。例如： border:1px solid red; background-color:red; padding: 10px 15px 15px 5px;等价于padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; ...

关于css:Flex弹性布局

Flex布局又称弹性布局，在小程序开发中比拟实用。因而将Flex布局相干属性整顿如下，搞清楚了这个布局，小程序开发的页面布局就不在话下了。网页布局（layout）是CSS的一个重点利用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些非凡布局十分不不便，比方，垂直居中就不容易实现。 2009年，W3C提出了一种新的计划—-Flex布局，能够简便、残缺、响应式地实现各种页面布局。目前，它曾经失去了所有浏览器的反对，这意味着，当初就能很平安地应用这项性能。 Flex布局将成为将来布局的首选计划。本文介绍Flex布局的语法。以下内容次要参考了上面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。一、Flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都能够指定为Flex布局。 .box{ display: flex;}行内元素也能够应用Flex布局。 .box{ display: inline-flex;}Webkit内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; / Safari / display: flex;}留神，设为Flex布局当前，子元素的float、clear和vertical-align属性将生效。二、基本概念采纳Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素主动成为容器成员，称为Flex我的项目（flex item），简称”我的项目”。容器默认存在两根轴：程度的主轴（main axis）和垂直的穿插轴（cross axis）。主轴的开始地位（与边框的交叉点）叫做main start，完结地位叫做main end；穿插轴的开始地位叫做cross start，完结地位叫做cross end。我的项目默认沿主轴排列。单个我的项目占据的主轴空间叫做main size，占据的穿插轴空间叫做cross size。三、容器的属性以下6个属性设置在容器上。 flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content3.1 flex-direction属性flex-direction属性决定主轴的方向（即我的项目的排列方向）。 .box { flex-direction: row | row-reverse | column | column-reverse;}它可能有4个值。 row（默认值）：主轴为程度方向，终点在左端。row-reverse：主轴为程度方向，终点在右端。column：主轴为垂直方向，终点在上沿。column-reverse：主轴为垂直方向，终点在下沿。 3.2 flex-wrap属性默认状况下，我的项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 ...

关于css:CSS书写案例

1、common.css/ common.css / @charset "UTF-8"; / 汇合所有插件 / { -webkit-box-sizing: border-box; box-sizing: border-box;}body,button,code,dd,dl,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,menu,ol,p,pre,textarea,ul { margin: 0;padding: 0;} article,aside,details,footer,header,iframe,menu,nav,section { display: block;} button,fieldset,iframe,img { border: 0;} h1,h2,h3,h4,h5,h6 { font-size: 100%;font-weight: 400;} table { border-collapse: collapse;border-spacing: 0;} em,i { font-style: normal;} li,ol,summary,ul { list-style: none;} a,a:active,a:hover { text-decoration: none;} body,button,html { -webkit-text-size-adjust: none;} button,input,select,textarea { -webkit-appearance: none;} a,button,input,textarea { -webkit-tap-highlight-color: transparent;} mark { background-color: transparent;} em,i { font-style: normal;} img { max-width: 100%;border: none;vertical-align: middle;} a:focus,button,button:focus,i:focus,img:focus,input,input:focus,li:focus,select,select:focus,span:focus,summary,textarea,textarea:focus { outline: 0;} body { font-family: "PingFang SC", "Droid Sans", arial, "Helvetica Neue", Helvetica, sans-serif;line-height: normal;color: #666;background-color: #f8f8f8;-webkit-user-select: none;-webkit-overflow-scrolling: touch;-webkit-font-smoothing: antialiased;} ...

关于css:HTML标签的使用

11111111

关于css:styleloader-我以为我懂了其实我错了

对于款式编译因为webpack编译的思维是万无皆可JS，意旨所有web我的项目关联的资源文件，都能够通过js关联起来。然而又因为图片，款式这些原本和js八竿子打不到一起的，所以就有了各种loader来解决他们的关联性问题；说到webpack的款式编译，总有几个loader是不能错过的，比方less-loader, css-loader，style-loader,轻易上一段罕用配置： const lessLoader = { test: /\.less$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, }, }, 'less-loader', ],}以上文件就是通知webpack，在遇到文件名以.less结尾的文件，先用less-loader编译，再用css-loader编译，最初用style-loader，已经我是用这样一段js伪代码来概述的： // 伪代码const res = styleLoader(cssLoader(lessLoader('xxx.less')))；其实这个伪代码，一点都不谨严. 都是loader，但作用却天壤之别style-loader 其实与 css-loader, less-loader的作用是有区别的，后者其实承当的是模块化与语法转译这一块；而style-loader这一类（还有罕用的mini-css-extract-plugin）承当的是粘结剂性能，就是将js中的css加载到html中，从而使款式失效; 随便谨严一点的伪代码应该这样写: const cssContent = cssLoader(lessLoader('xxx.less'))；// 通过styleTag插入css 字符串到head中styleLoader(cssContent, document.head)；如同文章写到这里就应该完结了，但实际上好戏才开始。已经我认为，style-loader是在构建时，就将款式插入到了html中，但实际上我错了，而且这一错就是五年(已经你认为的，不过是你的无知：送给本人),正确的答案是css被构建到了js文件中，而后在js文件加载时，通过style-loader提供的办法将其加载到html中。简略来讲，已经我认为这个loader是个构建时，但他其实是一个运行时。怎么判断呢，很简略，就像如何判断一个网站是否是服务端渲染一样，看网站首页申请获取的html文件是否含款式(也能够间接通过source面板查看html文件, 不是elements)。之所以会产生这个误判，是我间接平移了mini-css-extract-plugin的构建思维，这个plugin就剥离了JS中的款式，造成了一个新的文件，而后再把款式地址插入到html头中，这是个完完全全的构建时。而最近为什么会忽然关注到这个点，是因为咱们在调一个微组件的计划，在组件胜利加载时，发现款式失落,看看下图的惨不忍睹：通过debug，发现款式的确被打包进了文件，只是没有被加载到style标签中，第一直觉就是短少loader，而后查看构建工具，发现款式编译配置只到了css-loader这一级，短少style-loader。从构建后果看款式加载过程如果到这文章就完结了，仿佛就太不像我了，毕竟刨根问底（xuxudaodao）的我才是真的我.接下来，通过一段实例代码，来看webpack构建，是怎么实现款式加载的。示例代码： // style.less代码@font-size: 28px;.Demo { box-sizing: border-box; :global { .demo-title { font-size: @font-size; } }}import React from 'react';// 引入款式import style from './style.less';export default function Demo() { return ( <div className={style.Demo}> <h3 className="emo-title">this is a demo</h3> </div> );}而后通过webpack，采纳style-loader的形式构建，为了不便浏览，没有做代码压缩和美化。 ...

关于css:常用的css代码片段收集

css文字过长，显示省略号单行文本 overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行文本 display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; // 设置须要显示的行数overflow: hidden;应用flex布局实现css超出滑动，代码很简洁.list{ display: flex; overflow-x: auto;}.item{ flex-shrink: 0;}<div class="list"> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div></div>

关于css:两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果

问题形容咱们晓得浏览器页面上的文字失常状况下咱们是能够双击选中、或者单击鼠标横向拖动也能选中的，选中当前能够右击呈现面板而后去复制什么的。然而有的时候，这种成果咱们并不想要的，比方用户点快了的时候，所以咱们须要禁用这种成果，本文记录一下禁用选中成果的形式鼠标选中的效果图如下形式一：应用user-select属性css设置user-select:none;即可，若须要做浏览器兼容解决，请看下方残缺写法：代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h2 { /* 火狐 */ -moz-user-select: none; /* Safari 和欧朋 */ -webkit-user-select: none; /* IE10+ and Edge */ -ms-user-select: none; /* Standard syntax 规范语法(谷歌) */ user-select: none; } </style></head><body> <h2>你好啊CSS</h2></body></html>当然咱们通过js选中dom元素去设置css款式也是能够的：document.querySelector('h2').style.userSelect = "none"el-table也应用了user-select这个属性审查元素图解一下： MDN官网概念定义传送门：https://developer.mozilla.org...形式二：onselectstart事件onselectstart 就是用户选中DOM元素时候，被开始选中时，行将要被选中，理论未被选中的这个事件。咱们只有让这个事件返回false，也就是完结这个事件，所以就不会有选中事件了，也就不会呈现咱们不想要的那种成果，代码如下，两种写法写法一写在标签下面<h2 onselectstart="return false;">你好啊CSS，不能被鼠标选中</h2> 写法二通过绑定事件的模式<body> <h2>你好啊CSS，不能被鼠标选中</h2> <script> document.querySelector('h2').onselectstart = function () { return false } </script></body>总结文中介绍了两种形式实现禁用选中成果，一种是通过css管制，另一种是通过js管制。留神，如果是设置在body标签上，那么整个页面的文字什么的都不能被选中了...

关于css:选择器的权重

选择器的权重当咱们通过不同的选择器选中雷同的元素，且款式设置不同时，此时产生款式抵触产生款式抵触时，利用哪个款式由选择器的权重（优先级）决定。1. 第一等：代表内联款式，如: style，权值为1000。2. 第二等：代表ID选择器，如：#content，权值为0100。3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。6. 继承的款式没有权值。对于非凡的选择器，如：复合选择器，则是将将所有选择器的权重相加，高的优先。分组选择器独自计算如果优先级计算相等，则优先应用靠下的地位。

关于css:面试回顾CSS常见题全总结

盒模型<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>盒模型</title> <style type="text/css"> #div1 { width: 100px; padding: 10px; border: 1px solid #ccc; margin: 10px; box-sizing: border-box; } </style></head><body> <div id="div1"> this is div1 </div> <script> // document.getElementById('div1').offsetWidth </script></body></html>offsetWidth失常盒子模型宽度：内容宽度（width）+padding+border+margin管制总宽度为width：box-sizing：border-boxmargin纵向重叠相邻元素的margin-top和margin-bottom会产生重叠，最终高度会取大的空白内容的<p></p>也会重叠<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>margin 纵向重叠</title> <style type="text/css"> p { font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; } </style></head><body> <p>AAA</p> <p></p> <p></p> <p></p> <p>BBB</p></body></html>margin负值问题top和left负值，元素向上、向左挪动right负值，右侧元素左移，本身不受影响bottom负值，下方元素上移，本身不受影响<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>margin 负值</title> <style type="text/css"> body { margin: 20px; } .float-left { float: left; } .clearfix:after { content: ''; display: table; clear: both; } .container { border: 1px solid #ccc; padding: 10px; } .container .item { width: 100px; height: 100px; } .container .border-blue { border: 1px solid blue; } .container .border-red { border: 1px solid red; } </style></head><body> <p>用于测试 margin top bottom 的正数状况</p> <div class="container"> <div class="item border-blue"> this is item 1 </div> <div class="item border-red"> this is item 2 </div> </div> <p>用于测试 margin left right 的正数状况</p> <div class="container clearfix"> <div class="item border-blue float-left"> this is item 3 </div> <div class="item border-red float-left"> this is item 4 </div> </div></body></html>BFC了解与利用Block format context，块级格式化上下文一块独立渲染区域，外部元素的渲染不会影响边界以外的元素造成BFC的常见条件float 不是 noneposition 是 absolute 或 fixedoverflow 不是 visible （为hidden）display 是 flex inline-block 等BFC的常见利用革除浮动<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .container { background-color: #f1f1f1; } .left { float: left; } .bfc { overflow: hidden; /* 触发元素 BFC */ } </style></head><body> <div class="container bfc"> <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/> <p class="bfc">某一段文字……</p> </div></body></html>布局圣杯布局和双飞翼布局的目标三栏布局，两头一栏最先加载和渲染两侧内容固定，两头内容随着宽度自适应个别用于PC网页圣杯布局和双飞翼布局的技术总结应用float布局两侧应用margin负值，以便和两头内容横向重叠避免两头内容被两侧笼罩，一个用padding一个用margin圣杯布局<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圣杯布局</title> <style type="text/css"> body { min-width: 550px; } #header { text-align: center; background-color: #f1f1f1; } #container { padding-left: 200px; padding-right: 150px; } #container .column { float: left; } #center { background-color: #ccc; width: 100%; } #left { position: relative; background-color: yellow; width: 200px; margin-left: -100%; right: 200px; } #right { background-color: red; width: 150px; margin-right: -150px; } #footer { text-align: center; background-color: #f1f1f1; } /* 手写 clearfix */ .clearfix:after { content: ''; display: table; clear: both; } </style></head><body> <div id="header">this is header</div> <div id="container" class="clearfix"> <div id="center" class="column">this is center</div> <div id="left" class="column">this is left</div> <div id="right" class="column">this is right</div> </div> <div id="footer">this is footer</div></body></html>双飞翼布局<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>双飞翼布局</title> <style type="text/css"> body { min-width: 550px; } .col { float: left; } #main { width: 100%; height: 200px; background-color: #ccc; } #main-wrap { margin: 0 190px 0 190px; } #left { width: 190px; height: 200px; background-color: #0000FF; margin-left: -100%; } #right { width: 190px; height: 200px; background-color: #FF0000; margin-left: -190px; } </style></head><body> <div id="main" class="col"> <div id="main-wrap"> this is main </div> </div> <div id="left" class="col"> this is left </div> <div id="right" class="col"> this is right </div></body></html>flex 布局罕用语法回顾： ...

关于css:选择器的介绍

1.元素选择器作用: 依据标签名来选中指定元素。语法: 标签名{}。例子: p{}，h1{}，div{}。2.id选择器作用：依据元素的id属性选中一个元素。语法： #id属性值{}。例子： #red{}。3.类选择器作用：依据元素的class属性值选中一组元素。语法： .class属性值。例子： .content{}，.top{}。4.伪类（不存在的类，非凡的类）选择器作用：用来形容一个元素的非凡的状态，通过这种非凡的属性选中一个元素。比方，第一个子元素，被点击的元素，鼠标移入的元素....。语法：个别状况下都是应用：xxx。例子：：first-child（第一个子元素），：last-child（最初一个子元素），：nth- child（n）（选中第n个子元素），其中写n表全选、2n或even示意选中偶数位的元素、 2n+1或odd示意选中奇数位的元素。5.复合选择器：复合选择器是由两个或多个根底选择器，通过不同的形式组合而成的,目标是为了能够抉择更精确更精密的指标元素标签。交加选择器：交加选择器由两个选择器形成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，交加选择器是并且的意思。即...又...的意思。作用：选中同时合乎多个条件的元素。例子：div.red {} 抉择class为red的div，用的相对来说比拟少，不太倡议应用。并集选择器：并集选择器是各个选择器通过逗号连贯而成的，任何模式的选择器（包含标签选择器、class类选择器id选择器等），都能够作为并集选择器的一部分。如果某些选择器定义的款式齐全相同，或局部雷同，就能够利用并集选择器为它们定义雷同的CSS款式。就是说，只有逗号隔开的，所有选择器都会执行前面款式。作用：同时抉择多个选择器对应的元素。例子： .one, p , #id {}，示意.one 和 p 和 #id 这三个选择器都会执行色彩为红色。通常用于个体申明。后辈选择器：后辈选择器又称为蕴含选择器，用来抉择元素或元素组的后辈，其写法就是把外层标签写在后面，内层标签写在前面，两头用空格分隔。当标签产生嵌套时，内层标签就成为外层标签的后代。子孙后代都能够这么抉择。或者说，它能抉择任何蕴含在内的标签。子元素选择器：子元素选择器只能抉择作为某一元素子元素的元素。其写法就是把父级标签写在后面，子级标签写在前面，两头跟一个进行连贯，留神，符号左右两侧各保留一个空格。例子： ul > li {color: red;}阐明ul 元素蕴含着li。选择器的权重与优先级在之后的文章会总结进去！

关于css:overflowhidden导致元素高度增加的问题

overflow:hidden这是大家罕用的css属性。在工作过程中，遇到下列问题：制作一个信息显示标签，如下图所示，一个标签蕴含一个icon和一段文字。当初需要是：分支标签的文字过长时用省略号代替显示，于是给这个分支标签的div元素设置了： overflow: hidden; max-width: 170px; text-overflow: ellipsis; white-space: nowrap;试图让标签宽度超过170px时，显示省略号。然而却呈现了下图的状况：这是为森呢？？？？通过查阅材料。发现原来是我为了让标签并列显示，给标签容器的div设置了display：inline-block。而overflow：hidden和display: inline-block一起应用时会造成baseline的挪动，所以高度就变得不一样了。当inline-block元素的display不为visible的时候，其baseline为margin-box的下边界（如下图左侧元素），而左边的元素没有设置overflow:hidden,他的baseline为文字内容的基线。baseline对齐之后则呈现了这样的高度差。通过设置两个标签的vertical-align为bottom（只有vertical的值不为baseline），就能够回到同一基线上。实现对齐。参考文章:CSS中vertical-align的默认值baseline的了解

关于css:关于css属性lineargradient的方向说明

如题。 css有一个属性，background-image，能够通过它的值linear-gradient为其设置突变属性。用法如下： background-image: linear-gradient(direction, color-stop1, color-stop2, ...);其中第一个参数，方向，能够指定，to top/bottom/right等，也能够指定一个固定角度，例如90deg。当咱们指定一个角度时候，如何了解这个角度呢？话不多说，间接上图(点击图片查看具体)：

关于css:一些样式的处理

1、文字超出局部显示省略号单行文本的溢出显示省略号（肯定要有宽度） p{ width:200rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }多行文本溢出显示省略号 p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }2、中英文主动换行word-break:break-all 只对英文起作用，以字母作为换行根据word-wrap:break-word 只对英文起作用，以单词作为换行根据white-space:pre-wrap 只对中文起作用，强制换行white-space:nowrap 强制不换行，都起作用3、文字暗影text-shadow 为网页字体增加暗影，通过对text-shadow属性设置相干的属性值。属性与值的阐明如下： text-shadow: [X-offset,Y-offset,Blur,Color];X-offset:指暗影居于字体程度偏移的地位。Y-offset:指暗影居于字体垂直偏移的地位。Blur:指暗影的含糊值。color:指暗影的色彩； h1{ text-shadow: 5px 5px 5px #FF0000;}4、设置placeholder的字体款式 input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red;}input::-moz-placeholder { /* Firefox 19+ */ color: red;}input:-ms-input-placeholder { /* IE 10+ */ color: red;}input:-moz-placeholder { /* Firefox 18- */ color: red;}5、不固定高宽 div 垂直居中的办法办法一：伪元素和 inline-block / vertical-align（兼容 IE8） .box-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; //微调整空格}.box { display: inline-block; vertical-align: middle;}办法二：flex(不兼容 ie8 以下) ...

关于css:如何合理利用第三方-Cache-解决方案

应用较为成熟的第三方解决方案最大的劣势就在于在节俭本身研发老本的同时，还可能在互联网下面找到较多的文档信息，帮忙咱们解决一些日常遇到的问题还是十分有帮忙的。目前比拟风行的第三方 Cache 解决方案次要有基于对象的分布式内存 Cache 软件 Memcached 和嵌入式数据库编程库 Berkeley DB 这两种。上面我将别离针对这两种解决方案做一个剖析和架构探讨。一、分布式内存 Cache 软件 Memcached置信对于很多读者敌人来说， Memcached 并不会太生疏了吧，他当初的风行水平曾经比 MySQL 并不会差太多了。 Memcached 之所以如此的风行，次要是因为以下几个起因：通信协议简略，API 接口清晰；高效的 Cache 算法，基于 libevent 的事件处理机制，性能卓越；面向对象的个性，对利用开发人员来说十分敌对；所有数据都寄存于内存中，数据拜访高效；软件开源，基于 BSD 开源协定；对于 Memcached 自身细节，这里我就不波及太多了，毕竟这不是本文的重点。上面咱们重点看看如何通过 Memcached 来帮忙咱们你晋升数据服务（这里如果再应用数据库自身可能会不太适合了）的扩展性。要将 Memcached 较好的整合到零碎架构中，首先要在利用零碎中让 Memcached 有一个精确的定位。是仅仅作为晋升数据服务性能的一个 Cache 工具，还是让他与 MySQL 数据库较好的交融在一起成为一个更为更为高效现实的数据服务层。 ①作为晋升零碎性能的 Cache 工具如果咱们仅仅只是零碎通过 Memcached 来晋升零碎性能，作为一个 Cache 软件，那么更多的是须要通过应用程序来保护 Memcached 中的数据与数据库中数据的同步更新。这时候的 Memcached 根本能够了解为比 MySQL 数据库更为前端的一个 Cache 层。如果咱们将 Memcached 作为利用零碎的一个数据 Cache 服务，那么对于 MySQL 数据库来说基本上不必做任何革新，仅仅通过应用程序本人来对这个 Cache 进行保护更新。这样作最大的益处就在于能够做到齐全不必动数据库相干的架构，然而同时也会有一个弊病，那就是如果须要 Cache 的数据对象较多的时候，应用程序所须要减少的代码量就会减少很多，同时零碎复杂度以及保护老本也会直线回升。 ...

关于css:Redash中文商业版背景和样式设置

Redash中文商业版能够自定义部件背景，编辑界面不失效，仅在门户中非亮白模式下的以后视图失效。门户界面也能够自定义款式，针对以后门户所有报表中部件失效，反对任意合乎css background 语法标准的格局。部件根本设置中能够抉择边框款式，内置无边框、复线框、线框四角加粗、四角祥云等款式，也能够抉择部件背景通明，通明部件不带边框且不受门户款式影响。局部边框成果1.设置纯色背景反对十六进制色彩值，反对设置透明度，例如：#FFFFFF, #00000050等。设置网页背景区纯色成果示例：纯色示例网页背景区：#FFFFFF2.设置图片背景反对任意非法css标准，格局为：url("背景图片地址") 参数1 参数2 ……，参数之间用空格隔开。图片成果示例网页背景区：url("/static/images/happy/bg.jpg") center top / 100% 100% fixed3.设置渐变色成果背景反对合乎css标准渐变色成果，色彩值之间用逗号隔开，格局为：linear-gradient(angle, color-stop1, color-stop2)渐变色成果示例部件标题栏：linear-gradient(to left, #003333, #309b9b, #003333)4.设置多张图片叠加格局为：url("图片地址1") 参数1 参数2,url("图片地址2") 参数1 参数2,……反对多张图片叠加组合展现，能够和渐变色组合应用，两头用逗号隔开。叠加组合成果示例部件背景区：url("/static/images/portal/bdb.png") no-repeat right bottom,url("https://preview.dazdata.com/dazdatafiles/style/lines/line_h1.png")repeat-x bottom,url("https://preview.dazdata.com/dazdatafiles/style/lines/line_v1.png")repeat-y left,url("https://preview.dazdata.com/dazdatafiles/style/lines/line_v1.png")repeat-y right,linear-gradient(#0a0e5090,#0a0e5090)

关于css:Oracle-sql语句-minus函数执行效率与join对比

咱们常常会对select后果进行比照，罕用的函数如minus，那么当两张表数据量较大时，有什么形式能够提高效率呢？ minus 形式minus 执行打算如下所示，通过排序后再进行比照select object_id from t2 minus select object_id from t1;..2255 rows selected.Elapsed: 00:00:00.93Execution Plan Plan hash value: 1578327006 | Id | Operation | Name | Rows | Bytes |TempSpc| Cost (%CPU)| Time | | 0 | SELECT STATEMENT | | 102K| 2357K| | 1318 (1)| 00:00:16 || 1 | MINUS | | | | | | || 2 | SORT UNIQUE | | 102K| 1304K| 2024K| 861 (1)| 00:00:11 || 3 | TABLE ACCESS FULL | T2 | 102K| 1304K| | 371 (1)| 00:00:05 || 4 | SORT UNIQUE | | 82926 | 1052K| 1640K| 457 (1)| 00:00:06 || 5 | INDEX FAST FULL SCAN| T1_IDX | 82926 | 1052K| | 60 (0)| 00:00:01 | ...

关于css:CSS-浮动布局放弃float拥抱flex详解

CSS 浮动布局放弃float，拥抱flex（详解）博客阐明文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！阐明在写前端代码的时候，写一排的float:left, float: right，最初再来个clear:both;有的时候一旦遗记革除浮动，那么页面就糊了。就是吃了float的亏，代码写得多，还容易吃亏。所以眼光旁移一下，看到了flex。 Flex布局Flex 称为弹性布局，它为盒状模型提供了最大的灵活性。任何一个容器都能够指定为 Flex 布局。应用了flex的元素，称为flex容器。外面的子元素被称为我的项目，我的项目的float、clear和vertical-align属性将生效。 // Flex 布局.box{ display: flex;}// 行内元素应用 Flex 布局.box{ display: inline-flex;}// Webkit 内核的浏览器，必须加上`-webkit`前缀.box{ display: -webkit-flex; /* Safari */ display: flex;}容器和我的项目既然分为了容器和我的项目，那么大抵就是如下的关系，次要记录一下容器属性和我的项目属性。容器属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-direction属性决定主轴的方向（即我的项目的排列方向）取值：row(默认) | row-reverse | column | column-reverse row（默认值）：主轴为程度方向，终点在左端。row-reverse：主轴为程度方向，终点在右端。column：主轴为垂直方向，终点在上沿。column-reverse：主轴为垂直方向，终点在下沿。 .box { flex-direction: row | row-reverse | column | column-reverse;}flex-wrap属性管制我的项目是否换行取值：nowrap(默认) | wrap | wrap-reverse nowrap（默认值）：不换行，等分容器。wrap：换行，我的项目不会等分容器宽度，而是依据本身宽度进行排列，如果超出父容器宽度则天然换行。wrap-reverse：与wrap成果相同。 .box{ flex-wrap: nowrap | wrap | wrap-reverse;}flex-flow属性flex-flow属性是flex-direction属性和flex-wrap属性的简写模式，默认值为row nowrap。 .box { flex-flow: <flex-direction> <flex-wrap>;}justify-content属性管制我的项目在横轴的对齐形式取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly; ...

关于css:CSS-基础面试篇-margin-塌陷和-margin-合并及其解决方案

小问题总是容易让人们漠视，而在面试的时候一脸蒙，因为简略的问题造成难堪场面，那么就与日俱增，时常记忆，烂熟于心！ margin塌陷在父子元素中，别离设置margin 比方父元素设置100px 子元素设置50px 惊奇的发现，后果出乎咱们预料！程度方向的间隔的确没问题，然而垂直方向上，明明子元素设置了margin-top间隔顶部50px，按情理它会间隔父元素顶部50px才对。这种景象被称之为margin塌陷。但很多人可能都不太了解，为什么叫它塌陷？其实你能够这样了解，如上述例子，本来子元素要间隔父元素顶部50px，当初没有了，也就是父元素的顶棚对子元素来说没有作用，相当于没有，相当于塌陷下来了。所以叫margin塌陷。一句话总结：父子嵌套的元素垂直方向的margin取最大值。然而有的时候咱们不心愿有这样的问题，那咱们如何解决margin塌陷的问题呢？答案是，咱们能够通过触发BFC来解决！什么是BFC呢？ BFC什么是BFC和作用 Block Formatting Context，中文叫块级格式化上下文。 CSS将HTML的每一个元素都当成一个盒子，而且它进一步的认为每一个盒子外面都有一套失常的语法规定或者叫渲染规定，它能依据这个规定将写的HTML元素绘制进去，然而咱们能够通过一些特定的伎俩触发BFC，让其所合乎的语法规定和原来的语法规定有点不一样。也就是触发BFC之后，特定的盒子会遵循另一套语法规定。 BFC听起来挺神奇，能扭转一个盒子的语法规定，其实也没扭转多少。可能千分之一都不到。然而就是这一点点它把解决了margin塌陷和margin合并的问题如何触发BFC 小结触发BFC办法：float属性为left/rightoverflow为hidden/scroll/autoposition为absolute/fixeddisplay为inline-block/table-cell/table-caption有这几多形式触发BFC，那用哪种形式好一些？看具体情况，集体认为一个准则：针对需要，看哪个触发形式没有影响就用那个

关于css:slaveskiperrors

--slave-skip-errors=[err_code1,err_code2, ... | all | ddl_exist_errors] Normally, replication stops when an error occurs on the replica, which gives you the opportunity to resolve the inconsistency in the data manually. This option causes the replication SQL thread to continue replication when a statement returns any of the errors listed in the option value. 失常状况下，当有error时复制会中断，给机会手动解决数据不统一的问题。 slave-skip-errors 会使sql 线程疏忽这些error 持续复制。 Do not use this option unless you fully understand why you are getting errors. If there are no bugs in your replication setup and client programs, and no bugs in MySQL itself, an error that stops replication should never occur. Indiscriminate use of this option results in replicas becoming hopelessly out of synchrony with the source, with you hawww.pizei.comving no idea why this has occurred. ...

关于css:flex布局制作自适应网页

网页布局是css的一个重点利用。传统的布局都是依赖display、position、float属性来实现的，然而非凡布局就不易实现，如垂直居中。 flex布局是什么？Flex 是 Flexible Box的简写，意为“弹性布局”为盒模型提供最大灵活性。任何一个容器都能够指定为flex布局。采纳flex布局的元素，称为flex容器。他的所有子元素主动成为容器成员，称为flex我的项目，简称我的项目。flex布局制作自适应网页容器默认存在两根轴：程度的主轴（main axis）和垂直的穿插轴（cross axis）。主轴的开始地位（与边框的交叉点）叫做main start，完结地位叫做main end；穿插轴的开始地位叫做cross start，完结地位叫做cross end。我的项目默认沿主轴排列。单个我的项目占据的主轴空间叫做main size，占据的穿插轴空间叫做cross size。容器的属性flex-direction 设置排列方向(向下、向上、向左、向右)的flex-wrap 内容搁置不下时换行形式flex-flow 是flex-direction和flex-wrap属性简写默认值row nowrapjustify-content 定义在主轴上的对齐形式。align-items 定义我的项目在穿插轴上如何对齐。align-content 定义多根轴线的对齐形式flex-direction属性值有四个： row(默认值)：程度方向，从左到右，终点在左。row-reverse：程度方向，从右到左，终点在右。column：垂直方向，从上到下。column-reverse：垂直方向，从下到上。flex-wrap属性值有三个： nowrap：不换行。wrap：失常换行，在第一行下方。wrap-reverse：换行，在第一行上方。justify-content属性值有五个： flex-start(默认值)：左对齐flex-end：右对齐center：居中space-between：两端对齐space-around：每个我的项目两侧的距离相等。align-items属性值有五个： flex-start：穿插轴的终点对齐。flex-end：穿插轴起点对齐。center：穿插轴中点对齐。baseline：我的项目的第一行文字的基线对齐。stretch(默认值)：如果我的项目未设置高度或设置为auto，将占满整个容器的高度。align-content属性值六个： flex-start：穿插轴的终点对齐。flex-end：穿插轴起点对齐。center：穿插轴中点对齐。space-between：与穿插轴两端对齐，轴线之间距离均匀散布。space-around：每根轴线两侧距离都相等。stretch(默认值)：轴线占满整个穿插轴。我的项目属性order：定义我的项目的排列程序，数值越小，排列越靠前，默认为0。flex-grow属性：定义我的项目的放大比例，默认为0flex-shrink：定义我的项目的放大比例，默认为1。flex-basis：定义在调配多余空间之前，我的项目占据的主轴空间。默认值为auto，即我的项目原本大小。flex：是flex-grow、flex-shrink、flex-basis的缩写，默认值0 1 auto。align-self：属性容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩align-items属性。默认值为auto，示意继承父元素的align-items属性，如果没有父元素，则等同于stretch。

关于css:column的快速使用

根本款式 column-countcolumn-count: 3简略的演示，能够变成3列。他只能用数字调节并且屏幕最小还是3列！十分不敌对 <div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ column-count: 3; } </style> column-width其实就是盒子固定宽度，而后边距自适应 <div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ column-width: 200px; } </style> columns他表演一个组合套餐，如果3则最多3个。宽度200随便。最终最小1列，最大3十分敌对 <div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ columns:3 200px; } </style> column-gap他就是边距用的！相当于margin宽 <div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ columns:3 200px; column-gap: 80px; } </style> column-rule就是边距太大，放一条线就更美了！而且跟border截然不同 <div id="box"> <p>孟子是战国时期的大思想家...</p> <p>（学商人磨刀，如果没有这一段不成立下一段第...</p> <p>孟母晓得后伤透了心。等孟轲玩够了回来，孟母把他叫到身边...</p> </div> <style> #box{ columns:3 200px; column-rule: 1px solid #ccc; } </style> ...

关于css:Java中的volatile关键字

public class TaskRunner { private static int number;private static boolean ready;private static class Reader extends Thread { public void run() { while (!ready) { Thread.yield(); } System.out.println(number); }}public static void main(String[] args) { new Reader().start(); number = 42; ready = true;}}TaskRunner类保护两个简略的变量。在它的main办法中，它创立了另一个线程，只有它是false，它就会在ready变量上自旋。当变量变为true时，线程将打印number变量。咱们冀望这个程序在短暂的提早后简略地打印42。然而，实际上这个提早可能会更长。它甚至可能永远挂起，甚至打印0。这些异样的起因是不足适当的内存可见性和重排序，贴合本文来说，就是没有应用volatile关键字润饰变量。内存可见性简略来说，多线程运行在多个CPU上，而每个线程都会有本人的的cache，因而无奈保障从主存中读取数据的程序，即无奈保障各个CPU上的线程读取的变量数据统一。联合下面的程序，主线程在其外围缓存中保留了ready和number的正本，而Reader线程也是同样保留了正本，之后主线程更新缓存值。在大多数古代处理器上，写入申请在收回后不会立刻利用。事实上，处理器偏向于将这些写入排在一个非凡的写入缓冲区中。一段时间后，它们会一次性将这些写入利用到主内存中。因而当主线程更新number和ready变量时，无奈保www.pizei.comReader线程会看到什么。换句话说，Reader线程可能会立刻看到更新的值，或者有一些提早，或者基本不会。重排序下面提到过，除了始终死循环外，程序还有小概率打印出0，这就是重排序的起因。在CPU执行指令时，先更新了ready变量而后执行的线程操作。从新排序是一种用于进步性能的优化技术，不同的组件可能会利用这种优化：处理器能够按程序程序以外的任何程序刷新其写缓冲区处理器可能会利用乱序执行技术JIT编译器能够通过从新排序进行优化volatile关键字那么volatile关键字干了什么呢？ volatile关键字在汇编阶段对变量加上 Lock前缀指令，通过 MESI缓存一致性协定来保障线程之间的可见性，任意线程对变量的批改都会被同一时间同步到所有读取该变量的线程CPU上，简略来说，一个改了就能保障所有的都改了。这里先看汇编层的Lock指令，晚期CPU采取锁总线的形式来实现这个指令，仲裁器抉择一个CPU独占总线，从而使其余CPU无奈通过总线与内存通信，实现原子性；当然这种形式效率低，当初个别采纳cache locking，这种场景下的数据统一是通过MESI缓存一致性协定来实现的。这里不再具体阐明缓存一致性协定，次要思维是CPU会一直嗅探总线上的数据交换，当一个缓存代表它所在的CPU去读写内存时，其余CPU都会失去告诉，从而同步本人的缓存。在Java内存模型中，存在着原子操作，这些原子操作与Java内存模型管制并发有着关键作用。 read(读取)：从主内存读取页游数据load(载入)：将主内存读取到的数据写入工作内存，即缓存use(应用)：从工作内存读取数据来计算assign(赋值)：将计算好的值从新赋值到工作内存中store(存储)：将工作内存数据写入主内存write(写入)：将store过来的变量值赋值给主内存中的变量lock(锁定)：将主内存变量加锁，标识为线程独占状态unlock(解锁)：将主内存变量解锁，解锁后其余线程能够锁定该变量在volatile关键字润饰下，store和write操作必须是间断的，组合成了原子操作，批改后必须立刻同步到主内存，应用时必须从主内存刷新，由此保障volatile可见性。同时，volatile关键字也采纳内存屏障来禁止指令重排。volatile变量的内存可见性影响超出了volatile变量自身。更具体地说，假如线程A写入一个volatile变量，而后线程B读取同一个volatile变量。在这种状况下，在写入volatile变量之前对A可见的值将在读取volatile变量后对B可见： happens-before.png 从技术上讲，对volatile字段的任何写入都产生在同一字段的每次后续读取之前。这是Java 内存模型的volatile变量规定。因为内存排序的短处，有时咱们能够捎带volatile的可见性属性另一个变量。例如，在咱们的示例中，咱们只须要将ready变量标记为volatile： public class TaskRunner { private static int number; // not volatileprivate volatile static boolean ready;// same as before}在读取ready变量之后，任何在将ready变量写为true之前的内容对任何内容都是可见的。因而，number变量会捎带上ready变量强制执行的内存可见性。简而言之，即便它不是volatile变量，它也体现出volatile行为。 ...

关于css:css属性详解第一天

一、通用选择符的应用通用选择符*，它的应用办法切实css里间接应用 *{属性名:值},在以后引入了该css的页面中，所有元素都会领有该款式属性和值。在理论开发中，通用选择符个别比拟少用！二、标签选择器的应用什么是标签选择器，简略点说就是间接用标签名来设置css款式，如下根本构造： <html> <body> <div> <div> <p>这是第一段</p> </div> <div> <p>这是第一段</p> </div> </div></body></html>如果咱们设置p元素的字体色彩为红色，那么所有p元素的字体将变成红色,大小将变成25像素。 p{ color:red; font-size:25px;}上面咱们来给div元素设置属性，代码如下： div{ width:100px; border:10px solid blue;}这样一来，咱们将看到页面显示显示出三个宽度为100像素并且边框为10像素的蓝色长方形。任何元素都能够设置本人的css属性，如果有多个同名元素，应用标签选择器将为所有同名元素设置雷同的属性!个别在我的项目开发中，咱们须要很审慎的抉择应用标签选择器。三、id选择器 id选择器，应用形式为#id名{属性名:属性值},咱们来看下以下构造代码 <html><body> <div> <div> <p id="one">这是第一段</p> </div> <div> <p>这是第一段</p> </div> </div></body></html> #one{ width:1000px; background:yellow; }通过以上的属性设置，咱们将在页面看到变动。带有id="one"的p元素的宽度为1000像素，背景色彩为黄色。而没有带id="one"的p元素则没有变动。留神:在一个文档中，id名具备唯一性，只能有一个！四、类选择器类选择器，应用.csss名{属性名:值},咱们看看上面这个构造代码 <div> <div class="two"></div> <div>这是没有class属性的<div> <div class="two">这是有属性的</div> </div>通过css代码为这个构造增加款式 div{ width:300px; heigth:300px; border:1px solid red; } .two{ background:red; }当初咱们会发现页面呈现了三个宽高为300像素的方框，然而第一个和第三个的背景色彩为红色。因为这两个有class="two",而第二个没有。

关于css:屏幕尺寸像素分辨率和-devicePixelRatio

引子最开始写页面的时候，对页面外面的 px 还是蛮好奇的，电脑上的分辨率如同正好跟页面渲染的宽度值对应，但手机外面却不是这样的，记得过后还去找了相干材料，如同晓得是怎么回事。最近脑海里再次想起了这个问题，但曾经不晓得该如何表述，又没有相干的笔记，这个感觉有必要辨别一下相干的概念。 OriginMy GitHub屏幕尺寸屏幕尺寸是指屏幕对角线的尺寸，常常看到的形容是英寸（缩写 in），1 in = 2.54 cm 。像素像素是屏幕上图像显示的最小可控元件，它不是一个点或者一个方块，而是一个形象的取样。每个像素都有色彩，色彩通常用 3 或 4 个重量示意，例如 RGB 办法用红、绿、蓝三原色的光学强度示意一种色彩，CMYK 办法用青、品红、黄、黑四种颜料含量来示意一种色彩，CMYK 色域在印刷行业和打印机常见。一个像素通常被认为是数字图像中的最小单位。在不同的上下文中，像素的含意可能不同，例如视频中的像素，打印时的像素，显示屏的像素，或者数码相机（感光元素）中的像素。依据语境的不同，会有一些更为准确的同义词，例如取样点，字节，比特，超集，斑等等。设施像素设施像素是指设施中应用的实在像素，也叫物理像素。在同一设施中，像素的总数是固定的。像素密度PPI和DPIPPI（pixels per inch）是指每英寸的像素数目，罕用于度量计算机显示设施像素密度。 DPI（dots per inch）是指每英寸数码印刷的点数，用于度量印刷行业的空间点的密度。实践上，PPI 是能够通过已知的对角线尺寸和屏幕分辨率计算出来。能够通过上面的公式计算： w 是程度方向上的像素数h 是垂直方向上的像素数d 是屏幕尺寸例如 21 英寸屏幕，分辨率为 1920*1680 ，那么 w=1920 ，h=1680 ，d=21 ，带入计算的 PPI=121.49 。 CSS 像素CSS 像素是编程中的概念，用于逻辑上掂量像素的单位。分辨率分辨率（Image resolution）泛指量测或显示系统对细节的分辨能力。从不同方面形容，有像素分辨率、空间分辨率、光谱分辨率和工夫分辨率。平时接触大部分是像素分辨率，例如常说的视频分辨率、显示分辨率和图形分辨率。这里暂只探讨像素分辨率类别。其它类型的相干介绍在这里。屏幕分辨率屏幕分辨率是屏幕显示的像素总数，再细分一下就有：物理分辨率和显示器分辨率。物理分辨率是显示器的固有参数，不能调节，个别是指屏幕的最高可显示的像素数。显示器分辨率就是操作系统设定的分辨率。在显示器分辨率和物理分辨率统一时，显示成果才是最佳的，个别举荐设置的分辨率就是物理分辨率。零碎设置分辨率失效是通过算法进行了转换。举个例子，在手机上的看对于手机信息，能够看到分辨率信息为 720*1280 ，意思就是屏幕程度方向上有 720 个像素，垂直方向上有 1280 个像素。图像分辨率图像分辨率就是单位英寸中所蕴含的像素总数。图像分辨率的表达方式也为“程度像素数×垂直像素数”。例如一张图片的分辨率是 320*289 ，意思就是图片程度方向上有 320 个像素，垂直方向上有 289 个像素。 devicePixelRatio这里是指 Javascript 中的 window.devicePixelRatio ，它是设施上物理像素和设施独立像素（device-independent pixel，dips，dp）比值。用公式表白就是：devicePixelRatio = 物理像素 / 设施独立像素。这个也能够解释为 CSS 像素和物理像素的比例，简略来说，它通知浏览器须要多少物理像素来绘制一个 CSS 像素。这个属性能够用来辨别视网膜设施和非视网膜设施。 ...

关于css:26-个-CSS-面试题目增强你的-CSS-基础

译者：前端小智起源：codersera.有幻想，有干货，微信搜寻【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。 CSS是层叠样式表（ Cascading Style Sheets ）的缩写，是一种样式表语言，用于形容以 HTML 之类的标记语言编写的文档的布局。它是用于设计Web页面的三剑客之一，另外两位浩客是HTML和Javascript。 CSS 的设计目标是使款式和内容拆散，包含布局、色彩和字体。这种拆散能够进步内容的可拜访性，在款式特色的标准中提供更多的灵活性和管制，通过在一个独自的. .css 文件中指定相干的 CSS，使多个 web 页面可能共享格局，并缩小构造内容中的复杂性和反复。它具备简略的语法，并应用大量的英文关键字来指定各种款式属性的名称。既然咱们曾经探讨了CSS的基础知识，让咱们来察看一下基于CSS的重要面试问题。问题1：什么是 CSS？CSS（层叠样式表）是一种款式语言，对于 HTML 元素来说足够简略。它在网页设计中十分风行，其利用在XHTML中也很常见。问题2：为什么要开发CSS？CSS是在1997年开发的，作为一种web开发人员设计他们正在创立的web页面布局的办法。它的目标是让开发者将网站代码的内容和构造从视觉设计中分离出来。这种构造和设计的拆散容许HTML执行比原来更多的性能。问题3：CSS的次要版本有哪些？CSS的不同版本： CSS1CSS2CSS2.1CSS3问题4：CSS款式的组成部分是什么？一个款式规定由三局部组成：选择器–选择器是 HTML 标记，用于抉择要设置款式的内容。它依据其ID，类和名称抉择 HTML元素。属性–属性是 HTML 标签的一种属性。简而言之，所有 HTML 属性都转换为 CSS 属性。值– CSS中的值定义CSS属性的一组有效值。问题 5：有多少种办法能够将 CSS 集成为 web 页面CSS 能够集成为三种形式内联：间接在HTML元素上应用<p style=”colour:skyblue;”>hello world</p>内部:在工作空间中创立独自的CSS文件，而后在创立的每个web页面中链接它们<head><link rel=”text/css”href=”your_CSS_file_location”/></head>外部: web 页面的 head 元素在其中实现了外部 CSS。head> <style> P{ color : lime; background-color:black; } </style></head>问题 6：谁在保护 CSS 标准？万维网协会保护 CSS标准。 ...

关于css:springboot-Swagger如何运行

<dependency> <groupId>io.springfox</groupId> <artifactId>springfox-boot-starter</artifactId> <version>3.0.0</version> </dependency>package org.fh.config;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import springfox.documentation.builders.ApiInfoBuilder;import springfox.documentation.builders.PathSelectors;import springfox.documentation.builders.RequestHandlerSelectors;import springfox.documentation.oas.annotations.EnableOpenApi;import springfox.documentation.service.ApiInfo;import springfox.documentation.spi.DocumentationType;import springfox.documentation.spring.web.plugins.Docket;/** 阐明：Swagger 接口API生成作者：FH Adminfrom fhadmin.cn */public class SwaggerConfig { public Docket createRestApi() { return new Docket(DocumentationType.OAS_30) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSwww.cungun.comelectors.basePackage("org.fh.controller")) // 为以后包门路 .paths(PathSelectors.any()) .build();}private ApiInfo apiInfo() { return new ApiInfoBuilder() .title("FH Admin Swagger3 RESTful API") // 页游页面题目 .version("3.0") // 版本号 .description("fhadmin.org") // 形容 .build();}}package org.fh.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/** 阐明：Swagger 拦挡页游配置作者：FH Adminfrom fhadmin.cn */public class WebMvcConfig implements WebMvcConfigurer { ...

关于css:104道-CSS-面试题助你查漏补缺

CSS 面试知识点总结最近在整顿 CSS 的时候发现遇到了很多面试中常见的面试题，本局部次要原作者在 Github 等各大论坛收录的 CSS 相干常识和一些相干面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的能够来一次全方位的检漏和排查，感激原作者 CavsZhouyou 的付出，如果呈现谬误，心愿大家独特指出！喜爱的能够给我点赞激励，附笔记链接：https://github.com/Wscats/articles 1.介绍一下规范的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？相干知识点：（1）有两种盒子模型：IE盒模型（border-box）、W3C规范盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个局部IE盒模型和W3C规范盒模型的区别：（1）W3C规范盒模型：属性width，height只蕴含内容content，不蕴含border和padding（2）IE盒模型：属性width，height蕴含content、border和padding，指的是content+padding+border。在ie8+浏览器中应用哪个盒模型能够由box-sizing（CSS新增的属性）管制，默认值为content-box，即规范盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中申明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。答复：盒模型都是由四个局部组成的，别离是margin、border、padding和content。规范盒模型和IE盒模型的区别在于设置width和height时，所对应的范畴不同。规范盒模型的width和height属性的范畴只蕴含了content，而IE盒模型的width和height属性的范畴蕴含了border、padding和content。一般来说，咱们能够通过批改元素的box-sizing属性来扭转元素的盒模型。具体的材料能够参考：《CSS 盒模型详解》 2.CSS 选择符有哪些？（1）id选择器（#myid）（2）类选择器（.myclassname）（3）标签选择器（div,h1,p）（4）后辈选择器（h1p）（5）相邻后辈选择器（子）选择器（ul>li）（6）兄弟选择器（li~a）（7）相邻兄弟选择器（li+a）（8）属性选择器（a[rel="external"]）（9）伪类选择器（a:hover,li:nth-child）（10）伪元素选择器（::before、::after）（11）通配符选择器（*）3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。相干知识点：单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在以后标准中引入的，用于辨别伪类和伪元素。不过浏览器须要同时反对旧的曾经存在的伪元素写法，比方:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不容许再反对旧的单冒号的写法。想让插入的内容呈现在其它内容前，应用::before，否者，应用::after；在代码程序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上。答复：在css3中应用单冒号来示意伪类，用双冒号来示意伪元素。然而为了兼容已有的伪元素的写法，在一些浏览器中也能够应用单冒号来示意伪元素。伪类个别匹配的是元素的一些非凡状态，如hover、link等，而伪元素个别匹配的非凡的地位，比方after、before等。4.伪类与伪元素的区别css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来润饰不在文档树中的局部，比方，一句话中的第一个字母，或者是列表中的第一个元素。伪类用于当已有的元素处于某个状态时，为其增加对应的款式，这个状态是依据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，咱们能够通过:hover来形容这个元素的状态。伪元素用于创立一些不在文档树中的元素，并为其增加款式。它们容许咱们为元素的某些局部设置款式。比如说，咱们能够通过::before来在一个元素前减少一些文本，并为这些文本增加款式。尽管用户能够看到这些文本，然而这些文本实际上不在文档树中。有时你会发现伪元素应用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试辨别伪类和伪元素。大多数浏览器都反对这两个值。依照规定应该应用（::）而不是（:），从而辨别伪类和伪元素。然而，因为在旧版本的W3C标准并未对此进行特地辨别，因而目前绝大多数的浏览器都反对应用这两种形式示意伪元素。详细资料能够参考：《总结伪类与伪元素》 5.CSS 中哪些属性能够继承？相干材料：每个CSS属性定义的概述都指出了这个属性是默认继承的，还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算值。当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值（这里的意思应该是在该属性自身的定义中的默认值）。当元素的一个非继承属性（在Mozillacode里有时称之为resetproperty）没有指定值时，则取属性的初始值initialvalue（该值在该属性的概述里被指定）。有继承性的属性：（1）字体系列属性font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust（2）文本系列属性text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color（3）表格布局属性caption-sideborder-collapseempty-cells（4）列表属性list-style-type、list-style-image、list-style-position、list-style（5）光标属性cursor（6）元素可见性visibility（7）还有一些不罕用的；speak，page，设置嵌套援用的引号类型quotes等属性留神：当一个属性不是继承属性时，能够应用inherit关键字指定一个属性应从父元素继承它的值，inherit关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。答复：每一个属性在定义中都给出了这个属性是否具备继承性，一个具备继承性的属性会在没有指定值的时候，会应用父元素的同属性的值来作为本人的值。个别具备继承性的属性有，字体相干的属性，font-size和font-weight等。文本相干的属性，color和text-align等。表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。当一个属性不是继承属性的时候，咱们也能够通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。具体的材料能够参考：《继承属性》《CSS 有哪些属性能够继承？》 6.CSS 优先级算法如何计算？相干知识点： CSS的优先级是依据款式申明的特殊性值来判断的。选择器的特殊性值分为四个等级，如下：（1）标签内选择符x,0,0,0（2）ID选择符0,x,0,0（3）class选择符/属性选择符/伪类选择符 0,0,x,0（4）元素和伪元素选择符0,0,0,x计算方法：（1）每个等级的初始值为0（2）每个等级的叠加为选择器呈现的次数相加（3）不可进位，比方0,99,99,99（4）顺次示意为：0,0,0,0（5）每个等级计数之间没关联（6）等级判断从左向右，如果某一位数值雷同，则判断下一位数值（7）如果两个优先级雷同，则最初呈现的优先级高，!important也实用（8）通配符选择器的特殊性值为：0,0,0,0（9）继承款式优先级最低，通配符款式优先级高于继承款式（10）!important（权重），它没有特殊性值，但它的优先级是最高的，为了不便记忆，能够认为它的特殊性值为1,0,0,0,0。计算实例：（1）#demoa{color:orange;}/*特殊性值：0,1,0,1*/（2）div#demoa{color:red;}/*特殊性值：0,1,0,2*/留神：（1）款式利用时，css会先查看规定的权重（!important），加了权重的优先级最高，当权重雷同的时候，会比拟规定的特殊性。（2）特殊性值越大的申明优先级越高。（3）雷同特殊性值的申明，依据款式引入的程序，后申明的规定优先级高（间隔元素呈现最近的）答复：判断优先级时，首先咱们会判断一条属性申明是否有权重，也就是是否在申明前面加上了!important。一条申明如果加上了权重，那么它的优先级就是最高的，前提是它之后不再呈现雷同权重的申明。如果权重雷同，咱们则须要去比拟匹配规定的特殊性。一条匹配规定个别由多个选择器组成，一条规定的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性能够分为四个等级，第一个等级是行内款式，为1000，第二个等级是id选择器，为0100，第三个等级是类选择器、伪类选择器和属性选择器，为0010，第四个等级是元素选择器和伪元素选择器，为0001。规定中每呈现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等级的叠加，不会产生进位。选择器特殊性值的比拟是从左向右排序的，也就是说以1结尾的特殊性值比所有以0结尾的特殊性值要大。比如说特殊性值为1000的的规定优先级就要比特殊性值为0999的规定高。如果两个规定的特殊性值相等的时候，那么就会依据它们引入的程序，后呈现的规定的优先级最高。对于组合申明的特殊性值计算能够参考：《CSS 优先级计算及利用》《CSS 优先级计算规定》 7.对于伪类 LVHA 的解释?a标签有四种状态：链接拜访前、链接拜访后、鼠标滑过、激活，别离对应四种伪类:link、:visited、:hover、:active；当链接未拜访过期：（1）当鼠标滑过a链接时，满足:link和:hover两种状态，要扭转a标签的色彩，就必须将:hover伪类在:link伪类前面申明；（2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的款式（:active），必须将:active申明放到:link和:hover之后。因而得出LVHA这个程序。当链接拜访过期，状况根本同上，只不过须要将:link换成:visited。这个程序能不能变？能够，但也只有:link和:visited能够替换地位，因为一个链接要么拜访过要么没拜访过，不可能同时满足，也就不存在笼罩的问题。8.CSS3 新增伪类有那些？（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n能够承受具体的数值，也能够承受函数。（2）elem:nth-last-child(n)作用同上，不过是从后开始查找。（3）elem:last-child选中最初一个子元素。（4）elem:only-child如果elem是父元素下惟一的子元素，则选中之。（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n能够承受具体的数值，也能够承受函数。（6）elem:first-of-type选中父元素下第一个elem类型元素。（7）elem:last-of-type选中父元素下最初一个elem类型元素。（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。（9）elem:empty选中不蕴含子元素和内容的elem类型元素。（10）elem:target抉择以后流动的elem元素。（11）:not(elem)抉择非elem元素的每个元素。（12）:enabled 管制表单控件的禁用状态。（13）:disabled 管制表单控件的禁用状态。(14):checked单选框或复选框被选中。具体的材料能够参考：《CSS3 新个性总结(伪类)》《浅谈 CSS 伪类和伪元素及 CSS3 新增伪类》 9.如何居中 div？-程度居中：给 div 设置一个宽度，而后增加 margin:0auto 属性 div { width: 200px; margin: 0auto;}-程度居中，利用 text-align:center 实现 .container { background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0;}.box { display: inline-block; width: 500px; height: 400px; background-color: pink;}-让相对定位的 div 居中 ...

关于css:选择裁剪图片区域

一、box-shadow<div class="bruce flex-ct-x" data-title="应用box-shadow裁剪聚焦区域"> <div class="img-cliper"> <img src="https://static.yangzw.vip/codepen/gz.jpg"> <i></i> </div></div><style> .img-cliper { overflow: hidden; position: relative; img { width: 400px; } i { position: absolute; left: 50px; top: 30px; border-radius: 100%; width: 100px; height: 50px; box-shadow: 0 0 0 9999px #a2fc4b; opacity:.5;//不应用rgba兼容局部安卓手机 } }</style>援用文章二、应用border 进行四条边解决

关于css:如何查看timesten表结构

1 Oracle的Schema用户$ sqlplus sysprod as sysdbaCREATE USER oratt IDENTIFIED BY oracle;GRANT CREATE SESSION, RESOURCE TO oratt;alter user oratt quota unlimited on users; 2TimesTen端的Schema用户,与Oracle数据库端统一$ ttisql ttdbcreate user oratt identified by timesten;grant create session, create table to oratt; 2 TimesTen端的Cache管理员CREATE USER cacheadm IDENTIFIED BY timesten;GRANT CREATE SESSION, CACHE_MANAGER, CREATE ANY TABLE, DROP ANY TABLE TO, ALTER ANY TABLE,www.cungun.com DELETE ANY TABLE ,SELECT ANY TABLE to cacheadm; ttisql "uid=oratt;pwd=timesten;dsn=ttdb"ttisql "uid=cacheadm;pwd=timesten;dsn=ttdb"测试连贯TimesTen页游数据库[timestenrac2 conf]$ ttisql "uid=oratt;pwd=timesten;dsn=ttdb" ...

关于css:CSS函数

一、属性函数attr() 返回所选元素的属性值二、背景图片函数：linear-gradient()：将线性突变设置为背景图像。定义至多两种色彩（从上到下）radial-gradient()：将径向突变设置为背景图像。定义至多两种色彩（从核心到边缘）conic-gradient()：锥形突变repeating-linear-gradient()：反复线性突变repeating-radial-gradient()：反复径向突变repeating-conic-gradient()：反复锥形突变image-set()：能够依据用户设施的分辨率匹配适合的图像image()：指定图像或者图像代替，与url()性能相似，比url减少了一些性能url()：应用URL来加载内部资源element()：以将元素当作图片渲染三、色彩函数：rgb()：应用红(R)、绿(G)、蓝(B)三个色彩的叠加来生成各式各样的色彩rgba()：应用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的色彩hsl()：应用色相-饱和度-亮度模型（HSL）定义色彩hsla()：应用色相、饱和度、亮度、透明度来定义色彩hwb()：容许通过指定色彩的色调、白度和黑度重量以及alpha值来指定色彩值color-mod()：等价于color(#29B4F0 a() s() h() l() tint() shade() w() b() contrast()); 四、图形函数circle()：创立一个圆形区域来屏蔽它所利用的元素ellipse()：创立一个椭圆区域来屏蔽它所利用的元素inset()：创立一个矩形区域来屏蔽它所利用的元素polygon()：创立一个多边形区域来屏蔽它所利用的元素path()：创立一个自定义区域来屏蔽它所利用的元素五、滤镜函数blur()：对图像利用含糊成果brightness()：调整图像的亮度contrast()：调整图像的对比度drop-shadow()：给图像设置一个暗影成果grayscale()：给图像设置一个暗影成果hue-rotate()：给图像利用色相旋转invert()：反转输出图像opacity()：转化图像的通明水平saturate()：转换图像饱和度sepia()：转换图像饱和度六、转换函数matrix()：以一个含六值的(a,b,c,d,e,f)变换矩阵的模式指定一个2D变换，相当于间接利用一个[a,b,c,d,e,f]变换矩阵matrix3d()：定义 3D 转换，应用 16 个值的 4x4 矩阵perspective()：为 3D 转换元素定义透视视图rotate()：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义rotate3d()：定义 3D 旋转rotateX()：沿着 X 轴的 3D 旋转rotateY()：沿着 Y 轴的 3D 旋转rotateZ()：沿着 Z 轴的 3D 旋转scale()：指定对象的2D scale（2D缩放）scale3d()：指定对象的2D scale（3D缩放）scaleX()：指定对象X轴的（程度方向）缩放scaleY()：指定对象Y轴的（垂直方向）缩放scaleZ()：指定对象Z轴的（垂直方向）缩放skew()：指定对象斜切扭曲，沿着 X 和 Y 轴的 2D 歪斜转换skewX()：指定对象X轴的（程度方向）扭曲skewY()：指定对象Y轴的（垂直方向）扭曲translate()：指定对象的2D translation（2D平移）translateX()：指定对象X轴（程度方向）的平移translateY()：指定对象Y轴（垂直方向）的平移translateZ()：指定对象Z轴（垂直方向）的平移translate3d()：指定对象的2D translation（2D平移）七、数学函数calc()：容许计算 CSS 的属性值，比方动静计算长度值min()：从逗号分隔符表达式中抉择一个最小值作为 CSS 的属性值max()：从逗号分隔符表达式中抉择一个最大值作为 CSS 的属性值mixmax()：定义了一个长宽范畴的闭区间，它与CSS网格布局一起应用repeat()：以更紧凑的模式写入大量显示反复模式的列或行八、缓动函数cubic-bezier()：toggle的旧版本steps()：阶梯函数，这个函数可能起到定格动画的成果九、其余函数counter()：将计数器的值增加到元素counters()：将计数器的值增加到不同的嵌套层级的元素toggle()：容许子孙元素应用取值序列中的值循环替换继承而来的值var()：插入自定义属性的值symbols()：容许自定义序列号的符号，如 list-style 如图所示：

关于css:如何能够清除aud脚本

--//发现自己写的革除aud脚本通用性不好,每次都要批改,写一个通用脚本.而且一些服务器有多个实例的状况.--//编写脚本如下: cat /usr/local/bin/purge_oracle_aud.sh! /bin/bashpurge oracle audit logodebug=${ODEBUG:-0} if (( $# < 1 ))then echo "arguments is insufficiency , argumentN = oracle_sid N>=1" exit 1fi for i in "$@"do if [ -d /u01/app/oracle/admin/${i}/adump/ ] then echo echo "start purge oracle audit ${i} at : " $(/bin/date +'%Y/%m/%d %T') /usr/bin/find /u01/app/oracle/admin/${i}/adump/ -mtime +30 -name "${i}_ora_*.aud" -print -delete echo "end purge oracle auditwww.cungun.com ${i} at : " $(/bin/date +'%Y/%m/%d %T') echo else echo "/u01/app/oracle/admin/${i}/adump/ directory is not exist" exit 2 fidone ...

关于css:Java-JDBC-连接-MySQL8-数据库

MySQL 8.0 以上版本的数据库连贯有所不同： 1、MySQL 8.0 以上版本驱动包版本 mysql-connector-java-8.0.16.jar。 2、 com.mysql.jdbc.Driver 更换为 com.mysql.cj.jdbc.Driver。 MySQL 8.0 以上版本不须要建设 SSL 连贯的，须要显示敞开。 allowPublicKeyRetrieval=true 容许客户端从服务器获取公钥。最初还须要设置 CST。加载驱动与连贯页游数据库形式如下： Class.forName("com.mysql.cj.jdbc.Driver");conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test_demo?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC","root","password");package com.runoob.test; import java.sql.*;//java我的项目www fhadmin orgpublic class MySQLDemo { // MySQL 8.0 以下版本 - JDBC 驱动名及数据库 URLstatic final String JDBC_DRIVER = "com.mysql.jdbc.Driver"; static final String DB_URL = "jdbc:mysql://localhost:3306/RUNOOB";// MySQL 8.0 以上版本 - JDBC 驱动名及数据库 URL//static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver"; //static final String DB_URL = "jdbc:mysql://localhost:3306/RUNOOB?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC";// 数据库的用户名与明码，须要依据本人的设置static final String USER = "root";static final String PASS = "123456";public static void main(String[] args) { Connection conn = null; Statement stmt = null; try{ // 注册 JDBC 驱动 Class.forName(JDBC_DRIVER); // 关上链接 System.out.println("连贯数据库..."); conn = DriverManager.getConnection(DB_URL,USER,PASS); // 执行查问 System.out.println(" 实例化Statement对象..."); stmt = conn.createStatement(); String www.sangpi.comsql; sql = "SELECT id, name, url FROM websites"; ResultSet rs = stmt.executeQuery(sql); // 开展后果集数据库 while(rs.next()){ // 通过字段检索 int id = rs.getInt("id"); String name = rs.getString("name"); String url = rs.getString("url"); // 输入数据 System.out.print("ID: " + id); System.out.print(", 站点名称: " + name); System.out.print(", 站点 URL: " + url); System.out.print("\n"); } // 实现后敞开 rs.close(); stmt.close(); conn.close(); }catch(SQLException se){ // 解决 JDBC 谬误 se.printStackTrace(); }catch(Exception e){ // 解决 Class.forName 谬误 e.printStackTrace(); }finally{ // 敞开资源 try{ if(stmt!=null) stmt.close(); }catch(SQLException se2){ }// 什么都不做 try{ if(conn!=null) conn.close(); }catch(SQLException se){ se.printStackTrace(); } } System.out.println("Goodbye!");}} ...

关于css:SQLServer2012搭建AlwaysOn报错

SQLServer 2012搭建AlwaysOn报错： Database Mirroring login attempt failed with error: 'Connection handshake failed. The certificate used by the peer is invalid due to the following reason: Certificate not found. State 89.'. [CLIENT: 192.168.1.133] 在主从节点查看以后手游的 Endpoint： select * from master.sys.database_mirroring_endpoints 删除以后主从的 ENDPOINT： USE [master] DROP ENDPOINTwww.diuxie.com Endpoint_Mirroring GO 重建AlwaysOn。

关于css:OS模块的应用

　1.os模块对于文件和目录进行解决目录：就是文件夹属性： os.name：查看以后零碎的类型; 如果是windows ---> nt 如果是max ---> posix os.environ：返回以后零碎的环境变量(所有) 函数： os.environ.get()：获取指定的某一个环境变量门路分类：绝对路径：带盘符根目录的就是绝对路径 pyhton 相对路径：绝对于某个文件(参照物)所失去的一个门路值; 特点：书写的时候不带盘符的 os.getcwd()：返回以后正在执行的.py文件所对应的残缺门路(绝对路径) os.listdir(path)：将path门路下的所有文件和目录显示 os.mkdir(path)：创立单层文件夹,此办法只能创立目录，如果目录曾经存在，创立失败，报错 os.makedirs(path)：创立多层文件夹(级联新建)，此办法也只能创立目录，如果目录曾经存在，创立失败，报错 os.rmdir(path)：删除单层文件夹,此办法只能删除页游目录，如果目录不存在，删除失败，报错：FileNotFoundError os.removedirs(path)：删除多层文件夹(级联删除)，此办法也只能删除目录，如果目录不存在，创立失败，报错 os.remove(path)：删除文件，如果文件不存在，报错!【留神】这个办法只能删除文件不能删除目录 os.rename(old, new)：能够给文件或者目录重命名 os.system()：执行零碎指令：cls、ipconfig、www.sangpi.comdir。。。 os.path.join(path, fileName)：将path和fileName中的数据拼接称为一个新的门路，以字符串的模式返回 os.path.isdir(path)：判断path对应的门路内容是否为一个目录，如果是，返回True;反之，返回False os.path.isfile(path)：判断path对应的门路内容是否为一个文件，如果是，返回True;反之，返回False os.path.exists(path)：判断path对应的门路内容是否存在，如果存在，返回True;反之，返回False os.path.getsize(path)：对path对应的门路内容进行容量检测，并且返回字节量 os.path.basename(path)：传入一个门路值，将此门路的最初一个/前面的局部返回 os.path.dirname(path):传入一个门路值，将此门路的最初一个/后面的局部返回 os.path.split(path)：传入一个门路值，将此门路的最初一个/的后面局部放入到元祖的第一个元素中， /前面的局部放入到元祖的第二个元素中 ...

关于css:CSS-自动显示全文链接

最近有共事问我这样一个交互，当文本较多时（超出5行），呈现“全文”链接，阐明有更多的内容，点了之后跳转新页面，效果图如下那么，有没有方法在不应用 js 的状况下实现呢？我一看就来了兴致，看着如同和之前这篇文章 CSS 实现多行文本“开展收起” (juejin.cn) 有点相似？不过这次的布局要简略的多，交互推敲了半天发现也是能够完满实现的，并且是齐全不一样的思路，一起来看看吧一、布局对于布局这块就没什么好钻研的了，失常写就行，也不须要什么浮动，实现如下 <div class="wrap"> <p class="text">CSS的 margin-bottom 属性用于设置元素的底部外边距，容许设置负数值。一个正数值将让它绝对于失常流与邻近块更远，而负数值将使得更近。</p> <a class="link">全文</a></div>而后加点款式，-webkit-line-clamp 实现多行截断 .wrap { background: #fff; border-radius: 8px; padding: 15px; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;}.text{ overflow: hidden; text-overflow: ellipsis; text-align: justify; display: -webkit-box; -webkit-line-clamp: 3; /*多行超出省略*/ -webkit-box-orient: vertical; line-height: 1.5;}能够失去这样的成果很显然，上面的链接也是始终存在的。那么，CSS 如何辨别这两种状况呢？二、不完满实现起初，我很快想到了一种实现形式，如下在文本的开端应用一个元素遮蔽住上面的链接，这里能够用伪元素::after实现。 .text::after{ content: ''; position: absolute; display: block; width: 100%; height: 50px; /*只有能盖住链接就行*/ background: red;}成果如下留神下面的实现，因为在设置相对定位时，并没有设置 top 值，所以 ::after 依然紧跟在文本的前面。因而在文本超出的状况下，::after曾经位于可视范畴外了，所以不会遮蔽上面的链接，实际上是这个样子 ...

关于css:this关键字的作用

类在定义成员办法时，局部变量和成员变量能够重名，但此时不能拜访成员变量。为防止这种情景，Java提供了this关键字，示意以后对象，指向调用的对象自身。接下来演示this的实质 1 class Person { 2 public void equals(Person p) { 3 System.out.println(this); // 打印this的地址 4 System.out.println(p); // 打印对象地址 5 if (this == p) // 判断以后对象与this是否相等 6 System.out.println("相等"); 7 else 8 System.out.println("不相等"); 9 } 10 } 11 public class TestThis { 12 public static void main(String[] args) { 13 Person p1 = new Person(); 14 Person p2 = new Person(); 15 p1.equals(p1); ...

关于css:css面试总结

px rem em区别一.px 1.绝对长度单位。绝对于显示器屏幕分辨率而言。 2.存在浏览器不兼容问题。二.em 1.绝对长度单位。绝对于以后对象内文本字体尺寸。 2.em值并不是固定的，em会继承父级元素的大小. 3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px. 4.存在容易造成字体设置凌乱问题。三.rem 1.绝对长度单位。绝对于根节点html字体大小来计算。任意浏览器默认字体高都是16px. 2.如果html根节点设置字体font-size为100px. 则1em=100px. 2em=200px. 跟父级字体无关。 3.浏览器兼容性比拟好。 display:none和visibility:hidden的区别？display:none 暗藏对应的元素，在文档布局中不再给它调配空间，它各边的元素会合拢，就当他从来不存在。visibility:hidden 暗藏对应的元素，然而在文档布局中仍保留原来的空间。 CSS中 link 和@import 的区别是？(1) link属于HTML标签，而@import是CSS提供的; (2) 页面被加载的时，link会同时被加载，而@import援用的CSS会等到页面被加载完再加载;(3) import只在IE5以上能力辨认，而link是HTML标签，无兼容问题; (4) link形式的款式的权重高于@import的权重. 介绍一下box-sizing属性和盒模型？盒模型：content + border + padding +margin 盒模型分为：根本模型（w3c规范盒模型）+IE模型（根本模型width=content IE模型width=content+border+padding）如何辨别根本模型还是IE模型 Css3新增的属性Box-sizing 有两个值content-box（根本模型）和border-box（IE模型）获取盒模型对应的宽高：dom.style.width/height box-sizing属性次要用来管制元素的盒模型的解析模式。默认值是content-box。 content-box：让元素维持W3C的规范盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content局部的宽/高border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content规范浏览器下，依照W3C标准对盒模型解析，一旦批改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不从新计算元素的盒子尺寸，从而影响整个页面的布局。 CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？CSS3新增伪类有那些？1.id选择器（ # myid）2.类选择器（.myclassname）3.标签选择器（div, h1, p）4.相邻选择器（h1 + p）5.子选择器（ul > li）6.后辈选择器（li a）7.通配符选择器（ * ）8.属性选择器（a[rel = "external"]）9.伪类选择器（a: hover, li:nth-child） ...

关于css:ES6-中-module-备忘清单你可能知道-module-还可以这样用

作者：Samantha Ming译者：前端小智起源：medium有幻想，有干货，微信搜寻【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。这是一份备忘单，展现了不同的导出形式和相应的导入形式。它实际上可分为3种类型：名称，默认值和列表 ? // 命名导入/导出 export const name = 'value'import { name } from '...'// 默认导出/导入export default 'value'import anyName from '...'// 重命名导入/导出 export { name as newName }import { newName } from '...'// 命名 + 默认 | Import Allexport const name = 'value'export default 'value'import * as anyName from '...'// 导出列表 + 重命名export { name1, name2 as newName2}import { name1 as newName1, newName2} from '...'接下来，咱们来一个一个的看? ...

关于css:如何用oracle-创建表空间

创立长期表空间(留神：D:\Project\OracleTableSpace\FHADMIN\ 手动创立门路) */ create temporary tablespace C##FHADMIN_TEMP tempfile 'D:\Project\OracleTableSpace\FHADMIN\C##FHADMIN_TEMP.dbf' size 50m autoextend on next 50m maxsize 20480m extent management local; watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=创立游戏数据表空间fhadmin.org */ create tablespace www.sangpi.comC##FHADMIN_DATAlogging datafile 'D:\Project\OracleTableSpace\FHADMIN\C##FHADMIN_DATA.dbf' size 50m autoextend on next 50m maxsize 20480m extent management local; watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=创立用户并指定表空间明码是root */ create user C##FHADMIN identified by rootdefault tablespace C##FHADMIN_DATAtemporary tablespace C##FHADMIN_TEMP; watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=

关于css:CSS

一.css布局1.盒模型 /*如下代码，请问div1的offsetWidth是多大？*/<style>#div1{width:100px;padding:10px;border:1px solid #ccc;margin:10px;}</style><div id="div1"></div>/*答案：offsetWidth=width+padding+border=122px：*//*扩大：如果让offsetWidth=100px,该如何做？*/<style>#div1{width:100px;padding:10px;border:1px solid #ccc;margin:10px;box-sizing:border-box; /*设置盒模型*/}</style><div id="div1"></div>2.margin纵向重叠问题 /*如下代码，AAA和BBB之间的间隔是多少？*/ <style> p{ font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; } </style> <p>AAA</p> <p></p> <p></p> <p></p> <p>BBB</p>/* 答案：15px。解释：相邻的margin-top和margin-bottom会产生重叠；空白的<p></p>也会重叠。*/3.margin负值问题 - margin-top和margin-left负值，元素向上、向左挪动；- margin-right负值，右侧元素挪动，本身不受影响；- margin-bottom负值，下方元素挪动，本身不受影响。4.BFC的了解和利用什么是BFC?r如何

关于css:如何用DELPHI进行开发

目前用DELPHI开发DirectX游戏有二种抉择.一是应用jedi的DirectX申明().另一种是应用DelphiX.在这里咱们筹备应用jedi的DirectX申明包来开发DirectX游戏,之所以抉择DirectX申明包是因为这样是以SDK形式来开发游戏,当前如果须要转到其它语言也不用重新学习DirectX.至于DelphiX控件我没用过,没发言权,不过偶是不必日货的 ;-) 先到以下地址DirectX的申明包(//files/directx7.rar">),并解压到你自定的目录中.再在DELPHI中抉择Tools->Environment Options,在关上的窗口中抉择Library选项卡,点击Library Path前面的按钮.会弹出来一个Directories窗口,再点击Greyed items denote invalid path左边的按钮.抉择DirectX申明解压到的目录.再点击ADD按钮,这样就把DirectX申明所在的目录增加到了DELPHI 的Library门路中.就能够间接在uses中援用DirectX申明中的单元了.这个申明包里自带了几个例子,能够作为的参考. : 开发全屏游戏时最好把设计时的屏幕分辩率设为和游戏一样的分辩率,免得调试时频繁切换分辩率而伤害屏幕. 开发全屏游戏最好是在/XP下,不然在98下调试时游戏进入死循环或产生异样时.机子很容易就会当掉.在2000/XP下全屏游戏进入死循环时能够按ALT+TAB切换到DELPHI中(但这时因为DirectX游戏是全屏,独占了屏幕,屏幕上不会有变动,所以要多试几次),按CTRL+F2就能够完结游戏.如果是异样的话,切换到DELPHI中先按下回车再按CTRL+F2就能够完结调试游戏了. 留神: 如果你是应用DELPHI7的话,请把DirectDraw.pas中的145行{$IFDEF VER140}改为{$IFDEF VER150}能力失常编释. 最好应用的形式来建设游戏主窗口而不是应用VCL的TFORM类. 先让咱们来看看用C++和DELPHI初始化DirectDraw对像的代码段.c++版:BOOLwww.sangpi.com InitDDraw( ){ LPDIRECTDRAW7 lpDD; // DirectDraw对象的指针 if ( DirectDrawCreateEx (NULL, (void **)&lpDD, IID_IDirectDraw7, NULL) != DD_OK ) return FALSE; {创立DirectDraw对象} {里应用了 if ( xxx ！= DD_OK) 的办法进行谬误检测，这是最罕用的办法} if (lpDD->SetCerativeLevel(hwnd,DDSCL_EXCLUSIVE|DDSCL_FULLSCREEN) != DD_OK ) return FALSE; {设置DirectDraw管制级} if ( lpDD->SetDisplayMode( 640, 480, 32, 0, DDSDM_STANDARDVGAMODE ) != DD_OK ) return FALSE; {置显示}} ...

关于css:如何使Electron进行IPC-通信

1、index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <button type="button" id="talk">Talk to main process</button>  We are using Node.js <script>document.write( process.versions.node)</script>, and Electron <script>document.write( process.versions.electron )</script>. <script> // You can also require other files to run in this process require('./renderer.js') </script> </body> </html> 2、renderer.js // This file is required by the index.html file and will ...

关于css:如何实现java实现web服务器之间转换

ava Web，是用 Java技术来解决相干web互联网畛域的技术总和。web包含：web服务器和web客户端两局部。Java在客户端的利用有java applet，不过应用得很少，Java在服务器端的利用十分的丰盛，比方Servlet，JSP和第三方框架等等。Java技术对Web畛域的倒退注入了弱小的能源。 1、支流Web服务器简介 Web服务器是运行及公布Web利用的容器，只有将开发的Web我的项目搁置到该容器中，能力使网络中的所有用户通过浏览器进行拜访。开发Java Web利用所采纳的服务器次要是与JSP/Servlet兼容的Web服务器，比拟罕用的有Tomcat、Resin、JBoss、WebSphere 和 WebLogic 等 2、Tomcat 服务器目前很风行的Tomcat服务器是Apache-Jarkarta开源我的项目中的一个子项目，是一个小型、轻量级的反对JSP和Servlet 技术的Web服务器，也是初学者学习开发JSP利用的首选。 3、Resin 服务器 Resin是Caucho公司的产品，是一个十分风行的反对Servlet和JSP的服务器，速度十分快。Resin自身蕴含了一个反对HTML的Web服务器，这使它不仅能够显示动静内容，而且显示动态内容的能力也毫不逊色，因而许多网站都是应用Resin服务器构建。 4、JBoss服务器 JBoss是一个种听从JavaEE标准的、凋谢源代码的、纯Java的EJB服务器，对于J2EE有很好的反对。JBoss采纳JML API实现软件模块的集成与治理，其游戏外围服务又是提供EJB服务器，不蕴含Servlet和JSP的Web容器，不过它能够和Tomcat完满联合。 5、WebSphere 服务器 WebSphere是IBM公司的产品，可进一步细分为 WebSphere Performance Pack、Cache Manager 和WebSphere Application Server等系列，其中www.sangpi.comWebSphere Application Server 是基于Java 的应用环境，能够运行于 Sun Solaris、Windows NT 等多种操作系统平台，用于建设、部署和治理Internet和Intranet Web应用程序。 6、WebLogic 服务器 WebLogic 是BEA公司的产品(当初曾经被Oracle收买)，可进一步细分为 WebLogic Server、WebLogic Enterprise 和 WebLogic Portal 等系列，其中 WebLogic Server 的性能特地弱小。WebLogic 反对企业级的、多层次的和齐全分布式的Web利用，并且服务器的配置简略、界面敌对。对于那些正在寻求可能提供Java平台所领有的所有应用服务器的用户来说，WebLogic是一个非常现实的抉择。

关于css:CSS-弹性浮动布局应用

其实文章原名叫做 “碰到不反对 flex 的我的项目怎么办？” 当初差不多曾经是 flex 的天下了，简略灵便，但有时还是不可避免的会接触到 IE 浏览器，比方我最近接触的阅文作家专区 (qq.com)，这个就是须要兼容 IE9，也天然不能应用 flex 布局了。不能应用 flex 怎么办（这个我的项目怎么这么XX，都 2021 年了还要兼容 IE）？那只能回归传统布局形式了，也就是浮动布局。浮动 float 能够说是 CSS 布局里最为灵便的布局之一了，千万不要小瞧了浮动，有些布局只有浮动能力实现呢。上面将介绍几种常见的布局，一起看看吧一、文本盘绕布局这类布局应该就是浮动最后的用意了，比方这样的设置一个左浮动就能够了，实现如下 <div> <strong class="float">浮</strong> <p>动属性指定一个元素应沿其容器的左侧或右侧搁置，容许文本和内联元素盘绕它。该元素从网页的失常流动(文档流)中移除，只管依然放弃局部的流动性。</p></div>.float{ float: left; /*其余款式*/}残缺代码可拜访 float-layout (codepen.io) 须要留神的是，浮动元素必须放在文本的后面（ HTML 构造），如果放在文本前面 <div> <p>动属性指定一个元素应沿其容器的左侧或右侧搁置，容许文本和内联元素盘绕它。该元素从网页的失常流动(文档流)中移除，只管依然放弃局部的流动性。</p> <strong class="float">浮</strong></div>那么就会变成这样也就是说，浮动的影响范畴是由浮动元素在 HTML 中的构造决定的，这一点十分重要不过，当初很少会见到这种盘绕布局了，但有些时候这种思路还是挺有用的，比方在这篇文章 CSS 实现多行文本“开展收起” (juejin.cn)，外面就用到了浮动的个性，实现了右下角文本盘绕的成果，有趣味的能够看看二、两栏布局两栏布局的特点是右边是固定尺寸，左边主动撑满残余空间，例如构造如下 <div class="crad"> <img class="head" src="xxx.jpg"> <p class="info">浮动属性指定一个元素应沿其容器的左侧或右侧搁置，容许文本和内联元素盘绕它。该元素从网页的失常流动(文档流)中移除，只管依然放弃局部的流动性。</p></div>浮动实现如下，次要是文本须要设置 overflow: hidden 。这里就不谈实现原理（BFC）了，有趣味深究的能够查看这篇文章 CSS深刻了解流体个性和BFC个性下多栏自适应布局 .head{ float: left;}.info{ overflow: hidden;}如果左边是固定尺寸，比方这样的这种状况如何解决呢？很多人可能会想到右浮动，没错，然而要留神，HTML 构造不须要改变，也就是浮动元素依然在文本的后面 ...

关于css:解析KIT205-Data-Structures

KIT205 Data Structures and AlgorithmsAssignment 1: Data StructuresDue: 26th April, 11:55pmIntroductionYou work for an online marketing company that manages a number of store loyalty programs.You have been asked to develop some software to manage the customer database. Youdecide to develop a prototype solution to test the performance of different data structuresand algorithms.The company manages the program for several stores, but this number is not expected togrow beyond a few dozen. More importantly, each program may have many thousands(perhaps even millions) of customers; and, as a result of aggressive cross-marketing, many ofthese customers are subscribed to multiple loyalty programs. Your software needs to providethe following functions: ...

关于css:Sql-Server关于create-index-include带有包含列的索引

By including nonkey columns, you can create nonclustered indexes that cover more queries. This is because the nonkey columns have the following benefits: They can be data types not allowed as index key columns.They are not considered by the Database Engine when calculating the number of index key columns or index key size. 在SqlServer 2016中，当咱们要给一个长度超过1700的列创立索引时，数据库会通知咱们为这个列建索引会超过限度，而include的列是不在这个限度外面的。 create table t1(hid int,hname varchar(4000),hname1 varchar(4000))create index ind_hname on t1(hname) --正告Warning! The maximum key length for a nonclustered index is 1700 bytes. The index 'ind_hname' has maximum length of 4000 bytes. For some combination of large values, the insert/update operation will fail.create index ind_hname on t1(hid) include(hname) --不报错，失常创立，索引键列是hid，蕴含列是hname ...

关于css:学姐叫我看-CSS-新出的容器查询然后把公共组件重构成响应式的

作者：AAhmad Shadeed译者：前端小智起源：shadeed有幻想，有干货，微信搜寻【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。在前端开发中常常须要按不同屏幕尺寸来进设计达到PC和挪动端响应式。咱们个别应用CSS媒体查问来检测视口宽度或高度，而后依据该模式扭转设计。这就是在过来10年中设计Web布局的形式。 CSS容器查问，一个长期以来被web开发者要求的个性，很快就会呈现在CSS中，在最新的 Chrome Canary 中，咱们能够通过 chrome://flags/#enable-container-queries 开启 Container Queries 性能。在本文中，我将介绍它是什么，它将如何扭转作为设计师的工作流，等等。以后响应设计状态以后，咱们实现响应式，个别须要 UI 设计三个款式，别离是挪动，平板电脑和桌面等。在上图中，UI设计了三种版本，因而开发人员能够很好的实现它，这是很 nice的(这怕偷懒的 UI 只提供PC版本，这就很蛋疼)。当初咱们来看看应用媒体查问来看看怎么实现它。上图是同一个组件，它有三个变体，即default、Card和Featured。在CSS中，开发人员须要创立此组件的三个变体，其中每个组成均是惟一的。 .c-media { /* the default styles */ display: flex; flex-wrap: wrap; gap: 1rem;}@media (min-with: 400px) { .c-media--card { display: block; } .c-media--card img { margin-bottom: 1rem; }}@media (min-with: 1300px) { .c-media--featured { position: relative; /* other styles */ } .c-media--featured .c-media__content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }}下面的变体取决于媒体查问或视口宽度。这意味着，咱们无奈依据其父宽度管制它们。当初你可能会想，这里有什么问题？喔或，这是一个很好的问题。 ...

关于css:extern和头文件到底有什么作用

一、头文件首先说下头文件，其实头文件对计算机而言没什么作用，她只是在预编译时在 #include 的中央开展一下，没别的意义了，其实头文件次要是给他人看的。我做过一个试验，将头文件的后缀改成 xxx.txt，而后在援用该头文件的中央用 #include "xxx.txt", 编译，链接都很顺利的过来了，由此可知，头文件仅仅为浏览代码作用，没其余的作用了！不论是C还是C++，你把你的函数，变量或者构造体，类啥的放在你的.c或者.cpp文件里。而后编译成lib,dll,obj,.o等等，而后他人用的时候，最根本的gcc hisfile.cpp yourfile.o|obj|dll|lib 等等。但对于咱们程序员而言，他们怎么晓得你的lib,dll...外面到底有什么货色？要看你的头文件。你的头文件就是对用户的阐明。函数，参数，各种各样的接口的阐明。那既然是阐明，那么头文件外面放的天然就是对于函数，变量，类的"申明"(对函数来说，也叫函数原型)了。记着，是"申明"，不是"定义"。那么，我假如大家晓得申明和定义的区别。所以，最好不要傻嘻嘻的在头文件里定义什么货色。比方全局变量： /xx头文件/ ifndef _XX_头文件.Hdefine _XX_头文件.Hint A; endif那么，很蹩脚的是，这里的 int A 是个全局变量的定义，所以如果这个头文件被屡次援用的话，你的A会被反复定义，显然语法上错了。只不过有了这个 #ifndef 的条件编译，所以能保障你的头文件只被援用一次，不过兴许还是不会出岔子，但若多个 c 文件蕴含这个头文件时还是会出错的，因为宏名无效范畴仅限于本c源文件，所以在这多个 c 文件编译时是不会出错的，但在链接时就会报错，说你多处定义了同一个变量: Linking...incl2.obj : error LNK2005: "int glb" (?glb@@3HA) already defined in incl1.objDebug/incl.exe : fatal error LNK1169: one or more multiply defined symbols found二、extern 这个关键字真的比拟可恶，在定义变量的时候，这个extern竟然能够被省略(定义时，默认均省略)；在申明游戏变量的时候，这个extern必须增加在变量前，所以有时会让你搞不清楚到底是申明还是定义。或者说，变量前有extern不肯定就是申明，而变量前无extern就只能是定义。注：定义要为变量分配内存空间；而申明不须要为变量分配内存空间。上面分变量和函数两类来说：（1）变量尤其是对于变量来说: extern int a; // 申明一个全局变量 aint a; // 定义一个全局变量 aextern int a =0 ; // 定义一个全局变量 a 并给初值。int a =0; // 定义一个全局变量 a, 并给初值，第四个等于第三个，都是定义一个能够被内部应用的全局变量，并给初值。 ...

关于css:CSS-实现支持渐变的提示框tooltips

明天来看一种非常常见的交互：提示框（tooltips）。通常提示框都是纯色的，比方上面这个这类布局实现还不算简单，能够用一个圆角矩形和一个小三角拼接造成，设置雷同的色彩就能够了这个并不是本文的重点，有趣味的能够拜访 css-tips (codepen.io) 有时候，为了突出强调产品的特点或者为了追随设计的潮流，设计会用上突变背景，比方 lulu UI Edge 版本中的 Tips 组件如果依然采纳“拼接”的形式，不可避免会呈现连接不上的问题，有显著的“割裂”感，视觉还原会大打折扣那么，如何实现这类成果呢？一起来看看吧一、clip-path 裁剪clip-path 可能是很多人马上就能想到的形式。然而实际操作下来，还是会遇到很多麻烦 clip-path: path 能够反对任意形态，然而却没法实现自适应宽高clip-path: polygon 能够实现小尖角，然而无奈实现圆角clip-path: inset 能够实现自适应圆角矩形，然而无奈实现下方的小尖角如何解决这个问题呢？其实把 2 和 3 联合起来就能够了这里须要两个雷同大小的容器，能够用 ::before 和 ::after 来代替，而后设置雷同的背景色，能够通过自定义属性定义 .tips{ position: relative; --bg: linear-gradient(45deg, #ff3c41, #ff9800);}.tips::before,.tips::after{ content:''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: var(--bg);/*完全相同的背景*/ z-index: -1;}为什么要用两个雷同大小的容器呢？这是为了保障接下来突变背景在裁剪时齐全吻合接着其中一个裁剪成圆角矩形，另外一个裁剪成小三角，而后重叠起来就能够了 .tips::before{ clip-path: inset(0 0 5px 0 round 5px); /*round 能够设置圆角*/}.tips::after{ clip-path: polygon(calc(50% - 5px) calc(100% - 5px), calc(50% + 5px) calc(100% - 5px), 50% 100%); /* 实现小三角，只须要3个点的坐标就能够了 */}能够看到提示框齐全是自适应的，实时成果如下 ...

关于css:BakerySwapjs如何操作

1 编译合约在终端进入我的项目目录，执行如下命令编译bakeryswap及开发包提供的测试Token合约： ~$ cd ~/bakeryswap.js~/bakeryswap.js$ bin/build-contracts 执行后果如下：在这里插入图片形容 2 部署合约首先在另一个终端启动开发私链： ~$ ganache-cli -d 而后进入我的项目demo目录，执行如下命令部署合约： ~$ cd ~/bakeryswap.js/demo~/bakeryswap.js/demo$ node deploy-contracts.js 执行后果如下：在这里插入图片形容留神：如果须要在BSC主链或测试链部署上述合约，或者应用其余参数启动ganache-cli，须要批改config.js中的账号配置。 3 Token受权代码demo/token-approve.js演示了如何受权bakeryswap路由合约代理操作以后账号的HAPY token和USDT token。在终端进入我的项目demo目录，执行如下命令： ~$ cd ~/bakeryswap.js/demo~/bakeryswap.js/demo$ node token-approve.js 执行后果如下：在这里插入图片形容 4 BEP20/BEP20交易对增加流动性代码demo/add-liquidity.js演示了如何为BEP20/BEP20交易对增加流动性。在终端进入我的项目demo目录，执行如下命令： ~$ cd ~/bakeryswap.js/demo~/bakeryswap.js/demo$ node add-liquidity.js 执行后果如下：在这里插入图片形容 bakeryswap协定约定，第一次增加流动性将主动创立交易对，之后再次增加流动性时，演示代码将首先显示以后的仓位信息。例如再次执行如下命令： ~/bakeryswap.js/demo$ node add-liquidity.js 执行后果如下：在这里插入图片形容 5 BEP20/BEP20交易对移除流动性代码demo/remove-liquidity.js演示了如何移除指定的BEP20/BEP20交易对的流动性。在终端进入我的项目demo目录，执行如下命令： ~$ cd ~/bakeryswap.js/demo~/bakeryswap.js/demo$ node remove-liquidity.js 执行后果如下：在这里插入图片形容 6 BEP20/BEP20兑换：以输出token数量为基准代码demo/swap-exact-tokens-for-tokens.js演示了如何实现以输出token数量为基准的BEP20/BEP20兑换。在终端进入我的项目demo目录，执行如下命令： ~$ cd ~/bakeryswap.js/demo~/bakeryswap.js/demo$ node swap-exact-tokens-for-tokens.js ...

关于css:fontdisplay的用法

浏览器是如何加载字体的FOIT大多数浏览器在自定义字体还未下载之前会先暗藏文本。这就是大家所说的不可见文本（Flash of Invisible Text） FOUT其实刚开始时浏览器应用的是FOUT,即无款式文本（Flash of Unstyled Text）。字体未下载之前显示零碎字体，字体下载实现之后显示web字体，比起零碎字体，Web字体很可能会在屏幕上占据不一样的空间。第二次渲染时，页面布局变了，文字忽然跳动了。如果这是在第一次渲染之后很快产生，用户可能不会留神到。然而如果字体下载过程中有网络提早（或者字体文件太大了），可能长达几秒之后才会再次渲染页面。这种状况产生时，有的用户可能会感到腻烦。他们可能曾经开始浏览网页内容了，这时页面忽然变动，会让他们注意力扩散。因为开发者们不喜爱这样，所以大部分浏览器供应商批改了浏览器的行为 font-displayfont-display用来管制浏览器如何加载字体值形容auto默认值。典型的浏览器字体加载的行为会产生，也就是应用自定义字体的文本会先被暗藏，直到字体加载完结才会显示。(FOIT)swap字体文件未加载前显示零碎字体，加载完后切换为web字体(FOUT)fallback能够说是auto和swap的一种折中形式。须要应用自定义字体渲染的文本会在较短的工夫（100ms according to Google ）不可见，如果自定义字体还没有加载完结，那么就先加载无款式的文本。一旦自定义字体加载完结，那么文本就会被正确赋予款式。optional给了大概100毫秒的字体期待期，给自定义字体一个奋斗的机会，看能不能在页面视图一开始就显示进去。但过了这个工夫，零碎字体呈现，并且不会再替换。可能那个自定义字体最终下载好了，那也要等下一页把它从缓存里取出并应用。对于高网速，fallback体现最好，会呈现短暂的FOIT，但如果Web字体加载超过了100ms就会产生FOUT。对于低网速，swap更好一些，能够立即渲染回退字体。如果Web字体对于整体设计来讲并非必不可少的时候，就能够应用optional

关于css:CSS-背景位置-backgroundposition属性

background-position属性须要 2 个参数值，第一个值用于横坐标，第二个值用于纵坐标，默认值为 0% 0%，即背景图像的左上角与对象背景区域的左上角对齐。如果只提供一个值，则用于 x 轴方向，y 轴方向应用默认值 center，即垂直居中。例子 div { width: 200px; height: 200px; border: 1px dashed #ccc; background-repeat: no-repeat; background-position: center center; background-image: url(img/bg.gif);}背景图像有 3 种定位形式关键字定位程度方向可选关键字有 left | center | right，垂直方向可选关键字有 top | center | bottom。关键字定位，利用的是对齐规定，而不是坐标规定。xpos 为 left 示意图像的右边与对象的右边对齐，为 right 示意图像的左边和对象的左边对齐；ypos 为 top 示意图像的顶部和对象的顶部对齐，为 bottom 示意图像的底部和对象的底部对齐；xpos、ypos等于 center示意图像在程度和垂直方向的核心，和对象在程度和垂直方向的核心对齐上述例子定位，就示意背景图像的核心，与背景区域的核心对齐，即背景图像位于对象的地方地位百分比定位x% y%：示意应用百分比定位，是将图像自身（x%, y%）的那个点，与背景区域的（x%, y%）的那个点重合。最终失去背景图像起始地位坐标的计算公式为： x = (对象的宽度 - 图像的宽度) * x%; y = (对象的高度 - 图像的高度) * y%;当然，百分比的值也能够是负值，计算公式仍然不变下面的例子，把百分比改为 -50% -50%。此时，失去背景图像起始地位的坐标为： ...

关于css:css动画

关键帧关键帧（keyframe）是指动画过程中某个特定时刻。咱们定义一些关键帧，浏览器负责填充或者插入这些关键帧之间的帧图像创立关键帧动画 @keyframes over-and-back { 0% { background-color: hsl(0, 50%, 50%); transform: translate(0); } 50% { transform: translate(50px); } 100% { background-color: hsl(270, 50%, 90%); transform: translate(0); } } 动画属性animationanimation 属性是一个简写属性，用于设置六个动画属性： animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction默认值：none 0s ease 0s 1 normal值形容animation-name规定须要绑定到选择器的 keyframe(关键帧动画) 名称animation-duration规定实现动画所破费的工夫，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的提早。。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。animation-fill-modeanimation-fill-mode 属性规定动画在播放之前或之后，其动画成果是否可见。值形容none（默认）动画执行前或执行后动画款式都不会利用到元素上forwards当动画实现后，放弃最初一个属性值（在最初一个关键帧中定义）。forwards在 animation-delay 所指定的一段时间内，在动画显示之前，利用开始属性值（在第一个关键帧中定义）。both向前和向后填充模式都被利用。

关于css:css变换

旋转、平移、缩放和歪斜根本定义旋转（Rotate）——元素绕着一个轴心转动肯定角度。（transform: rotateX(xdeg)|rotateY(ydeg)|rotateZ(zdeg)）平移（Translate）——元素向上、下、左、右各个方向挪动（有点相似于绝对定位）。 (transform: translate(x,y)|translateX(x)|translateY(y)|translateZ(z))缩放（Scale）——放大或放大元素。（transform: scale(x, y)|scaleX(x)|scaleY(y)）歪斜（Skew）——使元素变形，顶边滑向一个方向，底边滑向相同的方向。（transform: skew(x, y)|skewX|skewY）留神点1. 应用变换的时候要留神一件事件，尽管元素可能会被挪动到页面上的新地位，但它不会脱离文档流。你能够在屏幕范畴内以各种形式平移元素，其初始地位不会被其余元素占用。当旋转某元素的时候，它的一角可能会移出屏幕边缘，同样也可能会遮住旁边其余元素的局部内容2. 变换不能作用在<span>或者<a>这样的行内元素上。3. 变换是围绕基点（point of origin）产生的。基点是旋转的轴心，也是缩放或者歪斜开始的中央。这就意味着元素的基点是固定在某个地位上，元素的残余局部围绕基点变换（但translate()是个例外，因为平移过程中元素整体挪动）。默认状况下，基点就是元素的核心，但能够通过transform-origin属性扭转基点地位。4. 能够对transform属性指定多个值，用空格隔开。变换的每个值从右向左按程序执行，三维（3D）变换旋转和平移都能够在三个维度上实现：X轴、Y轴和Z轴。管制透视间隔为页面增加3D变换之前，咱们须要先确定一件事件，即透视间隔（perspective）。变换后的元素一起形成了一个3D场景。接着浏览器会计算这个3D场景的2D图像，并渲染到屏幕上。咱们能够把透视间隔设想成“摄像机”和场景之间的间隔，前后移动镜头就会扭转整个场景最终显示到图像上的形式。如果镜头比拟近（即透视间隔小），那么3D成果就会比拟强。如果镜头比拟远（即透视间隔大），那么3D成果就会比拟弱。设置透视间隔地位的不同造成的区别首先，咱们为四个元素增加旋转成果，应用rotateX()让它们向后歪斜（如下图）。因为每个元素旋转同样的角度，并且设置了雷同的perspective()，所以它们看上去一样。 <div class="row"> <div class="box">One</div> <div class="box">Two</div> <div class="box">Three</div> <div class="box">Four</div></div>//css.row { display: flex; justify-content: center;}.box { box-sizing: border-box; width: 150px; margin: 0 2em; padding: 60px 0; text-align: center; background-color: hsl(150, 50%, 40%); transform: perspective(200px) rotateX(30deg);//transform中设置了雷同的perspective()} 但有时候咱们心愿多个元素共享同一套透视间隔，就好像它们处于雷同的3D空间中。下图用来演示这种状况。这里有四个雷同的元素，但它们都向着远方的一个雷同的交汇点延长，就好像把四个元素放一起而后拍摄一张整体的照片。要实现这种成果，须要为它们的父元素设置perspective属性。 .row { display: flex; justify-content: center; perspective: 200px;//为它们的父元素设置perspective属性}.box { box-sizing: border-box; width: 150px; margin: 0 2em; padding: 60px 0; text-align: center; background-color: hsl(150, 50%, 40%); transform: rotateX(30deg);} ...

关于css:css-变量

纲要概念比拟与意义语法实际参考链接：CSS变量（自定义属性）实际指南阮一峰-css变量教程应用CSS自定义属性（变量）妙用css变量

关于css:游戏里面的MySQL执行计划的type列和extra列有什么区别呢

一、解读type执行打算的type示意拜访数据类型，有很多种拜访类型。 1、system示意这一步只返回一行数据，如果这一步的执行对象是一个驱动表或者主表，那么被驱动表或者子查问只是被拜访一次。 2、const 示意这个执行步骤最多只返回一行数据。const通常呈现在对主键或惟一索引的等值查问中，例如对表t主键id的查问： 3、eq_ref eq_ref类型个别意味着在表关联时，被关联表上的关联列走的是主键或者惟一索引。例如，表jiang关联lock_test表，关联列别离是两张表的主键列：下面SQL执行时，jiang表是驱动表，lock_test是被驱动表，被驱动表的关联列是主键id，type类型为eq_ref。所以，对于eq_ref类型来说有一个重要的特点就是：这一步波及到的表是被驱动表；这一步中应用到惟一索引或主键。除了system和const之外，这是成果最好的关联类型。 4、ref 与下面相同，如果执行打算的某一步的type是ref的话，示意这一步的关联列是非惟一索引。例如，用表jiang的主键id列关联表lock_test的num列，num列上建设了一般索引：下面SQL执行时，表jiang是驱动表，lock_test是被驱动表，被驱动表上走的是非惟一索引，type类型为ref。所以ref的特点是：示意这一步拜访数据应用的索引是非惟一索引。 5、Ref_or_null例如执行上面语句：示意走了索引(num列上有索引)，然而也拜访了游戏的空值。 6、index_merge 示意索引合并，个别对多个二级索引列做or操作时就会产生索引合并。例如执行下列语句：mysql> explain select * from lock_test where id=3 or num=4; id为主键，num列上建有一般索引，语句执行时，会通过两个单列索引来解决or操作。 7、unique_subquery示意惟一子查问。例如有如下语句执行时：value in(select primary_key from single_table where ...)对于in子句来说，当in子句里的子查问返回的是某一个表的主键时，type显示为unique subquery。 8、index_subquery当有如下语句执行时：value in(select key_column from single_table where ...)与下面的类似，示意对于in子句来说，当in子句里的子查问返回的是某一个表的二级索引列(非主键列)时，type显示为index_subquery。 9、range：在有索引的列上取一部分数据。常见于在索引列上执行between and操作。 10、index：索引全扫描，个别产生在笼罩索引的时候，也就是对有索引列产生一次全扫描。 11、all：没有索引的全表扫描。一个特例： Explain select * from stu limit 1,1; 二、解读extra1、using where：个别有两层意思：示意通过索引拜访时，须要再回表拜访所需的数据；过滤条件产生在server层而不是存储引擎层；如果执行打算中显示走了索引，然而rows值很高，extra显示为www.sangpi.comusing where，那么执行成果就不会很好。因为索引拜访的老本次要在回表上，这时能够采纳笼罩索引来优化。通过笼罩索引也能将过滤条件下压，在存储引擎层执行过滤操作，这样成果是最好的。所以，笼罩索引是解决using where的最无效的伎俩。 2、using index condition示意将过滤下压到存储层执行，避免server层过滤过多数据如果extra中呈现了using index condition，阐明对拜访表数据进行了优化。 3、using temporary示意语句执行过程中应用到了长期表。以下子句的呈现可能会应用到长期表：order bygroup bydistinctunion等数据不能间接返回给用户，就须要缓存，数据就以长期表缓存在用户工作空间。留神，可能会呈现磁盘长期表，须要关注须要缓存的数据的rows。能够应用索引打消下面的四个操作对应的长期表。 4、using sort_union(indexs) Sname和sphone列上都有索引，这时执行打算的extra项就会显示using sort_union(i_sname,i_spone)，示意索引合并。常随同着index_merge。 ...

关于css:css属性选择器

1. [attr]——匹配的元素领有指定属性attr，无论属性值是什么，例如：input[disabled]。 2. [attr="value"]——匹配的元素领有指定属性attr，且属性值等于指定的字符串值，例如：input[type="radio"]。 3. [attr^="value"]——“结尾”属性选择器。该选择器匹配的元素领有指定属性attr，且属性值的结尾是指定的字符串值，例如：a[href^="https"]。 4. [attr$="value"]——“结尾”属性选择器。该选择器匹配的元素领有指定属性attr，且属性值的结尾是指定的字符串值，例如：a[href$= ".pdf"]。 5. [attr＊="value"]——“蕴含”属性选择器。该选择器匹配的元素领有指定属性attr，且属性值蕴含指定的字符串值，例如：[class＊="sprite-"]。 6. [attr~="value"]——“空格分隔的列表”属性选择器。该选择器匹配的元素领有指定属性attr，且属性值是一个空格分隔的值列表，列表中的某个值等于指定的字符串值，例如：a[rel="author"]。 [attr|="value"]——匹配的元素领有指定属性attr，且属性值要么等于指定的字符串值，要么以该字符串结尾且紧跟着一个连字符（-）。实用于语言属性，因为该属性有时候会指定一种语言的子集（比方墨西哥西班牙语，es-MX，或者一般的西班牙语，es），例如：[lang|="es"]。 7. 上述属性选择器都是辨别大小写的。选择器标准Level4提出了一种不辨别大小写的修饰符，能够作用于任何属性选择器。它的用法是将i增加到完结方括号后面，例如：input[value="search"i]。

关于css:粘性定位sticky-positioning

根本含意粘性定位是绝对定位和固定定位的结合体：失常状况下，元素会随着页面滚动，当达到屏幕的特定地位时（设置值），如果用户持续滚动，它就会“锁定”在这个地位。例子<!doctype html><head> <style> body { font-family: Helvetica, Arial, sans-serif; min-height: 200vh; margin: 0; } button { padding: .5em .7em; border: 1px solid #8d8d8d; background-color: white; font-size: 1em; } .top-banner { padding: 1em 0; background-color: #ffd698; } .top-banner-inner { width: 80%; max-width: 1000px; margin: 0 auto; } .modal { display: none; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } .modal-body { position: fixed; top: 3em; bottom: 3em; right: 20%; left: 20%; padding: 2em 3em; background-color: white; overflow: auto; z-index: 2; } .modal-close { position: absolute; top: 0; right: 0; padding: 0.3em; font-size: 2em; height: 1.5em; width: 1.5em; cursor: pointer; border: 0; } .modal-close::before { display: block; content: '\00D7'; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; } .container { display: flex; width: 80%; max-width: 1000px; margin: 1em auto; min-height: 100vh; } .dropdown { display: inline-block; position: relative; } .dropdown-label { padding: 0.5em 2em 0.5em 1.5em; border: 1px solid #ccc; background-color: #eee; } .dropdown-label::after { content: ""; position: absolute; right: 1em; top: 1em; border: 0.3em solid; border-color: black transparent transparent; } .dropdown:hover .dropdown-label::after { top: 0.7em; border-color: transparent transparent black; } .dropdown-menu { display: none; position: absolute; left: 0; top: 2.1em; min-width: 100%; background-color: #eee; } .dropdown:hover .dropdown-menu { display: block; } .submenu { padding-left: 0; margin: 0; list-style-type: none; border: 1px solid #999; } .submenu > li + li { border-top: 1px solid #999; } .submenu > li > a { display: block; padding: .5em 1.5em; background-color: #eee; color: #369; text-decoration: none; } .submenu > li > a:hover { background-color: #fff; } .col-main { flex: 1 80%; } .col-sidebar { flex: 20%; } .affix { position: sticky; top: 1em; } </style></head><body> <header class="top-banner"> <div class="top-banner-inner"> <p>Find out what's going on at Wombat Coffee each month. Sign up for our newsletter: <button id="open">Sign up</button> </p> </div> </header> <div class="modal" id="modal"> <div class="modal-backdrop"></div> <div class="modal-body"> <button class="modal-close" id="close"> <span class="sr-only">close</span> </button> <h2>Wombat Newsletter</h2> <p>Sign up for our monthly newsletter. No spam. We promise!</p> <form> <p> <label for="email">Email address:</label> <input type="text" name="email"/> </p> <p><button type="submit">Submit</button></p> </form> </div> </div><div class="container"> <main class="col-main"> <nav> <div class="dropdown"> <div class="dropdown-label">Main Menu</div> <div class="dropdown-menu"> <ul class="submenu"> <li><a href="/">Home</a></li> <li><a href="/coffees">Coffees</a></li> <li><a href="/brewers">Brewers</a></li> <li><a href="/specials">Specials</a></li> <li><a href="/about">About us</a></li> </ul> </div> </div> </nav> <h1>Wombat Coffee Roasters</h1> </main> <aside class="col-sidebar"> <div class="affix"> <ul class="submenu"> <li><a href="/">Home</a></li> <li><a href="/coffees">Coffees</a></li> <li><a href="/brewers">Brewers</a></li> <li><a href="/specials">Specials</a></li> <li><a href="/about">About us</a></li> </ul> </div> </aside></div> <script type="text/javascript"> var button = document.getElementById('open');var close = document.getElementById('close');var modal = document.getElementById('modal');button.addEventListener('click', function(event) { event.preventDefault(); modal.style.display = 'block';});close.addEventListener('click', function(event) { event.preventDefault(); modal.style.display = 'none';});</script></body> ...

关于css:层叠上下文和zindex

了解渲染过程和层叠程序浏览器会先绘制所有非定位的元素，而后绘制定位元素。默认状况下，所有的定位元素会呈现在非定位元素后面。用z-index管制层叠程序1. 领有较高z-index的元素呈现在领有较低z-index的元素后面。领有正数z-index的元素呈现在动态元素前面。2. z-index只在定位元素上失效，不能用它管制动态元素。3. 给一个定位元素加上z-index能够创立层叠上下文。层叠上下文一个层叠上下文蕴含一个元素或者由浏览器一起绘制的一组元素。其中一个元素会作为层叠上下文的根，比方给一个定位元素加上z-index的时候，它就变成了一个新的层叠上下文的根。所有后辈元素就是这个层叠上下文的一部分。层叠上下文之外的元素无奈叠放在层叠上下文内的两个元素之间。 1.层叠上下文的根2.z-index为负的定位元素（及其子元素）3.非定位元素4.z-index为auto的定位元素（及其子元素）5.z-index为正的定位元素（及其子元素）

关于css:如何延迟打开数据库

YS@book> set timing onSYS@book> startup mount;ORACLE instance started. Total System Global Area 676491264 bytesFixed Size 2256192 bytesVariable Size 239076032 bytesDatabase Buffers 427819008 bytesRedo Buffers 7340032 bytesDatabase mounted.SYS@book> oradebug setmypidStatement processed.SYS@book> set timing onSYS@book> oradebug event db_open_begin delay=20Statement processed. SYS@book> alter database open ;Database altered. Elapsed: 00:00:21.64SYS@book> select sysdate from dual ; SYSDATE2021-06-02 08:59:32 Elapsed: 00:00:00.00 --//看看alter的记录:alter database open--//执行前等20秒后采纳如下信息。Wed Jun 02 08:59:30 2021LGWR: STARTING ARCH PROCESSESWed Jun 02 08:59:30 2021ARC0 started with pid=22, OS id=36296ARC0: Archival startedLGWR: STARTING ARCH PROCESSES COMPLETEARC0: STARTING ARCH PROCESSESThread 1 opened at log sequence 1173 Current log# 2 seq# 1173 mem# 0: /mnt/ramdisk/book/redo02.logSuccessful open of redo thread 1Wed Jun 02 08:59:31 2021MTTR advisory is disabled because FAST_START_MTTR_TARGET is not setWed Jun 02 08:59:31 2021SMON: enabling cache recoveryWed Jun 02 08:59:31 2021ARC1 started with pid=23, OS id=36298[36291] Successfully onlined Undo Tablespace 2.Undo initialization finished serial:0 start:1054168652 end:1054168722 diff:70 (0 seconds)Verifying file header compatibility for 11g tablespace encryption..Verifying 11g file header compatibility for tablespace encryption completedSMON: enabling tx recoveryDatabase Characterset is ZHS16GBKNo Resource Manager plan activereplication_dependency_tracking turned off (no async multimaster replication found)WARNING: AQ_TM_PROCESSES is set to 0. System operation might be adversely affected. ...

关于css:css浮动

浮动浮动的设计初衷1、浮动能将一个元素（通常是一张图片）拉到其容器的一侧，这样文档流就可能突围它（如下图所示）。这种布局在报纸和杂志中很常见，因而CSS减少了浮动来实现这种成果。文本行突围了浮动元素 2、浮动元素会被移出失常文档流，并被拉到容器边缘。文档流会重新排列，然而它会突围浮动元素此刻所占据的空间。如果让多个元素向同侧浮动，它们就会挨着排列，两个浮动元素挨着排列留神点1. 动元素不同于一般文档流的元素，它们的高度不会加到父元素上2. 浮动是为了实现文字围绕浮动元素排列的成果。在段落里浮动图片时，段落的高度并不会增长到可能包容该图片。也就是说，如果图片比段落文字高，下一段会间接从上一段的文字上面开始，两段文字都会围绕浮动的图片排列（下图1）3. 三个左浮动的盒子：如果盒子1比盒子2高，则盒子3不会浮动到最右边，而是浮动到盒子1的左边（下图2）下图1 下图2 块级格式化上下文（blockformatting context, BFC）特点1. 蕴含了外部所有元素的高低外边距。它们不会跟BFC里面的元素产生外边距折叠。2. 蕴含了外部所有的浮动元素。3. 不会跟BFC里面的浮动元素重叠。简而言之，BFC里的内容不会跟内部的元素重叠或者相互影响。如果给元素减少clear属性，它只会革除本身所在BFC内的浮动。如果强制给一个元素生成一个新的BFC，它不会跟其余BFC重叠。创立BFC1. float: left或right，不为none即可。2. overflow:hidden、auto或scroll，不为visible即可。3. display:inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。领有这些属性的元素称为块级容器（block container）。4. position:absolute或position: fixed。益处1. 蕴含浮动元素2. 避免外边距折叠3. 避免文档流围绕浮动元素排列

关于css:盒模型初探

浏览工夫：6min指标：学习盒模型的根本实践，理解盒装模型的工作原理，理解盒模型与代替模型的区别以及如何进行切换。前置条件：HTML和CSS基础知识。在 CSS 中，所有的元素都被一个个的“盒子（box）”突围着，了解这些“盒子”的基本原理，是咱们应用CSS实现精确布局、解决元素排列的要害。什么是CSS 盒模型?残缺的 CSS 盒模型利用于块级盒子，内联盒子只应用盒模型中定义的局部内容。模型定义了盒的每个局部 —— margin, border, padding, and content —— 合在一起就能够创立咱们在页面上看到的内容。盒模型的各个局部CSS中组成一个块级盒子须要: Content box 这个区域是用来显示内容，大小能够通过设置 width和 height。Padding box 突围在内容区域内部的空白区域；大小通过 padding 相干属性设置。Border box 边框盒包裹内容和内边距。大小通过 border相干属性设置。Margin box 这是最里面的区域，是盒子和其余元素之间的空白区域。大小通过 margin相干属性设置。如下图：规范盒模型在规范模型中，如果你给盒设置 width 和 height，理论设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。见下图。假如定义了 width, height, margin, border, and padding: .box { width: 350px; height: 150px; margin: 25px; padding: 25px; border: 5px solid black;}如果应用规范模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。 ...

关于css:MySQL主从复制与读写分离

MySQL主从复制(Master-Slave)与读写拆散(MySQL-Proxy)实际 Mysql作为目前世界上应用最宽泛的收费数据库，置信所有从事零碎运维的工程师都肯定接触过。但在理论的生产环境中，由单台Mysql作为独立的数据库是齐全不能满足理论需要的，无论是在安全性，高可用性以及高并发等各个方面。因而，一般来说都是通过主从复制（Master-Slave）的形式来同步数据，再通过读写拆散（MySQL-Proxy）来晋升数据库的并发负载能力这样的计划来进行部署与施行的。如下图所示： mysql-master-salve-proxy.jpg 一、MySQL主从复制场景形容：主数据库服务器：192.168.1.120，MySQL曾经装置，并且无利用数据。从数据库服务器：192.168.1.121，MySQL曾经装置，并且无利用数据。 1.1 主服务器上进行的操作 [root@master support-files]# service mysql start Starting MySQL.. [确定] [root@master support-files]# 通过命令行登录治理MySQL服务器[root@master support-files]# mysql -uroot -p123123 受权给从数据库服务器192.168.10.121 mysql> GRANT REPLICATION SLAVE ON . to 'rep1'@'192.168.1.121' identified by '123123'; Query OK, 0 rows affected (0.00 sec) 批改主数据库的配置文件my.cnf,开启BINLOG，并设置server-id的值，批改之后必须重启Mysql服务 log-bin = /opt/mysql/log/mysql-bin.log server-id=1 查问主数据库状态 mysql> show master status; | File | Position | Binlog_Do_DB | Binlog_Ignore_DB | Executed_Gtid_Set | | mysql-bin.000001 | 120 | | | | ...

关于css:HTML5怎样创建画布

在网页中，画布并不是默认存在的，用户首先须要创立画布，而后通过一些对象和办法能够在画布中绘制图案，上面将分步骤解说应用画布的办法。 1. 创立画布应用HTML5中的canvas标签能够在网页中创立画布。创立画布的根本语法格局如下。 1 在下面的语法格局中，canvas标签用于定义画布，id属性用于在JavaScript代码中援用画布。canvas标签是一个双标签，用户能够在两头输出文字，当浏览器不反对canvas标签，就会显示输出的文字信息。画布有width和height两个属性用于定义画布的宽度和高度，取值能够为数字或像素。创立实现的画布是通明的，没有任何款式，能够应用CSS为其设置边框、背景等。须要留神的是，设置画布宽高时，尽量不要应用CSS款式管制其宽高，否则可能使画布中的图案变形。 2. 获取画布要想在JavaScript中管制画布，首先要获取画布。应用getElementById()办法能够获取游戏网页中的画布对象。例如上面的示例www.cungun.com代码，就是为了获取id名为“cavs”的画布，同时将获取的画布对象保留在变量“canvas”中。 3. 筹备画笔有了画布之后，要开始绘图，还须要筹备一只画笔，这支画笔就是context对象。context对象也被称为绘制环境，通过该对象，能够在画布中绘制图形。context对象能够应用JavaScript脚本取得，具体语法如下所示：在下面的语法中，参数“2d”代表画笔的品种，示意二维绘图的画笔，如果绘制三维图形能够把参数替换为“webgl”，因为三维操作目前还没有宽泛的利用，这里理解即可。在JavaScript中，咱们通常会定义一个变量来保留获取的context对象，例如上面的代码。

关于css:css盒模型的一些知识

垂直居中指南在容器里让内容居中最好的形式是依据特定场景思考不同因素。做出判断前，先一一询问本人以下几个问题，直到找到适合的解决办法。 1. 能够用一个天然高度的容器吗？给容器加上相等的高低内边距让内容居中。2. 容器须要指定高度或者防止应用内边距吗？对容器应用display: table-cell和vertical-align: middle。3. 能够用Flexbox吗？如果不须要反对IE9，能够用Flexbox居中内容。4. 容器外面的内容只有一行文字吗？设置一个大的行高，让它等于现实的容器高度。这样会让容器高度扩大到可能包容行高。如果内容不是行内元素，能够设置为inline-block。5. 容器和内容的高度都晓得吗？将内容相对定位。（只有当后面提到的办法都有效时才举荐这种形式。）6. 不晓得外部元素的高度？用相对定位联合变形（transform）。（还是只有当后面提到的办法都有效时才举荐该办法。）7. 还不确定的话，参考howtocenterincss网站。这个网站很不错，能够依据本人的场景填写几个选项，而后它会相应地生成垂直居中的代码负外边距左负边距右负边距上负边距下负边距未指定width的块状元素width扩充width扩充向上挪动，与它下面的元素重叠将它上面的元素拉过来指定width的块状元素向左挪动没有作用向上挪动，与它下面的元素重叠将它上面的元素拉过来未指定width的内联元素向左挪动，与它右边的元素重叠将它左边的元素拉过来向上挪动，与它下面的元素重叠将它上面的元素拉过来指定width的内联元素向左挪动，与它右边的元素重叠将它左边的元素拉过来向上挪动，与它下面的元素重叠将它上面的元素拉过来负外边距并不罕用，然而在某些场景下很实用，尤其是当创立列布局的时候。不过该当防止频繁应用，不然网页的款式就会失控。外边距折叠1. 当顶部和/或底部的外边距相邻时，就会重叠，产生单个外边距。2. 只有高低外边距会产生折叠，左右外边距不会折叠。3. 弹性子元素的外边距不会折叠避免外边距折叠:1. 对容器应用overflow: auto（或者非visible的值），避免外部元素的外边距跟容器内部的外边距折叠。这种形式副作用最小。2. 在两个外边距之间加上边框或者内边距，避免它们折叠。3. 如果容器为浮动元素、内联块、相对定位或固定定位时，外边距不会在它里面折叠。4. 当应用Flexbox布局时，弹性布局内的元素之间不会产生外边距折叠。网格布局（grid布局）同理。一些留神点1. 百分比参考的是元素容器块的大小，然而容器的高度通常是由子元素的高度决定的。这样会造成死循环，浏览器解决不了，因而它会疏忽这个申明。要想让百分比高度失效，必须给父元素明确定义一个高度。2. vertical-align申明只会影响行内元素或者table-cell元素。对于行内元素，它管制着该元素跟同一行内其余元素之间的对齐关系。对于显示为table-cell的元素，vertical-align管制了内容在单元格内的对齐。

关于css:GUI编程贪吃蛇小游戏开发

①初识实践帧：工夫片足够小=》就是动画，1秒30帧。连起来是动画，拆开就是动态的图片！键盘监听定时器Timer ②游戏开发思路（定义数据，画上面板，监听事件（键盘/事件）） 1、首先一个游戏主启动类StartGame类，外面放一个JFrame窗口及其大小地位设置，敞开设置，这里设置窗口大小不可变，以防拉伸导致游戏图标变形，相干的具体操作都在相应类中进行！ 2、失常的游戏界面应在面板上！因而定义一个GamePanel类进行操作，首先是重写了painComponent(Graphics p)办法，游戏中的所有货色都是用这支画笔来画！首先是绘制动态的面板，设置面板色彩为红色。 3、接着把游戏图片素材放入static字典中，放入游戏开发包下，定义一个Data类，在其中获取寄存游戏图片的地址，并把它们变为图标，接着在花瓣上画上头部广告栏、矩形（默认彩色）的游戏界面。 4、绘制动态的的小蛇，在GamePanel类中定义小蛇的数据结构！ int length; =>蛇的长度 int[] snakeX=new int[600]; => 蛇的地位的 x 坐标25*25 int[] snakeY=new int[500]; => 蛇的地位的 y 坐标25*25 String fx; => 初始方向而后写初始化办法init()办法初始化动态小蛇的长度、地位及其初始方向，再在结构器中调用init()办法，接着把小蛇画入面板中！（要判断头的方向！），身材用for循环画。 5、游戏以后状态inStart：开始/进行，空格键管制！初始设为进行false，判断状态后将提醒文字画上面板！ 6、空格键管制游戏开始与进行！设置键盘监听！间接在GamePanel类中实现KeyListener接口！按下空格键–>状态取反，重画repaint()，再init()函数中设置焦点事件和增加键盘监听。 7、小蛇动起来，Timer定时器！在GamePanel类中实现ActionListener接口即可。游戏一开始就启动定时器！接着写出小蛇挪动的地位坐标解决，上下左右挪动，头部、身材坐标如何变动，最初repaint()重画页面。这样子小蛇能够本人动了。但咱们须要通过键盘监听上下左右键来管制小蛇的挪动！身材挪动是一样的，咱们只须要判断挪动方向，把头的地位坐标找好就行！ 8、小蛇吃食物长大啦~，定义食物的坐标并在init()中初始化 int foodX; int foodY; Random random=new Random(); 吃食物即是头部坐标和食物坐标重合，小蛇长度+1，再次生成随机的食物，吃完食物再画身材！ 9、定义失败状态，默认是不失败，如果失败面板上须要呈现文字提醒，在面板上画即可。空格键可能是开始/进行游戏，也可能是失败后从新开始游戏，所以按下空格键得依据游戏失败装药isFail判断时开始/进行、还是从新初始开始游戏！如果游戏开始状态且没有失败，那么须要在走向前面加上失败断定：头部坐标和本人身材的任一坐标重合即为游戏失败，isfail=true! 此时会呈现游戏失败提醒，按下空格键是从新初始化开始游戏，而不是一般的暂停开始。 10、积分，定义数据，画上画板，监听：吃到食物分数+10 11、实现代码： package com.xiao.lesson07_game;import javax.swing.*;//游戏的主启动类public class StartGame { public static void main(String[] args) { JFrame frame = new JFrame("贪吃蛇"); //失常游戏界面应在面板上 frame.add(new GamePanel()); frame.setBounds(10,10,900,720); frame.setResizable(false);//大小不可变 frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE); frame.setVisible(true);}}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.package com.xiao.lesson07_game;import javax.swing.*;import java.net.URL;//数据中心public class Data { ...

关于css:css层叠优先级和继承

层叠当申明抵触时，层叠会根据三种条件解决抵触。(1) 样式表的起源：款式是从哪里来的，包含你的款式和浏览器默认款式等。(2) 选择器优先级：哪些选择器比另一些选择器更重要。(3) 源码程序：款式在样式表里的申明程序。选择器优先级规定❑如果选择器的ID数量更多，则它会胜出（即它更明确）。❑ 如果ID数量统一，那么领有最多类的选择器胜出。❑ 如果以上两次比拟都统一，那么领有最多标签名的选择器胜出。伪类选择器（如：hover）和属性选择器（如[type="input"]）与一个类选择器的优先级雷同。通用选择器（＊）和组合器（>、+、~）对优先级没有影响。两条教训法令(1) 在选择器中不要应用ID。就算只用一个ID，也会大幅晋升优先级。当须要笼罩这个选择器时，通常找不到另一个有意义的ID，于是就会复制原来的选择器，而后加上另一个类，让它区别于想要笼罩的选择器。(2) 不要应用！important。它比ID更难笼罩，一旦用了它，想要笼罩原先的申明，就须要再加上一个！important，而且仍然要解决优先级的问题。继承如果一个元素的某个属性没有层叠值，则可能会继承某个先人元素的值。但不是所有的属性都能被继承。默认状况下，只有特定的一些属性能被继承，通常是咱们心愿被继承的那些。它们次要是跟文本相干的属性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing。还有一些其余的属性也能够被继承，比方列表属性：list-style、list-style-type、list-style-position以及list-style-image。表格的边框属性border-collapse和border-spacing也能被继承。继承属性会程序传递给后辈元素，直到它被层叠值笼罩。非凡值应用inherit关键字用inherit关键字。能够用它来笼罩另一个值，这样该元素就会继承其父元素的值。应用initial关键字当一个属性没有层叠值且不是继承属性时就会应用属性的初始值，当然咱们也能够设置initial关键字来显式应用初始值。css每个属性都有初始值，它和浏览器相干，不同浏览器可能会有差别，然而要记住它不属于浏览器默认样式表（用户代理表）简写属性很多属性都能够简写，如font,background,margin,padding等。大多数简写属性能够省略一些值，只指定咱们关注的值。然而要晓得，这样做依然会设置省略的值，即它们会被隐式地设置为初始值(不是继承值)。这会默默笼罩在其余中央定义的款式。

关于css:使用CSS-Variable来实现可配置的微前端应用样式

背景目前，社区比拟关注微前端利用款式的”封装性“，网上曾经有诸多文章介绍了微前端的款式隔离计划。然而，如果微利用只有“封装性”而没有“灵活性”，那么利用场景就会大打折扣：就如同一个不承受内部参数的函数，永远只做本人的事件，不承受调用者的管控和配置。在这种不足灵活性的微利用架构下，宿主利用很难管控整个利用的款式主题。比方以下需要很难实现：主题色从橙色升级成浅蓝色甲方要求可能在线切换主题色微利用在多个宿主中被应用。在某些宿主中，体现为橙色；在另一些宿主中，则体现为蓝色。根本原因在于，其中的微利用曾经将款式硬编码（并且实现了款式隔离），而无奈通过宿主的配置来扭转，不足信息传递与共享的渠道。过来的实现形式须要消耗极大的老本：比方，对于每个微利用，为每种主题构建出一份css，而后依据宿主以后的主题状态，用js来切换每个微利用的css。并且，任何一个波及到主题的批改，都要求你批改、从新构建、公布所有微利用，极其繁琐。计划简介本文分享一个计划，通过cssVar来实现微利用的主题管控，能够做到：微利用有本人的默认主题。开箱即用，无需任何配置就能应用。宿主有掌控权。当宿主想要进行款式管控的时候，能够准确、按需地管制每个微利用的主题变量，笼罩微利用本人的默认主题，保障整个利用是和谐一致的。在这套计划中，微利用的款式就如同一个有可选参数的函数： function (cssVar1 = defaultVar1, cssVar2 = defaultVar2) { // render style with cssVar1, cssVar2...}在封装了外部款式的同时，又对外提供了能够配置的API。更灵便地满足各种场景的需要。上面用一个简略的例子，来介绍这套计划的实现思路。开箱即用的默认主题这是微利用挂载的款式： /* 微利用css */.widget-k7na5-root { --button-bg: orange;}.widget-k7na5-btn { background-color: var(--button-bg);}其中，widget-k7na5是微利用的类名前缀，实现款式隔离。你能够用网上的各种形式来实现款式隔离（比方css module、css-in-js），它们都能够与本计划组合应用。它的DOM构造如下： <div classname="widget-k7na5-root"> <button classname="widget-k7na5-btn">button</button></div>因而，在无外界影响的状况下，这个微利用会展现默认的橙色主题。开箱即用，无需配置。它的关键点在于，在微利用根元素上，定义一份默认的款式变量；而后在微利用外部，援用款式变量来实现款式，而不是将具体值硬编码在款式中。宿主能够笼罩微利用的款式变量如果宿主想要将整个站点的主题降级为蓝色，那么微利用就不应该持续体现为橙色。因而宿主须要有笼罩微利用默认主题的能力。如何做到呢？首先，微利用要提供一个API，容许宿主配置微利用根元素的类名。 /* 宿主js */// 宿主加载微利用的时候，能够定制微利用根元素的类名function App() { return <LoadWidget id="widget-instance-list" className="theme-blue" />}微利用有如下DOM构造： <div classname="widget-k7na5-root theme-blue"> <button classname="widget-k7na5-btn">button</button></div>微利用加载的款式与后面一样，无需扭转： /* 微利用css */.widget-k7na5-root { --button-bg: orange;}.widget-k7na5-btn { background-color: var(--button-bg);}因而，微利用的款式始终只用筹备一份，无需用js来做动静切换，实现与保护都很简略。宿主的款式蕴含如下主题变量定义： /* 宿主css *//* 选择器权重高于widget本人的变量定义 */.theme-blue.theme-blue { --button-bg: blue;}实现！当初微利用中的button会展现为蓝色主题！这里的关键点在于，宿主笼罩了微利用根元素上的cssVar款式变量定义。宿主只须要用这种形式，给每个微利用都加上.theme-blue的类名，就能够让整个站点都对立变成蓝色主题。在这个主题降级过程中，各个微利用不须要做任何改变、公布。留神到，宿主始终没有侵入微利用外部的实现，维持了微利用的封装性。宿主应用的仅仅是以下API： ...

关于css:为什么StringBuilder是线程不安全的

之前咱们比照了String、StringBuilder和StringBuffer的区别，其中一项便提到StringBuilder是非线程平安的，那么是什么起因导致了StringBuilder的线程不平安呢？起因剖析如果你看了StringBuilder或StringBuffer的源代码会说，因为StringBuilder在append操作时并未应用线程同步，而StringBuffer简直大部分办法都应用了synchronized关键字进行办法级别的同步解决。下面这种说法必定是正确的，对照一下StringBuilder和StringBuffer的局部源代码也可能看进去。 StringBuilder的append办法源代码： @Overridepublic StringBuilder append(String str) { super.append(str); return this;}StringBuffer的append办法源代码： @Overridepublic synchronized StringBuffer append(String str) { toStringCache = null; super.append(str); return this;}对于下面的论断必定是没什么问题的，但并没有解释是什么起因导致了StringBuilder的线程不平安？为什么要应用synchronized来保障线程平安？如果不会呈现什么异常情况？上面咱们来逐个解说。异样示例咱们先来跑一段代码示例，看看呈现的后果是否与咱们的预期统一。 @Testpublic void test() throws InterruptedException { StringBuilder sb = new StringBuilder(); for (int i = 0; i < 10; i++) { new Thread(() -> { for (int j = 0; j < 1000; j++) { sb.append("a"); } }).start();} // 睡眠确保所有线程都执行完Thread.sleep(1000);System.out.println(sb.length());}上述业务逻辑比较简单，就是构建一个StringBuilder，而后创立10个线程，每个线程中拼接字符串“a”1000次，实践受骗线程执行实现之后，打印的后果应该是10000才对。但屡次执行下面的代码打印的后果是10000的概率反而十分小，大多数状况都要少于10000。同时，还有肯定的概率呈现上面的游戏异样信息“ Exception in thread "Thread-0" java.lang.ArrayIndexOutOfBoundsException ...

关于css:渲染树Render-Tree-是什么

转载: https://zhuanlan.zhihu.com/p/...大家都晓得DOM节点，其实DOM节点能够分为可视化节点和非可视化节点，像 div、p 等这种结构性的标签节点可被称为可视化节点，而 script、meta 等这种在页面上显示不进去的节点则被称为非可视化节点；那渲染树(render树)是什么呢？浏览器是如何渲染 UI 的？浏览器获取 HTML 文件，而后对文件进行解析，造成 DOM Tree 与此同时，进行 CSS 解析，生成 Style Rules 接着将 DOM Tree 与 Style Rules 合成为 Render Tree 元素在页面中布局，而后绘制 render 树就是依据可视化节点和 css 样式表联合诞生进去的树；留神：PS: display: none 的元素会呈现在 DOM树中，但不会呈现在 render 树中；

关于css:CSS3原生变量使用

1. 我的项目需要因为对多个老工程须要采纳对立的款式格调对立，须要约定好一个css的变量文件，各个我的项目都能够随时引入然而又无需适配本人的预处理器。此时css的原生变量就是最好的抉择了，这样无论应用less还是sass的都能够应用同一份全局css变量配置文件，并且对于之前未应用全局变量配置的less工程也无需再装置新的包来做变量解决。 2. CSS3原生变量是什么其实就是和less中的变量一样的，定义变量在应用时候援用，便于更好的治理css，感觉有朝一日css也会领有函数...只是定义变量的格局要求必须是--结尾，因为@等标记曾经被其余预处理占用了。再看兼容性，不必IE的话也没有任何问题。 CSS中原生的变量定义语法是：--*，应用语法是：var(--*)，其中*示意咱们的变量名称，这里应用英文名称，中文名称的话我试过会有兼容性问题。上面就是最简略应用办法，在全局定义一个色彩，这样在任何一个css款式中都能够援用此变量。 :root{ --main-color: #008080;}body{ backgroud-color: var(--main-color);}3. 工程实际我目前工程应用less，能够无痛引入一个css变量文件，varables.css，在其中定义须要应用的各类全局变量。 :root{ --main-color: #008080; --main-font-size: 16px;}而后在入口App.vue中引入css变量文件： <style lang="less">@import './styles/variables.css'</style>之后就能够在任何组件的less或者css处援用css变量。 4. 更多妙用至此，我的css变量需要曾经满足了，然而细看了下这个性能的确很不错，有很多其余的益处，最厉害的就是能够和js或者响应式布局联合应用，在某些状况下间接批改css变量的值实现动静款式变动。参考了张鑫旭大神。 <div id="box"> <img src="mm.jpg" style="border: 10px solid var(--color);"></div>box.style.setProperty('--color', '#cd0000');

关于css:CSS-文本超出提示效果

在 mac 文件治理中有这样一个小细节。当文件名不超过一行时，残缺显示，此时鼠标放上去无任何提醒当文件名超过一行时，呈现省略号，此时鼠标放上去提醒显示残缺文件名一个很奥妙但十分人性化的细节（ps.都能齐全看见也就不须要提醒了）。其实这类成果在 web 中，通过简略的 CSS 也能轻易实现的。上面就来看看吧~ 一、CSS 实现思路置信大家都晓得title这个属性，原生的提醒就用这个了，能够说从上古世纪就开始反对，上面是MDN上对于这个属性的介绍 title全局属性蕴含了示意征询信息文本，和它属于的元素相干。这个信息通常存在，但绝不必要，作为提示信息展现给用户用法也非常简单 <p class="txt" title="这是absolute">元素会被移出失常文档流，并不为元素预留空间，通过指定元素绝对于最近的非 static 定位先人元素的偏移，来确定元素地位。相对定位的元素能够设置外边距（margins），且不会与其余边距合并。</p> 这里 title 的体现款式还有停留时间与操作系统和浏览器无关，也不可批改当初问题来了，title 属性是事后增加的，并且无奈通过款式来管制是否显示，那么，CSS 如何做到动静解决呢？接着往下看尽管 CSS 无奈动静去扭转 title 属性，换个思路，如果有两份雷同的文本，其中一份是带有title属性的，比方 <p class="wrap"> <span class="txt">元素会被移出失常文档流，并不为元素预留</span> <span class="title" title="元素会被移出失常文档流，并不为元素预留">元素会被移出失常文档流，并不为元素预留</span></p>为了不便演示，这里给带有title属性的文本加上背景色，而后暂且称为文本A和文本B吧（以下实用），如下所示当初只须要在单行文本的时候展现文本A，多行文本的时候展现文本B，就能够实现咱们想要的性能了。那么，如何判断文本是否超出一行呢？二、多行文本判断首先，当文本超出一行时，高度必然会发生变化（），假如行高为 1.5，那么1行文本就是 1.5em，2行就是 3em，顺次类推... 然而，如果咱们限度A的最大高度为两行，那么一行和多行不就辨别开了吗（单行高度是1.5em，多行高度是3em） .txt{ display: block; max-height: 3em;/*最大高度为2行*/}当初要害的一步来了，把文本B 往上挪动2行的间隔，这里用绝对定位实现（margin也能够） .title{ position: relative; top: -3em; } 是不是有点奇怪了？其实就是往上位移了2行的间隔，这样在文本A只有一行的时候，文本B就刚好“出界”了；在文本A有多行的时候，因为高度只有2行的高度，文本B刚好“笼罩”在下面，原理示意如下这时，如果把父级的高度限制在一行，并且把文本B做单行截断 .wrap{ line-height: 1.5; height: 1.5em;}.title{position: relative;top: -3em;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}这样，在多行的时候，视线内看到的就是文本B了，成果如下最初，把父级超出暗藏，还有文本B背景设置成父级雷同的色彩就能够了~ 到这里为止，就实现了文章结尾所示的成果，残缺代码能够查看codepen auto title（记得鼠标放上去o~）为了更不便直观的演示，这里做了一个相似的列表如下 ...

关于css:前端基础知识CSS

1.盒模型宽度计算答：IE浏览器默认盒模型为border-box，其余浏览器默认盒模型为content-box。元素的理论模型宽度和高度为offsetWidth和offsetHeight。border-box的offsetWidth = width，content-box的offsetWidth = width + padding + border。2.margin纵向重合问题答：纵向排列的元素的margin-top和margin-bottom会重合，重合之后的值取其中的最大值。解决办法：设置值时，仅设置margin-top或者margin-bottom；应用padding。3.父子元素中子元素设置margin-top,父元素会往下掉对应margin-top的值的问题答：⑴.给父元素添一个大儿子，这个大儿子必须table。 <div class="d2"> <table></table>  <div class="d3"> </div> ⑵应用CSS3伪元素::before给父元素增加内容 .d2::before{ content:""; display:table;}4.margin负值问题答：在默认定位的元素中设置margin-top和margin-left负值，元素向上，向左挪动；设置margin-right负值，同级右侧元素向左挪动，本身不受影响；设置margin-bottom负值，同级下方元素向上挪动，本身不受影响。在相对定位的元素中设置top为0和margin-top为负值，元素向上挪动；设置bottom为0和margin-bottom为负值，元素向下挪动；设置left为0和margin-left为负值，元素向左挪动；设置right为0和margin-right为负值，元素向右挪动；

关于css:5-个-CSS-新功能

作者： Anna Monus译者：前端小智起源：blog.logrocket点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 在浏览器开始实现它们之前，CSS 新的性能通常须要通过长时间探讨之后，才在W3联盟的标准中定义。有许多值得一提的 CSS 新性能，然而在本文中，咱们重点介绍能够浏览器的稳定版中进行测试的五个性能： CSS Subgrid (子网格)flex gapscontent-visibility 属性contains-intrinsic-size 属性:is 和 :where 伪类浏览器对这些个性的反对始终在变动，能够通过 Can I Use 来查看反对状况。 1.CSS SubgridCSS 网格是一个灵便的布局模块，容许开发人员创立简单的布局，无需应用JavaScript或应用简单的 CSS hack。应用 CSS 网格的语法很简略，如下所示： .grid-container { display: grid;}能够应用几个特定于网格的属性来设置所需的确切布局。例如，在下面的示例中，.grid-container的子元素将是网格项，它们将依据应用grid-template-columns和grid-template-rows属性定义的规定进行布局： .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 70vh 50px;}运行后果如下：然而，如果你也想在网格布局中包含.grid-container的某些（或全副）子孙元素怎么办？这就是CSS Subgrid 发挥作用的中央。能够向网格我的项目增加以下规定，以使其可能采纳其父级的网格轨道（包含名称网格线和区域，即便它也能够定义本人的网格轨道和区域）。 .grid-item { /* 这些规定指定子网格在布局中的地位*/ grid-column: 2 / 4; /* 两列垂直 */ grid-row: 1 / 3; /* 两行程度 */ /* 这些规定属于子网格自身 */ display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;}grid-column和grid-row属性定义了网格我的项目在网格列或行中的地位。 .grid-item的子元素将造成子网格。一个网格我的项目能够逾越多个网格单元。例如，这里它散布在四个像元上（在下面的示例中grid-column和grid-row的值是任意的）。 ...

关于css:CSS-实现多行文本展开收起

多行文本开展收起是一个很常见的交互，如下图演示实现这一类布局和交互难点次要有以下几点位于多行文本右下角的“开展收起”按钮“开展”和“收起”两种状态的切换当文本不超过指定行数时，不显示“开展收起”按钮说实话，之前独自看这个布局，即便借助 JavaScript 也不是一件容易的事啊（须要计算文字宽度动静截取文本，vue-clamp就是这么做的），更别说上面的交互和判断逻辑了，不过通过我的一番推敲，其实纯 CSS 也能完满实现的，上面就一步一步来看看如何实现吧~ 一、位于右下角的“开展收起”按钮很多设计同学都喜爱这样的设计，把按钮放在右下角，和文本混合在一起，而不是独自一行，视觉上可能更加舒服好看。先看看多行文本截断吧，这个比较简单多行文本截断假如有这样一个 html 构造 <div class="text"> 浮动元素是如何定位的正如咱们后面提到的那样，当一个元素浮动之后，它会被移出失常的文档流，而后向左或者向右平移，始终平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。</div>多行文本超出省略大家应该很相熟这个了吧，次要用到用到line-clamp，要害款式如下 .text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} 右下角盘绕成果提到文本盘绕成果，个别能想到浮动 float，没错，千万不要认为浮动曾经是过来式了，具体的场景还是很有用的。比方上面放一个按钮，而后设置浮动 <div class="text"> <button class="btn">开展</button> 浮动元素是如何定位的正如咱们后面提到的那样，当一个元素浮动之后，它会被移出失常的文档流，而后向左或者向右平移，始终平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。</div>.btn { float: left; /*其余装璜款式*/} 如果设置右浮动 .btn { float: right; /*其余装璜款式*/} 这时曾经有了盘绕的成果了，只是位于右上角，如何将按钮移到右下角呢？先尝试一下margin .btn { float: right; margin-top: 50px; /*其余装璜款式*/} 能够看到，尽管按钮到了右下角，然而文本却没有盘绕按钮上方的空间，空出了一大截，无能为力了吗？尽管margin不能解决问题，然而整个文本还是受到了浮动按钮的影响，如果有多个浮动元素会怎么样呢？这里用伪元素来::before代替 .text::before{ content: ''; float: right; width: 10px; height: 50px;/*先轻易设置一个高度*/ background: red} 当初按钮到了伪元素的左侧，如何移到上面呢？很简略，革除一下浮动clear: both;就能够了 .btn { float: right; clear: both; /*其余装璜款式*/} ...

关于css:鸿蒙HarmonyOS应用开发初体验

近期（4.12 ~ 4.25）鸿蒙OS正在举办开发者日流动，趁机加入并理解一下鸿蒙OS的现状和利用开发体验。开发环境搭建下载安装IDE（以后版本 2.1 Beta3）华为为Harmony利用开发提供了配套的IDE：DevEco Studio（心田比拟排挤这种带Eco字眼儿的命名，PPT怎么吹无所谓，开发工具咱能不能求实一点儿？）下载IDE须要登录Huawei账号，我装置的是Mac版，下载后的装置过程还是比拟顺畅的 image.png 启动界面显示DevEco Studio依然是基于IntelliJ的定制IDE 下载SDK跟Android一样，IDE启动第一件事件是下载Harmony SDK image.png 每个版本的SDK中都提供了三套API用来开发Java、Js、C++代码，版本上须要保持一致。不同的华为设施对SDK版本有不同要求，比方在测试中发现，我的API4的代码无奈运行在P40上，改为API5就OK了对于SDK源码须要留神，目前无奈通过SDKManager打包下载源码，源码须要通过gitee独自下载 gitee.com/openharmony 这为代码调试带来阻碍，不晓得前期是否能够像Andoird那样与SDK一起打包下载源码创立我的项目Harmony主打多端协同，所以很器重设施多样性，可面向不同设施创立模板我的项目 Screen Shot 2021-04-18 at 10.28.09 AM.png 相比AndroidStudio，Harmony提供了更加丰盛的我的项目模板，模板中除了UI以外还提供了局部数据层代码，基本上是一个能够二次开发的APP。 Screen Shot 2021-04-18 at 5.48.55 PM.png 鸿蒙我的项目构造IDE界面试着创立了一个News Feature Ability（新闻流）的模板我的项目，胜利在IDE中关上： image.png IDE窗口与AndroidStudio相似，值得一提的Harmony左边提供的Preview窗口，能够对xml或者Ablitiy文件进行预览，有点Compose的Preview的感觉，然而只能动态预览，无奈交互工程文件image.png 工程文件和Android相似，甚至能够找到一一对应的关系 Harmony Android 阐明entry app 默认启动模块（主模块）,相当于app_moduleMyApplication XXXApplication 鸿蒙的MyApplication是AbilityPackage的子类MainAbility MainActivity 入口页。鸿蒙中将四大组件的概念对立成AbilityMainAbilityListSlice XXXFragment Slice相似Fragment，UI的根本组成单元Component View Component类相当于View，后文介绍config.json AndroidManifest.xml 鸿蒙应用json代替xml进行Manifest配置，配置我的项目差不多resources/base/... res/... 包含Layout文件在内的各种资源文件仍旧应用xmlresources/rawfile/ assets/ rawfile存储任意格局原始资源，相当于assetsbuild.gradle build.gradle 编译脚本，两者一样build/outpus/.../.hap build/outputs/.../.apk 鸿蒙的产物是hap(harmony application package)解压后外面有一个同名的.apk文件，这后续是因为鸿蒙须要同时反对apk装置的兼容计划AbilityAbility是利用所具备能力的形象，Harmony反对利用以Ability为单位进行部署。一个利用由一个或多个FA（Feature Ability）或PA（Particle Ability）组成。FA有UI界面，提供与用户交互的能力；而PA无UI界面，提供后盾运行工作的能力以及对立的数据拜访形象 FA反对Page Ability：Page Ability用于提供与用户交互的能力。一个Page能够由一个或多个AbilitySlice形成，AbilitySlice之间能够进行页面导航image.png ...

关于css:Cssimg图片根据宽高较大一方适应容器

img.a { width: 200px; height: 400px; object-fit: contain;}object-fit 个别用于 img 和 video 标签，个别能够对这些元素进行保留原始比例的剪切、缩放或者间接进行拉伸等。蓝色是容器，红色是img，可实现图中的适应。

关于css:CSS-Link与import的区别

区别1.从属关系区别@import是 CSS 提供的语法规定，只有导入样式表的作用；link是HTML提供的标签，不仅能够加载 CSS 文件，还能够定义 RSS、rel 连贯属性等。 2.加载程序区别加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载结束后被加载。 3.兼容性区别@import是 CSS2.1 才有的语法，故只可在 IE5+ 能力辨认；link标签作为 HTML 元素，不存在兼容性问题。 4.DOM可控性区别能够通过 JS 操作 DOM ，插入link标签来扭转款式；因为 DOM 办法是基于文档的，无奈应用@import的形式插入款式。

关于css:scroller-的-css编辑

/*定义滚动条高宽及背景高宽别离对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #F5F5F5; // background-color: red; } /*定义滚动条轨道内暗影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0); // border-radius: 10px; background-color:rgb(25, 69, 78); } /*定义滑块内暗影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 6px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: rgb(16, 106, 117); } 在我的项目内, 须要滚动条的中央,能够在盒子内应用 over-flow-x 或 over-flow-y, 即能看见滚动条,呈现, 联合下面的款式, 依据设计图更改出想要的滚动条

关于css:commoncss

//Basic Setting html,body{ height: 100%;width: 100%;// background-color: #F5F5F5;} body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption { padding: 0; margin: 0; list-style: none; font-style: normal; text-decoration: none; border: none; font-family: AlibabaPuHuiTi,"Microsoft Yahei",sans-serif; -webkit-tap-highlight-color:transparent; -webkit-font-smoothing: antialiased; &:focus { outline: none; } color: #F5F5F5; font-size: 14px;}//Scroll /*定义滚动条高宽及背景高宽别离对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #F5F5F5; // background-color: red; } /*定义滚动条轨道内暗影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0); // border-radius: 10px; background-color:rgb(25, 69, 78); } /*定义滑块内暗影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 6px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: rgb(16, 106, 117); } //input ...

关于css:CSS-优惠券在线生成工具

之前发过一篇文章CSS实现优惠券的技巧，次要介绍了几种绘制优惠券的办法，只管实现曾经十分完满、非常灵活，不过还是有很多同学示意 "太奇妙了，不过我还是抉择切图”为此，专门制作了这样一个在线 CSS 生成工具Coupon.io (codelabo.cn) 功能设计首先最下面是几种优惠券的类型，从图标应该能大略看出具体的款式每一种类型对应的自定义选项稍有不同，拿第一种类型举例来说 Radius示意设置凹角的大小Direction示意设置凹角的方向，可抉择程度和垂直Position示意设置凹角的绝对地位，在程度状况下，可抉择居上、居中、居下，在垂直状况下，可抉择居左、居中、居右Offset示意示意设置凹角的偏移，这个偏移是绝对于下面设置的绝对地位来定的，在居中的状况下不可设置调整实现后，点击复制按钮就能够复制在剪贴板上了（ Copied to clipboard!）~ 代码是自适应的，所以无需关注容器尺寸，兼容 Chrome 、Firefox、Safari 以及挪动端其实也不用看下面的阐明，动动手指，轻易点一下、拖一下大略就能明确什么意思了。实战演示当初就理论演示一下，比方这样一个布局首先实现根本布局 <section class="card"> <div class="card-left">350书券</div> <div class="card-right"> <p class="card-info">满30元送350书券</p> <strong class="card-time">仅剩 04:48:49</strong> </div></section>能够看出，右边是固定尺寸，左边是自适应的，这里能够采纳 flex 布局 .card{ display: flex; align-items: center; background: #fff; border-radius: 8px;}.card-left{ width: 88px; text-align: center; font-size: 24px; color: #F22424}.card-left span{ font-size: 10px;}.card-right{ padding: 16px 12px; display: flex; flex: 1; flex-direction: column;}.card-info{ margin: 0; font-size: 14px; line-height: 20px; color: rgba(33, 32, 44, 0.9);}.card-time{ font-size: 12px; line-height: 16px; font-weight: normal; color: #F22424; margin-top: 4px;}失去的成果如下 ...

关于css:响应式布局方案

首先看看几种典型的响应式布局计划：传统布局，px做单位绝对单位布局通过媒体查问实现响应式布局基于rem的flexible布局flex\grid借助javaScript进行布局要实现灵便的响应式布局，尤其是在挪动端适应不同屏幕，咱们须要抉择整体款式侵入性较小、实现简略的布局计划。个别采纳绝对单位布局，上面简略理解一下绝对布局，怎么应用，绝对于谁（1）emem是绝对于以后元素或者以后元素继承来的字体的宽度。em并不是总是绝对于父元素的字体大小，在理论中，“绝对于谁”取决于利用于什么CSS属性。如line-height属性中，em是绝对于本身的字体大小。（2）rem绝对于根节点html元素的字体大小。淘宝和网易的自适应布局计划都是以rem为外围的，然而他们都有所不同。网易计划中，包含字体font-size在内的属性，都是以rem为单位，淘宝计划中，会在body元素上加上默认12px的字体大小。（3）vwvw是绝对于视口宽度，100vw等于一个视口宽度，vh与vw同理，100vh等于一个视口高度。（4）%%的绝对对象比较复杂，在不同的属性中，其对象都不一样。如：position:absolute 中，元素的left\top等采纳%做单位，这里的%是绝对于参照物的，如left是绝对于父元素的宽，top是绝对于父元素的搞position: relative 中，元素在有本人原本的地位的同时，还能够用left\top等采纳%做单位示意绝对于本身原本地位的便宜，left绝对于本身的宽，top绝对于本身的高position: fixed 中，毫无疑问，元素的left\top等采纳%做单位，是绝对于整个视口的margin\padding 中，%是绝对于父元素的宽border-radius 中，%绝对于本身宽高background-size 中，%绝对于本身宽高font-size 中，%绝对于父元素的字体大小line-height 中，%绝对于本身字体大小（5）calc响应式布局计算单位，使得CSS有了计算的能力

关于css:whitespace-nowrap-元素获取不到真实宽度

给元素加一个display:table;就好了。代码在这：https://codepen.io/cuteyangya... <!DOCTYPE html><html><head> <title></title><style type="text/css"> .outer,outer2{ width: 100px; overflow: hidden; } .inner{ white-space: nowrap; } .inner2{ white-space: nowrap; display: table; } </style></head><body> <div class="outer"> <div class="inner">很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。</div> </div> <div class="outer"> <div class="inner2">很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。</div> </div> <script type="text/javascript"> console.log(document.querySelector('.inner').offsetWidth) // 100 console.log(document.querySelector('.inner2').offsetWidth) // 1536 </script></body></html>或者改成float: leftposition: absolutedisplay: inline-block 参考链接：https://stackoverflow.com/que...https://stackoverflow.com/que... https://stackoverflow.com/que...

关于css:一些CSS小技巧

参考及举荐：前端优良实际不齐全指南 1:右边定宽（250px）,左边宽度自适应flex： .g-app-wrapper { display: flex; min-width: 1200px;}.g-sidebar { flex-basis: 250px; margin-right: 10px;}.g-main { flex-grow: 1;}float： .g-app-wrapper{ width:100%;}.g-app-wrapper.clearfix:after { content: ""; display: block; clear: both;}.g-sidebar { width: 250px; float:left;}.g-main { margin-left: 250px;}2:页面中可适当增加不可选中内容，比方按钮等.btn{ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */}3:鼠标应用状况上来除元素focus,键盘状况下保留focusinput:focus { outline: 1px solid red;}input:focus:not(:focus-visible) { outline: none;}

关于css:Flex布局空间分配策略

Flex布局计划很适宜利用与多栏等高布局场景，本文将深入分析flex-grow、flex-shrink，flex-basis三个属性,充沛理解这些属性如何与增长和放大的flex子元素一起工作是把握Flex布局的关键所在。 flex语法 flex-grow、flex-shrink，flex-basis三个属性都是作用在flex子元素中，次要管制一个flex子元素的以下几个方面: flex-grow: 这个flex子元素失去多少残余空间?flex-shrink: 从这个flex子元素要膨胀多少空间?flex-basis: 在flex子元素未伸张和膨胀之前，它的原始大小是多少? flex-basisQ1:浏览器如何确定flex子元素的空间大小能够通过flex-basis属性确定flex子元素空间大小，取值如下(以主轴方向程度为例): flex-basis: <width> | content;where <width> = auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)flex-basis值为auto：若设置了width，flex子元素原始大小为width；否则flex子元素原始大小为max-content。 /*设置了`width`为100px，flex子元素原始大小为100px*/ .test > div:nth-child(1){ background-color: red; flex-basis: auto; width: 100px; } /*不设置width,flex子元素原始大小为max-content*/ .test > div:nth-child(1){ background-color: red; flex-basis: auto; }flex-basis值为<length> | <percentage>（XXpx,XX%)，将应用<length> | <percentage>作为flex子元素原始大小。 /*设置了flex-basis为100px，flex子元素原始大小为100px*/ .test > div:nth-child(1){ background-color: red; flex-basis: 100px; } /*设置了flex-basis为100px，同时设置width为200px,flex子元素原始大小仍为100px*/ .test > div:nth-child(1){ background-color: red; flex-basis: 100px; width:200px; }当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width , flex-basis 具备更高的优先级.flex-basis值为0，则flex子元素原始大小为min-content。Q2:关键字为min-content和max-content的含意？ ...

关于css:css使用背景灵活展示雪碧图

雪碧图是把各种小图标汇合在一起的png图片，通过background-position来展现雪碧图中不同地位的小图标，比方以下图片，在我的项目中要用到的小图标很多，如果每一个图标都作为一个png或者jpg图片，这样会减少十分多的网络申请，所以把很多小图片组合在一起是一个很不错的抉择。比方下图在用background-position来展现雪碧图之前，须要能纯熟使用background(背景)属性，这里先简略介绍一下background如何应用。 background有十分多的属性，能够设置背景色彩、背景图片，而图片又能抉择是否反复，以及摆放在哪个地位。最简略的就是应用background-color设置背景色彩了，能够设置预约义的色彩，如：pink/red/blue/black，能够设置16进制色彩，如#000000，还能够设置rgb色彩，如rbg(0,0,0)，还能够在此基础上减少透明度 rgba(0, 0, 0, .5)，须要留神的是，透明度仅作用于背景，不影响盒子的其它内容，演示如下当背景须要通过简单的图案来进行填充时，咱们能够借助于背景图片，应用background-image通过url来定义背景图片，比方设置一个小女孩的头像为背景能够发现，背景图在盒子内被平铺了，这就是背景的第三个属性，background-repeat 当不设置的时候，默认是反复（repeat），须要定义为不平铺时，设置no-repeat即可咱们发现背景图片默认会在盒子的左上角，如果想要调整背景图片的显示地位，比拟常见的状况是，应用背景图片和文字配合显示，文字和背景图片都须要居中显示，那此时就须要用到 background-position，能够应用方位名词，x轴应用top/center/bottom，y轴应用left/center/right，也能够通过百分比/像素来对背景图片进行挪动，如果只写了一个方向的挪动形式，那么另一个就默认为center。以上属性能够合并在一起写 background: 色彩图片是否重叠地位// 以上居中显示 background: #000 url(./girl.png) no-repeat center雪碧图的展现就是通过像素来对图片进行挪动，比方下面的雪碧图中，选取耳机这个小图标来进行展现，在photoshop里关上雪碧图，应用矩形工具框出须要展现的图片，此时会展现属性信息，将这些属性别离设置到css款式中下面选取的戴着耳机的小图标的宽度为65px，高度为50px，x轴的偏移量为0px，y轴的偏移量为80px，要留神的是，x轴和y轴的偏移量在定位时要取负值，因为找到小图标的地位之后，相当于要将整个雪碧图往上往左移，使得小图标的地位正好在原点处 .icon { width: 65px; height: 50px; background: url(./res/sprite.png) no-repeat 0px -80px;} 这样就能指定展现想要的图标了

关于css:Vue3-与-Vue2-的Props全局组件的异同点

作者：Matt Maribojoc译者：前端小智起源：stackabuse有幻想，有干货，微信搜寻【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。 Vue3 PropsProps 是任何古代 JS 框架的重要组成部分。在组件之间传递数据的能力是Vue我的项目的基本要素。 Vue3 中，在组件中拜访Props的形式与 Vue2 会有所不同。为什么应用 Props 很重要？首先，咱们要理解什么是 props。 props是可在组件上注册的自定义属性，可让咱们将数据从父组件传递到其子组件形式之一。因为props让咱们可能在组件之间共享数据，因而它使咱们能够将Vue我的项目分解成更多的模块化组件。 props 示例Vue3 之前，组件的props只是 this 对象的一部分，能够应用this.propName进行拜访。然而，Vue3的一大变动是setup办法的引入。 setup办法蕴含了简直所有过来被分隔成不同的选项，如data，computed，watch等。对于setup办法的须要重点留神的是，它外面没有 this。那么咱们如何不应用this来应用Vue3 props 呢？其实超级简略，setup办法实际上有两个参数: props – 蕴含组件的 props 的对象。context – 一个对象，它蕴含了在this上能找到的特定属性。context 官网文档里只阐明了有 attrs, slots, 和 emit() 。来个示例： setup (props, context) { console.log(props.propName) // access a prop to our component}做我的项目中发现，其实 context 还有一个 exposed，这个是用来裸露 setup 中办法的，就是父组件能拜访到子组件中 setup 外面的办法。这个在我的项目中有遇到过这个需要，所以我也去 Vue github 上Issues 中去找答案，发现也有人发问： ...

关于css:前端面试每日-31-第747天

明天的知识点 (2021.05.02) —— 第747天 (我也要出题)[html] 写一句“五一节日快乐”闪动的动画成果[css] 应用css制作一个龙卷风的动画成果[js] 写一个办法将对象转成用&拼接的申请参数[软技能] 有新的需要过去，你有回绝过吗？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于css:css的预处理器less的混合函数的用法

本文只说用法步骤，不说基本概念。应用步骤less文件/* 第一步，在我的项目的assets文件夹下新建这个css.less文件, 外面搁置咱们须要应用的混合less，能够有多个。比方这里咱们搁置两个less混合函数，用谁指定谁即可*/ // 第二步，应用变量指定默认值.content(@width:480px,@height:360px,@background:#bfa){ width: @width; height: @height; background-color: @background;}.content2(@width:50px,@height:50px,@background:pink){ width: @width; height: @height; background-color: @background;}vue文件<template> <div class="box"> <div class="content"></div> </div></template><script>export default { name: "lessDemo", data() { return {}; }, methods: {},};</script><style lang="less" scoped>// 第三步，引入这个less文件，并筹备应用@import "@/assets/css.less";.box { width: 100%; height: 100%; .content { // 第四步（1）不传参应用默认less的混合函数 // .content(); // 第四步（2）传参就应用咱们传过来的 // .content(600px,200px,#baf); // 第四步（3）能够依据名字指定应用对应的那个less混合函数 .content2() }}</style>less的混合函数的思维其实就是高内聚、低耦合的思维，只不过是css层面的，把公共的、相似的css提取进去，独自寄存。哪里须要就在哪里引入，若应用的中央略有不同，能够通过传参的形式进行扭转管制。和html的组件化拆分、js的模块化、函数式编程相似。灵便应用我的项目的less，能够让我的项目更容易保护

关于css:新闻爬虫及爬取结果的查询网站

@TOC 残缺代码能够拜访GitHub链接试验要求一、外围需要1、选取3-5个代表性的新闻网站（比方新浪新闻、网易新闻等，或者某个垂直畛域权威性的网站比方经济畛域的雪球财经、西方财产等，或者体育畛域的腾讯体育、虎扑体育等等）建设爬虫，针对不同网站的新闻页面进行剖析，爬取出编码、题目、作者、工夫、关键词、摘要、内容、起源等结构化信息，存储在数据库中。2、建设网站提供对爬取内容的分项全文搜寻，给出所查关键词的工夫热度剖析。二、技术要求1、必须采纳Node.JS实现网络爬虫2、必须采纳Node.JS实现查问网站后端，HTML+JS实现前端（尽量不要应用任何前后端框架）后果展现demo展现（不蕴含解说）（带有解说的前端展现已放入文件夹中）试验过程一、爬取新闻网站内容设定了每天每隔两个小时进行定时爬虫，通过了一天多的新闻数据爬取，最终取得125条中国广播网的新闻、336条西方财产的新闻和69条网易体育的新闻，具体数据如下：中国广播网：西方财富网：网易体育网： 1、总体流程依据url读取种子页面取得种子页面中的网页链接解决链接的url，筛选出所需的新闻url读取每条新闻url的页面剖析页面构造，提取页面中题目、内容、登载工夫等字段将提取的字段存储入mysql数据库中（其中因为不同新闻网站的url格局和页面构造不同，导致不同网页的筛选url格局和爬取字段内容不同，所以对于不同的页面，步骤三、五、六将会存在区别，以下将分为爬取新闻网站中类似步骤和不同步骤两局部具体讲述） 2、爬取不同新闻网站中雷同的步骤接下来以中国广播网为例，进行读取种子页面、取得种子页面中的网页链接、读取每条新闻url的页面三个步骤 1）读取种子页面==request==：第三方HTTP申请工具，向网页发动拜访，接管返回内容应用request中的GET办法，依据URL获取页面信息（GET办法的模板） // 应用request库，向网页发动拜访，接管返回内容var request = require('request')request('url', function (err, res, body) { // 页面申请胜利 if (!err && res.statusCode == 200) { console.log(body) }})在GET办法中设置参数headers，避免网站屏蔽咱们的爬虫 // 应用request库，向网页发动拜访，接管返回内容var request = require('request') // 定义request模块，进行异步fetch urlfunction MyRequest(url, callback) { // 设置GET办法中的参数，其中包含headers var options = { url: url, encoding: null, headers: headers, timeout: 10000 } request(options, callback)}// 调用request模块，传入种子页面的URL，爬取网站信息MyRequest(seedURL, function(err, res, body) { // 页面申请胜利 if (!err && res.statusCode == 200) { console.log(body) }});==iconv-lite==：纯javascript转化字符编码工具 ...

关于css:锯齿状背景图片

代码来自头条号"前端小智", 侵权删 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>锯齿状</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } section{ position: relative; width: 100%; height: 100vh; background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622294525&t=8b61f04b0c64b3f14a66f1fbfa4c7aa4") no-repeat; /*url*/ background-size: cover; display: flex; justify-content: center; align-items: center; border-left: 50px #fff solid; border-right: 50px #fff solid; } h2{ color: #fff; font-size: 6em; text-align: center; } section::before{ content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; display: block; background: linear-gradient(-45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%), linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%); /*-45 是从左下角到右上角 45是右下角到左上角通过突变通明+色彩将矩形切成三角形 heigh是整个矩形的高 baccground-size能够扭转三角的大小倡议查问一下突变本人试试*/ background-size: 30px 60px; } section::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 20px; display: block; background: linear-gradient(-45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%), linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%); background-size: 30px 60px; transform: rotate(180deg); } </style></head><body> <section> <h2>zig zag border</h2> </section></body></html>

关于css:css-媒体查询

//x,xs@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { ion-content { --padding-bottom: 130px;}} // xr @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { ion-content { --padding-bottom: 130px;}} // xs max @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) { ion-content { --padding-bottom: 130px;}}