Css

css盒子模型：content padding border margin规范盒子模型高度为content高度IE盒子模型高度为content+padding+border 设置两种模型IE：box-sizing:border-box规范：box-sizing:content-box

//第一种办法<div class="box1"> <div class="inner"></div></div><style> .box1{ position:relative; height:100vh; } .inner{ position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; height:100px; width:100px; background: red; }</style>//第二种办法<div class="box2"> <div class="inner">2</div></div><style> .box2{ position:relative; height:100vh; } .inner{ position:absolute; left:50%; top:50%; background: red; transform: translate(-50%,-50%); }</style>//第三种办法<div class="box3"> <div class="inner">3</div></div><style> .box3{ position:relative; height: 100px; background-color: antiquewhite; } .inner{ position:absolute; width:100px; height:50px; top:0; left:0; right:0; bottom: 0; margin:auto; background: rebeccapurple; }</style>//第四种办法<style><div class="box4"> <div class="inner">4</div> </div>.box4{ display: flex; align-items: center; justify-content: center;}</style>//第五种办法<div class="box5"> <div class="inner">5.1</div> <div class="inner">5.2</div></div><style>.box5{ display: table; width:100%;}.inner{ display: table-cell;}</style>

两种形式： <style>.a1{width:137px;height:138px;border:1px solid red;overflow:hidden;position:relative;}.pic{position:absolute;}</style><div class="a1"> <img src="1.jpg" width="137" height="138" class="pic" /></div>1.css实现鼠标悬浮图片放大 img { width: 100%; /* height: auto; */ transform: scale(1); transition: transform 1s ease 0s;}img:hover { transform: scale(1.05);}2.js实现鼠标悬浮图片放大 <script> $(function(){ $w = $('.pic').width(); $h = $('.pic').height(); $w2 = $w + 20; $h2 = $h + 20; $('.pic').hover(function(){ $(this).stop().animate({height:$h2,width:$w2,left:"-10px",top:"-10px"},500); },function(){ $(this).stop().animate({height:$h,width:$w,left:"0px",top:"0px"},500); }); }); </script>

目前支流的操作系统都曾经内置emoji字体，例如苹果操作系统，iOS，安卓以及Windows 10等。 然而尽管内置了moji字体，然而咱们的emoji字符并不总是会主动显示为黑白的emoji的图形，例如一个笑脸：☺ 在我当初的编辑器外面就是个字符笑脸，预览也是个字符笑脸。如果咱们心愿字符笑脸出现为黑白的图形笑脸，须要专门应用一下emoji字体，例如： article { /* windows零碎下emoji字体 */ font-family: Segoe UI Emoji;}此时就会变成这样：思考到还要兼顾其余操作系统，实现的Emoji字体设置代码为： article { font-family: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;}其中： Apple Color Emoji用在Apple的产品中，例如iPhone（iOS零碎）或者Mac Pro（macOS零碎）等。Segoe UI Emoji用在Windows零碎中，Segoe UI Symbol是在Windows 7中增加的一种新字体，它包含新的脚本/符号，如盲文、德塞莱特文、奥格姆文或符文字形。不过，它不是“符号字符集编码字体”（如MS symbol），而是一种Unicode编码字体，其符号被调配给各个Unicode码位。Segoe UI symbol还有一些其余杂项符号，如棋子，扑克牌和骰子符号（这些符号形成了Segoe国际象棋和Segoe新闻符号字体的根底）、制表符、块元素、技术符号、数学运算符、箭头、管制图片和OCR优化的符号。在Windows 8中，Segoe UI符号扩大到反对Glagolitic、Gothic，旧的斜体和Orkhon脚本。在Windows 8.1中，它取得了对Meroitic草书和科普特脚本的反对。从Windows 8更新的Segoe UI符号也已被移植到Windows 7。Noto Color Emoji是谷歌的Emoji字体，用在Android和Linux零碎中。通过我的测试发现，Noto Color Emoji这个字体间接用在font-family属性中是没有用的，应用@font-face`local("Noto Color Emoji")`一下是无效的，有些奇怪。咱们能够专门定义一个新的Emoji字体来简化咱们的代码，例如： @font-face { font-family: "color-emoji"; src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Noto Color Emoji");}article { font-family: "color-emoji";}

cross-fade()函数能够让两张图像半透明混合。 例如： <div class="cross-fade-image"></div>.cross-fade-image { width: 300px; height: 300px; background: no-repeat center / contain; background-image: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%); background-image: cross-fade(url(1.jpg), url(2.jpg), 50%); }就会有下图所示的成果。 2.jpg这张图以50%的透明度和1.jpg进行了混合渲染。 下面案例应用的是cross-fade()函数的传统语法，具体如下： <image-combination> = cross-fade( <image>, <image>, <percentage> )其中<percentage>指的是透明度，只会扭转第2个图像的透明度，最终的成果是第1个图像齐全不通明和第2个图像半透明叠加的成果。

在理论开发中，有时候心愿文字内容能够作为背景图片显示，一方面是心愿利用背景图片的劣势，例如能够平铺，另外一方面是常见的替换元素不能应用伪元素创立文字，此时只能寄心愿与背景图。 要害如何把文字变成背景图呢？ 通常CSS开发人员的做法是把文字导出来转换成图片，而后作为背景图显示，然而这样老本有些高，也不利于日后的保护。 这里给大家介绍一种实用的技术，能够让文字作为CSS背景图片。 一、SVG实质上就是一个图像SVG尽管是XML语言形成的，然而实质上就是一个图像，是能够作为图像应用的，例如： <img src="zhangxinxu.svg">此时的zhangxinxu.svg就是一个图像，同样的，也能够作为背景图显示，例如： .example { background: url(zhangxinxu.svg);}然而，这里的SVG文件都是独立的SVG文件，和把文字导出成PNG图片没有任何区别，基本没有意义嘛！ 对的，请不必急，是这样的，SVG作为一个矢量图像，和通常的位图有一点不一样，那就是SVG图像能够间接以源代码的形式内联在Web页面中。 例如上面是一段显示文本的SVG代码： <svg xmlns="http://www.w3.org/2000/svg"> <text>文字内容</text></svg>是能够间接作为background-image应用的，例如： .by-zhangxinxu { background-image: url('<svg xmlns="http://www.w3.org/2000/svg"><text>文字内容</text></svg>');}因为安全性限度，目前须要对局部字符进行本义，因而，理论的CSS代码是这样的： .exmaple { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext%3E文字内容%3C/text%3E%3C/svg%3E");}相比PNG图像的文字背景，应用SVG内联的益处在于，咱们能够轻松批改文字的内容，同时咱们能够随便设置文字的字号大小，色彩、描边成果等等。 然而，每次都手写一段SVG代码好难哦，尤其很多前端小伙伴对SVG并不是很相熟。 不要紧，思考到这种状况存在，能够应用生成SVG文字背景图的工具。 二、SVG文字背景图生成工具您能够狠狠地点击这里：文字转SVG图像在线转换工具 界面截图示意如下：最下面是配置区域，能够设置作为背景的文字内容，能够设置文字的色彩、透明度以及地位等信息。 两头是代码区，左侧是原始SVG，能够点击图标下载SVG文件到本地；右侧是本义的能够间接内联应用的SVG代码，HTML和CSS中均可内联应用。 最上面是预览区域。 如果须要其余配置项 理论开发中的需要是变幻无穷的，工具目前内置的配置项不肯定能笼罩所有的场景，此时能够这么解决，间接批改左侧文本域中的SVG代码，此时右侧的本义SVG代码会主动同步，例如，如果咱们心愿背景文字带有旋转成果，这样能够作为水印图片应用，则能够在曾经生成的SVG代码中的元素上设置45度旋转相干的代码。 一种办法是间接在<svg>元素上设置传统DOM元素的CSS style设置，例如：另外一种办法就是<text>元素上应用SVG元素主动的transform属性进行设置，然而SVG中的transform变换坐标和CSS是很不一样的，间接<text transform="rotate(-45)">是不会有预期的旋转成果的，因为默认SVG的变换中心点是左上角，因而，设置transform="rotate(-45)"会让文字不可见。 <text>元素也能围绕中心点变换有2个办法，一种是应用translate()函数先偏移、而后再旋转，而后在偏移还原，这种办法啰嗦了一点，另外一种办法就是应用SVG中rotate()函数的可选参数，也就是第2个参数，就是能够指定旋转的中心点坐标，这个个性SVG独有，Canvas中是没有的。 代码演示如下截图所示：其中，能够看到专门设置了SVG元素的width宽和height高，因为如果不设置，依照目前的CSS background-size的尺寸渲染标准，SVG的尺寸会采纳容器的尺寸，rotate()函数的第2个参数就须要设置为容器元素的宽高的一半能力让文字居中旋转。 三、文字背景图利用案例这里抛砖引玉，举几个应用文字作为背景图的例子。 1. 水印例如为避免截图，会给页面，或者聊天软件背景等减少文字水印。相干CSS代码如下所示： .target { background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.5' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3Ezhangxinxu.com%3C/text%3E%3C/svg%3E");}截图成果如下所示：

一、简介Loading简直是每个利用都会用到的一个组件。很多组件库都会提供相应的Loading组件，然而有的时候咱们可能须要自定义Loading成果，把握Loading组件制作的基础知识将变得十分必要。Loading次要就是一个旋转的圆环，而旋转局部则比较简单，间接通过CSS动画即可实现，所以要害局部就是失去Loading的圆环。 二、通过border-radius绘制圆环咱们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，而后给这个元素设置一个border-radius值为50%。须要留神的是，border-radius: 50%是让整个正方形元素都变成圆形，即包含边框和内容区。所以咱们能够通过管制元素边框和内容区的大小，将元素的内容区域作为内圆，将元素的边框区域作为外圆，从而绘制出一个圆环。 <div class="loading-css"></div>.loading-css { width: 50px; /*先将loading区域变成正方形*/ height: 50px; display: inline-block; /*将loading区域变成行内元素，避免旋转的时候，100%宽度都在旋转*/ border: 3px solid #f3f3f3; /*设置周围边框大小，并将色彩设置为浅白色*/ border-top: 3px solid red; /*将上边框色彩设置为红色高亮，以便旋转的时候可能看到旋转的成果*/ border-radius: 50%; /*将边框和内容区域都变成圆形*/}此时成果如下:圆环成果曾经进去了，接下来让圆环旋转起来即可，如: @keyframes loading-360 { 0% { transform: rotate(0deg); /*动画起始的时候旋转了0度*/ } 100% { transform: rotate(360deg); /*动画完结的时候旋转了360度*/ }}.loading-css { /*在之前的CSS中加上动画成果即可*/ animation: loading-360 0.8s infinite linear; /*给圆环增加旋转360度的动画，并且是有限次*/} 二、通过svg来绘制圆环SVG 意为可缩放矢量图形（Scalable Vector Graphics），其应用 XML 格局定义图像，<circle> 标签可用来创立一个圆，同时里面必须嵌套一个<svg>标签。 <svg viewBox="0 0 50 50" class="loading-svg"> <circle cx="25" cy="25" r="20" fill="none" class="path"></circle></svg>.loading-svg { width: 50px; /*设置svg显示区域大小*/ height: 50px;}<svg>标签的width和height设置的是svg图形可显示区域大小。而viewBox示意的是截取图形的区域，因为矢量图的绘制区域能够是无限大的，具体绘制在哪里依据具体的设置而定，比方下面的circle就绘制在圆心坐标为(25,25)，半径为20的圆形区域中，而viewBox设置为0 0 50 50，示意截图区域为左上角坐标为(0, 0)，右下角坐标为(50,50)的矩形区域内，即会截取这个区域内的矢量图，而后将截取的矢量图放到svg的可显示区域内，同时会依据svg可显示区域的大小等比例进行缩放，然而截取的图片必须在svg可显示区域内残缺显示。如果，当初讲svg的大小设置为60px，如: ...

css 学习笔记二 应用绝对单位置信每一个程序员都心愿本人写的程序足够强壮，可能应答多种状况的变动，而不是一有什么变动就跑去批改本人的程序(立刻放弃写代码)，置信绝对单位能够解决你的局部问题 em介绍em是最常见的绝对单位，1em就代表着以后元素的字号，2em代表着以后元素字号的两倍。 常见的em用法最常见的用法是利用em设置font-size, padding, border-radius等，这样依据字号大小的不同，css能做出绝对应的响应. rem 介绍如果你想利用em来定义多重嵌套的元素的字号时，可能会产生意想不到的状况，例如： <ul> <li>Top level <ul> <li>Second level <ul> <li>Third level <ul> <li>Fourth level <ul> <li>Fifth level</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li></ul> 这是因为em总是利用父元素的字号计算本人的字号大小，为了解决这个问题，就能够应用rem，rem会计算根元素的的大小来决定本人的大小，而不是父元素。 应用vmin设置正方形元素的大小vmin是指的窗口较小的一条边的大小，除此之外，还有 1vh 窗口高度的 1/1001vw 窗口高度的 1/1001vmax 宽，高中较大的一方的1/1001vmin 宽，高中较小的一方的1/100如果你想定义一个正方形，只须要 .square { width: 90vmin; height: 90vmax; background: red;}应用calc( )定义字号:root { font-size: calc(0.5em + 1vw)}calc能够计算括号中的数值， 如此一来，用0.5em来保障最小的字号。随着浏览器窗口的大小变动， vw能够保障字号随着窗口大小的变动而随之变动。 一个无关相对值的内容css中的自定义属性例如： :root { --main-font: sans-seif, Arial;}p { font-family:var(--main-font, Helvetica);}如例中所示，定义变量前要用--，应用时要用var()包围住变量名,并且var中能够承受第二个参数，若第一个参数变量未定义，则应用第二个参数。 ...

1. 挪动端1) meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0">布局视口(viewport)：css作用的视口，默认值宽为980px可视视口：设施宽度所对应的范畴完满视口: 布局视口 = 可视视口 initial-scale (初始缩放比例) 1 不缩放minimum-scale：容许用户缩放到的最小比例（默认设置为1.0）maximum-scale：容许用户缩放到的最大比例（默认设置为1.0）user-scalable：用户是否能够手动缩放（默认设置为no，因为咱们不心愿用户放大放大页面）2）挪动端参数1）物理像素(ps量取出来的值) 2px 2）逻辑像素(css设置的值) 1px 3）dpr(逻辑像素比) = 物理像素 / 逻辑像素 320设计图 dpr = 1;640/750设计图 dpr = 2;750设计图 dpr = 3； 留神：因为挪动端iphone4及之后，呈现了超视网膜高清屏(Retia屏)，导致通过ps量取出来的值和真正要设置的值不统一，就产生dpr 3）挪动端单位em: 1em默认是16px; 字体大小设置em,参考的是父元素的字体大小,如果是其余属性设置em单位的话,是参考的以后元素的字体大小rem: 1rem默认值16px; 所有设置rem单位的属性,都是参考根元素html的字体大小vw(视口宽)/vh(视口的高) 100vw = 100%视口宽4）挪动端筹备工作 （重点）（1）设置meta的viewport标签 （2）依据设计图大小，判断dpr的值，依据ps量取的值和dpr的值，计算出对应的css像素，能够间接在ps中依据dpr批改图像大小,图像-》图像大小（设置宽即可，高会等比例缩放） （3）依据设计图的宽,计算出根元素的字体大小 比方：设计图大小为750px; 设施宽度为375px; 则 100vw = 375px; 1rem = 100px; 推导出：1rem = 26.667vw， vw会追随设施宽去变动,设置到根元素身上,应用到rem单位的元素就会追随根元素去变动 html{font-size:26.667vw;}（4）重置body的字体大小 body{font-size:16px} （5）失常量取设计图,失常设置像素单位,整体写完之后,选中css代码 , alt+z转换成rem单位

1. 盒子暗影box-shadow: 程度偏移 垂直偏移 暗影含糊大小 暗影大小 暗影色彩 暗影地位(inset:外面);程度及垂直 向右和向下为负数,反之为正数2. 文本暗影text-shadow: 程度偏移 垂直偏移 暗影含糊大小 暗影色彩值的特点和盒子暗影一样3. 背景图大小background-size:宽度 高度;属性值： 数值+px百分比关键字 cover 图片一直被拉伸,直到充斥整个盒子,可能会呈现背景图被裁掉contain 图片一直被拉伸,直到碰到盒子某个边缘之后就进行拉伸,可能会呈现留白4. 背景图裁切background-clip border-box 从边框之外裁切padding-box 从padding区域开始裁切content-box 从内容区域开始裁切不须要去反复5. 背景图原点background-origin padding-box 从padding区域开始显示border-box 从边框区域开始显示content-box 从内容区开始显示6. 背景图的固定background-attachment: scoll(滚动)/fixed(固定) 背景图固定,内容滚动7. 圆角border-radius 个别设置50%,实现圆形一个值: 周围两个值: 对角三个值: 左上 对角 右下四个值: 顺时针8. 响应式布局依据不必的设施分辨率 显示不同的款式 长处: 适配性好,高级毛病: 工作量大,繁琐,实用于小网站媒体查问： @media 设施类型 and (媒体个性){选择器{ 款式 } } 设施类型: all(全副)/screen(显示器) 媒体个性: max-width/min-width 写法留神: 1) and两边必须有空格2) 媒体个性前面不要加分号3) 多个媒体个性之间用and连贯

原文链接：https://blog.logrocket.com/5-... 注：该翻译文章是本人的了解，并没有齐全逐字翻译 通常 CSS3 的新个性在通过长时间的探讨之后，才会被退出到 W3C 标准当中，之后各浏览器才开始逐步去进行反对。有很多新的 CSS 个性值得咱们探讨，然而本文咱们会聚焦5个新个性，这些个性曾经至多有一个浏览器开始反对了: CSS subgridFlexbox gapscontent-visibilitycontain-intrinsic-size:is 和 :where 伪类浏览器对这些新个性的反对总是在变动，所以能够随时在相似 Can I Use，MDN CSS Reference，Chrome Platform Status查看以后个性反对的水平。 1. CSS subgridCSS Grid 是一个弹性布局模块。它可能让开发者创立简单的布局而不必依赖于 Javascript 或者一些 CSS 小技巧。 在 HTML 元素上应用 grid 布局，能够增加如下的css规定。 .grid-container { display: grid;}有一系列的属性能够用于设置咱们想要的成果。 例如，下面的例子当中，.grid-container 的子元素将会被视作 grid 中的项(grid items)。它们将会依照你所定义的 grid-template-columns 和 grid-tmeplate-rows 属性来出现。 .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: }下面的代码定义了如下的布局成果： 然而，如果你想要在 grid 布局中蕴含 .grid-container grid布局的嵌套子孙元素呢？这就是 CSS subgrid 所要解决的问题。 ...

//第一种办法：浮动(块级格局独占一行)<div class="wrapper_float"> <div class="float_left">1</div> <div class="float_center">2</div> <div class="float_right">3</div></div><style> .wrapper_float{ height:100px; width:100%; } .wrapper_float .float_left{ width:300px; float:left; background: red; height:100%; } .wrapper_float .float_center{ width:300px; float:right; background: blue; height:100%; } .wrapper_float .float_right{ background: beige; height:100%; } </style>//第二种办法：相对定位<div class="wrapper_absolute"> <div class="absolute_left">1</div> <div class="absolute_center">2</div> <div class="absolute_right">3</div></div><style> .wrapper_absolute{ height:100px; position:relative; } .absolute_left{ position:absolute; left:0; width:300px; } .absolute_right{ position:absolute; right:0; width:300px; } .absolute_center{ position:absolute; left:300px; right:300px; }</style>//第三种办法：flex布局<div class="wrapper_flex"> <div class="flex_left">1</div> <div class="flex_center">2</div> <div class="flex_right">3</div></div><style> .wrapper_flex{ display:flex; height:100px; } .flex_left, .flex_right{ width:300px } .flex_center{ flex:1 } </style>//第四种办法：table<div class="wrapper_table"> <div class="table_left">1</div> <div class="table_center">2</div> <div class="table_right">3</div></div><style> .wrapper_table{ display: table; height:100px; width:100%; } .table_left,.table_right{ width:300px; display: table-cell; background-color: aliceblue; } .table_center{ display: table-cell; }</style>//第五种办法：grid<div class="wrapper_grid"> <div class="grid_left">1</div> <div class="grid_center">2</div> <div class="grid_right">3</div></div><style> .wrapper_grid{ display:grid; width:100%; grid-template-rows:100px; grid-template-columns:300px auto 300px; }</style>优缺点：浮动：兼容性好，易脱离文本流相对定位：快捷，有效性差flex布局：解决上述两个问题table表格布局：兼容性好，单个模块高度增高的时候，其余模块的高度也随着增高网格布局：缩小代码量 高度不固定时，flex布局，table布局仍然能够实现

1. 弹性盒子元素的属性1）order: 排序。值越大， 越靠后，能够为正数。 2) flex-grow: 调配残余空间。默认状况下值为0。元素有多宽，就占多大空间，当给某一个元素设置 flex-grow: 1，该元素会占满整个残余空间，如果每个人都设置了，代表整个空间的调配的总份数。 3）flex-basis: 子元素的宽 4）flex-shrink: 压缩。默认值1示意压缩； 0不压缩。 利用：弹性盒设置自行超出父元素显示滚动条。 给每个子项设置 flex-shirnk:0; 不压缩，父元素设置 overflow:auto;溢出显示滚动条。 5）复合写法： flex: flex-grow(0) flex-shrink(1) flex-basis(auto);flex:1; 相似于flex-grow:1;占满整个残余空间。2. 层级选择器1) 后辈选择器 选择器 选择器{} 2) 子代选择器 选择器>选择器 只能抉择孩子，不能抉择到孙子及之后，然而要留神继承 3) 相邻的兄弟 选择器+选择器 只能抉择到前面的相邻的一个兄弟 4) 相邻的兄弟们 选择器~选择器 只能抉择到前面的兄弟们 3. 属性选择器能够抉择自定义的属性1) 标签名[属性名] 依据属性名抉择 2) 标签名[属性名="属性值"] 属性名和属性值要匹配 3) 标签名[属性名^="值"] 以该值结尾 4) 标签名[属性名$="值"] 以该值结尾 5) 标签名[属性名*="值"] 蕴含该值 4. 结构性伪类child系列父元素 子元素:first-child{} 父元素中的第一个孩子 这个孩子必须是老大父元素 子元素:last-child{} 父元素中的最初一个孩子 这个孩子必须是老小父元素 子元素:nth-child(n) 父元素中的第几个孩子,第几个必须和孩子的第几个位数对上 n是自然数,也能够是odd 奇数 even 偶数 也能够是表达式 比方4n 4的倍数type系列父元素 子元素:first-of-type{} 很多该子元素中的第一个父元素 子元素:last-of-type{} 很多该子元素中的最初一个父元素 子元素:nth-of-type(n) 很多该子元素中的第几个, n是自然数,能够是odd奇数even 偶数 ,也能够表达式 比方2n5. 指标伪类须要联合锚点应用指标元素:target{} 设置跳转到该板块之后呈现的款式6. 动静伪类:enabled 表单可编辑状态:disabled 表单不可编辑的状态:checked 表单选中的状态:focus 表单获取焦点的状态::selection 元素选中的高亮状态,个别状况只改背景色和字体色彩

层叠与优先级当多个选择器抉择了html中的同一个元素时，并且定义了抵触的属性，不去写代码验证的状况下，应该怎么确定哪个选择器定义的属性会失效？ 例如 ： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1 { color: black; } #title { color: orange; } .nav { color: red; } </style></head><body> <h1 id="title" class="nav"> Hello World </h1></body></html>如果你去验证的话，会发现是ID选择器失效了！ 当咱们正文掉ID选择器时，会发现class选择器失效了。从这个例子中能够看到，选择器失效的优先级应该是 ID选择器 > class选择器 > 标签选择器层叠就是如果，多个属性叠加，有些属性可能被笼罩了，哪些属性在下层，就是靠优先级来判断的。 此外，还有一些优先级的准则 例如，!important申明具备更高的优先级，然而如果两个抵触的申明都被申明为 `important呢？能够利用申明的程序来判断，越晚申明的属性，优先级越高！ 教训上来讲 1. 越具体的申明优先级越高 ：例如，我用多个ID选择器确定了一个元素就比单个ID选择器确定一个元素要更加具体 2. 越前面的申明优先级越高 3. 行内款式的申明高于内部引入的款式 4. 尽量不要用ID选择器和!important 继承如果一个元素没有层叠值，则可能会继承某个先人元素的值，例如 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { font-family: serif; } </style></head><body> <h1 id="title" class="nav"> Hello World </h1></body></html>而后你关上开发者工具，应该会看到这个字段 ...

