点击关注本[公众号](https://www.kancloud.cn/book/dsh225/javascript_vue_css/edit#_118)获取文档最新更新,并可以领取配套于本指南的《**前端面试手册**》以及**最标准的简历模板**. [TOC] 本章是CSS考点的非重难点，因此我们采用简略回答的方式进行撰写，所以不会有太多详细的解释。 > 我们约定，每个问题后我们标记『✨』的为高频面试题 ## CSS选择器的优先级是怎样的？✨ CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器 到具体的计算层面，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下： * A 的值等于 1 的前提是存在内联样式, 否则 A = 0; * B 的值等于 ID选择器 出现的次数; * C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数; * D 的值等于 标签选择器 和 伪元素 出现的总次数 。 就比如下面的选择器，它不存在内联样式，所以A=0,不存在id选择器B=0,存在一个类选择器C=1,存在三个标签选择器D=3，那么最终计算结果为: {0, 0, 1 ,3} ~~~ ul ol li .red { ... } ~~~ 按照这个结算方式，下面的计算结果为: {0, 1, 0, 0} ~~~ #red { } ~~~ 我们的比较优先级的方式是从A到D去比较值的大小，A、B、C、D权重从左到右，依次减小。判断优先级时，从左到右，一一比较，直到比较出最大值，即可停止。 比如第二个例子的B与第一个例子的B相比，1>0,接下来就不需要比较了，第二个选择器的优先级更高。 ## link和@import的区别？ * link属于XHTML标签，而@import是CSS提供的。 * 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。 * import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。 * link方式的样式权重高于@import的权重。 * 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。 ## 有哪些方式（CSS）可以隐藏页面元素？ * `opacity:0`：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互 * `visibility:hidden`: 与上一个方法类似的效果，占据空间，但是不可以交互了 * `overflow:hidden`: 这个只隐藏元素溢出的部分，但是占据空间且不可交互 * `display:none`: 这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局 * `z-index:-9999`: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了 * `transform: scale(0,0)`: 平面变换，将元素缩放为0，但是依然占据空间，但不可交互 > 还有一些靠绝对定位把元素移到可视区域外，或者用clip-path进行裁剪的操作过于Hack，就不提了。 ## em\\px\\rem区别？ * px：绝对单位，页面按精确像素展示。 * em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 * rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持 > 移动端开发使用rem时动态设置html的字体大小 1. 动态设置html的字体大小 移动端开发时习惯使用rem单位，而rem是基于根html的字体大小的，为了适配不同尺寸屏幕需要动态设置html字体的大小。我们一般习惯于设置html的字体大小是基于iPhone6（375px）的100px。100px的取值主要是为了便于后续rem的计算，当然也可以不设置为100px。 1. 使用js设置或使用vw设置 **方法一（js）：** 习惯以iPhone6(375px)为基础，设置字体为100px，其他尺寸根据比例计算，淘宝使用。 ``` var fontSize = document.documentElement.clientWidth / 3.75; document.doucmentElement.style.fontSize = fontSize + 'px'; ``` **方法二（vw）：** vw把屏幕分成100份，屏幕宽度为100vw，同样以iPhone6（375px）为例：1vw代表3.75px，表示100px计算可得100 / 3.75 = 26.666667vw，爱奇艺使用。 ``` html{ font-size: 26.666667vw; } ``` 3、设置body字体大小 众所周知，字体大小是可以被继承传递的，为了避免html的字体大小被继承传递，我们习惯上给body设置自己所需要的字体大小 ``` body{ font-size: 16px; } ``` ## 块级元素水平居中的方法？ > 如果使用Hack的话，水平居中的方法非常多，我们只介绍主流的，奇葩的见拓展阅读 `margin:0 auto`方法 ~~~ .center{ height: 200px; width:200px; margin:0 auto; border:1px solid red; } <div class="center">水平居中</div> ~~~ flex布局，目前主流方法 ~~~ .center{ display:flex; justify-content:center; } <div class="center"> <div class="flex-div">1</div> <div class="flex-div">2</div> </div> ~~~ table方法 ~~~ .center{ display:table; margin:0 auto; border:1px solid red; } <div class="center">水平居中</div> ~~~ 还有一些通过position+(margin|transform)等方法的不一样列举了，非重点没必要。 > 拓展阅读:[16种方法实现水平居中垂直居中](https://louiszhai.github.io/2016/03/12/css-center/) ## CSS有几种定位方式？ * tatic: 正常文档流定位，此时 top, right, bottom, left 和 z-index 属性无效，块级元素从上往下纵向排布，行级元素从左向右排列。 * relative：相对定位，此时的『相对』是相对于正常文档流的位置。 * absolute：相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素它的父级、和祖父级元素都为relative，它会相对他的父级而产生偏移。 * fixed：指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。 * sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应用中的近似效果就是IOS通讯录滚动的时候的『顶屁股』。 > 文字描述很难理解，可以直接看代码 > [https://codepen.io/xiaomuzhu/pen/bPVNxj](https://codepen.io/xiaomuzhu/pen/bPVNxj) ## 如何理解z-index？✨ CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，而且z-index只能影响设置了position值的元素。 我们可以把视图上的元素认为是一摞书的层叠，而人眼是俯视的视角，设置z-index的位置，就如同设置某一本书在这摞书中的位置。 * 顶部: 最接近观察者 * ... * 3 层 * 2 层 * 1 层 * 0 层 默认层 * \-1 层 * \-2 层 * \-3 层 * ... * 底层: 距离观察者最远  > 可以结合这个例子理解z-index > [https://codepen.io/xiaomuzhu/pen/xowqjG](https://codepen.io/xiaomuzhu/pen/xowqjG) ## 如何理解层叠上下文？✨ ### 是什么？ 层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。 ### 如何产生？ 触发一下条件则会产生层叠上下文： * 根元素 (HTML), * z-index 值不为 "auto"的 绝对/相对定位， * 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex， * opacity 属性值小于 1 的元素（参考 the specification for opacity）， * transform 属性值不为 "none"的元素， * mix-blend-mode 属性值不为 "normal"的元素， * filter值不为“none”的元素， * perspective值不为“none”的元素， * isolation 属性被设置为 "isolate"的元素， * position: fixed * 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章） * \-webkit-overflow-scrolling 属性被设置 "touch"的元素 > 拓展阅读：[层叠上下文-张鑫旭](https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/) ## 清除浮动有哪些方法？ * 空div方法：`<div style="clear:both;"></div>` * Clearfix 方法：上文使用.clearfix类已经提到 * overflow: auto或overflow: hidden方法，使用BFC > 在flex已经成为布局主流之后，浮动这种东西越来越少见了，毕竟它的副作用太大 ## 你对css sprites的理解，好处是什么？ ### 是什么 ？ 雪碧图也叫CSS精灵， 是一CSS图像合成技术，开发人员往往将小图标合并在一起之后的图片称作雪碧图。 ### 如何操作？ 使用工具（PS之类的）将多张图片打包成一张雪碧图，并为其生成合适的 CSS。 每张图片都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。 使用图片时，将相应的类添加到你的元素中。 ### 好处： * 减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求） * 提前加载资源 ### 不足： * CSS Sprite维护成本较高，如果页面背景有少许改动，一般就要改这张合并的图片 * 加载速度优势在http2开启后荡然无存，HTTP2多路复用，多张图片也可以重复利用一个连接通道搞定 ## 你对媒体查询的理解？ ### 是什么 媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身,非常适合web网页应对不同型号的设备而做出对应的响应适配。 ### 如何使用？ 媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.那么媒体查询内的样式将会生效。 ~~~ <!-- link元素中的CSS媒体查询 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- 样式表中的CSS媒体查询 --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style> ~~~ > 拓展阅读：[深入理解CSS Media媒体查询](https://www.cnblogs.com/xiaohuochai/p/5848612.html) ## 你对盒模型的理解✨ ### 是什么？ 当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。  盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。 ## 标准盒模型和怪异盒模型有什么区别？✨ 在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的高度值。 因此，标准盒模型下： > 元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right  而IE怪异盒模型（IE8以下）width的宽度并不是content的宽度，而是border-left + padding-left + content的宽度值 + padding-right + border-right之和，height同理。 在怪异盒模型下： > 元素占据的宽度 = margin-left + width + margin-right  虽然现代浏览器默认使用W3C的标准盒模型，但是在不少情况下怪异盒模型更好用，于是W3C在css3中加入`box-sizing`。 ~~~ box-sizing: content-box // 标准盒模型 box-sizing: border-box // 怪异盒模型 box-sizing: padding-box // 火狐的私有模型，没人用 ~~~ > 此演示来源于拓展阅读文章 > 拓展阅读：[深入理解盒模型](https://www.cnblogs.com/xiaohuochai/p/5202597.html) ## 谈谈对BFC的理解✨ ### 是什么？ 书面解释：BFC(Block Formatting Context)这几个英文拆解 * Block: Block在这里可以理解为Block-level Box,指的是块级盒子的标准 * Formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用 BFC是指**一个独立的渲染区域，只有Block-level Box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干**. 它的作用是在**一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离**. ### 如何形成？ BFC触发条件: * 根元素，即HTML元素 * position: fixed/absolute * float 不为none * overflow不为visible * display的值为inline-block、table-cell、table-caption ### 作用是什么？ #### 防止margin发生重叠 [https://codepen.io/xiaomuzhu/pen/NZGjYQ](https://codepen.io/xiaomuzhu/pen/NZGjYQ) #### 两栏布局，防止文字环绕等 [https://codepen.io/xiaomuzhu/pen/XLmRPM](https://codepen.io/xiaomuzhu/pen/XLmRPM) #### 防止元素塌陷 [https://codepen.io/xiaomuzhu/pen/VJvbEd](https://codepen.io/xiaomuzhu/pen/VJvbEd) > 拓展阅读：[深入理解BFC](https://www.cnblogs.com/xiaohuochai/p/5248536.html) ## 请描述一下BFC、IFC、GFC 和 FFC的区别 在描述他们之间的区别之前，我们首先要了解一下什么是BFC、IFC、GFC、FFC？ > 我们知道元素有内联元素、块级元素、行内块级元素，在页面上渲染时它们的定位，排列方式等都有所不同，就是因为它们根据内部的格式化上下文进行不同的渲染，即BFC和IFC。后面CSS3新增了grid布局以及flex布局，所以也迎来了GFC、FFC **BFC（Block formatting contexts）：块级格式上下文** 页面上的一个隔离的渲染区域，那么他是如何产生的呢？可以触发BFC的元素有float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC有什么作用呢？比如说实现多栏布局 **IFC（Inline formatting contexts）：内联格式上下文** IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。 那么IFC一般有什么用呢？ 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中 **GFC（GrideLayout formatting contexts）：网格布局格式化上下文** 当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制 **FFC（Flex formatting contexts）:自适应格式上下文** display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局 ## 为什么有时候人们用translate来改变位置而不是定位？ translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。 而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。 > 拓展阅读:[CSS3 3D transform变换-张鑫旭](https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/) ## 伪类和伪元素的区别是什么？ ### 是什么？ 伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。 ### 区别 其实上文已经表达清楚两者区别了，伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变。 我们通过`p::before`对这段文本添加了额外的元素，通过`p:first-child`改变了文本的样式。 > 拓展阅读：[伪类与伪元素](http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/) ## 你对flex的理解？✨ web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局 > 具体用法移步阮一峰的[flex语法](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)、[flex实战](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)，讲得非常通俗易懂，而且我们一两句话说不清楚。 ### [flex和flex:1的含义](https://www.cnblogs.com/zhus/p/7161702.html) 首先明确一点是， `flex` 是 `flex-grow`、`flex-shrink`、`flex-basis`的缩写。 [深入理解css3中的flex-grow、flex-shrink、flex-basis （转）](https://www.cnblogs.com/ghfjj/p/6529733.html) 总结 通过上面的分析，我们就可以得出这样几个结论： 1、剩余空间＝父容器空间－子容器1.flex-basis/width - 子容器2.flex-basis/width - … 2、如果父容器空间不够，就走压缩flex-shrink，否则走扩张flex-grow； 3、如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0； 4、如果子容器的的flex-basis设置为0(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将不会为子容器预留空间。 5、如果子容器的的flex-basis设置为auto(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将会根据子容器内容的多少来预留空间。 ### space-between / align-self  ``` #flex { display: flex; height: 600px; width: 800px; border: 1px solid #dddddd; justify-content: space-between; } #flex>div { width: 200px; height: 200px; } .left { background: blue; align-self: flex-start; } .center { background: green; align-self: center; } .right { background: red; align-self: flex-end; } ``` ### 弹性元素align-content、align-items、align-self的区别 https://blog.csdn.net/freshmen2016/article/details/96108150 ### flex布局[一行三个元素,剩下的元素自动换行,左对齐] ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .father { width: 50%; box-shadow: 0 0 10px rgb(31 55 153 / 10%); background: #FFF; padding: 20px; } ul { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin: 0 -13px; } ul div { box-sizing: border-box; width: 33.33%; padding: 0 13px; margin-bottom: 24px; } ul div li { list-style: none; padding: 10px; border-radius: 4px; border: 1px solid #EBEDF0; } .father .second { height: 100px; background: yellowgreen; } </style> </head> <body> <div class="father"> <ul> <div> <li>1111</li> </div> <div> <li>222</li> </div> <div> <li>333</li> </div> <div> <li>444</li> </div> <div> <li>555</li> </div> </ul> <div class="second">我是第二个子元素</div> </div> </body> </html> ``` ## 关于CSS的动画与过渡问题 [深入理解CSS动画animation](https://www.cnblogs.com/xiaohuochai/p/5391663.html) [深入理解CSS过渡transition](https://www.cnblogs.com/xiaohuochai/p/5347930.html) ***** 参考资料： 1. [盒模型](https://segmentfault.com/a/1190000014801021) ***** ## 禁止用户选中 ~~~ .unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select: none; user-select: none; } ~~~ ## 移动端常见小问题 ### 1、滚动卡顿 ~~~ //css设置： overflow:scroll; -webkit-overflow-scrolling: touch; ~~~ ### 2、onclick事件背后有黑色背景 ~~~ //css设置： -webkit-tap-highlight-color: transparent; ~~~ ## CSS3实现0.5px的边框 **方法一：利用渐变** 关于渐变可以看下面两篇文章做深入了解： [CSS3 渐变（Gradients）](http://www.runoob.com/css3/css3-gradients.html "CSS3 渐变（Gradients）") [深入理解CSS3 gradient斜向线性渐变](http://www.zhangxinxu.com/wordpress/2013/09/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3css3-gradient%E6%96%9C%E5%90%91%E7%BA%BF%E6%80%A7%E6%B8%90%E5%8F%98/ "深入理解CSS3 gradient斜向线性渐变") 实现原理： 把元素的伪类高度设为1px,背景渐变，一半有颜色，一半透明。 线上案例：[百度糯米](https://m.nuomi.com/ "百度糯米")（没有改版的话） 代码如下： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框0.5px实现方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } .border-gradient{ position:relative; padding: 10px; } .border-gradient:after { content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-image: linear-gradient(0deg, #f00 50%, transparent 50%); } </style> </head> <body> <div class="container"> <h3>方案一：渐变</h3> <div class="border-gradient"> 原理：高度1px,背景渐变，一半有颜色，一半透明。 </div> </div> </body> </html> ``` **方法二：利用缩放** 原理：transform:scale()来达到压缩一半的目的。 线上案例：[京东](https://m.jd.com/ "京东") 代码如下： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框0.5px实现方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } .border-scale{ position:relative; padding: 10px; } .border-scale:after{ content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #f00; /* 如果不用 background-color, 使用 border-top:1px solid #f00; 效果是一样的*/ -webkit-transform: scaleY(.5); transform:scaleY(.5); } </style> </head> <body> <div class="container"> <h3>方案二：使用缩放</h3> <div class="border-scale"> 原理： 在Y轴方向上，压缩一半。 </div> </div> </body> </html> ``` **拓展：4条边框都需要** 原理：也是利用transform:scale()，只不过这次缩放的是整个内容。 代码如下： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框0.5px实现方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } 　　　　.border-all{ position:relative; padding: 10px; } .border-all:after{ content: " "; position: absolute; left: 0; top: 0; z-index:-1; width: 200%; height:200%; border:1px solid #f00; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(.5, .5); transform: scale(.5, .5); border-radius: 10px; } </style> </head> <body> <div class="container"> <h3>拓展：四周全是0.5px的线条的话</h3> <div class="border-all"> 这是实现一个盒子四周0.5px的做法， 如果加入border-radius圆角效果，会发现，有些手机会有圆角发虚的情况，不过影响不是很大。如果有两个盒子，上面一个盒子没有边框效果，下面盒子有边框效果，两个盒子一样宽，上下在一起的布局方式，你会发现，在手机上有时候会对不齐… 错开了0.5px，原因已经很明了了…还有那个z-index ，可以根据不同需求来调整使用，如果可以的话，不使用也是可以的。 </div> </div> </body> </html> ``` ### 实心箭头上下左右 ``` 实心箭头上下左右都有哦 /\* 向上的箭头 \*/ .arrow-top { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #217AFF; font-size: 0; line-height: 0; } /\* 向右的箭头 \*/ .arrow-right { width: 0; height: 0; border-right: 10px solid #217AFF; border-top: 10px solid transparent; border-bottom: 10px solid transparent; font-size: 0; line-height: 0; } /\* 向下的箭头 \*/ .arrow-bottom { width: 0; height: 0; border-left: 10px solid transparent; /\* 左边框的宽 \*/ border-right: 10px solid transparent; /\* 右边框的宽 \*/ border-top: 10px solid #217AFF; /\* 下边框的长度|高,以及背景色 \*/ font-size: 0; line-height: 0; } /\* 向左的箭头 \*/ .arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-right: 10px solid #217AFF; border-bottom: 10px solid transparent; font-size: 0; line-height: 0; } ``` ## 公众号 想要实时关注笔者最新的文章和最新的文档更新请关注公众号**程序员面试官**,后续的文章会优先在公众号更新. **简历模板**:关注公众号回复「模板」获取 《**前端面试手册**》:配套于本指南的突击手册,关注公众号回复「fed」获取