1. 规范盒模型box-sizing: content-box总宽度 = 内容区width + 填充区左右(padding) + 边框左右(border) +margin 2. 怪异盒模型触发怪异模型的两种办法： box-sizing: border-box总宽度=width+margin的左右缺失文档申明，在ie678的时候触发为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度别离减去边框和内边距能力失去内容的宽度和高度。 3. h5新增标签特点： 语义化1）header 示意页面中一个内容区块或整个页面的题目2）footer 示意页面中一个内容区块或整个页面的脚注3）nav 示意页面中导航链接局部4）article 文章5） aside 侧边栏6）section 板块，示意页面中的一个区块7）main 示意页面中的次要的内容(ie不兼容)8) figure和figcaption 相似于dl9) mark 高亮标记, 是内联元素4. 多媒体1）音频 audio属性值： src：音频门路controls：音频控件autoplay：自动播放 谷歌和火狐禁止了 ie能够muted： 静音 火狐静音后能够自动播放loop： 循环2）视频 video属性值 src：音频门路controls：音频控件autoplay： 自动播放 谷歌和火狐禁止了 ie能够muted： 静音 静音后能够自动播放loop：循环poster: 视频未播放之前显示的图片5. 新增表单type类型1）表单新增type类型，点击提交按钮的时候会提醒 email： 邮件格局url： 地址range：滑块number： 数字 min最小 max最大color：色块time：工夫 时和分datetime-local 工夫 年月日时分2）表单新增属性 required：必填placeholder：提示信息autocomplete：显示历史信息。默认是on关上，敞开是off。 必须联合name属性应用。autofocus：主动聚焦。 只能有一个pattern：正则表达式 限度输出的格局multiple 上传文件时，可抉择多个6. 弹性盒1) 父元素造成弹性盒 display:flex主轴方向 flex-direction row 从左向右row-reverse 从右向左column 从上向下column-reverse 从下向上主轴排列形式 justify-content ...

1. 动画属性(1) 定义动画@keyframes 动画名{关键帧 from{} to{} } @keyframes 动画名{ 关键帧划分的是工夫，个别百分比增量要雷同 0%-100% 比方实现整个动画须要5s 0%{} 0s 10%{} 0.5s 20%{} 1s 50%{} 2.5s 100%{} 5s } (2) 应用动画animation-name: 动画名animation-duration: 动画执行的工夫 s/msanimation-delay: 动画延迟时间 s/msanimation-timing-function: linear(匀速)/ease-in(减速)/ease-out(加速)/ease-in-out(慢-快-慢)animation-iteration-count: 数字/infinite(有限次)animation-direction: reverse(关键帧反向播放)/alternate(关键帧交替播放 0%-100%-0%)animation-fill-mode:动画进行的关键帧，应用该属性的话，不能够设置有限循环，不然停不下来。forwards(最初一个关键帧)/backwards(第一个关键帧)animation-play-state: running(运行)/paused(进行)复合写法： animation: 动画名 动画执行的工夫 动画延迟时间 动画成果 执行次数2. 3d位移z轴位移 transform：translateZ(数值+px) 不要应用百分比xyz位移 transform: translate3d(x轴位移,y轴的位移,z轴的位移)3. 3d旋转x轴旋转 transform:rotateX(数值+deg)y轴旋转 transform:rotateY(数值+deg)xyz都旋转 transform:rotate3d(a,b,c,d) a b c的取值为0或者1。0代表不旋转，1代表旋转。d是旋转度数也能够应用tranform: rotateX() rotateY() rotateZ();造成3d舞台：在父元素身上增加，看到成果之后， 须要加个旋转（旋转x,y,因为有些成果在初始的立体看不到） transform-style:flat(立体)/ preserve-3d(空间)背部暗藏： 设置了通明后，然而不想看到前面的内容，给该元素 backface-visibility: hidden;perspective: 数值+px； 值越小越近， 看到的越大4. 3d缩放z轴transform:sacleZ()xyz缩放 transform:scale3d(x缩放值,y缩放值,z缩放值)

(一)尺寸单位当设计稿page的宽度未知时，假如page内的一个元素的宽度为100px，那么元素的宽度height应该为： height rpx=750 rpx*100 px/page px然而页面中这样的写法必定有问题，因而应用calc属性 /* calc属性 css 和 wxss 都反对 留神：1、750和rpx两头无空格 2、运算符的两边无空格*/view{ width:calc(750rpx*100/375);}(二)款式导入微信小程序反对内部款式的导入，但有两个留神点：1、通过@import来导入2、门路只能写相对路径(三)选择器小程序中不反对通配符*，因而初始化时能够写上所有标签然而例如：.class,#id,element,element,element,nth-child(n),::after,::before等能够应用 (四)小程序中应用less原生的小程序并不反对less，但能够通过以下形式实现：1、关上编辑器vs code2、装置插件 easy less3、在vs code的设置中进行如下配置： "less.compile": { "outExt": ".wxss" }4、在编写款式的中央，新建less文件，而后失常编辑 (五)view和text标签view标签代替了原来的div标签，但又多了一些新的属性 text标签的特点：1、文本标签2、只能嵌套text3、长按文字能够复制(只有该标签具备此性能) selectable="{{true}}"4、能够对空格、回车进行编码 decode="{{true}}"(六)image图片标签1、src 指定要加载的图片的门路 图片存在默认宽度和高度 320*2402、mode 决定图片和图片标签的宽高做适配 scaleToFill 默认值 不放弃纵横比缩放图片，使图片宽高被拉伸至填满 image元素 aspectFit 放弃宽高比 确保图片的长边 显示进去，轮播图罕用3、小程序中反对用lazy-load进行懒加载 当图片呈现在视口高低高度三屏的时候，本人开始加载图片详情参考微信小程序官网文档 (七)swiper轮播组件1、轮播图外层容器swiper2、每一个轮播项swiper-item3、swiper标签存在默认款式，width:100%;height:150px4、swiper高度无奈实现由内容撑开swiper罕用属性 (八)navigator导航标签1、url是要跳转的页面门路，能够相对路径，能够绝对路径 <navigator url="/pages/index/index">轮播图</navigator>2、target能够抉择跳转以后小程序或其余小程序，属性只有self和minProgram,默认self3、open-type:跳转形式navigator标签罕用属性 (九)rich-text富文本标签相当于vue中的v-html性能rich-text罕用属性

在css中，对于图片的大小，咱们应用width和height两个属性来定义。语法：width:像素值；height:像素值；示例代码：<html> <head> <title>图片大小</title><style type="text/css"> img { width:100px;height:80px;}</style></head> <body> <img src="images/1.jpg" alt=""></body></html>图片的理论大小与设置大小不是正相干的，也就是图片在Photoshop中的宽度高度，在设定网页宽度高度时，能够参考，然而不必严格遵守，咱们设置图片的宽度和高度，指标是为了让图片在网页中呈现出想要的成果。图片边框border：语法：border-width:像素值；border-style:属性值；border-color:色彩值；这个边框和元素边框是一样的，比拟罕用的是简洁写法。示例代码：<html> <head> <title>图片边框</title><style type="text/css"> img { width:100px; height:80px; border-width:1px; border-style:solid; border-color:red; }</style></head> <body> <img src="images/1.jpg" alt=""></body></html>如果咱们在图片的边框上加hover的成果，<html> <head> <title>加hover</title><style type="text/css"> img { width:100px; height:80px; border:1px solid blue; } img:hover { border:1px solid green;}</style></head> <body> <img src="images/1.jpg" alt=""></body></html>图片程度对齐：在文本中须要程度对齐时，应用text-align属性，在图片的程度对齐，也能够应用text-align，一样的成果。语法：text-align:属性值；text-align属性取值属性值阐明left左对齐，默认值center居中对齐right右对齐 示例代码：<html> <head> <title>图片程度对齐</title><style type="text/css"> div { width:600px; height:100px; border: 1px solid black; margin-bottom:20px; } img { width:80px;height:50px;} #d1 { text-align:right;} #d2 { text-align:center;} #d3 { text-align:left;}</style></head> <body> <div id="d1"><img src="images/1.jpg" alt=""></div><div id="d2"><img src="images/1.jpg" alt=""></div><div id="d3"><img src="images/1.jpg" alt=""></div></body></html>以上代码就是图片的程度对齐形式，很多初学者会有疑难，认为定义图片的程度对齐，必定是针对img标签来设置的，其实呢，是须要对图片所在的父元素进行程度对齐的。图片垂直对齐：如果我想要图片可能垂直对齐，应该怎么做呢？在css中，咱们能够应用vertical-align属性来定义垂直对齐形式的。语法：vertical-align:属性值；vertical-align属性取值属性值阐明top顶部对齐middle中部对齐baseline基线对齐bottom底部对齐示例代码：<html> <head> <title>垂直对齐形式</title><style type="text/css"> #dv1 { width:600px; height:600px; border:1px solid black; text-align:center; } img { width:80px;height:80px;} #img1 { vertical-align:top;} #img2 { vertical-align:middle;} #img3 { vertical-align:bottom;} #img4 { vertical-align:baseline;}</style></head> <body> ...

1. 引入内部样式表的办法（1）步骤： 1）在head标签外面，生成一个style的双标签 2）在style的标签外面写入@import url(css门路) （2）@import 和link的区别 1）@import只能引入css; link能够引入多种文件 2）加载程序不同：@import先加载构造，后加载css。link是同时加载构造和css 3) @import 只反对ie5以上的浏览器；link反对所有浏览器 <style> @import url(css/内部样式表.css); </style>2. 元素类型1）置换元素 浏览器依据标签及属性显示不同成果。 如依据img外面的不同的src显示不同的图片。依据input里不同的type显示不同的输入框为什么img和input等内联元素能够设置宽高2）非置换元素：除了置换元素之外的元素 3. 内联块元素的问题内联块因为回车导致的空文本，使得内联块之间会有间距 <body> <input type="text"> <input type="text"></body>解决办法： 写在同一行给元素增加浮动给内联块元素的父亲增加一个 font-size:0;4. 暗藏元素visibility: hidden 暗藏元素visibility: hidden和 display: none的区别： display: none 暗藏之后不占位visibility: hidden; 暗藏之后占位5. 定位的补充(1) 应用相对定位实现重叠成果利用场景：图文重叠步骤： 1）给挪动的元素设置相对定位2）给父元素设置参考物3）通过挪动形式挪动元素到相应的地位rgba a指透明度， 取值范畴0-1， 0齐全通明， 1不通明，值越小越通明(2) 定位实现元素程度垂直居中步骤： 1）给挪动的元素加相对定位 position: absolute;2）有参考物的话，给先人元素设置定位属性3）给挪动的元素设置 办法1： top: 50%; margin-top: - 该元素高度的一半;left: 50%; margin-left: - 该元素宽度的一半;办法2： left: 0;right: 0;bottom: 0;top: 0;margin: auto;(3) 定位实现二级菜单1）一级菜单失常写 ...

块格式化上下文（Block Formatting Context）是一个独立的渲染区域，简略来说就是一个独立的盒子，并且这个盒子里的布局不受内部影响，也不会影响到内部元素。BFC规定BFC的规定？BFC外部的盒子Box会在垂直方向，一个接一个地搁置。Box垂直方向的间隔由margin决定。属于同一个BFC的两个相邻Box的垂直margin会产生重叠。每个元素的margin box的右边， 与蕴含块border box的右边相接触(对于从左往右的格式化，否则相同)。即便存在浮动也是如此。BFC的区域不会与浮动盒子float box重叠。BFC就是页面上的一个隔离的独立容器，容器外面的子元素不会影响到里面的元素。反之也如此。计算BFC的高度时，浮动元素也参加计算。如何创立BFC1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、overflow的值不是visible BFC的作用1.利用BFC防止margin重叠。例如： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>避免margin重叠</title></head><style> *{ margin: 0; padding: 0; } p { color: #f55; background: yellow; width: 200px; line-height: 100px; text-align:center; margin: 30px; }</style><body> <p>看看我的 margin是多少</p> <p>看看我的 margin是多少</p></body></html>页面生成的成果就是这样的：依据第二条，属于同一个BFC的两个相邻的Box会产生margin重叠，所以咱们能够设置，两个不同的BFC，也就是咱们能够让把第二个p用div包起来，而后激活它使其成为一个BFC <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>避免margin重叠</title></head><style> *{ margin: 0; padding: 0; } p { color: #f55; background: yellow; width: 200px; line-height: 100px; text-align:center; margin: 30px; } div{ overflow: hidden; }</style><body> <p>看看我的 margin是多少</p> <div> <p>看看我的 margin是多少</p> </div></body></html>2.自适应两栏布局每个盒子的margin box的右边，与蕴含块border box的右边相接触(对于从左往右的格式化，否则相同)。即便存在浮动也是如此例如： ...

1. 文本溢出 overflow（1）概念文本溢出 overflow 是指文字超出宽度的显示状况（2）属性值1）visible默认值，溢出失常显示2）hidden溢出暗藏/裁切3）scroll溢出则显示滚动条4）auto没溢出则失常显示；溢出则显示滚动条2. 文本溢出显示 text-overflowtext-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的款式属性定义单行文本溢出显示省略号 的步骤：（四步） 1）容器设置宽高 2）设置文本不换行 white-space: nowrap;3) 设置文本溢出暗藏 overflow: hidden;4) 设置文本溢出显示省略号 text-overflow: ellipsis;3. 宽高自适应(1) 宽高自适应的应用场景网页布局中常常要定义元素的宽和高。但很多时候咱们心愿元素的大小可能依据窗口或子元素主动调整，这就是pc自适应(2) 自适应的长处元素自适应在网页布局中十分重要，它可能使网页显示更灵便，能够适应在不同设施、不同窗口和不同分辨率下显示(3) 宽度自适应 (重点)块级元素不设置宽度，则追随父元素的宽设置宽度为百分比，则参考父元素的宽 留神：当设置百分比为100%时，如果还设置了padding/border/margin, 浏览器底部会呈现滚动条。max-width 宽度能够自适应，设置盒子的最大宽度min-width 宽度能够自适应，设置盒子的最小宽度浮动对宽度自适应的影响 1）当块元素不设置宽，设置浮动后（脱离文档流，找不到父元素了），则宽度自适应生效，宽度右内容撑开。示例1： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { height: 100px; background-color: pink; } </style></head><body> <div>块级元素，不设置宽度。则该块元素的宽随其父元素的宽</div></body></html>后果： 宽度自适应，随其父元素的宽 示例2： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { height: 100px; background-color: pink; float: left; } </style></head><body> <div>块级元素，不设置宽度，设置浮动。则该块元素脱离文档流而找不到父元素，宽度自适应生效。宽度由内容撑开。</div></body></html>后果： ...

互联网IT行业的发展前景，曾经被公认的向好。很多大学生在毕业后都想退出到IT行业中。机会永远是留给有筹备的人的，那么明天小乐就通知敌人们一下，想进入IT行业，肯定要做好这些筹备！ 1、要有很强的自控力，学会兼顾传统学业和编程学习的工夫安顿 这个要求有点难，大部分人的自控力都比拟差的，但能够缓缓训练本人。做好一个打算，而后严格执行。把本人当作是一个成年人，一个为生存打拼的男人对待。 记住：你不是学生，你是小孩儿。 2、不论你学习如何差，也要器重英语和数学 对编程感兴趣的在校生，不会全都是尖子生，但不论你是什么生，差等生，垫底生，留级生也好。你要分明一点，在编程畛域中，英语和数学绝对重要，因而你要珍惜在学校的工夫，花多点工夫来学习英语和数学，然而也不要因为英语和数学而胆怯学习编程。 3、学会灵便调节你的工夫 编程学习，是一个十分耗费工夫和精力的过程，一旦你出神了，必将会导致你在编程学习上占用很多工夫，所以要灵便的调节你的工夫。 4、请珍惜你当初不必养家糊口的日子 作为当初不必养家糊口的你，劣势就是工夫够多。回家不必本人煮饭菜，没有上下班概念，也不必放心支出问题。这样的你，没事就偷着乐吧。多把工夫花在编程上， 学习是千里之行;始于足下的过程，同时也要时刻放弃你趣味度，兴奋度，以及指标的保持度。等你出社会了，你将会领有比同年龄更多的更扎实的挣钱技能。 咱们在来说下零根底和有根底的小伙伴，都要留神什么。 零根底的小伙伴 之前基本上是没有接触过IT行业的知识点，那必定是有要求的，比方年龄：如果你是零根底的小伙伴，须要学习的货色必定也会比拟多，个别要求都是在18-30岁左右的，也就是咱们最具有活力的年龄，而且理解能力也是处于一个比拟靠谱的年龄，能够将IT培训机构所讲的常识齐全了解；在通过IT培训之后，个别找到的工作必定不可能是间接就到高层，还须要工夫将咱们的技术打磨。 另一个方面，好的IT培训机构个别对学历也是有要求的，个别是大专学历及以上的，毕竟学历是一个敲门砖，没有这个好的公司可能还没看你技术就给你排除在外。其它方面例如学习的能力、对IT行业的趣味等等。 有根底的小伙伴 这种小伙伴个别分为两种状况，一种是刚刚毕业的小伙伴，原本的业余就是IT行业的，然而因为各种起因，在学校的时候没有将常识齐全吃透或者是有些常识没有齐全记牢，想要成零碎的在将常识进行学习，这种小伙伴的根底是有的，就看看他愿不愿意花工夫去学习。 另一种同学可能自身就在这个行业，想要转行或者是自我晋升。IT培训机构也是同样提供教学服务的，依据不同的状况，也有不同的班型绝对应，例如根底班、阶段高级班等等。 所以说如果咱们年龄合乎，学历也是满足的话，只有大家想要去学习IT常识都是能够的。 如果本人不确定是否感兴趣，齐全是冲着高薪待业的话，也能够尝试下！比方去培训机构试学一段时间，感触感触，再好好考虑一下的，毕竟之后的日子每天都要和这个打交道的。 对于还在迷茫的同学们来说，要如何抓住这些新的时机，让本人能确定好指标不落伍？那就是做一个对的抉择。

1. 表单的补充(1) 单选框<input type='radio'> 单选内容type为radio, 代表单选框当name属性值一样时， 能够互斥绑定信息 lable标签， 点击字的时候, 也能抉择到圈<label for="woman"> for属性指向id名 <input type="radio" name="sex" id="woman">女 </label>默认抉择： checked (相当于 checked='checked')禁止抉择： disabled(2) 多选框<input type='checkbox'> 多选内容 type为checkbox, 代表多选框(3) 下拉列表<select> <option>下拉内容</option></select>默认抉择： selected(4) 多行文本域<textarea></textarea>禁止缩放 textarea{ resize:none;}(5) 文件上传<input type='file'>(6) 表单字段集<fieldset> <legend>字段集题目</legend> 表单元素</fieldset>2. 表格的补充(1) 表格题目 caption(2) 表格列题目 th(3) 表格行分组 thead tbody tfoot<thead></thead> 表头 个别只有一组<tbody></tbody> 表体 能够有多组<tfoot></tfoot> 表尾 个别只有一组(4) 加在table身上的属性border-spacing: 数值+px 边框之间的间距border-collapse: collapse 合并边框线，变成细线边框table-layout: auto(主动)/fixed(固定) 设置固定后，不让表格依据内容去撑大宽度，所以有利于浏览器放慢运行速度

textarea{ resize:none} textarea去除右下角默认款式

一、简介网页布局对于一个前端开发者而言至关重要，把握好布局常识有助于咱们更好的实现CSS界面的设计和开发。布局是无限空间内的元素排列形式，因为页面设计横向不滚动，纵向有限延长，所以大多数时候探讨的布局都是对程度方向进行宰割。罕用的布局形式为单列布局、两列布局、三列布局、粘连布局等。 二、单列布局单列表布局是将一个元素作为布局容器，通常设置一个较小的(最大)宽度来保障不同像素宽度屏幕下显示统一。 <body> <div class="header">头部</div> <div class="content">单列布局</div> <div class="footer">底部</div></body><style>body{ margin: 0; padding: 0;}.header { margin: 0 auto; max-width: 720px; height: 100px; background: red;}.content { margin: 0 auto; /*宽度足够的时候元素居中显示*/ max-width: 720px; /*设置一个最大宽度，保障各种屏幕显示统一*/ height: 400px; background: green;}.footer { margin: 0 auto; max-width: 720px; height: 100px; background: blue;}</style>单列布局的劣势在于基本上能够适配超过布局容器宽度的各种显示屏幕，能够保障在超过设置的最大宽度的屏幕上浏览网站看到的成果是统一的。而它的毛病就是屏幕空间的节约，在屏幕空间足够大的状况下，页面两侧显示了大量空白，如果屏幕特地大，两侧空白的区域可能会比页面内容更宽。 二、两列布局两列布局就是将页面宰割成左右宽度不等的两列，宽度较小的列设置为固定宽度，残余宽度由另一列撑满。这种布局实用于内容上具备显著主次关系的网页。① float + margin形式通过让左侧浮动，而后给右侧设置一个margin-left，值为左侧元素的宽度即可。 <div class="container"> <div class="left"> 左侧定宽 </div> <div class="right"> 右侧自适应 </div></div><style> .container { min-width: 500px; height: 100px; } .left { background: red; width: 200px; height: 100px; float: left; /*让左侧元素浮动*/ } .right { background: green; width: 100%; height: 100px; margin-left: 200px; /*给右侧元素增加一个margin-left，为左侧区域留出空间*/ }</style>② 相对定位首先给父容器设置一个绝对定位，而后给左侧元素设置一个相对定位，给右侧也设置一个相对定位，left值为左侧元素的宽度，right值为0，即可。 ...

翻译 | 《JavaScript Everywhere》第22章 挪动应用程序shell 写在最后面大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。 为了进步大家的浏览体验，对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央，或者你有任何意见或者倡议，能够在评论区留言，或者加我的微信：code_maomao，欢送互相沟通交流学习。 (ﾟ∀ﾟ)..:*☆哎哟不错哦 第22章 挪动应用程序shell我妻子是一位摄影师，这意味着她的大部分生存都是基于在矩形框中构图。在摄影中，有很多变量-物体，光线，角度，然而图像的比例保持一致。在这种限度下，不堪设想的事件产生了，塑造了咱们对待和记住四周世界的形式。挪动利用程序开发提供了相似的机会。在玲珑的矩形屏幕的束缚下，咱们能够构建具备沉迷式用户体验的功能强大的应用程序。 在本章中，咱们将开始为应用程序构建shell。为此，咱们首先将认真钻研React Native组件的一些要害构建块。而后，咱们将通过React Native的内置款式反对以及咱们抉择的CSS-in-JS库款式组件，钻研如何将款式利用于咱们的应用程序。在介绍了如何利用款式之后，咱们将看看如何将路由集成到咱们的应用程序中。最初，咱们将摸索如何应用图标轻松加强咱们的利用程序界面。 React Native构建块让咱们先来看一下React Native应用程序的根本构建块。你可能曾经猜到React Native应用程序蕴含用JSX编写的React组件。然而，如果没有HTML页面的DOM（文档对象模块），这些组件到底有什么用？咱们可用于从src/Main.js的“ Hello World”组件开始。当初，我曾经删除了款式： import React from 'react';import { Text, View } from 'react-native';const Main = () => {return (<View><Text>Hello world!</Text></View>);};export default Main;在此标记中，有两个驰名的JSX标签 ：和 . 。如果你有网页开发教训，就晓得标签与标签的用处大致相同。它是咱们应用程序内容的容器。靠它们本人并不能做很多事，然而它们蕴含了咱们应用程序的所有内容，能够互相嵌套，并能够利用款式。咱们的每个组件都将蕴含在中。 在React Native中，你能够在Web任何中央应用标签。毫无疑问，该标签用于蕴含咱们利用中的任何文本。 然而，与网页不同，该标签用于所有文本。咱们还能够通过应用JSX元素来增加图片到咱们的利用中。 让咱们更新咱们的 src/Main.js 文件以蕴含图像。要做到这一点，咱们从React Native导入了Image组件并应用一个有src属性的标记（见图22-1）： import React from 'react';import { Text, View, Image } from 'react-native';const Main = () => {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Hello world!</Text><Image source={require('../assets/images/hello-world.jpg')} /></View>);};export default Main;后面的代码在视图中渲染了一些文本和图像。你可能会留神到，咱们的标记和JSX标记是传递的属性，这些属性使咱们可能管制特定的行为（在这种状况下，是视图的款式和图像的起源）。 ...

1. CSS属性的继承（1）继承特点： 给父元素身上加了css属性后，他的后辈也失效 （2）能够继承的属性 字体属性：font-size(大小) font-weight(加粗) font-family(字体类型) font-style(字体歪斜)文本类：color(文本色彩) text-align(程度对齐形式) text-indent(缩进) line-height(行高) word-spacing(词间距) letter-spacing(字符间距) text-transform(大小写转换) 列表类：list-style-type(列表符号的类型) list-style-postion(列表地位) list-style-image(列表图片) list-style （3）不可继承的属性 text-decoration(文本润饰) float(浮动) border(边框) padding(填充) margin(边距) width(宽度) height(高度)2. 元素类型（1）块级元素特点： 能够设置宽高独占一行margin和padding都失效个别作为容器包裹他人,p个别不包裹块级元素，包含他本人比方： div p h1-h6 ul li ol dl dt dd form table（2）内联元素特点： 不能够设置宽高,由内容决定在同一行显示padding的左右失效，高低显示不正确。margin左右失效，高低不失效比方：a b i em strong span img sup sub（3）内联块元素特点： 能够设置宽高在同一行显示margin和padding都失效3. 元素类型的转换属性： display属性值： block 块级元素 inline 内联 inline-block 内联块 none 暗藏

CSS款式:CSS全称为“层叠样式表 (Cascading Style Sheets)”，它次要是用于定义HTML内容在浏览器内的显示款式，如文字大小、色彩、字体加粗等。 p{ font-size:12px; color:red; font-weight:bold;}应用CSS款式的一个益处是通过定义某个款式，能够让不同网页地位的文字有着对立的字体、字号或者色彩等。 CSS代码语法:CSS 款式由选择符和申明组成，而申明又由属性和值组成 选择符:{属性:值}又称选择器，指明网页中要利用款式规定的元素; p{ color:red;}申明：在英文大括号“｛｝”中的的就是申明，属性和值之间用英文冒号“：”分隔。当有多条申明时，两头能够英文分号“;”分隔; p{ font-size:12px; color:red;}CSS 款式分类：1）内联式css款式： 把css代码间接写在现有的HTML标签中；例： <p style="color:red">文字是红色。</p>css款式代码要写在style=""双引号中，如果有多条css款式代码设置能够写在一起，两头用分号隔开。例： <p style="color:red;font-size:12px">文字是红色。</p>2）嵌入式css款式：就是能够把css款式代码写在<style type="text/css"></style>标签之间。 如上面代码实现把<span>标签中的文字设置为红色： <style type="text/css">span{ color:red;}</style>嵌入式css款式必须写在<style></style>之间，并且个别状况下嵌入式css款式写在<head></head>之间。 3）内部式css款式： 内部式css款式(也可称为外联式)就是把css代码写一个独自的内部文件中，这个css款式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）应用<link>标签将css款式文件链接到HTML文件内; 代码： <link href="base.css" rel="stylesheet" type="text/css" />留神： css款式文件名称以有意义的英文字母命名，如 main.css。rel="stylesheet" type="text/css" 是固定写法不可批改。<link>标签地位个别写在<head>标签之内。CSS选择器：每一条css款式定义由两局部组成; 模式： 选择器{ 款式;}在{}之前的局部就是“选择器”，“选择器”指明了{}中的“款式”的作用对象，也就是“款式”作用于网页中的哪些元素; 1）标签选择器： 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。代码： p{ font-size:12px; line-height:1.6em;}下面的css款式代码的作用：为p标签设置12px字号，行间距设置1.6em的款式。 2）类选择器： 类选择器在css款式编码中是最罕用到的。 语法： .类选器名称{css款式代码;}留神： 英文圆点结尾其中类选器名称能够任意起名,但不要起中文应用办法：第一步：应用适合的标签把要润饰的内容标记起来： <span>人见人爱，花见花开</span>第二步：应用class="类选择器名称"为标签设置一个类： <span class="stress">人见人爱，花见花开</span>第三步：设置类选器css款式： .stress{ color:red;}3）ID选择器 ID选择器都相似于类选择符，但也有一些重要的区别： 为标签设置id="ID名称"，而不是class="类名称"。ID选择符的后面是井号（#）号，而不是英文圆点（.）。类和ID选择器的区别： 相同点：能够利用于任何元素 不同点： ID选择器只能在文档中应用一次。在一个HTML文档中，ID选择器只能应用一次，而且仅一次。而类选择器能够应用屡次。能够应用类选择器词列表办法为一个元素同时设置多个款式。咱们能够为一个元素同时设多个款式，但只能够用类选择器的办法实现，ID选择器是不能够的（不能应用 ID 词列表）。.stress{ color:red;}.bigsize{ font-size:25px;}<p>明天<span class="stress bigsize">天气</span>真好啊！</p>4）子选择器： 子选择器，即大于符号(>),用于抉择指定标签元素的子元素： .food>li{ border:1px solid red;}这行代码会使class名为food下的子元素li退出红色实线边框。 5）蕴含(后辈)选择器: 蕴含选择器，即退出空格,用于抉择指定标签元素下的后辈元素： .first span{ color:red;}蕴含(后辈)选择器与子选择器的区别: ...

介绍CSS 从 1994 年 10 月首次被提出，到目前为止曾经20余年，然而 CSS 早已产生了翻天覆地的变动，2020的CSS 又是如何的呢？ 咱们当初能够应用 CSS Grid 轻松制作动静或响应式的布局，以更少的代码来进行自适应布局。 CSS-in-JS 无需依赖全局样式表，咱们能够将款式与组件写在一起去构建主题化的设计零碎。 最重要的是，Tailwind CSS 忽然呈现，通过它的实用至上的 CSS 的类名应用，迫使咱们重新考虑传统的语义类名称的设计。 本次考察一共统计了 10k+ 的人，由 Sacha Greif 设计、写作以及编码，Raphaël Benitte进行数据分析和数据可视化。还有包含Chen Hui-Jing, Philip Jägenstedt, Adam Argyke, Ahmad Shadeed, Robert Flack, Dominic Nguyen, Fantasai, and Kilian Valkhof. 等人的致力。 本次次要能够从6个方向（新个性、单位和选择器、CSS技术、CSS工具库、CSS应用环境和学习CSS渠道）进行了深度的报告CSS的应用学习状况，从本次考察，能够让你理解目前最风行的布局，最前沿的个性以及前沿的技术库等等~ （本文会举例集体感觉最值得讲的进行形容~，当然我感觉整个报告都十分的迷人，都十分值得看，然而因为篇幅起因，我对某些局部进行了删减，强烈建议去看完整版！！！ https://2020.stateofcss.com/zh-Hans/） 先通过 5 张图来看看本次考察对象的样本形成。 采样人员散布 人员的薪资散布 工作年限 工作岗位 CSS 熟练程度 新个性近年来，CSS呈现了大量的新个性，然而社区须要工夫来排汇新个性，所以CSS的一些新个性的采用率速度有点慢。 以下图表显示了按类别分组的所有个性的不同采用率。 外圈的大小对应于理解某项性能的用户总数，而内圈则代表理论应用过该性能的用户。 布局 兴许 Grid 和 Flexbox 对你来说是最相熟的，从上表也能看进去大部分的人应用了 flex，因为通过它，只有写很少的代码就能写出多样化的代码。然而 Grid 在往年的考察中能够说回升的趋势很快。 ...

在我的项目开发的过程中，基于无限的工夫内保质保量的实现开发工作无疑是一场挑战。在这场挑战中咱们岂但要疾速解决本人的问题，还须要与他人协同单干，以防止两者之间的抵触。 针对于大型项目的开发，CSS 如何组织和治理能力让咱们用更少的工夫写出更弱小的性能。这篇文章来表述一些我对 CSS 组织和治理的了解。当然，对于 ToC(面向集体) 利用，出于细节和动画的把控。再加上这种网页生命周期较短，往往复用性较差，然而针对于 ToB(面向企业) 利用，对立格调往往会博得客户的青眼。行列间距，主题款式等都应该联合对立，而不是每个页面不同设计。基于此，咱们须要组织与治理咱们的 css,而不仅仅只是是靠 css in js 来为每个组件独自设计。 BEM 命名约定BEM 是一种相当出名的命名约定，BEM 的意思就是块（block）、元素（element）、修饰符（modifier）,是由 Yandex 团队提出的一种前端命名方法论。这种奇妙的命名办法让你的CSS类对其余开发者来说更加通明而且更有意义。BEM 命名约定更加严格，而且蕴含更多的信息，它用于一个团队开发一个耗时的大我的项目。 如 咱们在书写搭档卡片组件 代码格调如下: .partner-card {}.partner-card__name {}.partner-card__content {}.partner-card__content {}.partner-card__content--md {}根据上述代码，咱们很容易看出以后开发的用意，同时也很难遇到代码反复的问题。当然，咱们能够利用 Less、Sass、Stylus 这些 css 处理器辅助开发，这里不再赘述。 计算迷信中最难的两件事之一就是命名，日常开发中如果没有一些约定，就很容易产生命名抵触，BEM 恰好解决了这一痛点,咱们只须要外层款式名是一个有意义且独立惟一，就无需思考太多。 与 BEM 绝对应的还有 OOCSS SMACSS。而这两种不是间接可见的命名约定，而是提供了一系列的指标规定。这里不再具体论述，大家如果想要理解，能够去看一看 值得参考的css实践：OOCSS、SMACSS与BEM。当然了，真正的组织与治理必然也离不开这些指标规定。 同时，应用 BEM 而不是 CSS 后辈选择器进行我的项目也会有肯定性能劣势(能够忽略不计)，这是因为浏览器解析 css 时是逆向解析，之前对 css 解析有肯定误区，因为书写是从返回后，所以认为解析也肯定是从返回后，然而大部分状况下，css 解析都是从后往前。 如果规定正向解析，例如「div div p em」，咱们首先就要查看以后元素到 html 的整条门路，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次能力确定匹配与否，效率很低。逆向匹配则不同，如果以后的 DOM 元素是 div，而不是 selector 最初的 em 元素，那只有一步就能排除。只有在匹配时，才会一直向上找父节点进行验证与过滤。无需回溯，效率较高。。 ...

1. 盒模型1）内容区 content特点： 内容区的大小由width和height决定内容区是文字，图片等的显示区域2）内填充 padding/padding-方向值的设置： padding: 10px; 一个值， 设置周围padding: 10px 20px; 两个值， 高低 左右 padding: 10px 20px 30px; 三个值， 上 左右 下 padding: 10px 20px 30px 40px; 四个值， 顺时针 上右下左 特点：（四点） padding会撑大盒子。如果不想撑大，要在原来的宽高根底上减去对应方向的padding值背景图和背景色能够在padding区域显示padding 不能够设置正数padding能够用来调整内容和盒子边缘之间的间隔 示例 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 100px; height: 100px; margin: auto; background-color: pink; padding: 20px; } </style></head><body> <div class='box'>盒子</div></body></html>后果： 3) 外边距 border/border-方向4) 外边距 margin/margin-方向margin 值的设置和padding值设置一样 margin/margin-方向单方向margin-方向（left/right/top/bottom）: 数值+px特点：（四点） margin不会撑大盒子，然而会影响他人margin区域不会显示背景图/背景色margin能够设置正数， 正数会让两个盒子重叠在一起margin能够用来调整盒子和盒子之间的间隔margin 的两个bug ...

CSS 属性1. 通用选择器(1) 作用： 能够抉择到页面中的所有标签 (2) 语法： *{} (3) 举例： 示例1： <body> <h2>通用选择器</h2></body> 阐明： 应用浏览器控制台，右键查看选项，能够分明地看到标签自带的款式（比方：h2标签自带margin） 示例2： <head> <meta charset="UTF-8"> <title>Document</title> <style> {/ margin:外边距 / margin: 0; / padding：内填充 / padding: 0; } </style></head><body> <h2>通用选择器</h2> <span>span标签</span> <div>div标签</div> <ul> <li>哈哈</li> <li>哈哈</li> </ul></body> 后果： 阐明：如后果所示, h2自带的margin曾经被去掉，无序列表自带的点也被去掉了。 论断： 个别应用 *{margin:0;padding:0} 去掉所有标签自带的款式div 和span标签 div标签：划分网页的板块span标签：用来选中文本设置款式留神：div和span都是不带任何自带款式，是最洁净的标签。 区别：div独占一行， span在同一行显示 2. 后辈选择器（1）语法： 选择器 选择器{} （2）特点： 选择器与选择器之间用空格隔开选择器和选择器之间必须是后辈（标签的嵌套）关系选择器的类型不固定（标签/id/类选择器等等都能够）选择器之间是能够跨代的（只有是先人和后辈的关系即可）选择器的个数个别也不限度（3）举例：为前两个字设置红色字体 <head> <meta charset="UTF-8"> <title>Document</title> <style> .box span { color: red; } </style></head><body> <ul class='box'> <li> <span>哈哈</span>哈 </li> </ul></body> ...

url()url函数示意对某个资源的援用，可传入链接以及绝对地址，如 background-image: url('./背景图片函数.png');background-image: url('https://s3.ax1x.com/2020/11/29/DcV9V1.png');image()image性能相似于url，然而与url不同的是，image提供了一种优雅降级的能力。比方 background-image: image('a.webP','a.png','a.jpg');这段代码意思就是，如果浏览器反对webP格局图片就利用a.webP,如果不反对，就再测试a.png，直到适配到以后浏览器。遗憾的是，这个函数目前还处于草案阶段。 所以这个函数其余的性能临时先不关注，有趣味的同学，可自行去 MDN 理解更多相干的信息,也可理解 最新进展 image-set()image-set能够保障图片在不同分辨率设施上的适配，能依据不同的设施类型展现不同的图片，看上面的例子 background-image: -webkit-image-set(url(./bg1x.png) 1x , url(./bg2x.png) 2x);这段例子意思就是在1倍屏上显示bg1x.png，在2倍屏上显示 bg2x.png 。兼容性上，目前最新支流的浏览器都已反对，对于不反对的设施能够在应用这个函数前应用background：url()来进行兼容。 cross-fade()cross-fade用于在两张叠加的背景图片上施加透明度。用法如下 background-image: -webkit-cross-fade(url('./bg1x.png'),url('./bg2x.png'),70%); 后面两个参数为图片的资源地位，前面一个须要传入百分比，示意透明度，这个透明度是绝对于最初那张图片的，比方，当百分比为0%时,此时应该只显示第一张图片 当百分比为100%时，只显示第二张图片。 这个属性,在firefox中齐全不兼容，在chrome和safari中兼容性要好太多 element()element函数能够将网站上的某局部元素当做图片应用，实用于图片的属性同时也实用于利用element的对象，应用办法 element(id)必须传入的是id，看上面的例子，用element实现了一种相似双向绑定的性能成果 <div class="element-wrapper"> <span id="ele" contenteditable>hello world</span> </div> <div id="element-test"></div>//style .element-wrapper{ width: 200px; height: 200px; } #element-test { width: 200px; height: 200px; background: -moz-element(#ele); background-size: contain; background-repeat: no-repeat; }效果图 这个属性还能做到更多乏味的成果，更多乏味的成果可去这里查看，在兼容性上，遗憾的是目前只有firefox反对这个属性 最初我最近在总结css函数相干的货色，系列的纲要 这篇是系列文章的第三篇，目前已产出 CSS函数那些事（一）比拟函数CSS 函数那些事（二）你不晓得的 attr()我的项目中会蕴含文章中的测试代码，都做好了相应的分类，欢送各位继续关注，有帮忙话能够点个赞哦！我的项目地址戳这里 ...

1. 设置icon图标应用字体形式，接着须要icon图标css类名前缀统一。 [class^="icon-"],[class*=" icon-"] {}ios 应用字体生效，在iconfont.css，将 font-family: 'font_family'; 批改为 @font-face { font-family: 'iconfont';} 2. 变形动画 transform 执行动画时，心愿有3d成果须要加上 perspective: 1800px;(Tip:  定义 3D 元素距视图的间隔，以像素计。该属性容许您扭转 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会取得透视成果，而不是元素自身。) transform-style: preserve-3d;(Tip:  3D 成果开启) //父级.a{ perspective: 1800px;}//子级.a .b{ transform-style: preserve-3d; transition: transform 1s; transform: rotateY(-180deg);} 继续更新ing。。。

咱们先来说一下限度条件 能够应用 css、html、js元素为一个 100*100 的红色矩形，外面蕴含一个 50*50 彩色矩形只有在页面上看不到就算暗藏测试地址：https://www.lilnong.top/static/html/hidden-dom.html 实现暗藏页面元素挪动到屏幕里面，眼不见心不烦 marginleft + positiontransform:translate应用个性 displayvisibilityopacityoverflow:hidden + 0宽高transform:scalehidden 属性移出 DOM 树，年轻人不讲武德 removeChild实现代码.demo1{ margin: -9999px 9999px 9999px -9999px;}.demo2{ display: none;}.demo3{ visibility: hidden;}.demo4{ opacity: 0;}.demo5{ width: 0;height: 0;border: none;outline: none;overflow: hidden;}.demo6{ left: -9999px;top: -9999px;position: absolute;}.demo7{ left: -9999px;top: -9999px;position: relative;}.demo8{ left: -9999px;top: -9999px;position: fixed;}.demo9{ transform: translate(-9999px, -9999px);}.demo10{ transform: scale(0,0)}留作业作业就留给你们啦，反正我这次不写（下次是什么时候我也不晓得）。 如何暗藏页面元素？（扩大题）能够应用 css、html、js （扩大）vue、react、angular 的办法也能够元素为一个 100*100 的红色矩形，外面蕴含一个 50*50 彩色矩形只有在页面上看不到就算暗藏（扩大）是否占据地位？如果占据地位的话，是否能够监听到事件？比如说 click 。 如果能够监听到事件，那么如何让他无奈监听事件。如果不能够监听到事件，那么如何让他监听到事件？如果无奈实现请阐明理由（扩大）是否存在于 DOM 树中？ 比如说是否能够通过 children 取得？比如说是否能够通过 querySelector 取得？是否能够在开发者工具中看到？（扩大）是否触发回流（Layout）和重绘（Painting）？

作者： Felix Gerschau译者：前端小智起源：Felix Gerschau最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... service worker 是什么Service Worker 是 Chrome 团队提出和力推的一个 WEB API，用于给 web 利用提供高级的可继续的后盾解决能力。该 WEB API 规范起草于 2013 年，于 2014 年纳入 W3C WEB 规范草案，以后还在草案阶段。 Service Worker 最次要的特点是：在页面中注册并装置胜利后，运行于浏览器后盾，不受页面刷新的影响，能够监听和截拦作用域范畴内所有页面的 HTTP 申请。 相似一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker 那么它能够拦挡以后网站所有的申请，进行判断（须要编写相应的判断程序），如果须要向服务器发动申请的就转给服务器，如果能够间接应用缓存的就间接返回缓存不再转给服务器。从而大大提高浏览体验。 Service Worker 能够启用以前原生应用程序专有的一组性能。 Service Worker 的初稿已于2014年公布，当初所有支流浏览器都反对它们。 就像曾经指出的定义一样，Service Worker 是网络代理。 这意味着它们能够管制页面中的所有网络申请，并且能够对其进行编程，应用缓存的进行响应。 Service Worker 特点网站必须应用 HTTPS。除了应用本地开发环境调试时(如域名应用 localhost)运行于浏览器后盾，能够管制关上的作用域范畴下所有的页面申请独自的作用域范畴，独自的运行环境和执行线程不能操作页面 DOM。但能够通过事件机制来解决如何注册 Service Worker注册 Service Worker 不须要太多代码，只须要一个用于Service Worker 代码的 JS 文件，个别取名为 service-worker.js ...

inherit指定一个属性应从父元素继承它的值 div{ color:#fff000}div>a{ color:inherit}background-clipbackground-clip: border-box|padding-box|content-box border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。padding-box 背景绘制在衬距方框内（剪切成衬距方框）。content-box 背景绘制在内容方框内（剪切成内容方框）。解决半透明边框，被背景图片所笼罩 div{ width:100px; height:100px; background:rgb(255,240,0,1); border:10px solid rgb(255,240,0,0.5); background-clip: padding-box; }box-shadowbox-shadow: h-shadow v-shadow blur spread color inset _h-shadow_: 必须的。程度暗影的地位。容许负值_v-shadow_: 必须的。垂直暗影的地位。容许负值_blur_: 可选。含糊间隔_spread_: 可选。暗影的大小_color_: 可选。暗影的色彩。inset: 可选。从外层的暗影（开始时）扭转暗影内侧暗影多重暗影 div{ width:100px; height:100px; border-radius: 50%; box-shadow: 10px 10px 0px 10px red, 20px 20px 0px 20px blue, 30px 30px 0px 30px yellow, 40px 40px 0px 40px green; margin:auto; margin-top:200px; }outlineoutline: outline-color outline-style outline-width绘制于元素四周的一条线，位于边框边缘的外围，可起到突出元素的作用 _outline-color_: 规定边框的色彩_outline-style_: 规定边框的款式_outline-width_: 规定边框的宽度双边框，通常里面是实线边框，外面为点边框 ...

让文本不可复制 -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;复制代码增加版权信息思路： 1、答案区域监听copy事件，并阻止这个事件的默认行为。2、获取选中的内容（window.getSelection()）加上版权信息，而后设置到剪切板（clipboarddata.setData()）。复制代码程度垂直居中 1、定位 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-本身一半宽度; margin-top: -本身一半高度; 2、table-cell布局 父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto; 3、定位 + transform ; 实用于 子盒子 宽高不定时； （这里是自己罕用办法） position: relative / absolute; /*top和left偏移各为50%*/ top: 50%; left: 50%; /*translate(-50%,-50%) 偏移本身的宽和高的-50%*/ transform: translate(-50%, -50%); 留神这里启动了3D硬件加速哦 会减少耗电量的 （至于何是3D减速 请看浏览器过程与线程篇） 4、flex 布局 父级： /*flex 布局*/ display: flex; /*实现垂直居中*/ align-items: center; /*实现程度居中*/ justify-content: center; 再加一种程度方向上居中 ：margin-left : 50% ; transform: translateX(-50%);

将禁用的按钮灰掉的成果 .disabled { pointer-events: none; cursor: default; opacity: 0.6;}选中的按钮 .disabled.is-active { pointer-events: auto; cursor: pointer; opacity: 1;}css禁止点击事件

就在不久前的几天，继《个税 app 中莫名的稿费让我开始狐疑“信赖”这词是否有必要存在》这篇推文之后，公众号终于更新了一篇《终于实现了这个 PDF 念头了……》，次要是跟大家分享了我拖了很久的无关 flex 的一个 PDF 文档。 这两篇文章其实并没有太多货色，《个税 app 中莫名的稿费让我开始狐疑“信赖”这词是否有必要存在》是在当初被那位朱xx和智博尚书公司折腾了之后吐槽的，一个专职写书的，一个专职出版书的，????…… 哦了，多余的话也就不说了，爱护好个人信息很要害，不要轻易置信任何一个人，尤其是商人。回正题，这本无关 flex 布局相干的 PDF 是收费的，好与不好，看了就晓得，页数不多，截图+代码，也就 100 多页。 不骗流量，不骗公众号关注数，须要的间接下吧。 链接: https://pan.baidu.com/s/1ifBvUm22X7OCAq5jwE1hSA提取码: qne5来张截图：

CSS比拟函数有三个： max()min()clamp()min与maxCSS min,max函数作用相似于js函数中的min,max，用于取多个属性中的最小值或者最大值，属性之间用逗号分隔。例子如下 width: min(100px,200px,300px); //取值100px height: max(100px,200px,300px); //取值300px 如图，宽度取了最小值100px,高度取了最大值300px. clampclamp函数须要传入3个参数，一个最小值，一个默认值，一个最大值，用于解决边界值，当默认值大于最大值时，取最大值，小于最小值时，取最小值，介于最小与最大之间时，取默认值。 应用办法clamp(MIN,DEFAULT,MAX)clamp就相当于max(MIN,min(DEFAULT,MAX)) 案例 font-size: clamp(20px,10vw,40px);剖析下，当10vw小于20px，也就是页面宽度小于等于200px时，字体最小为20px,当10vw大于40px,也就是页面宽度大于等于400px时，字体最大为40px.处于200px-400px之间的，则依照 width/10的计算公式进行计算，上面验证一下 小于200px 大于400px 200px到400px之间 兼容性 能够看出这3个函数都是最近不久才进去的，所以兼容性不太好，国产浏览器全挂，支流浏览器最新的版本根本可能反对，这是个坏事，因为这三个数学在响应式开发中的作用还是很显著的，将来或者这3个函数在响应式开发中的比重会缓缓的失去晋升。 罕用的应用场景上面会列举几个罕用的应用场景 侧边栏响应对于侧边栏布局，须要侧边栏固定宽度，做响应式时能够思考超过最大宽度时通过vw来固定侧边栏的占比 aside { background: #ccc; flex-basis: max(30vw, 150px); } main { background: #09acdd; flex-grow: 1; } 字体响应通过clamp限度最大最小值，而后两头的默认值依据视窗扭转 font-size: clamp(20px, 10vw, 40px); 突变平滑过渡突变指定突变的梯度线，依照个别操作会呈现过渡不够平滑的状况，在挪动端会有一条显著的过渡线 background: linear-gradient(135deg, #2c3e50, #2c3e50, #3498db); 利用min批改一下，过渡会更加平滑一点 background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db); 动静容器宽度在理论使用中，比方如果咱们想在桌面端限定宽度，在挪动端显示100%，须要这样写 .container{ width: 1440px; max-width: 100%; }当初只须要 ...

提名举荐！15个2019年最佳CSS框架Trista 2019-11-08 开发网站或web利用时，网页开发工程师往往都须要编写CSS，如果每个我的项目都是从0开始，将会破费大量的工夫和精力，并且还会解决很多重复性工作。 慢慢地，工程师们意识到，能够拿出形象的模块来重复使用，以此来晋升开发速度。于是乎，CSS框架便应运而生，并且失去了越来越多的工程师的青眼。 本文精选了15个2019年最佳CSS框架，如果你想要更快更简略地开发网站或web程序，肯定不要错过哦~ HOW | CSS框架如何帮忙前端开发工程师？在正式开始之前，无妨先理解一下CSS框架。 简略点讲，CSS框架就是一个事后筹备好的网站根底框架。简直每个CSS框架都具备一些根本构造，比方，栅格设计、交互式UI设计模式、Web排版、工具提醒、按钮、图标，以及表单元素等等。这些事后筹备好的框架能够让工程师们在一个绝对成熟的模板上进行定制和延长，而不是从0开始开发。 最棒的一点是，只管开发的我的项目不尽相同，但很多CSS框架仍旧能够反复利用，这将在更大程度上节省时间。 WHY | 为什么须要应用CSS框架？诚然，CSS具备诸多长处，但它也并非完满，很多工程师也会因而产生疑难：应用CSS框架真的有必要吗？ 在我来看，应用CSS框架的确十分高效，如果非要下一个定论，权且能够用利远大于弊这个说法： 其一，CSS框架能够帮忙工程师更快地开发网站 在开发网站或者web利用时，工夫节点十分要害，应用CSS框架能够极大地节约工夫老本。并且CSS框架简直都具备高度自定义性能，不会对设计还原造成重大影响。 此外，对于高级前端开发，CSS框架的作用会更加显著。应用一个现成的网站根底框架和与之配套的工具与小部件，能够帮忙开发比较顺利地开发我的项目，即便他们的开发程度不够优良也不会有很大影响。 其二，CSS框架能够疾速构建线框或原型我的项目 无论是网站设计还是产品设计，原型都至关重要。我的项目原型能够帮忙团队疾速验证和测试项目正确性。如果应用CSS框架，就能够更快地做出网站原型以尽早测试。 补充一点：对于产品经理而言，也能够应用疾速原型工具画原型。 WHAT | 2019年最佳的CSS框架有哪些?以下是咱们精心筛选的15个CSS框架，每个框架的特色和利弊都有尽力说到，心愿能够帮忙你找到目前最合乎你须要的一款。 1. BootstrapBootstrap是目前应用最宽泛的CSS框架，它是 Twitter 推出的一个用于前端开发的开源工具包，以后最风行的版本是2018年公布的Bootstrap 4。相比Bootstrap 3，Bootstrap 4减少了很多特色和性能，例如新的配色计划，新的修改器以及新的实用程序分类等等。此外，Bootstrap 4是应用SASS构建的，也就是说，Bootstrap当初同时实用于LESS和SASS了。 Bootstrap更多功能解析： 1）响应式设计 Bootstrap的响应式设计方案是基于其栅格设计零碎，操作不便又简略，开发人员能够疾速创立一个基于Flexbox的网站布局，并且兼容所有浏览器。此外，Bootstrap也是第一个引入挪动优先设计的CSS框架。 2）海量资源 Bootstrap有十分丰盛的前端框架库，外面有网站布局式样，网站模板、Bootstrap主题模板、治理面板以及大量的UI组件，比方按钮、表单、卡片、进度条等等。这些事后构建的组件都能够间接应用。 3）简略易学 入门Bootstrap比较简单，当初有很多设计师在学前端的时候，都会学习Bootstrap框架。 2. Foundation相比其余CSS框架，Foundation显得绝对业余，性能更加全面，因而也具备肯定的学习难度。作为一个更高级，更简单的框架，Foundation具备超强的可读性、灵活性和可自定义性。这些特色也让它成为创立响应式网站和应用程序的首选框架之一，很多大型网站，比方Facebook、Ebay、Mozilla、Disney，Adobe等都应用了该框架。 Foundation更多功能和特色解析： 1）弱小的电子邮件框架 设计合作用摹客，100人团队收费应用 立刻开启 除了网站和web应用程序之外，Foundation还能够创立外观精美的响应式HTML电子邮件，并且适配任何设施。 2）在线培训服务反对 Foundation的学习难度较大，因而Zurb（Foundation的开发团队）开设了在线培训课程和以及业余咨询服务。 3）更易自定义 Foundation比Boostrap更加灵便，Bootstrap做进去的货色往往会十分类似，但Foundation能够做十分高度的自定义设计，只有专业技能足够，前端开发人员能够齐全掌控UI界面。 3. Pure Pure是Yahoo在2014年创立的一个轻量的响应式CSS框架。它基于Normalize.css构建，开发人员能够应用其栅格设计和菜单创立高度响应式的页面布局。 和Bootstrap不同，Pure在默认状况下是响应式的，因而无奈禁用响应式选项。此外，如其名所示，Pure是一个纯CSS框架，不蕴含任何JavaScript组件，体量也十分轻小，整个模块压缩后只有3.8KB。 4. Bulma Bulma是一个基于Flexbox布局模型的收费开源我的项目。该CSS框架也是轻量级、响应式的，并且具备挪动优先的理念。对开发人员而言，Bulma和Bootstrap以及Foundation能够一起并列为三大最受欢迎的CSS框架，目前寰球曾经有超过15万名开发人员在应用Bulma。 Bulma之所以广受欢迎的起因还有其高度可读的命名规定，这对于老手开发人员来讲，会大大降低学习老本。还有一个比拟有意思的点，Bulma在Github上能够说是明星选手般的存在，人气超高。 5. Semantic UI Semantic UI是一个用户友好度爆表的响应式前端框架，具备3000多个主题变量和50多个UI组件，能够疾速搭建丑陋的网页。Semantic UI还集成了许多第三方资源库，包含React，Angular，Meteor，Ember等等，给开发人员带来了更多便捷。 Semantic UI官网始终鼎力宣传他们的最大亮点——“human-friendly HTML”，也就是说，开发人员能够应用通用语言来直观展现分类和命名，因而简直没有任何门槛就能够读懂代码。 ...

布局是面试中和理论开发中常常遇到的问题，常见的有两栏布局、三栏布局等。想起来之前的一次某团的面试，要求用尽可能多的办法实现左侧固定宽度、右侧自适应的两栏布局，现整顿一份最常见的实现两栏布局的几种办法，简略易懂，可作为前端面试筹备材料。 0.HTML构造如下： <div class="main"> <div class="left"> </div> <div class="right"> </div> </div>1.利用浮动float <style> .main { overflow: hidden; } .left { /* 左栏设置左浮动 */ float: left; width: 400px; height: 500px; background: red; } .right { /* 右栏设置一个左外间距，值为左栏的宽度 */ margin-left: 400px; background: blue; height: 500px; } </style>2.利用定位position <style> /* 子绝父相 */ .main { overflow: hidden; position: relative; } .left { position: absolute; left: 0; top: 0; width: 400px; height: 500px; background: red; } .right { /* 右栏设置一个左外间距，值为左栏的宽度 */ margin-left: 400px; height: 500px; background: blue; } </style>3.利用弹性布局flex <style> .main { display: flex; } .left { height: 500px; background: red; flex: 0 0 400px } .right { background: blue; height: 500px; flex: 1; } </style>4.利用表格布局table <style> .main { display: table; width: 100%; } .left { display: table-cell; width: 400px; height: 500px; background: red; } .right { display: table-cell; background:blue; height: 500px; } </style>【作者程度无限，欢送大家在评论区交换斧正~】 ...

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>双飞翼布局</title> <style type="text/css"> html, body { padding: 0; margin: 0; } body { min-width: 600px; } #header, #footer { width: 100%; background-color: #999; height: 40px; text-align: center; line-height: 40px; } .column { float: left; height: 300px; } #container { width: 100%; background-color: #1890FF; } #container #center { padding: 0 200px 0 240px; } #left { width: 240px; background-color: #7FFFD4; margin-left: -100%; } #right { width: 200px; background-color: #FF5555; margin-left: -200px; } .clearfix:after { content: ''; display: table; clear: both; } </style> </head> <body> <div id="header">#header</div> <div id="main" class="clearfix"> <div id="container" class="column"> <div id="center">#center</div> </div> <div id="left" class="column">#left</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer</div> </body></html> ...

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>圣杯布局</title> <style type="text/css"> html, body { padding: 0; margin: 0; } body { min-width: 600px; font-size: 24px; } #header, #footer { width: 100%; height: 30px; line-height: 30px; background-color: #909399; text-align: center; } #footer { clear: both; } #container { margin-left: 240px; margin-right: 200px; } #container .column{ position: relative; float: left; height: 100px; } #center { width: 100%; background-color: #1890ff; } #left { width: 240px; background-color: #F56C6C; margin-left: -100%; left: -240px; } #right { width: 200px; background-color: #E6A23C; margin-right: -200px; } </style> </head> <body> <div id="header">#header</div> <div id="container"> <div id="center" class="column">#center</div> <div id="left" class="column">#left</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer</div> </body></html> ...

产生起因存在设施像素比：设施像素比（DPR）: 设施像素比 = 设施像素 / 设施独立像素设施像素是物理像素，也就是屏幕上有多少个逻辑点受你管制设施独立像素是逻辑像素，能够了解成屏幕的长宽DPR等于2即示意，1px的宽度，用了屏幕里的两个像素点来显示CSS代码里写的像素，在挪动端，对应的就是物理像素而因为UED出图是依照逻辑像素出图的，所以如果依照UED里的像素写，就会导致最终渲染进去1PX的款式比设计图要粗，因为假如是在DPR等于2的状况下，UED的1PX对应物理像素的0.5PX，但你写了1PX，就变粗了那么间接把所有UED的尺寸都除DPR能够解决问题吗？显然还是会有问题，特地是安卓机型上，因为他能辨认的最小像素是1，0.5px会被疏忽，导致在安卓机型上，你设置了0.5px的边框，然而最终渲染却没有边框解决方案设置viewport以及rem<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">var viewport = document.querySelector("meta[name=viewport]") if (window.devicePixelRatio == 1) { viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')} if (window.devicePixelRatio == 2) { viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')} if (window.devicePixelRatio == 3) { viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')} var docEl = document.documentElement; var fontsize = 10 * (docEl.clientWidth / 320) + 'px'; docEl.style.fontSize = fontsize;通过获取DPR，动静的对viewport进行缩放，比方DPR = 2，缩放比例就是0.5，通过放大0.5倍，本来1：1比例下会变宽的像素，就能失常展现了后续的设置fontSize是为了适配不同的屏幕宽度，这样解决后fontSize是依据屏幕宽度变动的，占屏幕宽度的比例是固定的，而1rem即等于根元素的fontSize，所以后续用rem写的css在不同屏幕宽度下的渲染都是统一的

前言 是不是感觉应用HTML标签管制网页成果很麻烦呢，那就随小编来看看CSS吧。CSS能更加精准的管制网页成果，CSS是cascading style sheet的缩写，称为“层叠样式表”或“级联样式表”，由多种规定组成，通过浏览器解释执行，可能更加准确的管制页面元素、布局，还可能实现内容和体现的拆散，使网站的格调趋势对立、保护更加容易。 1 知识点 一、CSS的根本语法 1.根本语法 `selector{property1:value1; property2:value2;…}` 2.语法阐明 1）.选择器： 选择器能够是HTML标记或属性的值或自定义的标识符。 2）.属性/属性值对： “属性：属性值”必须一一对应，属性与属性值之间必须用“:”连贯，每个属性/属性值用“;”分隔。 3）.属性： CSS中属性名为两个或两个以上的单词组成时，单词之间用“-”连贯。 实例：`p{ font-size: 10px; background-color: blue; }` 即是将HTML中的所有段落设置为“背景为蓝色，字体大小为10像素”。 下面的实例还能够写为：p{font-size: 10px;background-color: blue;}，小编倡议写第一种哦，因为更加直观，便于更改 。 4）.复合属性： 在CSS中，局部属性能够示意多个属性值。 实例：`p{ font-size: 10px; font-family: 宋体; font-style: italic }` 可间接用p{font: italic 10px 宋体}示意。 小提示：应用font复合属性时，应严格依照font-style、font-variant、font-weight、font-size/line-height、font-family的程序。相似的复合属性还有border、margin、padding等。 5）.多个属性值： 在CSS中，局部属性能够设置多个属性值，用“,”分隔。 实例：p{font-family：”宋体”，”黑体”,”微软雅黑”} 即可用宋体、黑体、微软雅黑三种字体来设置段落中的字体成果，若零碎中找不到宋体，就用黑体；若也找不到黑体，就用微软雅黑。 6）.标签合并： 当几个标签用到同一个属性且属性值雷同时，便可合并标签。 实例：`h3{color:red} p{color:red}` 可间接写为：h3,p{ color:red } 2 CSS的援用办法 1.行内款式 语法：<标记 style=”属性1: 属性值1; 属性2: 属性值2;…”> 实例：<p style=”font-size:10px;color:red;”> 即是定义段落文字为红色，大小为10像素。 2.外部款式 外部款式写在HTML的<head></head>中，应用<style></style>搁置CSS规定。 ...

问题参考：https://blog.csdn.net/brannua...

CSS CSS（英文全称：Cascading Style Sheets）层叠样式表, 是一种用来体现HTML（规范通用标记语言的一个利用）或XML（规范通用标记语言的一个子集）等文件款式的计算机语言。 CSS目前最新版本为CSS3，是可能真正做到网页体现与内容拆散的一种款式设计语言。绝对于传统HTML的体现而言，CSS可能对网页中的对象的地位排版进行像素级的准确管制，反对简直所有的字体字号款式，领有对网页对象和模型款式编辑的能力，并可能进行初步交互设计，是目前基于文本展现最优良的体现设计语言。CSS可能依据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。 CSS是用来丑化网页用的，没有网页则CSS毫无用处，所以CSS须要依赖HTML展现其性能 。 CSS的根本应用CSS根本语法 CSS 款式由选择器和一条或多条以分号隔开的款式申明组成。每条申明的款式蕴含着一个 CSS属性和属性值。 [外链图片转存失败,源站可能有防盗链机制,倡议将图片保留下来间接上传(img-FmNcbENy-1605579325994)(/QQ截图20200205160701.png)] 选择器名 { 属性 : 属性值; ......} div { background-color : red;} 留神： css申明要以分号;完结，申明以{}括起来倡议一行书写一个属性若值为若干单词，则要给值加引号，如 font-family: “agency fb”;正文多行正文： /* 这里的内容就是正文 */ CSS的应用1. 行内式 行内款式将款式定义在具体html元素的style属性中。以行内式写的CSS耦合度高，只实用于以后元素，在设定某个元素的款式时比拟罕用。 <p style="color:red;font-size:50px;">这是一段文本</p> 在以后元素应用 style 属性的申明形式。 style 是行内款式属性； color 是色彩属性；red 是色彩属性值； font-size是字体大小属性；50px 是字体大小属性值 2. 嵌入式 嵌入式通过在html页面内容开拓一段属于css的代码区域，通常做法为在< head>标签中嵌套 <style type="text/css">p {color: blue;font-size: 40px;}</style> 3. 引入外联款式文件 在理论开发当中，很多时候都应用引入外联款式文件，这种模式能够使html页面更加清晰，而且能够达到更好的重用成果。 style.css ...

H5+css3面试题总结一、html5和html的区别：1.html5新增了语义化标签：footer 、nav、section… 2.html5齐全反对css3 3.反对本地离线存储 4.新增了canvas标签 5.新增视频和音频标签 HTML5离线存储 localStorage 长期存储数据，浏览器敞开后数据不失落； sessionStorage 数据在浏览器敞开后主动删除。 如何辨别 HTML 和 HTML5？ DOCTYPE申明新增的构造元素性能元素123二、对语义化标签的了解（长处）：a. 去掉或者失落款式的时候可能让页面呈现出清晰的构造 b. 有利于SEO：和搜索引擎建设良好沟通，有助于爬虫抓取更多的无效信息：爬虫依赖于标签来确定上下文和各个关键字的权重； c. 不便其余设施解析（如屏幕阅读器、盲人阅读器、挪动设施）以意义的形式来渲染网页； d. 便于团队开发和保护，语义化更具可读性，遵循W3C规范的团队都遵循这个规范，能够缩小差异化。 三、浏览器的内核：IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink； 介绍一下你对浏览器内核的了解？ 次要分成两局部：渲染引擎(layout engineer或Rendering Engine)和JS引擎。 渲染引擎：负责获得网页的内容（HTML、XML、图像等等）、整顿讯息（例如退出CSS等），以及计算网页的显示方式，而后会输入至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的成果也不雷同。所有网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要内核。 JS引擎则：解析和执行javascript来实现网页的动态效果。 四、前端页面有哪三层形成，别离是什么？作用是什么？a. 结构层：由 HTML 或 XHTML 之类的标记语言负责创立，仅负责语义的表白。解决了页面“内容是什么”的问题。 b. 表示层：由CSS负责创立，解决了页面“如何显示内容”的问题。 c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。 五、Doctype作用? 严格模式与混淆模式如何辨别？它们有何意义?申明位于文档中的最后面，处于 标签之前。告知浏览器以何种模式来渲染文档。 严格模式的排版和 JS 运作模式是，以该浏览器反对的最高规范运行。 在混淆模式中，页面以宽松的向后兼容的形式显示。模仿老式浏览器的行为以避免站点无奈工作。 DOCTYPE不存在或格局不正确会导致文档以混淆模式出现。 六、你晓得多少种Doctype文档类型？标签可申明三种 DTD 类型，别离示意严格版本、过渡版本以及基于框架的 HTML 文档。 七、HTML与XHTML——二者有什么区别 a. XHTML 元素必须被正确地嵌套。 b. XHTML 元素必须被敞开。 c. 标签名必须用小写字母。 d. XHTML 文档必须领有根元素。 八、讲讲输出完网址按下回车，到看到网页这个过程中产生了什么a. 域名解析 ...

CSS中的伪类有： :link——未拜访过的链接；:visited——拜访过的链接；:hover——鼠标悬停的元素；:focus——获取焦点的元素；:active——激活的元素（例如一个被单击的链接元素）；:first-child——作为其余元素第一个子元素的元素；:lang()——依据元素的lang属性确定的元素。:target:root:nth-child():nth-of-type():nth-last-of-type():first-of-type:last-of-type:only-of-type:only-child:last-child:empty:not():enabled:disabled:checkedCSS2.1中的伪元素有：~~~~ ::first-line::first-letter::before::after那么区别在哪儿呢？区别就在于这些伪选择器影响文档的形式不同。伪类的体现有点儿像给文档增加类，而伪元素的成果就如同有元素被插入到了文档中。

单位的根本用法CSS 有几个不同的单位用于示意长度。一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。长度有一个数字和单位组成如 10px, 2em, 等。数字与单位之间不能呈现空格。如果长度值为 0，则能够省略单位。对于一些 CSS 属性，长度能够是正数。有两种类型的长度单位：绝对和相对。浏览器反对下表中的数字示意反对该长度单位的最低浏览器版本。 长度单位ChromeIEFirefoxSafariOperaem, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5ch27.09.01.07.020.0rem4.09.03.64.111.6vh, vw20.09.019.06.020.0vmin20.09.019.06.020.0vmax26.0不反对19.0不反对20.0绝对长度绝对长度单位指定了一个长度绝对于另一个长度的属性。对于不同的设施绝对长度更实用。 单位形容em它是形容绝对于利用在以后元素的字体尺寸，所以它也是绝对长度单位。个别浏览器字体大小默认为16px，则2em == 32px；ex依赖于英文字母小 x 的高度ch数字 0 的宽度remrem 是根 em（root em）的缩写，rem作用于非根元素时，绝对于根元素字体大小；rem作用于根元素字体大小时，绝对于其出初始字体大小。vwviewpoint width，视窗宽度，1vw=视窗宽度的1%vhviewpoint height，视窗高度，1vh=视窗高度的1%vminvw和vh中较小的那个。vmaxvw和vh中较大的那个。% 提醒: rem与em有什么区别呢？区别在于应用rem为元素设定字体大小时，依然是绝对大小，但绝对的只是HTML根元素。相对长度相对长度单位是一个固定的值，它反馈一个实在的物理尺寸。相对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。 单位形容cm厘米mm毫米in英寸 (1in = 96px = 2.54cm)px像素 (1px = 1/96th of 1in)ptpoint，大概1/72英寸； (1pt = 1/72in)pcpica，大概6pt，1/6英寸； (1pc = 12 pt)像素或者被认为是最好的"设施像素"，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

爱上IT的动力工程业余生 与马化腾师出同门 1998年，比同龄人早上学两年的张建耀，带着一身稚气就读热能动力工程业余，不过发动机这颗“人类工业文化王冠上的明珠”并没能拴住他的心，在须要买电话卡拨号上网的年代，张建耀对互联网产生了浓重的趣味。有别于沉迷于论坛、聊天室、QQ和文字MUD的同龄人，他独独乐于钻研层出不穷的旧式病毒以及盗号木马。“任何大行业都始于混沌，但长期倒退上来必然要建设秩序”，意识到这一点，张建耀果决抉择报考IT业余研究生，并在毕业之后成为了深圳拂晓网络的实习生，专攻信息安全。 拂晓网络，堪称中国互联网的“黄埔军校”，马化腾、张志东便曾供职于此。1990年和1992年，拂晓网络先后设计和建设了上海证券交易所、深圳证券交易所电脑自动撮合网络交易系统，使中国证券交易在全世界第一个实现无纸化、网络化、全自动实时交易。第一次走进拂晓网络的总部大楼，张建耀便被一楼的荣誉展厅狠狠震撼了一下，“全是各种‘中华之最’，能感觉到这个公司做什么都很牛。” 然而，在互联网行业风起之初，“做什么都行”反而成为了拂晓网络进一步倒退的枷锁。若潜心做证券金融零碎，兴许就不会诞生上市公司金证；若看准IM即时通讯鼎力搀扶马化腾张志东，兴许腾讯明天叫拂晓；若保持走集成路线，兴许能填补粤省至今没有上市集成商的空白…… 太多的“兴许”之中，也包含联软团队的出奔。2004年刚刚实习不久，张建耀便感觉到拂晓网络的发力方向太多，“对信息安全不是很上心”，正当他纠结是否要承受华为的offer——纠结于要稳固还是要幻想——联软创始人祝青柳找到他，询问是否有趣味一起守业，那颗不安分的心立刻被点燃。 “我重复问本人，要去大厂当一颗螺丝钉，还是走进未知，尝试更多的可能性？” 最终，拂晓网络的销售总监、研发总监和技术总监三位高层个体创建联软，创立初期的六人团队中便有张建耀的身影—— 身份：实习生；工资：刚够吃饭睡觉；住址：城中村，长处是离公司只隔条马路，毛病是小偷太多……放弃了大厂3倍的薪水，去一个守业团队“007式”加班，名牌大学研究生拿着微薄的工资玩儿命，“很多同学都放心我是不是被骗了（苦笑）”。 事实证明，精准的眼光与果决的抉择，可能让年轻人在起步阶段获取超速成长。2007年，张建耀授命北上，负责筹建北京分公司。 这一年他26岁。 我不是喜爱销售 我只是要把事做成 3年工夫，联软在销售端逐步关上场面，团队也逐步倒退到小30人的规模，“根本曾经活了下来”。为了拓展市场份额，进军北京势在必行。 3年工夫，张建耀曾经从“只有后劲没有生产力”的实习生，成长为团队的外围技术骨干，并对公司策略及业务全貌熟稔于心，然而，他并没有销售能力，因而北京分公司成立之初，延聘了一位行业销售大咖负责总经理，张建耀则负责组建售前、售后团队，为销售提供反对。 2010年，销售大咖为了人生谋求挂印而去，张建耀接到委任，正式成为联软北京分公司负责人。“挑战很大，研发做了三年，配合销售又做了3年，但没有真正做过销售工作，对南方的商务模式也很生疏——说直白点，无奈适应技术到销售的转变。” 接下重任之后，张建耀的日常便是奔波于京城大街小巷，访问客户、参加竞标。不懂请客、不善喝酒，导致一些竞标中体现优异的机会遗憾旁落，但也有益处，“所有违心洽购联软产品的，都是专一于业务、只关怀产品质量的优质客户”。 问及跨界销售的心得，张建耀谈到了两点： 第一，To B销售是要搞定一个链条而不是一个人，“技术人卖技术产品，你接触的第一个人大概率是对方技术团队的敌人，交换得很难受，但他往往不是决策者，随着沟通的深刻，你要致力将本人的产品技术原理翻译成通俗易懂的解决方案，压服最终决策者”。 第二，To B销售的过程，并不是实现本人的指标，而是帮忙对方实现他的指标，并且要兼顾决策链条上每个人的指标。 做着本人不善于也难言青睐的事，失落、受挫在劫难逃，但张建耀抱着“我就是要把事件做成”的信心，将北京分公司打造成人员规模50+、奉献销售额三分之一以上的精英团队。 2013年，孩子适龄退学，张建耀逐渐将北京团队的事务交接进来，回归深圳本部，先是扛起了全国四个销售大区其中之三的领导责任，随后，又帮助公司跨过了治理降级的鬼门关。 -- 广告--十年联软遭逢成长瓶颈 治理破局进阶行业龙头 2014年，联软科技成立10周年，公司人员规模达到200+人，年销售额冲破3000万，没有来自资本市场的压力，局势一片大好。让联软外围团队没有想到的是，接下来的三年工夫，联软的倒退近乎停滞，销售额增长迟缓，团队士气不振。团队个体研究反思后，确定问题在于企业管理水平不足以撑持高速倒退。“每个人都做过管理工作，包含我也算从无到有搭建了一个分公司，还多年负责全国售前团队的培训搭建，但企业达到肯定规模之后所须要的管理体系，是另一个档次的货色，联软外围团队全副开始投入到对治理的钻研学习之中。” 有人报考EMBA，有人稻盛和夫不离手，团队散会的话题永远是治理、治理、治理……创始人祝青柳曾说“联软至多有5次简直死掉”，治理这一关便是其中之最凶险。仅就确立企业价值观一事，联软团队便不知耗掉了多少脑细胞，“咱们之前有过一个价值观，可到这时候才晓得，原来价值观是拿来用的，不是说给外人听的。” 最终，“敬天爱人，诚恳耿直，不懈努力”十二字被确立为整体联软人的价值观。在价值观推广的过程中，有人来到、有人进来，2017年，在全新管理体系淬炼下的联软，销售额冲破亿元，并在接下来的几年工夫内每年放弃着50%以上的增速，企业规模也扩张至今700+人。 一个乏味的插曲：随着“诚恳耿直”这一价值观的提出，联软的每一句宣传口号都要严格合乎客观事实。“之前的口号是‘21家全国性银行，联软服务其中13家’，第二年有一家终止服务，祝总说得改成12家。我说服务过的就算服务吧？他说不行，咱得诚恳，是12就12……” 科创人：销售增速的显著改良，是否有可能是来自于市场端的优化，或者内部局势的变动？ 张建耀：咱们认真复盘过，认真衡量了所有变量，论断是管理水平的晋升是最要害的影响因素。上下一心，策略同频，每个人都围绕明确的指标做事，做事办法有清晰的规范，大大晋升了团队战斗力。 融资并非缺钱作为一家深耕信息安全行业多年、保持走标准化产品的企业，联软毛利率不俗，盈利能力足以反对疾速拓展规模。但在成立了15年之后，2019年、2020年，联软先后进行了两轮融资，值得关注的是，其B轮投资方为中网投以及深圳高新投——前者为网信办与财政部独特发动，后者则以贷款业务搀扶深圳市中小企业闻名，鲜有波及投资业务。 张建耀并不讳言融资的策略目标：“联软始终以来次要拼杀于公开市场，对于体制外部的时机把握能力有余，通过策略融资，心愿联软可能把握住顶层高度重视信息安全的历史时机。” 除了横向拓展市场边界，投身打造平安行业的衰弱生态也是联软将来的重点发力方向。2020年8月8日，联软科技退出华为平安商业联盟2.0。 联软曾经服务于50+世界500强，90+中国500强，中国最顶尖的六大交易所12年以上，平安管控终端数量超过15,000,000+，值得一提的是，在银行、证券期货等金融行业，联软的市场占有率达70%以上，始终处于行业当先的位置。“在平安行业摸爬滚打十多年，联软很分明，平安问题从来不是独自某一家厂商能解决的问题，行业顶尖的搭档们联结打造平安生态，是平安行业倒退的必经之路。” 从新了解“发动机” 科创人：咱们之前的采访中，很少碰到一个从毕业就进入守业公司，最终把公司做大做强的案例，你对想投身守业的年轻人有一些什么倡议？ 张建耀：我还是要回到“发动机”的话题来，第一，一个企业要想成为一家卓越的公司，就必须要建设一套机制，让企业中的每个人可能成为“发动机”，提供源源不断的自驱力，独特推动公司一直的排除艰难，畏缩不前；第二，尽管“发动机”在人类历史上推动了整个工业文化的提高，然而也难逃被电气化时代取代的命运，所以不论多大年纪，不论什么岗位，不论职位高下，惟一不变的就是一直的学习和提高，以适应将来的倒退；第三，过来的十几年，我基本上把公司里的重要岗位都干了一遍，例如研发、销售、售前、市场、品牌、策略、生态、高管等，特地像一部“发动机”，汇合了热能、机械、流体力学、资料、电子等交叉学科，发动机比拼的是能量转化率，而企业最终比拼的是效率，要进步企业的效率，就须要把各个部门彻底的买通，在每个环节都可能狠下功夫去钻研，通过制度化、标准化、流程化来晋升，这也是我下一阶段心愿做好的一件事件。 采访完结于晚间9时的京城，之后张建耀仍有客户要见，他笑称“我参加过很多销售工作，从没有为了成单请客户吃过饭，反而和很多客户成了至交好友，生意谈完后走来访去吃了不少。” 或者，这种专一于事件自身、公事公办的笃定，才是网络与信息安全类企业应有的气质。

1. :nth-child(n)栗子： 规定属于其父元素的第二个子元素的每个 p 的背景色： <!DOCTYPE html><html><head><style> p:nth-child(2){background:#ff0000;}</style></head><body><h1>这是题目</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p><b>正文：</b>Internet Explorer 不反对 :nth-child() 选择器。</p></body></html>成果 p:nth-child(2)n示意父元素的第n个元素，即便p的上一个元素不为p元素，也要从父元素的第一个开始计数。 小结：n 从1开始n 能够是数字、关键词或公式。 CSS3 :nth-child() 选择器

css选择器1、标签/元素/tag选择器 div{} 2、id选择器 惟一的 #id{} 3、class选择器 能够反复 .class{} 4、后辈选择器 #ul1 li{} 5、亲子代选择器 #bn > li{} IE6不反对 6、分组选择器：#div1, #div2, #div3 {} 7、伪类选择器：#header a:hover {} 8、多类选择器：div.aa{} 两头不能有空格 选择器的权重值（优先级）：!important>内联>id（100）>class（10）>tag（1） 选择器的权重值能够叠加 当权重值雷同的状况下后定义的会把先定义的笼罩掉 内联款式：在标签外部<div ><div> 外部款式：在html文件的<style></style>中 内部款式：<link rel="stylesheet" href="style.css">

作者： Anna Monus译者：前端小智起源：blog.logrocket点赞再看，养成习惯本文 GitHub https://github.com/qq44924588... 上曾经收录，更多往期高赞文章的分类，也整顿了很多我的文档，和教程材料。欢送Star和欠缺，大家面试能够参照考点温习，心愿咱们一起有点货色。 大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。 最近开源了一个 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的值是任意的）。 ...

问题当页码到一千多的时候，页码的方框会十分不难看；又不能超出方框min-width&&padding解决<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> ul { margin: 0; display: flex; justify-content: flex-start; } li { margin-right: 2px; list-style: none; padding: 0 3px; min-width: 24px; height: 24px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 2px; font-size: 10px; text-align: center; line-height: 24px; } </style> </head> <body> <div id="main"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>15</li> <li>15</li> <li>15</li> <li>15</li> <li>152</li> <li>152</li> <li>152</li> <li>152</li> <li>152</li> <li>152</li> <li>1523</li> <li>1532</li> <li>1532</li> <li>1532</li> <li>1532</li> </ul> </div> </body></html>日常页码款式问题 ...

相对长度单位单位名称等价换算cm厘米1cm = 96px/2.54mm毫米1mm = 1/10th of 1cmQ四分之一毫米1Q = 1/40th of 1cmin英寸1in = 2.54cm = 96pxpc十二点活字(印刷行业的长度单位)1pc = 1/6th of 1in=16pxpt点(印刷行业的长度单位)1pt = 1/72th of 1in=4/3pxpx像素1px = 1/96th of 1in很多单位用于打印绝对长度单位单位参照em在 font-size 中应用是绝对于父元素的字体大小，在其余属性中应用是绝对于本身的字体大小，如 widthex字符“x”的高度ch数字“0”的宽度rem根元素的字体大小lh元素的line-heightvw视窗宽度的1%vh视窗高度的1%vmin视窗较小尺寸的1%vmax视图大尺寸的1%

流动背景 为疏导大家养成垃圾分类习惯，凝聚垃圾分类共识，引领百万家庭造成垃圾分类新时尚，市妇联聚焦“不想分、不会分、不不便分”问题，在全市宽广家庭中深入开展“垃圾分类‘家’口头”，致力以“小切口”实现“大作为”，切实晋升居民知晓率、参与率和正确投放率，携手共建漂亮北京，共享生态文化成绩。 在线答题流动发展 总结 垃圾分类开头难，养成习惯就天然，垃圾分类同参加，漂亮城市共受害。

明天介绍一个通过svg来实现挪动端1px成果的小技巧 svg的描边形式通常咱们在应用一些设计软件时，描边会有三种抉择，别离是内描边、居中描边和外描边，比方 photoshop 那么，svg 中的描边是哪种形式呢？ 答案是居中描边，并且无奈更改，如下 <svg height="100px" viewBox="0 0 100 100"> <rect x='10' y='10' width='40' height='40' fill='none' stroke-width='10' stroke='red' /></svg> 能够看到，rect 的描边是居中的，两边各是 5 0.5px的实现依据下面的论断，如果 stroke-width 为 1 时，那么就很轻松的被分成了两边各 0.5，而后把外侧的局部截断就能够了 这里间接设置 rect 的宽高都为 100%，并且 svg 默认是超出暗藏的 （overflow:hidden），如下 <svg height="100px" viewBox="0 0 100 100"> <rect width='100%' height='100%' fill='none' stroke-width='1' stroke='red' /></svg>这里比照一下1px的成果 <div style="box-sizing: border-box; width:100px;height:100px;border:1px solid red;"></div> 能够用手机拜访或者扫描以下网址体验 https://codepen.io/xboxyan/pe... svg作为背景应用以上是间接应用 svg 标签，理论我的项目当然不能这样应用了，不过能够将svg 作为背景图片来应用，例如 div { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='none' stroke-width='1' stroke='red' /></svg>");}很简略，在 svg 后面增加一段 data:image/svg+xml, 示意这是一张 svg格局的图片，和 base64 的写法比拟相似，前面 svg 的属性xmlns='http://www.w3.org/2000/svg'示意命名空间，临时还不能去除，记住这层法则就能够了 当然在IE下，svg可能还须要本义能力失常显示，这里能够参考张鑫旭老师的这篇文章 上面来看几个案例 ...

要论在前端面试中CSS常考的题目，程度垂直居中肯定有姓名。如果是平时不留神写款式的初学者，这道看似简略的问题也不是很容易答复，现整顿了一下CSS程度垂直居中的办法，可作为前端面试筹备材料。要想做程度垂直居中，咱们先筹备两个盒子，大盒子外面套一个小盒子，这个时候咱们要想，套在外面的要做程度垂直居中的小盒子的宽高咱们晓得吗？宽高晓得或者不晓得，做程度垂直居中的办法一样吗？答案是不一样的，上面就要分状况探讨了，各提供了两种解决方案。 〇、先筹备一下盒子，也就是html的内容： <div id="father1"> <div id="son1"> 程度垂直居中块级元素(已知宽高) </div> </div> <div id="father2"> <div id="son2"> 程度垂直居中块级元素(已知宽高) </div> </div> <div id="father3"> <div id="son3"> 程度垂直居中块级元素(未知宽高) </div> </div> <div id="father4"> <div id="son4"> 程度垂直居中块级元素(未知宽高) </div> </div>一、已知小盒子宽高办法1：子绝父相。子盒子的top、bottom、left、right为0，margin为auto #father1{ width: 600px; height: 300px; position: relative; background-color: aquamarine; margin-bottom: 10px; } #son1{ position: absolute; width: 100px; height: 80px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: beige; } 办法2：子绝父相。子盒子的top、left为50%，margin-top为负的子盒子高度的一半，margin-left为负的子盒子宽度的一半 #father2{ width: 600px; height: 300px; position: relative; background-color: blueviolet; margin-bottom: 10px; } #son2{ position: absolute; width: 100px; height: 80px; left: 50%; top: 50%; margin-left: -50px; /* #son2盒子宽度的一半的正数*/ margin-top: -40px; /* #son2盒子高度的一半的正数*/ background-color: chartreuse; } ...

在前端工程师的日常工作中，应用 CSS 元素选择器是稀松平时的事；无论你是编写个别的 CSS 还是须要通过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 款式属性，最终交给浏览器解析并套用。然而你想过没有这是如何实现的呢？ 浏览器渲染咱们先看一下浏览器的渲染步骤： CSS 在被浏览器加载后，会被解析成 CSSOM 树，并尝试与 Dom 叠加成渲染树，随后进行计算地位、渲染等步骤。这样看来，CSS 属性套用的要害就在于如何从 CSS 转化成 CSSOM 树，以及怎么把 CSSOM 套用到 DOM 下来。 CSSOM树当咱们写下一组 CSS 款式时，例如： #id .class h4 + p { ...}浏览器在解析它时，你可能会认为 CSS 会依照由左到右的依序找出＃id>.class>h4>p，最初套用，但实际上浏览器解析 CSS 的程序是由右到左的 p>h4>.class>＃id。 很违反直觉对吧？但如果思考到性能问题，从右到左的解析会比从左到右强很多。 假如这有这样的 HTML： <div id="div1"> <div class="a"> <div class="b"> ... </div> <div class="c"> <div class="d"> ... </div> <div class="e"> ... </div> </div> </div> <div class="f"> <div class="c"> <div class="d"> ... </div> </div> </div></div>以及这边五条 CSS 款式规定： ...

我的项目案例CSS分享：Flex布局&Css瀑布流仅对我的项目中所应用到的局部CSS技巧做一次简略的分享JasonSubmara Flex 布局实现成果展现及关联代码： .tips-process { display: flex; flex-direction: row; flex-wrap: wrap; overflow: hidden; li { position: relative; width: 25%; text-align: center; padding-bottom: 40px; padding-right: 80px; box-sizing: border-box; @for $i from 0 through 150 { &:nth-child(#{$i + 1}) { @if ($i + 1)/4 % 2 == 1 { // 奇数行最初一个 &::after { content: ''; position: absolute; bottom: 0; left: 50%; margin-left: -42px; width: 16px; height: 40px; background: url('~@/assets/images/tips-next-s.svg') no-repeat center; background-size: 100%; } &.hasPower::after { background-image: url('~@/assets/images/tips-next-s-b.svg'); } } @else if ($i + 1)/4 % 2 == 0 { // 偶数行第一个 &::after { content: ''; position: absolute; bottom: 0; left: 50%; margin-left: -42px; width: 16px; height: 40px; background: url('~@/assets/images/tips-next-s.svg') no-repeat center; background-size: 100%; } &.hasPower::after { background-image: url('~@/assets/images/tips-next-s-b.svg'); } } @else if ($i + 1)/4 <= 1 and ($i + 1)/4 > 0 or ($i + 1)/4 > 2 and ($i + 1)/4 <= 3 { &::after { content: ''; position: absolute; right: 0; top: 50%; margin-top: -22px; width: 80px; height: 16px; background: url('~@/assets/images/tips-next-l.svg') no-repeat center; background-size: 100%; z-index: 1; } &.hasPower::after { background-image: url('~@/assets/images/tips-next-l-b.svg'); } } @else if ($i + 1)/4 <= 2 and ($i + 1)/4 > 1 or ($i + 1)/4 > 3 and ($i + 1)/4 <= 4 { &::after { content: ''; position: absolute; left: -80px; top: 50%; margin-top: -22px; width: 80px; height: 16px; background: url('~@/assets/images/tips-next-l.svg') no-repeat center; background-size: 100%; z-index: 1; transform: rotate(180deg); } &.hasPower::after { background-image: url('~@/assets/images/tips-next-l-b.svg'); } } // 隔行换向要害代码 order: 排序地位 @if floor($i / 4) % 2 == 0 { order: #{$i}; } @else { order: #{$i + (2 - ($i % 4) * 2) + 1}; } } } a { position: relative; display: block; height: 64px; line-height: 64px; color: #757f8a; overflow: visible; font-size: 16px; background: linear-gradient(-135deg, transparent 10px, #e6eaf0 0); drop-shadow: 10px 10px 0 #adb7c2; filter: drop-shadow(10px 10px 0 #adb7c2) } &.hasPower a { color: #fff; background: linear-gradient(-135deg, transparent 10px, #3290ff 0); drop-shadow: 10px 10px 0 #addcff; filter: drop-shadow(10px 10px 0 #addcff); } em { position: absolute; z-index: 1; left: 12px; top: 12px; display: block; width: 12px; height: 12px; border-radius: 50%; background: rgba($color: #000000, $alpha: 0.2); } img { position: absolute; display: none; width: 30px; top: -20px; left: 3px; } &.hasPower img { display: block; } &:nth-child(13) { flex: 1; } &:nth-child(14) { margin-left: 50%; // flex: 1; &::after { content: none; } } } }代码解析： ...

对于均匀散布的布局，咱们个别应用负margin的办法。如下图，就是均匀布局。个别这种状况，咱们都是在父元素和子元素之间加上一层div，而后，给这个div设置负margin-right，值为两个子元素之间的间隔。 例如，咱们令每个子元素宽度为100px，一共3个子元素，给每个子元素一个margin-right，设为50px，那父元素宽度应为100x3+50x2=400px。上代码： //HTML<div class="father"> <div class="middle"> <div class="son1"></div> <div class="son2"></div> <div class="son3"></div> </div></div>//CSS.son1,.son2,son3{ margin-right:50px; width:100px;}.father{ width:400px;}.middle{ margin-right:-50px;}中间层margin-right:-50px相当于向右“延长”了50px，使得son3元素有空间和其余元素在一行。

grid网格布局，用来解决简单的二维页面布局.和flex类似的是，分为外层容器(Grid Container)和内层子项目(Items). Container属性: displaygrid-template-columnsgrid-template-rowsgrid-template-areasgrid-templategrid-column-gapgrid-row-gapgrid-gapjustify-itemsalign-itemsplace-itemsjustify-contentalign-contentplace-contentgrid-auto-columnsgrid-auto-rowsgrid-auto-flowgridItems属性: grid-column-startgrid-column-endgrid-row-startgrid-row-endgrid-columngrid-rowgrid-areajustify-selfalign-selfplace-self应用外层申明dipslay:grid | inline-grid生成的网格是块级还是内联级的。 <style>.grid{ display:grid;}</style>属性:grid-template-columns，grid-template-rows <div class="grid"> <div class="child-1">1</div> <div class="child-2">2</div> <div class="child-3">3</div> <div class="child-4">4</div> <div class="child-5">5</div> <div class="child-6">6</div> <div class="child-7">7</div> <div class="child-8">8</div> <div class="child-9">9</div></div><style>.grid{ grid-template-rows: 10vw 10vw 10vw; grid-template-columns:10vw 10vw 10vw; //能够应用repeat('反复次数','长度单位'),下面的style代码能够写成 //grid-template-rows: repeat(3,10vw); //grid-template-columns: repeat(3,10vw);}</style> rows行colnums列,下面代码示意3行每行高度10vw,3列每列宽度10vw。 关键字:repeat() <style>.grid{ grid-template-rows: repeat(1,3vw 6vw 9vw); grid-template-columns: repeat(1,3vw 6vw 9vw);}</style> 关键字:auto-fit <style>.grid{ width: 400px; height:300px display: grid; grid-template-columns:repeat(auto-fit,70px); grid-template-rows: repeat(auto-fit, 70px);}</style>容器尺寸固定，子项目尺寸固定，网格几行几列未知，自适生成网格.行Math.floor(400/70)=5;列Math.floor(300/70)=4;右侧多50，底部多20. 关键字:fr .grid{ width: 500px; grid-template-columns:100px 1fr 2fr; //左侧100px固定，右侧随屏幕自适应，一句搞定 //grid-template-columns:100px 1fr;}拿第一行举例网格1=100px网格2=(500-100)/3 (133.33)网格3=(500-100)/3*2 (266.66)先去除固定值，在调配残余空间 关键字:minmax(min,max) ...

问题形容按钮款式为图标+文字，在应用flex布局写垂直居中时，iphone7手机上文字和图标却没有居中，居左显示。代码如下（已精简）： <button> <img src="./refresh.png" alt /> {{ confirmButtonText }}</button>...button { display: flex; align-items: center; justify-content: center; img { width: 36px; height: 36px; display: inline-block; }}预期款式： 理论款式： 解决形式给icon和文字外再包一层标签，给外层标签设置flex垂直居中款式，代码如下： <button> <span class="wrap"> <img src="./refresh.png" alt /> {{ confirmButtonText }} </span></button>...button { display: flex; align-items: center; justify-content: center; .wrap { img { width: 36px; height: 36px; display: inline-block; } }}

结尾从开始学习前端时，就始终有着这么一条规定：CSS要放在Head标签中引入。 但至于为什么要这么做呢？却找不到一个令人感觉称心的答复，因而这篇文章咱们从性能以及交互方面来探索一下这个问题。 筹备Chrome浏览器的devtool配置有Performance性能，能够对网页进行性能剖析，并且会将网页解析渲染流程以图形展现进去，这对咱们的剖析有极大的帮忙。 应用办法：鼠标右键+查看 or F12，而后切换到Performance一栏，点击左上角的刷新按钮便能够对页面进行剖析。 如何应用Performance工具进行网页剖析 开始探索先找一个内部的css文件：https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/1.4.0/css/bootstrap.css 这是一个bootstrap.css的cdn文件，别离搁置在head标签中和body标签尾部： 搁置于head标签中：<!doctype html><html> <head> <title>钻研精力</title> </head> <body> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/1.4.0/css/bootstrap.css" rel="stylesheet"> <p>你好, 小枫</p> </body></html>(a) 浏览器先进行HTML解析工作，生成DOM树； (b) 浏览器调用Network线程下载bootstrap.css文件，此时HTML未进行渲染步骤；等到css文件下载结束之后，开始解析css款式，生成CSSOM树；之后再联合DOM树和CSSOM树生成Layout树（以前称为Render树），开始计算布局，进行绘制步骤（生成Paint树，细节不探索），出现页面（前面还有一步Composite，这里不作探索）。 从下面的步骤能够看出，当内部css在head标签中引入时，HTML的解析步骤失常执行，但渲染步骤会期待css文件下载结束并解析胜利之后再进行，所以能够得出结论： 当css在head标签中引入时，阻塞HTML的渲染。 而页面的出现过程应该如下：页面出现一段时间的白屏（白屏工夫取决于css文件的下载速度），之后呈现出带有css款式的页面。为了更能直观地出现这个过程，咱们接着应用万能的Chrome devtool进行弱网环境的模仿：在Network中将网络速度设置为Slow 3G。 刷新页面察看页面： (a) 页面呈现长时间白屏状态： (b) 一段时间过后，呈现带有css款式的文本信息，示意页面渲染结束： 2. 搁置于body标签中（这里先放在尾部）： <!doctype html><html> <head> <title>钻研精力</title> </head> <body> <p>你好, 小枫</p> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/1.4.0/css/bootstrap.css" rel="stylesheet"> </body></html>(a) 在解析到link标签之前，浏览器自上而下解析HTML生成DOM树，而后与CSSOM树（并非内部引入的CSS）联合生成了Layout树，计算布局之后进行绘制，将页面渲染到浏览器中； (b) 浏览器解析到link标签，下载内部css文件；下载完之后开始解析css款式生成CSSOM树，并从新解析HTML生成DOM树；将DOM树和CSSOM树联合生成Layout树，进行计算布局和Paint，实现页面的渲染，这个过程称为reflow，也就是回流，是一种耗费性能的景象； 从下面的步骤能够看出，当内部css在body标签中引入时，不会阻塞HTML的渲染，所以页面出现过程应该如下：首先，在css加载实现之前，文本先渲染实现，但未带有css款式，俗称“裸奔”；css加载实现之后，页面中文本款式产生扭转；因而会呈现“闪一下”甚至长时间“裸奔”的景象，因为页面款式产生了变动：“裸奔”到“有款式”；如上图，页面存在长时间Layout shift景象，这里科普一下Layout shift： CLS，全称是CumulativeLayout Shift，中文名是累计布局偏移，是Google Search Console 额一个外围网页指标，是指网页布局在加载期间的偏移量。 得分范畴是0–1，其中0 示意没有偏移，1 示意最大偏移。在页面出现之后，款式产生了变动，导致页面布局与原先布局有了偏移，这是一种十分不好的交互体验，这里附上一篇CLS的文章：页面视觉稳定性之CLS，有趣味能够看看。 ...

转载自https://blog.csdn.net/qwe5810...html的根本标签1、<hn> 题目标签n示意不同大小的字体，n取值1-6 2、 <hr/>水平线标签创立一个程度分割线，用于定义内容主题的变动 size属性： 水平线的高度，单位像素（px）noshade属性：没有暗影，取值：noshade，示意显示纯色4、 <font>字体标签<font size="2" color="red" face="微软雅黑">字体的内容</font>size：设置字体大小。取值1-7。浏览器默认3。color：设置字体的色彩。face：设置文字的字体5、<b><i> 格式化标签<b>粗体<i> 斜体6、 <p><br/> 段落标签<br/> 插入单个换行7、<img> 标签图片属性名称含意作用scr图片的门路地址必写属性, 否则看不到图片width宽度 height高度如果只设置其中一项,那么图片会等比例缩放title提醒文本鼠标悬停在图片上方会呈现的文字信息alt替换文本图片加载失败的时候才会呈现的文字信息border边框只能定义边框的粗细8、<ul><ol> 列表标签<li> 是列表标签内的每一列无序列表<ul>名称含意type=”circle”空心圆type=”disc”默认值,实心彩色圆type=”square”实心彩色正方形留神:卸载ul身上是所有li扭转,写在li身上是单个扭转 有序列表<ol>名称模式type=”1”默认值,1、2、3…type=”a”小写的英文字母,a、b、c…type=”A”大写的英文字母,A、B、C…type=”i”小写的罗马数字,i、ii、iii…type=”I”大写的罗马数字,I、II、III…9、<a> 超链接标签名称作用取值href规定链接的指标url比写属性target规定在何处关上指标url。尽在href属性存在时应用_ blank 新窗口关上_self 默认打开方式framename框架的名称 || name | 规定锚点的名称 | 自定义 | 空连贯 <a href="javascript:;">空链接</a><a href="javascript:void(0);">空链接</a>锚点链接 <a href="#锚点名">点击跳转</a><a name="锚点名">指标区域</a>10、<table><tr><td> 表格标签 <table> 是父标签,相当于整个表格的容器。名称作用border表格边框的宽度cellpadding单元格边际与其内容之间的空白cellspaceing单元格之间的空白bgcolor表格的背景色彩height表格的高度width表格的宽度 <tr> 标签用于定义行<td> 标签用于定义表格的单元格(一个列)td标签的属性: 名称作用colspan单元格可横跨的列数(横向合并单元格)rowspan单元格可横跨的行数(纵向合并单元格)align单元格内容的程度对齐形式取值:left 左、right 右、center 居中 <th> 标签用于定义表头。单元格内的内容默认居中加粗11、<frameset><frame> 框架标签<frameset> frame框架set汇合:框架汇合它是多个窗口页面整合在一起的一个汇合(框架集:frameset)。每一个页面(框架:frame)都是独自文档(html),须要应用字标签<frame> 来确定页面的地位。通过cols和rows确定 行列数。多个<frameset> 能够嵌套应用。 rows属性和cols属性取值:值1,值2,值3,….一个值代表一行(列),多值应用逗号分隔,值能够是10px、10%等,最初一个值能够应用*主动匹配。<frame> 框架子标签src属性: 设置此框架要显示的页面名称或门路。此为必须设置的属性。name属性: 设置框架名称。noreszie属性: 设置框架大小是否能手动调节。有的导航框架中的超链接<a> 标签中的target属性须要设置为其余框架的名称,这样就能够实现点击超链接,让指标页面在指定的框架中显示。*表单相干标签1、 < form>表单标签表单标签的次要性能:把表单中的数据提交给远端的服务器。From就像一个快递盒子,把须要发送给服务器的数据装到这个盒子里,点击提交按钮,而后浏览器就将数据发送给服务器<from> 表单标签在浏览器上没有任何显示,然而所有须要提交到服务器的数据都须要寄存在表单标签中。 action属性:申请门路,确定表单提交到服务器的地址(门路)method属性:申请形式。罕用的取值:GET、POST2、<input> 输出域标签<input> 标签用于取得用户输出信息,type属性值不同,收集形式不同 type属性 text: 文本框,单行的输出字段,默认宽度20个字符password: 明码框,明码字段。radio: 单选框,示意一组互斥选项按钮中的一个。submit: 提交按钮。将表单数据发送到服务器。个别不写name属性,否则将”提交”两个字到服务器。checkbox 复选框file: 文件上传组件hidden: 暗藏字段reset: 重置按钮image : 图形提交按钮button: 一般按钮,罕用于与javaScript联合应用name: 元素(数据)名称,如果须要表单数据提交到服务器,必须提供name属性值,服务器通过属性值取得提交的数据value属性: 设置input标签的默认值。留神:submit和reset为按钮显示数据size属性: input的宽度大小checked属性: 单选框或复选框被选中readonly: 是否只读 数据会被提交disabled: 是否可用 数据不会被提交maxlength: 容许输出的最大长度<select> 下拉列表。可用单选和多选。须要字标签<option> 制订列表项 name属性:发送给服务器的名称multiple属性: 不写默认单选,取值为”mutiple” 示意多选size属性:多选时,课件选项的数目<option> 子标签:下拉列表中的一个选项(一个条目) selected: 勾选以后列表项value: 发送给服务器的选项值个别option须要给value这个属性,如果不给,默认把option的文本内容发送给服务器<textarea> 文本域标签 cols属性:文本域的列数rows属性:文本域的行数

次要是通过浏览器事件监听函数，判断间隔顶部的高度，是否合乎吸顶，利用动静class属性设置款式~ window.pageYOffset：间隔顶部偏移量document.documentElement.scrollTop：谷歌浏览器获取滚动条间隔顶部的地位document.body.scrollTop：ie浏览器获取滚动条间隔顶部的地位<template> <div class="wrapper"> <div class="nav-bar" :class="{'is_fixed':isFixed}"> 这是内容 </div> <div class="scroll"> 这是滚动内容 </div> </div></template><script> export default{ name:'nav-var', data(){ return{ isFixed:false } }, mounted(){ window.addEventListener('scroll',this.initHeight) }, methods:{ initHeight(){ let scollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop this.isFixed = scollTop > 152 ? true : false; } }, destroyed(){ window.removeEventListener('scroll',this.initHeight,false) } }</script><style lang="scss">.wrapper{ .nav-bar{ height:70px; line-height: 70px; border-top:1px solid gray; background: #ffffff; &.is_fixed{ position: fixed; top:0; width:100%; box-shadow: 0 5px 5px #cccccc; } } .scroll{ height:500px; }}</style>

译者：前端小智原文：https://css-tricks.com/the-sh... 1024程序员节，160就能买到400的书，红宝书 5 折 CSS可能生成各种形态。正方形和矩形很容易，因为它们是 web 的天然形态。增加宽度和高度，就失去了所需的准确大小的矩形。增加边框半径，你就能够把这个形态变成圆形，足够多的边框半径，你就能够把这些矩形变成圆形和椭圆形。 咱们还能够应用 CSS 伪元素中的 ::before 和 ::after，这为咱们提供了向原始元素增加另外两个形态的可能性。通过奇妙地应用定位、转换和许多其余技巧，咱们能够只用一个 HTML 元素在 CSS 中创立许多形态。 尽管咱们当初大都应用字体图标或者svg图片，仿佛应用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得咱们的学习。1.正方形 #square { width: 100px; height: 100px; background: red;}2.长方形 #rectangle { width: 200px; height: 100px; background: red;}3.圆形 #circle { width: 100px; height: 100px; background: red; border-radius: 50%}4.椭圆形 #oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px;}5.上三角 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}6.下三角 ...

css选择器权重从高往低列： 选择器权重!importantInfinity内联款式1000ID选择器100类选择器｜属性选择器｜伪类选择器10标签选择器｜伪元素1通配符0依据上表权重相加计算并比拟，值越大权重越大 简单选择器及简略示例<div> <p>1</p> <div class="box"> <p>2</p> </div> <input title="属性选择器" /></div>父子选择器（派生选择器）：div p{}间接子元素选择器：div > p{}属性选择器：[title]{} 或者 [title="属性选择器"]{}并列选择器：div.box{}分组选择器：.box,input{}

盒模型的组成，由里向外content,padding,border,margin 在IE盒子模型中，width示意content+padding+border这三个局部的宽度 在规范的盒子模型中，width指content局部的宽度 box-sizing的应用 box-sizing: content-box 是W3C盒子模型box-sizing: border-box 是IE盒子模型

兴许很多人感觉大前端这个概念很新，但实际上这个概念曾经呈现好几年了。 2017年，过后以饿了么为代表的一些企业开始提出大前端的概念。2018年，InfoQ举办了首届寰球大前端技术大会（GMTC），在大会中将前后端拆散、跨平台和PWA等技术设立了专场。去年5G风口下，前端岗位的外延和内涵不断扩大。 往年，大前端趋势曾经愈发显著，层出不穷的跨平台技术，BATJ大厂均已布局小程序、挪动端，拿offer须会多端开发。这些都在通知咱们，大前端的浪潮曾经来了！ 不少人问我到底什么是大前端，简略来说，大前端是一种变动状态多过于固定的职责范畴，是“前端”职责范畴的延长。 说起大前端流行后，所带来的影响曾经初见端倪，企业开始缩减人力老本，前端岗位竞争越发强烈。一些自媒体也开始看衰挪动端开发，“挪动端饭碗要被抢了”，“据说原生开发没人要了”，这些舆论频繁呈现在各大社群中，给泛滥挪动端程序员造成了极度的不安。 面试诚然有技巧，但绝不是伪造与吹流弊，通过一段短时间沉下心来闭关修炼，出山收割，步入大厂，薪资翻番，岂不爽哉？ 修炼准则想必大家很腻烦口试和考查知识点。因为其实在平时实战中，考究的是开发效率，很少会去刻意记下一些细节和深挖知识点，脑海中都是一些扩散的知识点，无奈系统性地关联成网，始终处于似曾相识的状态。不晓得多少人和博主一样，至今每次写阻止冒泡都须要谷歌一番如何拼写。????。以如此的状态，定然是无奈在面试的战场上纵横的。其实面试就犹如考试，大家回忆下高考之前所做的事，无非就是 了解 和 系统性关联记忆。本秘籍的知识点较多，花点工夫一个个了解并记忆后，天然也就死记硬背，无所畏惧。因为本秘籍为了便于记忆，疾速达到应试状态，相似于温习常识纲要。知识点会尽量的精简与提炼常识脉络，并不去开展深刻细节，八面玲珑。有趣味或者有疑难的童鞋能够自行谷歌下对应知识点的具体内容。????CSS盒模型页面渲染时，dom 元素所采纳的 布局模型。可通过box-sizing进行设置。依据计算宽高的区域可分为：content-box (W3C 规范盒模型)border-box (IE 盒模型)padding-box (FireFox 已经反对)margin-box (浏览器未实现)Tips: 实践上是有下面 4 种盒子，但当初 w3c 与 mdn 标准中均只反对 content-box 与 border-box；BFC块级格式化上下文，是一个独立的渲染区域，让处于 BFC 外部的元素与内部的元素互相隔离，使内外元素的定位不会相互影响。IE下为 Layout，可通过 zoom:1 触发触发条件:根元素position: absolute/fixeddisplay: inline-block / tablefloat 元素ovevflow !== visible 规定:属于同一个 BFC 的两个相邻 Box 垂直排列属于同一个 BFC 的两个相邻 Box 的 margin 会产生重叠BFC 中子元素的 margin box 的右边， 与蕴含块 (BFC) border box的右边相接触 (子元素 absolute 除外)BFC 的区域不会与 float 的元素区域重叠计算 BFC 的高度时，浮动子元素也参加计算文字层不会被浮动层笼罩，盘绕于四周利用:阻止margin重叠能够蕴含浮动元素 —— 革除外部浮动(革除浮动的原理是两个div都位于同一个 BFC 区域之中)自适应两栏布局能够阻止元素被浮动元素笼罩3.层叠上下文元素晋升为一个比拟非凡的图层，在三维空间中 (z轴) 高出一般元素一等。 ...

编程式办法的益处1.全局管制，防止款式散乱 2.代码简洁，开发疾速 函数式编程大量应用函数，缩小了代码的反复，因而程序比拟短，开发速度较快 3.靠近自然语言，易于了解 函数式编程的自由度很高，能够写出很靠近自然语言的代码 4.更不便的代码治理 5.书写款式成为一门艺术 LessBad.card-title { font: "PingFang-SC-medium"; color: #333; font-size: 18px;}.card-title { font: "PingFang-SC-regular"; font-size: 14px; color: #333;}Good// 申明less函数.mixin-font-class(@fontColor: yellow; @fontSize; @fontFamily) { font-family: @fontFamily; font-size: @fontSize; color: @fontColor;}利用h6 { .mixin-font-class(@fontColor:red;@fontSize:12px;@fontFamily:"PingFang-SC-medium");}h2{ .mixin-font-class(@fontColor:blue;@fontSize:15px;@fontFamily:"PingFang-SC-regular");} 全局Less在Vue-cli模式中 // 增加全局lesspluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ resolve('./src/less/theme.less') ] }},// 在任何组件中或者less文件中应用<style lang="less" scoped>.breadTop { height: 60px; display: flex; align-items: center; justify-content: space-between; padding-right: 15px; h6 { .mixin-font-class(@fontColor:red;@fontSize:12px;@fontFamily:"PingFang-SC-medium"); } h2{ .mixin-font-class(@fontColor:blue;@fontSize:15px;@fontFamily:"PingFang-SC-regular"); }}</style>scss$font-normal-color = #222;$font-light-color = #333;@mixin font-class($fontFamily, $fontSize, $fontColor) { font-family: $fontFamily; font-size: $fontSize; color: $fontColor;}@mixin font-large($size: 14px, $color: $font-normal-color) { @include font-class($font-family-medium, $size, $color);}@mixin font-normal($size: 14px, $color: $font-light-color) { @include font-class($font-family-regular, $size, $color);}应用.form-title { @include font-large(16px, red);}.form-text { @include font-large(12px, blue);}留神less函数的参数应用的@，scss应用的$ ...

前言因为挪动互联网的飞速发展，当初根本没有哪个前端说本人只开发 PC 端，挪动端什么的我不论。 甚至好多前端次要的工作内容就是开发挪动端，因为挪动端的内容形形色色：微信小程序、支付宝小程序、京东小程序、快利用、微信公众平台、微信小游戏、混合App、H5等… 关上招聘软件，能够看到目前的岗位对前端的要求是越来越高了，上天入地无所不能，屏幕前的你也能够关上软件看一眼要求，是不是至多都有相似这么几条中的一两个：熟练掌握挪动端前端技术、有微信小程序开发教训优先、有混合App开发教训优先，即便不是那种专门做挪动端网站的公司，有不少也都写着会挪动端优先… 所以挪动端的布局就至关重要了，因为无论一个网站的页面背地有着如许简单的交互逻辑、多宏大的用户量、如许海量的数据、如许高的并发…它究竟还是得有个页面吧！不能让用户一拜访网站就间接给人家看数据库吧！ 有人的中央就有江湖 有页面的中央就有布局布局可不仅仅只是把数据参差的列举在页面上这么简略，一个适合的布局能够令用户的操作十分顺畅。同时在不同的场景下也应抉择不同的布局，如果选错布局的话很可能会导致用户对页面的操作不那么的丝滑，哪怕最后出现进去的数据都是一样的。 因为挪动端的屏幕并不像电脑屏幕那么大，而且长宽比也有很大的区别，所以造就了挪动端布局与 PC 端布局有着很大的不同，那么接下来咱们就来看一下各式各样的常见布局。 居中布局其实居中布局大家在日常生活中根本都见过，只是过后没怎么注意罢了。 没给用户留下深刻印象的布局反而是好布局，因为用户的注意力都在内容上了，证实此时的布局令用户操作顺畅。 而给用户留下印象的布局个别就不太好了（一些不同凡响的炫酷布局除外）： 这个按钮怎么放这了，我都误碰好几次了；敞开按钮在哪呢？怎么关啊这个；这个商品的简介在哪呢？应该点哪购买啊？这个布局怎么这么乱看的我都晕了，哎算了算了，当前不来这个网站了……不同的布局用来对应不同的场景，用对场景的话会令用户的操作比拟难受顺畅，但用错场景的话用户可能会有些懵，不利于疏导用户按本人想要的形式去操作。 这种布局是主内容处于页面的正地方地位，常见于登录、注册、提醒用户、或点击头像查看大图等场景，通常会增加一层灰色的通明遮罩： 这么做的目标除了突出主题之外，还有一个比拟重要的点就是能够令用户感觉到本人并没有来到以后页面，只不过是在以后页面中呈现了一个小框而已，这样能够无效缩小用户的陌生感。 不仅如此，居中布局还可能无效疏导用户进行本人心愿用户所进行的操作，用强烈的比照感去疏导用户： 利用CSS库实现借助市面上已有的 CSS 库，咱们能够很轻易的做到居中布局，尤其是能够用到中文关键字，这十分有利于咱们的记忆，它就是 chinese-layout。 而后咱们再用一个中文渐变色的 CSS 库来丑化咱们的界面：chinese-gradient。 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 在这里用link标签引入中文布局 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout"> <!-- 在这里用link标签引入中文渐变色 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient"> <style> /* 革除默认款式 */ * { padding: 0; margin: 0; } /* 令html和body全屏显示 */ html, body { height: 100%; } body { /* 先在父元素上设置grid布局 */ display: grid; grid: var(--居中); /* 给个难看的渐变色 */ background: var(--霾灰); } .center { /* 指定子元素在核心地位 */ grid-area: 中; /* 给子元素设置宽高，不然宽高为0导致什么也看不见 */ width: 150px; height: 150px; /* 给一个难看的背景色 */ background: var(--胭脂粉); } </style></head><body> <div class="center"></div></body></html>运行后果： ...

— 文| babayage 编辑 |笑    笑 技术出身的COO鲜见，有所成就者更是百里挑一，王瑞琳便是其一。 比起写代码，更喜爱与人互动 1999年王瑞琳考入北邮，报考起因“据说北邮找工作简略一些。” 七年后的毕业抉择之时，王瑞琳曾经意识到，编程并不是本人最喜爱的事件，“相比起对着电脑敲键盘，我更喜爱与人打交道”。在泛滥Offer中最终抉择惠普，便是因为惠普提供的Consultant职位，对技术能力和沟通能力都有着极高要求——20年后回望，正是这一决定奠定了王瑞琳的成长劣势，让他总能成为所在团队的要害拼图、外围支柱。 在惠普这5年工夫中，3年工夫用于打磨技术根基、修习岗位基本功、积攒集体口碑与资源，接下来的两年工夫内，他开始尝试通过集体能力在不同部门间建设协同单干，牵头尝试一些我的项目。 2010年，他将尚处Beta阶段的惠普云产品Matrix引入中国，联合外乡业务场景进行二次开发，搭建了一套具备行业场景价值的演示环境，并对全国的售前团队进行培训。只管过后因为云计算的技术计划尚处试验阶段，产品自身销售状况难称现实，但不到30岁的王瑞琳便能在惠普弱小资源撑持下实现一次靠近于守业的残缺尝试，这无疑是一笔微小的成长财产。 之所以可能在不到5年的工夫内实现超限成长，王瑞琳总结了三点关键因素： 第一，惠普中国没有搭建外乡研发团队，因而桥梁型角色的重要性更高，接触到的信息更多。 第二，2002年康柏Compaq被惠普收买，王瑞琳所在的团队恰是康柏旧部，迫切需要在新团队中确立存在价值，团队自上而下充斥干劲，这不仅防止了“大企业金手铐（高福利低强度反复工作）窘境”，还让团队成员领有许多尝试新事物的机会。 第三，恰逢大型机时代的尾音，王瑞琳真正意义上见证了大型机——小型机——云计算的时代变迁，因而对产品生命周期、技术成长周期有着更高的视线格局以及更为残缺的了解——过后的王瑞琳并不知道，10多年后这些教训会对本人守业起到多大作用，初入职场的他只是在感叹“刚学明确点儿，又得学新的”。 Tips·王瑞琳倡议有野心的职场新人 ·常存危机意识，努力学习技能 ·留神建设集体影响力，连贯更多资源 ·抬头拉车、低头看路，个人努力要与个体指标同频，“否则就是瞎忙活”。 ·有时候慢即是快，高倍收益须要在正确的方向上长期深耕、韧性投入。 IBM三结义，弄潮云时代 科创人：2011年您为何来到惠普，退出IBM？ 王瑞琳：过后IBM筹备在中国推广中国研发团队本人研发的一款云产品，须要有云技术和销售教训的人负责销售团队，而我也很期待可能与本地研发团队并肩作战的感觉，相较海内研发团队沟通效率更高，对外乡客户的需要响应更及时，这也是我来到的间接起因。 科创人：在IBM的3年工夫里，您最大的播种是什么？ 王瑞琳：首先是IBM带给了我很多先进的理念，比方“No business too small, no problem too big”，这个理念与EasyStack当初保持的“做难而正确的事件”这一理念殊途同归。其次是意识了两个能一起做事的搭档，陈喜伦（易捷行云EasyStack创始人CEO）当年是这款产品的研发负责人，刘国辉（易捷行云EasyStack创始人CTO）是首席架构师。我退出IBM的第一周，就是不停跟他们沟通这款自主研发产品的销售推广，从产品包装、产品定位及定价、营销工具、销售赋能、营销策略、渠道建设、品牌定位、市场宣传甚至是网络推广的文章，都须要我来通盘考虑。我也感觉本人很侥幸，领有两次从技术视角、生态视角、销售视角、客户视角、不同行业场景视角下全方位推动云产品市场落地的机会，在惠普期间摸着石头过河走了一遍，到了IBM又联合中国研发团队更残缺地走了一遍。 科创人：作为市场、销售的负责人，和研发团队沟通时拍桌率有多高？ 王瑞琳：（笑）在惠普那段时间最苦楚的不是和研发团队沟通，而是和研发团队沟通不上。一个需要提给大洋彼岸不晓得要等多久才有回复，尽管沟通的时候对方很客气，喊你一声“Master”，但总感觉隔着点什么。可能是因为领会过这个苦楚，所以IBM那几年我和喜伦、国辉配合十分默契，很少起争执。 科创人：你们什么时候有了守业的打算？ 王瑞琳：喜伦和国辉2013年底找到我，说要做一件翻新的小事，须要我来配合做销售和市场。他们始终很关注国外的技术潮流，比方基于开源云计算技术OpenStack，国外很多守业公司从资本市场到市场推动都有很杰出的问题。他们认为开源的云计算解决方案+产品化是条值得尝试的路线，大家应该一起退出守业大潮。 最后咱们的守业愿景十分奢侈，就是要做“中国技术人员自研发的世界级云计算产品”。但通往这个愿景的具体门路、办法并不是很清晰，惟一能确定的是云计算正处在突飞猛进的时代，但产品化进行得并不彻底，须要一直迭代能力真正到达用户场景，这里必定蕴藏着微小的机会。那段时间大家交锋就比拟多了，周六日根本就是咱们三个人找个茶馆闭门探讨，周末很多时候都“吵”到深夜（笑）。 ▲2014年10月，团队返回OpenStack巴黎峰会前合影，拍摄于公司第一个办公室中关村倒退大厦前，前排右二CEO陈喜伦，左二COO王瑞琳，后排右三CTO刘国辉。 科创人：守业初期免不了磕磕绊绊，您有哪些印象比拟深的守业教训？ 王瑞琳：最开始那段印象比拟深的有两件事。 第一是公司倒退愿景，大家畅想将来的时候，我说心愿咱们能成长为一家创新型上市公司，喜伦说“不，咱们要成长为世界级的平凡公司”，他的初心是撑持EasyStack倒退至今的重要能源。 第二就是公司倒退门路的交锋。守业这事有点反兽性：须要保持难而正确的事、须要冲破过往教训和既有逻辑的解放、须要韧性的保持、须要做艰巨抉择和艰巨沟通、须要聚焦和做减法。 比方，2013年的时候，大多数人认为守业先从容易落单的中小客户做起容易上量，但喜伦十分明确地提出来，咱们的客户就是巨头，就是头部客户。事实证明，与大客户的单干对于公司品牌认知、产品打磨带来的附加值微小。做企业级产品和服务的敌人能够注意下，国内有志愿、有实力洽购的企业其实绝对集中，这跟企业CIO的意识、观点有很大关系。 Tips·王瑞琳谈产品路线与市场需求 初创团队须要粗浅的了解和精准地把控好各种“需要”：短期需要VS长期需要、共性需要VS通用需要、架构优先VS性能优先等，拿捏失去位与否决定了企业的倒退门路。比方，初创团队往往会被用户需要搅乱研发门路，忽视用户需要无异于脱离场景价值，但满足所有需要又往往意味着大量有效投入，成了定制外包。技术型企业倒退的初期，外围是要“筑根基”，须要超前的技术理念和产品架构去引领市场，这个阶段是内循环；技术型企业倒退的中期，技术架构就绪之后，就要特地关注市场的行业需要、场景化需要，这个阶段是外循环。-- 广告-- All In 超级当先 在光明中砥砺前行 科创人：守业期间最苦楚的事件是什么？ 王瑞琳：演绎成一句话就是为了保持“超级当先”的信念而付出了不少代价。 EasyStack的愿景是“成为以开源生态为根底的世界级云计算企业”，但开源技术的产品化、商业化没有规范门路。守业之初，咱们就分明意识到国外守业公司的成功经验在国内走不通，因为在惠普和IBM期间率领团队从0到1实际过国内外研发团队不同产品在中国落地的过程，晓得国内外市场环境、客户意识天差地别。所以EasyStack的倒退模式是先设计“可能保障咱们实现当先”的战略目标，再寻找办法、匹配资源。 第一个指标，基于开源的商业化模式，其中最难协调的是商业化与开源之间的矛盾，如何在商业化之后继续与国内技术社区同步？咱们当初曾经把这条路摸索进去了。 第二个指标，实现开源云计算的产品化。在中国市场开源软件肯定要做好产品化，解决达到客户痛点的最初一公里。这一步进行得绝对顺利，咱们创立后不久就服务了多家金融客户，进入了外围业务，实现了业务模式复制。 但只实现这两个指标，并不足以实现咱们心目中的“超级当先”，在企业级云计算市场的竞争对手越来越多，转型再慢的巨头也有转过来的那一天，工夫窗口十分重要。 要实现真正的当先，咱们到底要做什么？这个问题，CTO国辉给出了答案——研发可进化的新一代公有云，通过将开源技术产品化，为企业用户提供一个可继续进化的、面向多云的新一代公有云产品，这将在寰球首次实现公有云平台的在线可进化和平滑无感降级。 指标有了，但能不能做到？不晓得。要付出多少代价？不分明。但大家统一认为这就是企业级云计算产品将来倒退的正确方向，所以2016年底EasyStack下决心走出这一步，咱们花了18个月工夫终于研发上市胜利，并且早于国内产品同类上市工夫超过16个月，这不仅意味着产品当先，也意味着咱们在研发初期没有对标产品。用国辉的话说，就是在没有“灯塔”的“黑雾”里走了两年，因为没有100%谨严的产品逻辑，跟研发团队沟通也有很大压力。但更难的是，为了这个指标咱们要做减法，对于不合乎将来产品研发门路的客户需要，咱们不会为了眼前利益而进行定制化开发，而是抉择放弃。 科创人：在不确定的研发收益前，要接受肉眼可见的市场损失，做为COO您的压力很大吧？ 王瑞琳：很多用户了解业界技术发展趋势，并且违心及时优化调整本身的指标，但也有些客户有本人的业务步骤和具体需要。面对后者，这些你付出有数精力磕下来的客户，说一句“如果不能合乎产品倒退路线，咱们就须要放弃”，对方很诧异，“我明年的估算都筹备好了，是不是要加钱？”你得捏着本人大腿恨之入骨地说，多少钱咱们都不会做了。因为这对产品厂商意味着有限定制化，这对用户也意味着云平台建成后也是存在技术孤岛景象。好在最初咱们熬了过去，在咱们公布产品之后16个月，VMware也公布了与咱们统一架构的产品，巨头的发声可能更好的教育市场，而先行一步的人可能播种更大的收益。 科创人：休克疗法永远都随同着微小的代价，复盘而论，咱们有没有更好的解决办法？ 王瑞琳：如果再来一次咱们仍然会如此抉择，可能会尝试更平滑的迭代计划，但也不确定可能胜利。守业是孤单者的游戏，“超级当先”的翻新产品出台前后，往往是少数人质疑，多数人兴奋的。而云计算恰好是一个一直变动的赛道，技术一直新陈代谢，各种服务、产品的定义和规范一直被刷新，客户抉择翻新的技术也须要承当翻新的危险，找到正确的方向后被动求变。所以从这个角度来看，云计算让厂商和客户中的创新者实现了重要的握手。 科创人：EasyStack有一个三级火箭布局，开源，产品化，生态化，目前进行到哪个阶段了？ 王瑞琳：开源是公司产品凋谢兼容的根底，产品化是公司产品规模化推广的前提，生态化是公司产品平台级倒退的环境，这理论是一家以技术为先的创新型企业的倒退门路。随着新一代公有云的推出，加深了三者的交融，减速了螺旋式晋升。 ...

获取元素宽高1、只能获取内联款式var ele = document.getElementById('element');console.log(ele.style.width); // 空字符串console.log(ele.style.height); // '100px'2、可获取实时的styleMDN材料 var ele = document.getElementById('element');console.log(window.getComputedStyle(ele).width); // '100px'console.log(window.getComputedStyle(ele).height); // '100px'3、Element.currentStyle.width/height性能与第二点雷同，只存在于旧版本IE中(IE9以下)，除了做旧版IE兼容，就不要用它了。 4、除了可能获取宽高，还能获取元素地位等信息MDN材料 var ele = document.getElementById('element');console.log(ele.getBoundingClientRect().width); // 100console.log(ele.getBoundingClientRect().height); // 100

.list { -ms-overflow-style: none; overflow: -moz-scrollbars-none;}.list::-webkit-scrollbar { display: none; width: 0px!important }css暗藏滚动条

最近的一个我的项目页面中，有很多三角形icon，在不思考IE兼容性下，应用了css实现三角形，记录一下代码。 1、实心三角角，利用transparent实现三角形 （1）设置线条宽50px，div 宽高0，成果如下图所示有多个三角。  <div class="triangle"></div> .triangle{    width: 0px;    height: 0px;    border-right: 100px solid red;    border-left: 100px solid blue;    border-top:100px solid yellow;    border-bottom:100px solid green; } （2）当咱们只想要一个三角时，只需设置其余boder色彩通明即可。 .triangle{    width: 0px;    height: 0px;   border: 100px solid transparent;    border-bottom:100px solid green; }（3）在(2)中咱们生成的是一个扁平三角形，能够设置线条的宽度，扭转三角形的宽高 .triangle{    width: 0px;    height: 0px;    border: 50px solid transparent;    border-bottom:100px solid green; }2、三角形：应用 transform 旋转元素的角度， 在IE中兼容性不好 .triangle{    width: 10px;    height: 10px;    border-left: 1px solid black;    border-top: 1px solid black;    transform: rotate(45deg); }（2）应用伪类，使两个三角叠加。注：若trianglle 的元素中有文字，可应用before和 after设置三角进行叠加哦 长处：能够批改三角的角度， .triangle{    width: 0px;    height: 0px;    border: 50px solid transparent;    border-bottom: 50px solid black; } .triangle::after{    content: '';   width: 0px;    height: 0px;    border: 49px solid transparent;    border-bottom: 49px solid white;    position: absolute;   top: 2px;   left: 1px; }

第4章 盒尺寸四大家族盒尺寸中的4个盒子content box、padding box、border box和margin box别离对应CSS世界中的content、padding、border和margin属性。 4.1 深刻了解content4.1.1 content与替换元素1、什么是替换元素依据“外在盒子”是内联还是块级咱们能够把元素分为内联元素和块级元素，而依据是否具备可替换内容，咱们也能够把元素分为替换元素和非替换元素。替换元素，顾名思义，内容能够被替换。 <img src="1.jpg">把下面的1.jpg换成2.jpg，图片就会被替换。这种通过 批改某个属性值出现的内容就能够被替换的元素就称为“替换元素”。因而，<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>都是典型的替换元素。替换元素除了内容能够替换这一个性以外，还有以下一些个性。1）内容的外观不受页面上的CSS的影响。用业余的话讲就是款式体现在CSS作用域之外。（？？？？）2)有本人的尺寸。3）在很多CSS属性上有本人的一套规定。比拟具备代表性的就是vertical-align属性，对于替换元素和非替换元素，vertical-align属性值的解释是不一样的。比方说，vertical-align的默认值baseline，基线，被定义为字符x的下边缘，然而到了替换元素那里就不实用了。因为替换元素的内容往往不可能含有字符x，于是替换元素的基线被硬生生定义成了元素的下边缘。 2、替换元素的默认display值所有的替换元素都是内联程度元素，也就是替换元素和替换元素、替换元素和文字都是能够在一行显示的。然而，替换元素默认的display值却是不一样的。 3、替换元素的尺寸计算规定1）固有尺寸指的是替换内容本来的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着本人的宽度和高度。这个宽度和高度的大小就是这里的“固有尺寸”。2）HTML尺寸这个概念稍微形象，咱们无妨将其设想成水煮蛋外面的那一层红色的膜，外面是“固有尺寸”这个蛋黄蛋白，里面是“CSS尺寸”这个蛋壳。“HTML尺寸”只能通过HTMl原生属性扭转，这些HTML原生属性包含<img>的width和height属性、<input>的size属性、<textarea>的cols和rows属性等。 <img width="300" height="100"><input type="file" size="30"><textarea cols="20" rows="5"></textarea>3）CSS尺寸特指能够通过CSS的width和height或者max-width/min-width和max-height/min-height设置的尺寸，对应盒尺寸中的content box。 3层构造的计算规定如下： 如果没有CSS尺寸和HTML尺寸，则应用固有尺寸作为最终的宽高。如果没有CSS尺寸，则应用HTML尺寸作为最终的宽高。如果有CSS尺寸，则最终尺寸由CSS属性决定如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素按照固有的宽高比例显示。如果下面的条件都不合乎（如空内容的状况下，video、canvas、iframe这些元素），则最终宽度的体现为300像素，高度为150像素。内联替换元素和块级替换元素应用下面同一套尺寸计算规定。5、content与替换元素关系分析在CSS世界中，把content属性生成的对象称为“匿名替换元素”。content属性生成的内容都是替换元素。 4.2 温和的padding属性4.2.1 padding与元素的尺寸CSS中默认的box-sizing是content-box，所以应用padding会减少元素的此村。对于非替换元素的内联元素，不仅padding不会退出行盒高度的计算，margin和border也都是如此，都是不计算高度，但实际上在内联盒四周产生了渲染。 4.2.2 padding的百分比值其一，和margin属性不同，padding属性是不反对负值的；其二，padding反对百分比值，然而，和height等属性的百分比计算规定有些差别，差别在于：padding百分比值无论是程度方向还是垂直方向均是绝对于宽度计算的！ 4.2.3 标签元素内置的paddingpadding属性和background-clip属性配合，能够在无限的标签下实现一些CSS图形绘制成果。backgrounf-clip设置元素的背景（背景图片或色彩）是否延长到边框、内边距盒子、内容盒子上面。 4.3 激进的margin属性padding性情温和，负责内间距；而margin则比拟激进，负责外间距。 4.3.1 margin与元素尺寸以及相干布局1、元素尺寸的相干概念元素尺寸：在原生的DOM API中写作offsetWidth和offsetHeight，包含padding和border，也就是元素的border box尺寸，所以，有时候也称为“元素偏移尺寸”。元素外部尺寸：元素的外部区域尺寸，包含padding但不包含border，也就是元素的padding box的尺寸。在原生的DOM API中写作clientWidth和clientHeight，所以，有时候也称为“元素可视尺寸”。元素内部尺寸：示意元素的内部尺寸，不仅包含padding和border，还包含margin，也就是元素的margin box的尺寸。没有绝对应的原生的DOM API。2、margin与元素的外部尺寸margin同样能够扭转元素的可视尺寸，然而和padding简直是互补态势。什么意思呢？对于padding，元素设定了width或放弃“包裹性”的时候，会扭转元素可视尺寸；然而对于margin则相同，元素设定了width值或放弃“包裹性”的时候，margin对尺寸没有影响，只有元素是“充分利用可用空间”状态的时候，margin才能够扭转元素的可视尺寸。 4.3.2 margin的百分比值和padding属性一样，margin的百分比值无论是程度方向还是垂直方向都是绝对于宽度计算的，不过绝对于padding，margin的百分比值的利用价值就低了一截，根本原因在于和padding不同，元素设置margin在垂直方向上无奈扭转元素本身的外部尺寸，往往须要副元素作为载体，此外，因为margin合并的存在，在垂直方向往往须要双倍尺寸能力和padding体现统一。 4.3.3 正确看待CSS世界里的margin合并1、什么是margin合并块级元素的上外边距和下外边距有时会合并为单个外边距，这样的景象称为“margin合并”。重要信息：1）块级元素，但不包含浮动和相对定位元素，只管浮动和相对定位能够让元素块化。2）只产生在垂直方向，须要留神的是，这种说法在不思考writing-mode的状况下才是正确的，严格来讲，应该是只产生在和以后文档流方向的相垂直的方向上。因为默认文档流是程度流，因而产生margin合并的就是垂直方向。 2、margin合并的3种场景margin合并有以下3种场景。1）相邻兄弟元素margin合并。2）父级和第一个/最初一个子元素。对于margin-top合并，能够进行如下操作（满足一个条件即可）： 父元素设置为块状格式化上下文元素（https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context）父元素设置border-top值；父元素设置padding-top值；父元素和第一个子元素之间增加内联元素进行分隔。对于margin-bottom合并，能够进行如下操作（满足一个条件即可）： 父元素设置为块状格式化上下文元素；父元素设置border-bottom值；父元素设置padding-bottom值；父元素和最初一个子元素之间增加内联元素进行分隔；父元素设置height、min-height或max-height。3）空块级元素的margin合并。（空块级元素的上下边距合并。）对于空块级元素的margin合并，能够进行如下操作（满足一个条件即可）： 设置垂直方向的border；设置垂直方向的padding；外面增加内联元素（间接Space键空格是没用的）；设置height或者min-height。3、margin合并的计算规定margin合并的计算规定总结为“正正取大值”“正负值相加”“负负最负值”3句话。 4.3.4 深刻了解CSS中的margin:automargin:auto的填充规定如下：1）如果一侧定值，一侧auto，则auto为残余空间大小。2）如果两侧均是auto，则平分残余空间。 4.3.5 margin有效情景解析margin有效的情景：1）display计算值inline的非替换元素的垂直margin是有效的，尽管标准提到有渲染，但浏览器体现却未寻得一点形迹，这和padding是有显著区别的。对于内联替换元素，垂直margin无效，并且没有margin合并的问题，所以图片永远不会产生margin合并。2）表格中的<tr>和<td>元素或这是display计算值是table-cell或table-row的元素的margin都是有效的。然而，如果计算值是table-caption、table或inline-table则没有此问题，能够通过margin管制外间距。3）margin合并的时候，更改margin值可能是没有成果的。4）相对定位元素非定位方位的margin值“有效”。（看着“有效”）5）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“生效”。6）遥相呼应导致的margin有效。（看第六章内容）7）内联个性导致的margin有效。（看第五章内容） 4.4 勋绩卓越的border属性4.4.1 为什么border-width不反对百分比值

咱们晓得在 HTML 中列表能够分为无序列表、有序列表、定义列表。在网页中常常能够看到无序列表的应用，例如像导航栏菜单、新闻列表、商品分类、图片展现等，根本都是通过无序列表来实现的。 无序列表中每个列表项后面都会默认带一个圆点符号，然而个别咱们平时在网站上看到的列表款式，通常后面是没有圆点符号的，所以咱们要如何去掉这个默认的圆点符号呢？这些都能够通过 CSS 中的列表属性来实现。 本节要讲的 CSS 中的列表属性有上面四个： 属性形容list-sytle-type设置列表项的标记的类型list-style-position设置列表项标记绝对于列表项内容的地位list-style-image将图片设置为列表项的标记，属性值为 url('图片门路')list-style简写列表属性list-sytle-typelist-sytle-type 属性用于设置列表项的标记的类型，和 HTML 中列表标签中的 type 属性相似。 罕用值属性值如下所示： 属性形容none无标记符号disc默认值，实心圆circle空心圆square实心正方形decimal数字在理论利用中，上述几种属性值用的最多的还是 none，也就是用于去掉列表项的标记。 示例：上面是一个没有增加任何款式的列表： 如果咱们心愿去掉列表后面默认的圆点，能够通过将 list-style-type 属性设置为 none 来实现： ul{ list-style-type: none;}在浏览器中的演示成果： list-style-imagelist-style-image 属性用于应用图像来替换列表项的标记。但有一点须要留神，如果咱们设置了 list-style-image 属性，这个时候设置的 list-sytle-type 属性将不起作用。个别为了避免某些浏览器不反对 list-style-image 属性，咱们会设置一个 list-style-type 属性来代替。 示例：例如咱们将下面列表项的标记设置为一个图像（图片大小为50x50），属性值为图像门路： ul{ list-style-image: url(./flower.png);}在浏览器中的演示成果： list-style-positionlist-style-position 属性用于设置在何处搁置列表项标记。 属性值有如下所示： 属性值形容outside默认值，放弃标记位于文本的左侧，列表我的项目标记搁置在文本以外，且盘绕文本不依据标记对齐inside示意列表我的项目标记搁置在文本内，且盘绕文本依据标记对齐示例：例如咱们能够设置两组不同的列表，别离将 list-style-position 属性设置为outside 和 inside 来进行比照： <!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS学习(9xkd.com)</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <ul class="ul1"> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li> <li>第五项</li> </ul> <ul class="ul2"> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li> <li>第五项</li> </ul> </body></html>CSS 款式代码： ...

在应用 input 输入框时，咱们可能会遇到须要给其设置光标色彩的状况。谷歌浏览器的默认光标色彩是彩色的，GitHub 上的光标却是红色，那么这个用 CSS 怎么扭转呢?　下面形容的情景有两种实现形式： 1.应用color来实现光标的色彩是继承自以后输入框字体的色彩，所以用 color 属性即可扭转： input{ color:red;}2.应用caret-color来实现上一种形式曾经批改了光标的色彩然而字体的色彩也扭转了，如果只想扭转光标的色彩而不扭转字体的色彩那就应用 caret-color 属性: input{ caret-color:red;}好了，通过下面的形式咱们就能够批改 input 输入框光标色彩了~~~

什么是BFC？BFC（Block Formatting Contexts）块级格式化上下文，它是页面 CSS 视觉渲染的一部分， 用于决定块级盒的布局及浮动相互影响范畴的一个区域 。 BFC的创立根元素（ <html> ）浮动元素（ float 不为 none ）相对定位元素（ position 为 absolute 或 fixed ）表格的题目和单元格（ display 为 table-caption ， table-cell ）匿名表格单元格元素（ display 为 table 或 inline-table ）行内块元素（ display 为 inline-block ）overflow 的值不为 visible 的元素弹性元素（ display 为 flex 或 inline-flex 的元素的间接子元素）网格元素（ display 为 grid 或 inline-grid 的元素的间接子元素）BFC的范畴BFC 蕴含创立它的元素的所有子元素，然而不包含创立了新的 BFC 的子元素的外部元素。简略来说，子元素如果又创立了一个新的 BFC ，那么它外面的内容就不属于上一个 BFC 了，这体现了 BFC 隔离 的思维。也就是所说， 一个元素不能同时存在于两个 BFC 中 。 BFC的个性BFC 外部的块级盒会在垂直方向上一个接一个排列 ①同一个 BFC 下的相邻块级元素可能产生外边距折叠，创立新的 BFC 能够防止的外边距折叠 ②每个元素的外边距盒（margin box）的右边与蕴含块边框盒（border box）的右边相接触（从右向左的格式化，则相同），即便存在浮动也是如此 ③浮动盒的区域不会和 BFC 重叠 ④计算 BFC 的高度时，浮动元素也会参加计算 ⑤BFC的利用自适应多栏布局利用 个性③ 和 个性④ ，两头栏创立 BFC ，左右栏宽度固定后浮动。因为盒子的 margin box 的右边和蕴含块 border box 的右边相接触，同时浮动盒的区域不会和 BFC 重叠，所以两头栏的宽度会自适应， 示例 。 ...

一、 不定宽高元素程度垂直居中 1、transform: translate() <div class="wrapper"> <p class="center">程度垂直居中</p></div>.wrapper{    background-color: #eee;    height:200px; } .center{     position: relative;    width: 300px;    padding: 10px 20px;    background-color: #2c3e50;    color: #fff;    left: 50%;    right: 50%;    transform: translate(-50%, -50%); }毛病：IE9以下不兼容 2、flex 布局，利用justify-content和align-items 实现居中 <div class="wrapper">   <p class="center3">程度垂直居中</p> </div> .wrapper{ height:200px;    background-color: #eee;    display: flex;    justify-content: center;    align-items: center; } .center2 {    position: relative;    width: 300px;    padding: 10px 20px;    background-color: #2c3e50;    color: #fff; }3、应用table+table-cell实现垂直居中，display:inline-block;或margin: auto;实现程度居中 <div class="wrapper">   <div class="content">      <p class="center3">程度垂直居中</p>   </div></div> .wrapper{    background-color: #eee;    height: 200px;    width: 100%;    display: table; } .content {    display: table-cell;    text-align: center;    vertical-align: middle; } .center3 {    display: inline-block;    width: 300px;    padding: 10px 20px;    background-color: #2c3e50;    color: #fff; }4、伪元素：after, :before 应用inline-block+ vertical-align:middle 对齐伪元素 ...

1、 替换元素咱们依据外在盒子能够分为内联元素和块级元素，依据是否具备可替换内容，咱们也能够分为替换元素和非替换元素咱们把通过批改某个属性值出现的内容就能够被替换的元素称为替换元素，<img> <object><video> <iframe><textarea><input>这一类都是典型的替换元素 特点： 内容不受页面上的css的影响，款式体现在css作用域之外，如果要替换元素自身的外观，须要相似appearance的属性。或者是浏览器自身裸露的接口。然而间接input[type='checkbox']没方法扭转内间距背景色等个性有本人的尺寸 很多替换元素没有明确尺寸设定的时候， 默认尺寸是300*150px 如果是<video> <iframe> <canvas>-<img>默认是0表单的替换元素的尺寸和浏览器有关系在css属性上有一套本人的体现规定 典型的就是vertical-align。 比方它的值是baseline时候，非替换元素就是x下边缘，替换原色就是元素的下边缘2 、display 与替换元素所有的替换元素都是内联程度元素然而表现形式不一样，不同的元素不同的浏览器体现都不一样ie和chrome的返回值都是一样的，然而firefox在textarea中和绝大多数的input 返回的是inline而不是inline-block,然而咱们不必关怀他们的display一样不一样因为 替换元素有很多体现规定和非替换元素不一样。其中之一就是宽度和高度的计算规定。简略形容一下就是：替换元素的displays是inline block和inline-block中的任意一个，尺寸计算规定都是一样的。3、尺寸计算规定替换元素有三种尺寸，固有尺寸、html尺寸、css尺寸 固有尺寸 替换元素的本来尺寸，参见what 替换元素第一点html尺寸 就是<img width="100">这里的width height属性css 尺寸 通过css的width和height 还有max-width/min-width max-height/min-height计算规定如下： 没有css尺寸和html尺寸，就用固有尺寸没有css尺寸就用html尺寸有css尺寸可就用css属性决定尺寸如果固有尺寸含有固有的宽高比，然而css和html尺寸只设置了宽或者是高，还是依照原来的宽高比设置如果上边都不合乎，最终表现形式是宽300， 高度是150内联元素和块级元素应用同一套计算规定对于img能够查看object-fit的相干属性来实现更好的利用。4、替换元素与非替换元素1、 替换元素与非替换元素只差了一个srcfirefox的img如果为空的话，disolay:block;outline:1px solid;宽度会百分之百适应父元素，体现起来就是span ，同时设置宽高也没什么用。齐全就是一个非替换元素chrome也有相似的个性，没有src的同时只有上边有alt的属性和属性值，看起来也和非替换元素的表现形式统一 2、只差了一个content属性在chrome浏览器下： img{content:url(1.jpg)}<img> 上边的成果和<img src="1.jpg">一样的还有一点就是，如果图片是有src地址的 ，咱们能够通过content属性把图片的内容替换掉。然而扭转的仅仅是视觉出现，如果右键保留的时候，事实的还是原来的src对应的图片文字边图片的案例如下： <h1>《css世界》</h1> h1{width:180px;height:36px;background:url(logo.png);text-indent:-999px;}# 也能够应用content一行代码实现成果h1{content:url(logo.png)} 解决办法很完满是不是，然而还是有点缺点的。咱们没方法设置大小，只能是一倍图，导致看来有点含糊，挪动端的话倡议应用svg图片 3、content与替换元素content属性生成的对象称之为匿名替换元素。所以content生成的元素和一般元素有很多的不同的个性体现。 咱们应用content生成的元素无奈选中，同时阅读器和SEO都很不好，所以不要放重要的货色不能左右：:empty伪类动静生成的值没方法获取。作者：白璞1024链接：https://www.jianshu.com/p/072...起源：简书著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

（1）、‘~’选择器 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>~选择器</title> </head> <body> <style> .h3 ~ p { color: red; } </style> <p>这是段落标签</p> <p>这是段落标签</p> <p>这是段落标签</p> <h3 class="h3">这是题目标签</h3> <p>这是段落标签</p> <p>这是段落标签</p> <p>这是段落标签</p> <h4>这是题目标签</h4> <p>这是段落标签</p> <p>这是段落标签</p> <p>这是段落标签</p> </body></html>成果如下： （2）、‘+’选择器 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>+选择器</title> </head> <body> <style> .h3 + p { color: red; } </style> <p>这是段落标签</p> <p>这是段落标签</p> <p>这是段落标签</p> <h3 class="h3">这是题目标签</h3> <p>这是段落标签</p> <p>这是段落标签</p> <p>这是段落标签</p> <h4>这是题目标签</h4> <p>这是段落标签</p> <p>这是段落标签</p> <p>这是段落标签</p> </body></html>代码还是那些，只是把‘~’换成了‘+’，后果是大不相同。 ...

效果图 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>革新input</title> <style></style> </head> <body> <input type="checkbox" name="" id="" /> <input type="file" /> <hr /> <!-- 办法1: 点击label相当于点击了input --> <style> .checkbox1 { display: none; } .checkbox1 + i { /* content: " "; */ display: inline-block; font-style: normal; width: 20px; height: 20px; border-radius: 50%; background-color: #c0c0c0; } .checkbox1:checked + i { background-color: hotpink; } .checkbox1 + i::after { } .checkbox1:checked + i::after { content: " "; display: inline-block; margin: 5px; width: 10px; height: 10px; border-radius: 50%; background-color: #c0c0c0; } </style> <label> <input type="checkbox" class="checkbox1" /> <i></i> </label> <!-- 办法2: 设置input的opacity为0, 定位形式为相对定位 --> <style> .btn { position: relative; display: inline-block; text-align: center; color: #fff; text-decoration: none; width: 80px; height: 32px; line-height: 32px; background: #409eff; border-radius: 3px; font-size: 12px; vertical-align: middle; margin-left: 10px; } input[name="file"] { opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; } </style> <a href="javascript:void(0)" class="btn"> 上传文件 <input type="file" id="file" name="file" @change="uploadFile" /> </a> </body></html>

程度居中1， text-align: center2, magin: 0 auto3， flex布局，设置justify-content: center垂直居中1， line-height 单行居中2， 给父元素设置padding：.px 03, flex布局，设置align-items: center4， position：absolute，top:50%,transform:translate(-50%)

第一章 引言DRY (don't repeat yourself)代码易保护和代码量少不可兼得border-width: 10px 10px 10px 0;/** better **/border-width:10px;border-left-width: 0;cuurentColor/** 让程度分割线主动与文本的色彩保持一致 **/hr { height: 1px; background: currentColor;}继承inherit 能够用在任何 CSS 属性中，而且它总是绑定到父元素的计算值（对伪元素来说，则会取生成该伪元素的宿主元素）。 第二章 背景与边框1. 半透明边框border: 10px solid hsla(0, 0%, 100%, .5);background: white;background-clip: padding-box; 2. 多重边框box-shadow计划：只能模仿实现边框 background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);outline计划：只实用于双层边框 background: yellowgreen;border: 10px solid #655;outline: 5x solid deeppink;outline-offset: 0px; // 与元素边缘的间距，接管负值 3. 灵便的背景定位background-position的扩大语法：指定背景图片间隔任意角的偏移量，在偏移量后面指定关键字。 ...

问题的由来第一次关注这个题目编号的问题应该回溯到本科毕业论文的时候了，过后还独自涉猎过这个主题，Word 有个很好的个性级联题目，一次设置好之后，后续只有设置题目款式就能依照设置的题目编号形式主动编号，咱们要做的只是将对应的题目设置成对应根本的题目款式就好了，这个办法让我爱不释手，多年来始终沿用。齐全解决了中途插入一章，一节等等导致的章节编号都须要人肉调整的问题，当然还有图片的编号命名什么的，都是相似的。直到前面开始用markdown 因为各个编辑器的切换，始终没有一个好用的代替计划，所以几年前我写了一个小工具用命令行来做这事rawbin-/markdown-clear，这个工具解决了在github写博客的问题，同时在解决博客的问题的根底上解决了在各个平台发文的问题，因为编号是用脚本写上去的，所以用markdown here在各个平台发文也就牵强附会的转成html就行了，也解决了这个阶段的问题。前两天把拖欠几个月的全面认知的总结写了，忽然不想用这个脚本来编号了，产生一个想法：能不能不人肉编号，主动编上？而后就有了上面的内容。 先搞起来解决问题以下操作案例都是在macOS中产出，其余平台可能有些许差异，换汤不换药。在typora中写markdown主动编号关上typora【偏好设置】找到【外观】=>【主题】=>【关上主题文件夹】将如下代码退出到关上目录的base.user.css 中#writer { counter-reset: h1}h1 { counter-reset: h2}h2 { counter-reset: h3}h3 { counter-reset: h4}h4 { counter-reset: h5}h5 { counter-reset: h6}#writer h1:before { counter-increment: h1; content: counter(h1) ". "}#writer h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". "}#writer h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}#writer h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}#writer h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}#writer h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}讲道理关上typora【偏好设置】找到【通用】=>【高级 】=>【开启调试模式】=>勾选而后在非源码模式下=>【右键】=>【查看元素】，就能够看到为什么是#write了这个前面还有用在github pages 写markdown博客主动编号我用的是jekyllbootstrap.com的模板，比较简单 ...

你是否在应用定位时，会遇到一个定位元素即便设置更高的层级，也无奈将另一个定位元素笼罩的状况？通过了解层叠上下文，你就能更好的构建你的利用。 了解渲染流程和层叠程序当浏览器将 HTML 解析成 DOM 构造时，它同样会创立另一个树结构 - 渲染树。通过它渲染之后就成了用户所看到的视图，它同样决定了浏览器绘制 HTML 元素的程序。这个程序很重要，因为越是前面渲染的元素，它的显示程序就越靠前，也就可能会笼罩后面的元素。 在没有定位的状况下， 这个渲染程序是由 HTML 元素的程序决定的，例如有以下 HTML 构造： <div>one</div><div>two</div><div>three</div>它们的层叠程序如下图，在这里作者应用了一些负的外边距来强制元素笼罩，然而没有应用定位。越是前面渲染的元素，它显示的就越靠前。 当你应用定位时，这种体现就会扭转。浏览器首先绘制没有应用定位的元素，而后绘制应用定位的元素。默认状况下，应用定位的元素会显示在没有应用定位的元素后面，在下图中，将后面的两个元素设置了定位 position: relative，它们的显示程序就会变得靠前，覆盖住第三个没有定位的元素（position 属性的默认值是 static，即没有定位），即便位于 HTML 构造中的程序没有扭转。 留神这些定位元素中，第二个元素依然显示在第一个元素后面。首先定位元素会显示在失常元素后面，而后依据 HTML 构造中的程序来决定定位元素的显示，也就是前面的靠前显示。 什么是层叠上下文由浏览器绘制出的一个或多个元素组成的 DOM 树造成一个层叠上下文。当你设置 z-index 属性到一个定位元素上（position 为 relative，absolute，fixed，sticky），这个元素就会创立一个新的层叠上下文，并且会成为这个层叠上下文的根元素。这个根元素的所有子元素都是这个层叠上下文的一部分。 层叠上下文的子元素都是在它的外部绘制，所以位于层叠上下文内部的元素无奈设置本身的地位处于层叠上下文外部的子元素之间。也就是说内部元素 C 无奈处于层叠上下文的子元素 A 和 B 的两头。同样，当设置一个元素 C 覆盖住另一个元素 D 时，D 元素外部的子元素是无奈位于元素 C 下面的。 用例子来论述下： <div class="box one positioned"> one <div class="absolute">nested</div></div><div class="box two positioned">two</div><div class="box three">three</div>下面 HTML 构造中蕴含三个类名为 box 的元素，其中的两个会应用定位，并且设置它们的 z-index 值为 1。第一个 .box 元素中的 .absolute 子元素会应用定位并且设置 z-index 的值为 100；即便 .abosolute 的的 z-index 值很高，然而它依然会被第二个 .box 元素笼罩，因为它的父元素 - 第一个 .box 元素的层叠上下文位于第二个 .box 元素的层叠上下文的后面。 ...

用处弹性盒子对于前端web网页布局来说，有着无足轻重的作用，挪动端也是如此。把握了弹性盒子用法，对于目前编写自适应页面很重要。把握这种布局规定，是一项必备技能。弹性伸缩盒模型阐明主轴（main axis）是沿着 flex 元素搁置的方向延长的轴（比方页面上的横向的行、纵向的列）。该轴的开始和完结被称为 main start 和 main end**。穿插轴（cross axis）是垂直于 flex 元素搁置方向的轴。该轴的开始和完结被称为 cross start 和 cross end**。设置了 display: flex 的父元素（在本例中是 <section>）被称之为 *flex 容器（flex container）。在 flex 容器中体现为柔性的盒子的元素被称之为 flex 项（flex item）罕用的属性1.flex-direction（指定弹性容器中子元素排列形式） 属性：row 默认值。元素将程度显示，正如一个行一样。 row-reverse 以相同的程序。 column 元素将垂直显示，正如一个列一样。 column-reverse 与 column 雷同，然而以相同的程序。2.flex-wrap （属性规定flex容器是单行或者多行，同时横轴的方向决定了新行重叠的方向。）` nowrap默认值。规定元素不拆行或不拆列。 wrap规定元素在必要的时候拆行或拆列。 wrap-reverse规定元素在必要的时候拆行或拆列，然而以相同的顺 序。` 3.align-items 属性定义flex子项在flex容器的以后行纵轴方向上的对齐形式，就是规定高低排行的款式。 stretch 默认值。我的项目被拉伸以适应容器。 center 我的项目位于容器的核心。 flex-start 我的项目位于容器的结尾。 flex-end 我的项目位于容器的结尾。 baseline 我的项目位于容器的基线上。4.justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐形式。flex-start 我的项目位于容器的结尾。 flex-end 我的项目位于容器的结尾。 center 我的项目位于容器的核心。 space-between 我的项目位于各行之间留有空白的容器内。 space-around 我的项目位于各行之前、之间、之后都留有空白的容器内。弹性子元素属性1.order属性 .flex-container .flex-item { order: <integer>; }<integer>：用整数值来定义排列程序，数值小的排在后面。能够为负值，默认为0。2.align-self设置或检索弹性盒子元素本身在侧轴（纵轴）方向上的对齐形式。(跟那个align-items相似) ...

前言对话框----镂空三角形款式原理1)利用伪元素 :before :after 2):before ,border做出大三角形款式 3):after,border做出小三角形款式 4)小三角形的红色款式遮住大三角形款式,造成镂空 镂空三角形html <div id="talkTop"> 顶部镂空三角形</div><div id="talkBottom"> 底部镂空三角形</div><div id="talkLeft"> 右边镂空三角形</div><div id="talkRight"> 左边镂空三角形</div>css款式 #talkTop,#talkBottom,#talkLeft,#talkRight{ width:120px; height:40px; margin:60px; line-height:40px; text-aligin:center; position:relative; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border-radius:1px solid #808080; background-color:#fff;}/*talkBottom*/#talkBottom:before{ content:" "; position:absolute; top:100%; left:50px; width:0; height:0; border-left:15px solid transparent; border-top:15px solid #808080; border-right:15px solid transparent;}#talkBottom:after{ content:" "; position:absolute; top:100%; left:51px; width:0; height:0; border-left:14px solid transparent; border-top:14px solid #fff; border-right:14px solid transparent;}#talkBottom:hover{ color:#fff; background-color:#ff0000;}#talkBottom:hover:after{ width:0; height:0; border-left:14px solid transparent; border-top:14px solid #ff0000; border-right:14px solid transparent;}/*talkTop*/#talkTop:before{ content:" "; position:absolute; top:-15px; left:50px; width:0; height:0; border-left:15px solid transparent; border-bottom:15px solid #808080; border-right:15px solid transparent;}#talkTop:after{ content:" "; position:absolute; top:-14px; left:51px; width:0; height:0; border-left:14px solid transparent; border-bottom:14px solid #fff; border-right:14px solid transparent;}#talkTop:hover{ color:#fff; background-color:#ff0000;}#talkTop:hover:after{ width:0; height:0; border-left:14px solid transparent; border-bottom:14px solid #ff0000; border-right:14px solid transparent;}/*talkLeft*/#talkLeft:before{ content:" "; position:absolute; top:15px; left:-7px; width:0; height:0; border-top:7px solid transparent; border-right:7px solid #808080; border-bottom:7px solid transparent;}#talkLeft:after{ content:" "; position:absolute; top:16px; left:-6px; width:0; height:0; border-top:6px solid transparent; border-right:6px solid #fff; border-bottom:6px solid transparent;}#talkLeft:hover{ color:#fff; background-color:#ff0000;}#talkLeft:hover:after{ width:0; height:0; border-left:6px solid transparent; border-right:6px solid #ff0000; border-bottom:6px solid transparent;}/*talkRight*/#talkRight:before{ content:" "; position:absolute; top:15px; right:-7px; width:0; height:0; border-top:7px solid transparent; border-left:7px solid #808080; border-bottom:7px solid transparent;}#talkRight:after{ content:" "; position:absolute; top:16px; right:-6px; width:0; height:0; border-top:6px solid transparent; border-left:6px solid #fff; border-bottom:6px solid transparent;}#talkRight:hover{ color:#fff; background-color:#ff0000;}#talkRight:hover:after{ width:0; height:0; border-left:6px solid transparent; border-left:6px solid #ff0000; border-bottom:6px solid transparent;}css镂空三角形款式 ...

我的项目的UI设计中有这样的款式，一开始用的背景图，简略粗犷，起初在其余中央出了问题，因为是背景图的起因，这个框框被拉长了后小方块的宽度也变宽了，而后想用纯css实现，百度竟然没查到相似的东东，起初在umi的交换群里有个牛人给我指导了下 css backgrund: linear-gradient突变属性能够实现，因为它能够设置突变从哪开始，这就能够让咱们实现4个顶点的地位定位咯，上代码：html <div className={`fw-titleBar ${className}`} style={style}> <div className="fw-titleBar-content"> {children} </div></div>css .fw-titleBar { width: 100%; display: inline-block; position: relative; background: linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left top, linear-gradient(to left,#00BDFF,#00BDFF) no-repeat right top, linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left bottom, linear-gradient(to left,#00BDFF,#00BDFF) no-repeat right bottom; background-size:8px 8px,8px 8px,8px 8px,8px 8px; padding: 8px 0; &::before{ content: ''; width: calc(100% - 30px); height: calc(100% - 30px); background-color: #00BDFF4D; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .fw-titleBar-content{ width: 100%; height: 100%; display: inline-flex; position: relative; justify-content: space-between; align-items: center; border-top: 1px solid #00BDFF4D; border-bottom: 1px solid #00BDFF4D; padding: 10px 25px; }}当然你也能够在linear-gradient(to left,#00BDFF,#00BDFF) no-repeat left top 30px像这样来设置地位 ...

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=p, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.mask{   border: 1px solid #333;   width:100px;   height:20px;   background-color: #ffcccc;}</style></head><body>   <p><span class="te">我我哦我我</span></p>   <p><span class="te">我我哦我我</span></p>    <p><span class="te">我我哦我我</span></p>   <div class="mask">1222</div>   <button onclick="change()">changeColor</button></body><script>//定义加载办法function loadjscssfile(filename,filetype){ //判断js文件   if(filetype == "js"){      //创立script标签       var fileref = document.createElement('script');　fileref.setAttribute("type","text/javascript");　fileref.setAttribute("src",filename);   }else if(filetype == "css"){  //判断css文件 //创立link标签　var fileref = document.createElement('link');　fileref.setAttribute("rel","stylesheet");　fileref.setAttribute("type","text/css");　fileref.setAttribute("href",filename);　}   if(typeof fileref != "undefined"){　document.getElementsByTagName("head")[0].appendChild(fileref);   }}function change(){   loadjscssfile("static/test.css","css");}</script></html>

1.规范的CSS的盒子模型IE的盒子模型不同点规范css盒子模型: 内容宽度不包含padding和borderie盒子模型: 内容宽度 包含padding和border 2. box-sizing属性用来管制浏览器盒子模型的解析形式,border-box 示意应用ie传统的盒子模型 即是内容宽度包含content padding bordercontent-box 示意应用规范css盒子模型 即是内容宽度不包含padding和border 3. css的选择器有哪些 哪些属性能够继承id选择器 类选择器 标签选择器 相邻选择器 子选择器 迭代选择器 通配符选择器 属性选择器 伪类选择器font-size font-family color能够继承margin padding width height border不能够继承 4. css的优先法令如何计算元素选择器 1class 选择器 10id 选择器 100元素标签 1000!important申明的款式优先级最高 5. display有哪些值？阐明他们的作用none 暗藏元素inline 内联元素(默认)block 块级元素table 表格显示inline-block 行内块元素 6. position的值static 默认 依照失常文档流显示fixed 固定定位 绝对于可视窗口定位absolute 相对定位 绝对于最近一个不为static的父级元素定位relative 不脱离文档流 绝对于本身定位 7. CSS3有哪些新个性？RGBA和透明度圆角边框图片盒子暗影 box-shadow媒体查问 依据页面宽度提供两套css款式 8. 创立一个三角形的原理是什么将盒子的width height都设为0; 而后设置边框款式 .box { width: 0px; height: 0px; background: transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000; border-top: 0; }9. 常见兼容问题(1). 不同浏览器默认的margin和padding不同(2). 谷歌下会默认将12px字体一下的值变成12px.可通过退出css-webkit-text-size-adjust: none解决(3). ie6双边距问题. 块标签float后, 又有横行的margin的状况下,ie6显示的margin比设置的大 应用display: inline-block转化为行内元素(4). 在火狐下只能通过getAttribute()获取设置的自定义属性 ...

本节咱们讲最初一种 CSS 引入形式，也是理论开发中次要应用的一种形式，即内部款式。 什么是内部款式内部款式就是把 CSS 代码保留在一个独自的文件中，文件的扩大名为 .css，而后在 HTML 页面中引入这个 CSS 文件即可。 HTML 文件引入内部样式表有两种形式，别离是链接式和导入式。 链接内部样式表链接内部样式表就是在 HTML 文件中应用 <link/> 标签链接内部样式表，且 <link/> 标签必须放到 HTML 中的 <head> 标签内。在一个 HTML 页面中能够链接多个 CSS 文件，一个 CSS 文件也能够被多个 HTML 页面援用。 语法如下： <link rel="stylesheet" type="text/css" href="css文件门路">其中 rel="stylesheet" 是指在页面中应用这个内部样式表，type="text/css" 是指文件的类型是样式表文本，href 属性用于指定 css 文件的门路。 内部样式表实现了构造与款式的彻底拆散，一个 css 文件能够利用到多个 HTML 页面中。当扭转 css 文件中的款式时，所有利用这个 css 文件的页面中的款式都会随之扭转。 示例：例如咱们创立一个 index.css 的文件，将须要用到的 css 代码保留到这个文件中： h2{ color: lightsalmon; }p{ color:limegreen ; font-size: 18px; line-height: 20px;}span{ color: mediumpurple; font-weight: bold;}而后能够在 HTML 文件中通过 <link/> 标签援用这个文件： ...

CSS 层叠（Cascading）指的是某个元素会依据款式规定的优先级来设置某个元素的外观。层叠款式的优先级次要有三方面：依据款式域判断，是用户代理款式（user agent stylesheet），还是咱们本人写的款式；是否存在 !important 标识；依据元素款式属性判断，是否是写在元素行内的 style 属性中；依据选择器判断。用户代理款式是什么？基本上所有浏览器都有默认的款式，例如 <h1>-<h6>，<p> 标签都有默认的上边距和下边距，这是由浏览器默认设置的，所以叫用户代理款式。 如果一个元素身上有很多的款式规定，那么到底该利用哪一条呢？首先，浏览器会先判断以后款式是用户代理款式还是咱们本人写的款式，这两者中，咱们本人写的款式优先级要高，所以如果同一个元素上存在雷同的款式规定，咱们本人写的会笼罩浏览器默认款式； 而后，判断以后款式规定是否存在 !important标识，如果存在，阐明它的优先级高，则利用该款式； 其次，判断以后款式规定是否是行内款式，如果是行内款式，它的优先级高于其余款式（然而除了有 !important 标识的除外）； 而后，依据选择器的优先级来判断，选择器的优先级程序从大到小是：ID 选择器、类选择器、属性选择器、伪元素选择器、标签选择器； 最初，依据选择器的个数判断，如果 ID 选择器的个数都雷同，则判断类选择器的个数，如果又都雷同，则判断属性，伪类元素的个数，如果最初失去的优先级一样，则依据代码程序，后来者居上，后者笼罩前者。 上面是款式层叠的规定，依据优先级大小降序排列： 是否是行内款式，并且有 !important 标识；是否具备 !important 标识；是否具备 ID 选择器；是否具备类选择器；是否具备属性、伪元素选择器；是否具备标签选择器；是否具备通配符选择器；用户代理款式；继承款式。继承（Inheritance）继承指的是元素能够通过继承先人元素的款式给本身，然而并不是所有款式都能够继承。 文本能够继承的款式这些文本属性能够通过继承实现：color，font，font-size，font-weight，font-variant，font-style，font-family，line-height，word-spacing，white-space，letter-spacing，text-transfrom，text-indent，text-align。 其余可继承的款式列表元素的局部款式能够通过继承实现：list-style，list-style-type，list-style-position，list-style-image。表格元素的边框属性：border-collapse，border-spacing。 tips:平时咱们在开发中，最好少用 !important 标识和 ID 选择器，应该它们的优先级很高，如果咱们前面想要笼罩他们的款式则必须用雷同的形式持续增加 !important 或 ID 来实现，这种形式不利于保护。咱们能够通过类选择器、款式层叠规定来笼罩。 参考： 《CSS in Depth》 Keith J. Grant 著

网上的答案个别都是说，position 会绝对于其外层第一个设置了 position 不为 static 的元素来定位。但我感觉这样的答复还是比拟含混。position 的定位其实能够分为两种：一种是父元素设置了定位，另一种是父元素都没设置定位。 接下来咱们看一道题来进行细说。请问以下代码显示进去的成果是怎么样的？ <!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello World</title> <style> .demo1{ position: absolute; left: 0; top: 0; width: 300px; height: 100%; background-color: black; } .demo2{ margin-left:-300px; background-color: red; height: 100% } </style></head><body> <div class="demo1"></div> <div class="demo2"></div></body></html>先来颁布答案 为什么设置了 absolute 的元素能够显示，而没有设置的却不能显示？明明它们的 width 都是设置了 100%。 在所有父元素没有设置绝对定位或相对定位的状况下元素绝对于根元素定位（即html元素）其宽高百分比将依据浏览器可视宽高进行计算。所以能够看到，即便咱们没有为 html 或 body 进行高度的设置，也是能够失常显示 demo1。 父元素设置了绝对定位或相对定位的状况下元素会绝对于离本人最近的设置了绝对或相对定位的父元素进行定位宽高则依据父元素的盒子宽高（content + padding）（不含border！）进行百分比计算。所以当咱们为 body 设置相对定位，demo1会绝对于 body 定位，并且宽高也会绝对于 body 来设置。然而因为body没有设置宽高，所以 demo1 的高为 0，即不显示

position依据学习别人的材料，本人整顿下笔记，坚固下css中五种定位形式知识点，温故知新，一直在工作中晋升自我。 position 属性的五个值： staticrelativefixedabsolutesticky（粘性定位）上面间接上图和代码举例： statichtml外面所有元素的position的默认值都是static，static会追随html排版的流程挪动。static对于top，left，right，bottom设定值不会失效。 比方我在static的div下面放了一个高度120px的div，则static属性div会被挤下去。 <div class="height"></div><div class="static"></div>.static{ position:static; width:360px; height:360px;}.height{ width:750px; height:120px;} absolute相对定位，元素会它最近的一个父类容器去定位，该父类容器position的值必须是：relative、absolute、fixed，若没有这样的父元素，则该元素会绝对于body进行定位。 相对定位偏移值由其top、bottom、left、right值确定。 而相对定位的元素若超出其父元素的边界，要想将溢出的局部暗藏，则想暗藏在哪个父类里，该父类必须同时设置position为relative/absolute/fixed中一种，并且overflow须要设定为hidden。 看以下例子： <div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="absolute"></div>.height{ width:750px; height:120px;}.absolute{ position:absolute; width:240px; height:240px; right:80px; bottom:60px} 从上图看，absolute定位并不会受到到height元素排版影响。 咱们在多复制几份height元素，让页面呈现滚动轴，这时候会发现absolute元素会随滚动轴滚动。 另外，如下图，如果咱们把absolute元素嵌套入absolute元素中，则最里层的div会依据父层的absolute元素的地位去定位。正好印证了下面说的元素会它最近的一个父类容器去定位，该父类容器position的值必须是：relative、absolute、fixed，若没有这样的父元素，则该元素会绝对于body进行定位。 <div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="height"></div><div class="absolute"> <div class="absolute"></div></div> relativerelative和static很类似，都会追随html排版流程挪动，但它比static多了top，left，right，bottom的设定。即它是追随html排版流程定位之外，还会透过top，left，right，bottom去调整地位。以下举例： <div class="height"></div><div class="relative"></div>.height{ width:750px; height:120px;}.relative{ position:relative; width:360px; height:360px; top:60px; left:150px;} 从上图高深莫测，relative元素追随了height的排版而浮动了，并且依据top和left来进行定位。 减少了一个div，relative元素向下挪动。 <div class="height"></div><div class="height"></div><div class="relative"></div> relative最重要一个性能就是在他外面的子元素，如果定位形式是absolute，则子元素会依据relative的地位去定位。 <div class="height"></div><div class="height"></div><div class="relative"> <div class="absolute"></div></div>.height{ width:750px; height:120px;}.relative{ position:relative; width:360px; height:360px; top:60px; left:150px;}.absolute{ position:absolute; width:240px; height:240px; right:80px; bottom:60px;} 从这张图看，咱们会发现absolute子元素的right和bottom是依据relative元素的地位去定位的。这在平时我的项目中十分罕用。 而如果你将relative元素替换为static，则会发现absolute元素齐全忽视static元素。 <div class="height"></div><div class="height"></div><div class="static"> <div class="absolute"></div></div>.height{ width:750px; height:120px;}.static{ position:static; width:360px; height:360px;}.absolute{ position:absolute; width:240px; height:240px; right:80px; bottom:60px;} ...