业务范围
联系我们

地址:这里是您的公司地址

电话:0896-98589990

传真:0896-98589990

邮箱:

新闻资讯当前位置:官网首页 > 新闻资讯 >
104道 CSS 面试题,助你查漏补缺(下)

发布时间:2021-01-13

  

原标题:104道 CSS 面试题,助你查漏补缺(下)

作者:CavsZhouyou

链接:https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md

作者:CavsZhouyou

链接:https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md

本部分首要是笔者在温习 CSS 相关常识和一些相关面试题时所做的笔记,假如呈现过错,期望咱们指出!

目录

  • 52.layoutviewport、visualviewport 和 idealviewport 的差异?[1]

  • 53.position:fixed;在 android 下无效怎样处理?[2]

  • 54.假如需求手动写动画,你以为最小时刻距离是多久,为什么?(阿里)[3]

  • 55.怎样让去除 inline-block 元素距离离?[4]

  • 56.overflow:scroll 时不能滑润翻滚的问题怎样处理?[5]

  • 57.有一个高度自适应的 div,里边有两个 div,一个高度 100px,期望另一个填满剩余的高度。[6]

  • 58.png、jpg、gif 这些图片格局解说一下,别离什么时分用。有没有了解过 webp?[7]

  • 59.浏览器怎样判别是否支撑 webp 格局图片[8]

  • 60.什么是 Cookie 阻隔?(或许说:恳求资源的时分不要让它带 cookie 怎样做)[9]

  • 61.style 标签写在 body 后与 body 前有什么差异?[10]

  • 62.什么是 CSS 预处理器/后处理器?[11]

  • 63.论述一下 CSSSprites[12]

  • 64.运用 rem 布局的优缺陷?[13]

  • 65.几种常见的 CSS 布局[14]

  • 66.画一条 0.5px 的线[15]

  • 67.transition 和 animation 的差异[16]

  • 68.什么是首选最小宽度?[17]

  • 69.为什么 height:100x 会无效?[18]

  • 70.min-width/max-width 和 min-height/max-height 特点间的掩盖规矩?[19]

  • 71.内联盒模型根本概念[20]

  • 72.什么是鬼魂空白节点?[21]

  • 73.什么是替换元素?[22]

  • 74.替换元素的核算规矩?[23]

  • 75.content 与替换元素的联系?[24]

  • 76.margin:auto 的填充规矩?[25]

  • 77.margin 无效的景象[26]

  • 78.border 的特殊性?[27]

  • 79.什么是基线和 x-height?[28]

  • 80.line-height 的特殊性?[29]

  • 81.vertical-align 的特殊性?[30]

  • 82.overflow 的特殊性?[31]

  • 83.无依靠肯定定位是什么?[32]

  • 84.absolute 与 overflow 的联系?[33]

  • 85.clip 裁剪是什么?[34]

  • 86.relative 的特殊性?[35]

  • 87.什么是层叠上下文?[36]

  • 88.什么是层叠水平?[37]

  • 89.元素的层叠次序?[38]

  • 90.层叠原则?[39]

  • 91.font-weight 的特殊性?[40]

  • 92.text-indent 的特殊性?[41]

  • 93.letter-spacing 与字符距离?[42]

  • 94.word-spacing 与单词距离?[43]

  • 95.white-space 与换行和空格的操控?[44]

  • 96.躲藏元素的 background-image 究竟加不加载?[45]

  • 97.怎样完结单行/多行文本溢出的省掉(...)?[46]

  • 98.常见的元素躲藏办法?[47]

  • 99.css 完结上下固定中心自适应布局?[48]

  • 100.css 两栏布局的完结?[49]

  • 101.css 三栏布局的完结?[50]

  • 102.完结一个宽高自适应的正方形[51]

  • 103.完结一个三角形[52]

  • 104.一个自适应矩形,水平笔直居中,且宽高比为 2:1[53]

打开全文

52.layoutviewport、visualviewport 和 idealviewport 的差异?[1]

53.position:fixed;在 android 下无效怎样处理?[2]

54.假如需求手动写动画,你以为最小时刻距离是多久,为什么?(阿里)[3]

55.怎样让去除 inline-block 元素距离离?[4]

56.overflow:scroll 时不能滑润翻滚的问题怎样处理?[5]

57.有一个高度自适应的 div,里边有两个 div,一个高度 100px,期望另一个填满剩余的高度。[6]

58.png、jpg、gif 这些图片格局解说一下,别离什么时分用。有没有了解过 webp?[7]

59.浏览器怎样判别是否支撑 webp 格局图片[8]

60.什么是 Cookie 阻隔?(或许说:恳求资源的时分不要让它带 cookie 怎样做)[9]

61.style 标签写在 body 后与 body 前有什么差异?[10]

62.什么是 CSS 预处理器/后处理器?[11]

63.论述一下 CSSSprites[12]

64.运用 rem 布局的优缺陷?[13]

65.几种常见的 CSS 布局[14]

66.画一条 0.5px 的线[15]

67.transition 和 animation 的差异[16]

68.什么是首选最小宽度?[17]

69.为什么 height:100x 会无效?[18]

70.min-width/max-width 和 min-height/max-height 特点间的掩盖规矩?[19]

71.内联盒模型根本概念[20]

72.什么是鬼魂空白节点?[21]

73.什么是替换元素?[22]

74.替换元素的核算规矩?[23]

75.content 与替换元素的联系?[24]

76.margin:auto 的填充规矩?[25]

77.margin 无效的景象[26]

78.border 的特殊性?[27]

79.什么是基线和 x-height?[28]

80.line-height 的特殊性?[29]

81.vertical-align 的特殊性?[30]

82.overflow 的特殊性?[31]

83.无依靠肯定定位是什么?[32]

84.absolute 与 overflow 的联系?[33]

85.clip 裁剪是什么?[34]

86.relative 的特殊性?[35]

87.什么是层叠上下文?[36]

88.什么是层叠水平?[37]

89.元素的层叠次序?[38]

90.层叠原则?[39]

91.font-weight 的特殊性?[40]

92.text-indent 的特殊性?[41]

93.letter-spacing 与字符距离?[42]

94.word-spacing 与单词距离?[43]

95.white-space 与换行和空格的操控?[44]

96.躲藏元素的 background-image 究竟加不加载?[45]

97.怎样完结单行/多行文本溢出的省掉(...)?[46]

98.常见的元素躲藏办法?[47]

99.css 完结上下固定中心自适应布局?[48]

100.css 两栏布局的完结?[49]

101.css 三栏布局的完结?[50]

102.完结一个宽高自适应的正方形[51]

103.完结一个三角形[52]

104.一个自适应矩形,水平笔直居中,且宽高比为 2:1[53]

的宽度,所以页面会呈现翻滚条左右移动,fixed的元素是相对layout viewport来固定方位的,而不是移动端屏幕来固定方位的

,所以会呈现感觉fixed无效的状况。

假如想完结fixed相关于屏幕的固定效果,咱们需求改动的是viewport的巨细为ideal viewport,能够如下设置:

<metaname= "viewport"content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca

le=1.0,user-scalable=no" />

54.假如需求手动写动画,你以为最小时刻距离是多久,为什么?(阿里) 大都显现器默许频率是60Hz,即1秒改写60次,所以理论上最小距离为1/60*1000ms=16.7ms

55.怎样让去除 inline-block 元素距离离? 移除空格、运用margin负值、运用font-size:0、letter-spacing、word-spacing

详细材料能够参阅: 《去除 inline-block 元素距离离的 N 种办法》[54]

56.overflow:scroll 时不能滑润翻滚的问题怎样处理? 以下代码可处理这种卡顿的问题:-webkit-overflow-scrolling:touch;是由于这行代码启用了硬件加速特性,所以滑动很流

畅。

详细材料能够参阅: 《处理页面运用 overflow:scroll 在 iOS 上滑动卡顿的问题》[55]

57.有一个高度自适应的 div,里边有两个 div,一个高度 100px,期望另一个填满剩余的高度。 (1)外层div运用position:relative;高度要求自适应的div运用position:absolute;top:100px;bottom:0;

left:0;right:0;

(2)运用flex布局,设置主轴为竖轴,第二个div的flex-grow为1。

详细材料能够参阅: 《有一个高度自适应的 div,里边有两个 div,一个高度 100px,期望另一个填满剩余的高度(三种计划)》[56]

58.png、jpg、gif 这些图片格局解说一下,别离什么时分用。有没有了解过 webp?

相关常识点:

(1)BMP,是无损的、既支撑索引色也支撑直接色的、点阵图。这种图片格局几乎没有对数据进行紧缩,所以BMP格局的图片一般

具有较大的文件巨细。

(2)GIF是无损的、选用索引色的、点阵图。选用LZW紧缩算法进行编码。文件小,是GIF格局的长处,一同,GIF格局还具

有支撑动画以及通明的长处。但,GIF格局仅支撑8bit的索引色,所以GIF格局适用于对色彩要求不高一同需求文件体积

较小的场景。

(3)JPEG是有损的、选用直接色的、点阵图。JPEG的图片的长处,是选用了直接色,得益于更丰厚的色彩,JPEG十分合适用来

存储相片,与GIF比较,JPEG不合适用来存储企业Logo、线框类的图。由于有损紧缩会导致图片含糊,而直接色的选用,

又会导致图片文件较GIF更大。

(4)PNG-8是无损的、运用索引色的、点阵图。PNG是一种比较新的图片格局,PNG-8是十分好的GIF格局替代者,在或许的

状况下,应该尽或许的运用PNG-8而不是GIF,由于在相同的图片效果下,PNG-8具有更小的文件体积。除此之外,PNG-8

还支撑通明度的调理,而GIF并不支撑。现在,除非需求动画的支撑,不然咱们没有理由运用GIF而不是PNG-8。

(5)PNG-24是无损的、运用直接色的、点阵图。PNG-24的长处在于,它紧缩了图片的数据,使得相同效果的图片,PNG-24格

式的文件巨细要比BMP小得多。当然,PNG24的图片仍是要比JPEG、GIF、PNG-8大得多。

(6)SVG是无损的、矢量图。SVG是矢量图。这意味着SVG图片由直线和曲线以及制造它们的办法组成。当你扩大一个SVG图

片的时分,你看到的仍是线和曲线,而不会呈现像素点。这意味着SVG图片在扩大时,不会失真,所以它十分合适用来制造企

业Logo、Icon等。

(7)WebP是谷歌开发的一种新图片格局,WebP是一同支撑有损和无损紧缩的、运用直接色的、点阵图。从姓名就能够看出来它是

为Web而生的,什么叫为Web而生呢?便是说相同质量的图片,WebP具有更小的文件体积。现在网站上充满了许多的图片,

假如能够下降每一个图片的文件巨细,那么将大大削减浏览器和服务器之间的数据传输量,然后下降拜访推迟,进步拜访体会。

•在无损紧缩的状况下,相同质量的WebP图片,文件巨细要比PNG小26%;

•在有损紧缩的状况下,具有相同图片精度的WebP图片,文件巨细要比JPEG小25%~34%;

•WebP图片格局支撑图片通明度,一个无损紧缩的WebP图片,假如要支撑通明度只需求22%的分外文件巨细。

可是现在只需Chrome浏览器和Opera浏览器支撑WebP格局,兼容性不太好。

答复:

我了解到的总共有七种常见的图片的格局。

(1)榜首种是BMP格局,它是无损紧缩的,支撑索引色和直接色的点阵图。由于它根本上没有进行紧缩,因而它的文件体积一般比

较大。

(2)第二种是GIF格局,它是无损紧缩的运用索引色的点阵图。由于运用了LZW紧缩办法,因而文件的体积很小。而且GIF还

支撑动画和通明度。但由于它运用的是索引色,所以它适用于一些对色彩要求不高且需求文件体积小的场景。

(3)第三种是JPEG格局,它是有损紧缩的运用直接色的点阵图。由于运用了直接色,色彩较为丰厚,一般适用于来存储相片。但

由于运用的是直接色,或许文件的体积相关于GIF格局来说更大。

(4)第四种是PNG-8格局,它是无损紧缩的运用索引色的点阵图。它是GIF的一种很好的替代格局,它也支撑通明度的调整,并

且文件的体积相关于GIF格局更小。一般来说假如不是需求动画的状况,咱们都能够运用PNG-8格局替代GIF格局。

(5)第五种是PNG-24格局,它是无损紧缩的运用直接色的点阵图。PNG-24的长处是它运用了紧缩算法,所以它的体积比BMP

格局的文件要小得多,可是相关于其他的几种格局,仍是要大一些。

(6)第六种格局是svg格局,它是矢量图,它记载的图片的制造办法,因而对矢量图进行扩大和缩小不会发生锯齿和失真。它一般

合适于用来制造一些网站logo或许图标之类的图片。

(7)第七种格局是webp格局,它是支撑有损和无损两种紧缩办法的运用直接色的点阵图。运用webp格局的最大的长处是,在相

同质量的文件下,它具有更小的文件体积。因而它十分合适于网络图片的传输,由于图片体积的削减,意味着恳求时刻的减小,

这样会进步用户的体会。这是谷歌开发的一种新的图片格局,现在在兼容性上还不是太好。

详细材料能够参阅: 《图片格局那么多,哪种更合适你?》[57]

59.浏览器怎样判别是否支撑 webp 格局图片 (1)宽高判别法。经过创立image方针,将其src特点设置为webp格局的图片,然后在事情中获取图片的宽高,如

果能够获取,则阐明浏览器支撑webp格局图片。假如不能获取或许触发了函数,那么就阐明浏览器不支撑webp格

式的图片。

(2)canvas判别办法。咱们能够动态的创立一个canvas方针,经过canvas的toDataURL将设置为webp格局,然后判别

回来值中是否含有image/webp字段,假如包括则阐明支撑WebP,反之则不支撑。

详细材料能够参阅: 《判别浏览器是否支撑 WebP 图片》[58] 《toDataURL》[59]

60.什么是 Cookie 阻隔?(或许说:恳求资源的时分不要让它带 cookie 怎样做) 网站向服务器恳求的时分,会主动带上cookie这样添加表头信息量,使恳求变慢。

假如静态文件都放在主域名下,那静态文件恳求的时分都带有的cookie的数据提交给server的,十分糟蹋流量,所以不如阻隔开

,静态资源放CDN。

由于cookie有域的约束,因而不能跨域提交恳求,故运用非首要域名的时分,恳求头中就不会带有cookie数据,这样能够下降请

求头的巨细,下降恳求时刻,然后到达下降全体恳求延时的意图。

一同这种办法不会将cookie传入WebServer,也削减了WebServer对cookie的处理剖析环节,进步了webserver的

http恳求的解析速度。

详细材料能够参阅: 《CDN 是什么?运用 CDN 有什么优势?》[60]

61.style 标签写在 body 后与 body 前有什么差异? 页面加载自上而下当然是先加载款式。写在body标签后由于浏览器以逐行办法对HTML文档进行解析,当解析到写在尾部的款式

表(外联或写在style标签)会导致浏览器中止之前的烘托,等候加载且解析款式表完结之后从头烘托,在windows的IE下可

能会呈现FOUC现象(即款式失效导致的页面闪耀问题)

62.什么是 CSS 预处理器/后处理器? CSS预处理器界说了一种新的言语,其根本思想是,用一种专门的编程言语,为CSS添加了一些编程的特性,将CSS作为方针生成

文件,然后开发者就只需运用这种言语进行编码作业。浅显的说,CSS预处理器用一种专门的编程言语,进行Web页面款式规划,然

后再编译成正常的CSS文件。

预处理器例如:LESS、Sass、Stylus,用来预编译Sass或less csssprite,增强了css代码的复用性,还有层级、mixin、

变量、循环、函数等,具有很便利的UI组件模块化开发才能,极大的进步作业效率。

CSS后处理器是对CSS进行处理,并终究生成CSS的预处理器,它归于广义上的CSS预处理器。咱们很久曾经就在用CSS后

处理器了,最典型的比方是CSS紧缩工具(如clean-css),只不过曾经没独自拿出来说过。还有最近比较火的Autoprefixer,

以CanIUse上的浏览器支撑数据为根底,主动处理兼容性问题。

后处理器例如:PostCSS,一般被视为在完结的款式表中依据CSS标准处理CSS,让其更有用;现在最常做的是给CSS特点添加浏

览器私有前缀,完结跨浏览器兼容性的问题。

详细材料能够参阅: 《CSS 预处理器和后处理器》[61]

63.论述一下 CSSSprites 将一个页面涉及到的一切图片都包括到一张大图中去,然后运用CSS的background-image,background-repeat,background

-position的组合进行布景定位。运用CSSSprites能很好地削减网页的http恳求,然后很好的进步页面的功能;CSSSprites

能削减图片的字节。

长处:

削减HTTP恳求数,极大地进步页面加载速度

添加图片信息重复度,进步紧缩比,削减图片巨细

替换风格便利,只需在一张或几张图片上修正色彩或款式即可完结

缺陷:

图片兼并费事

保护费事,修正一个图片或许需求从头布局整个图片,款式

64.运用 rem 布局的优缺陷? 长处:

在屏幕分辨率千差万别的年代,只需将rem与屏幕分辨率相关起来就能够完结页面的全体缩放,使得在设备上的展现都统一同来了。

而且现在浏览器根本都现已支撑rem了,兼容性也十分的好。

缺陷:

(1)在奇葩的dpr设备上体现效果不太好,比方一些华为的高端机型用rem布局会呈现紊乱。

(2)运用iframe引证也会呈现问题。

(3)rem在多屏幕尺度适配上与当时两大渠道的规划哲学不共同。即大屏的呈现究竟是为了看得又大又清楚,仍是为了看的更多的问

题。

详细材料能够参阅: 《css3 的字体巨细单位 rem 究竟好在哪?》[62] 《VW:是时分抛弃 REM 布局了》[63] 《为什么规划稿是 750px》[64] 《运用 Flexible 完结手淘 H5 页面的终端适配》[65]

65.几种常见的 CSS 布局

详细的材料能够参阅: 《几种常见的 CSS 布局》[66]

66.画一条 0.5px 的线 选用meta viewport的办法

选用border-image的办法

选用transform:scale的办法

详细材料能够参阅: 《怎样画一条 0.5px 的边(更新)》[67]

67.transition 和 animation 的差异 transition重视的是CSS property的改动,property值和时刻的联系是一个三次贝塞尔曲线。

animation效果于元素自身而不是款式特点,能够运用关键帧的概念,应该说能够完结更自在的动画效果。

详细材料能够参阅: 《CSSanimation 与 CSStransition 有何差异?》[68] 《CSS3Transition 和 Animation 差异及比较》[69] 《CSS 动画简介》[70] 《CSS 动画:animation、transition、transform、translate》[71]

68.什么是首选最小宽度? “首选最小宽度”,指的是元素最合适的最小宽度。

东亚文字(如中文)最小宽度为每个汉字的宽度。

西方文字最小宽度由特定的接连的英文字符单元决议。并不是一切的英文字符都会组成接连单元,一般会终止于空格(一般空格)、短

横线、问号以及其他非英文字符等。

假如想让英文字符和中文相同,每一个字符都用最小宽度单元,能够试试运用CSS中的word-break: break-all。

69.为什么 height:100%会无效? 关于一般文档流中的元素,百分比高度值要想起效果,其父级有必要有一个能够收效的高度值。

原因是假如包括块的高度没有显式指定(即高度由内容决议),而且该元素不是肯定定位,则核算值为auto,由于解说成了auto,

所以无法参加核算。

运用肯定定位的元素会有核算值,即便先人元素的height核算为auto也是如此。

70.min-width/max-width 和 min-height/max-height 特点间的掩盖规矩? (1)max-width会掩盖width,即便width是行类款式或许设置了!important。

(2)min-width会掩盖max-width,此规矩发生在min-width和max-width抵触的时分。

71.内联盒模型根本概念 (1)内容区域(content area)。内容区域指一种盘绕文字看不见的盒子,其巨细仅受字符自身特性操控,本质上是一个字符盒子

(character box);可是有些元素,如图片这样的替换元素,其内容显着不是文字,不存在字符盒子之类的,因而,关于这些

元素,内容区域能够当作元素自身。

(2)内联盒子(inline box)。“内联盒子”不会让内容成块显现,而是排成一行,这儿的“内联盒子”实践指的便是元素的“外在盒

子”,用来决议元素是内联仍是块级。该盒子又能够细分为“内联盒子”和“匿名内联盒子”两类。

(3)行框盒子(line box),每一行便是一个“行框盒子”(实线框标示),每个“行框盒子”又是由一个一个“内联盒子”组成的。

(4)包括块(containing box),由一行一行的“行框盒子”组成。

72.什么是鬼魂空白节点? “鬼魂空白节点”是内联盒模型中十分重要的一个概念,详细指的是:在HTML5文档声明中,内联元素的一切解析和烘托体现就如同

每个行框盒子的前面有一个“空白节点”相同。这个“空白节点”永久通明,不占有任何宽度,看不见也无法经过脚本获取,就如同鬼魂

相同,但又确确实实地存在,体现如同文本节点相同,因而,我称之为“鬼魂空白节点”。

73.什么是替换元素? 经过修正某个特点值呈现的内容就能够被替换的元素就称为“替换元素”。因而,<img>、<object>、<video>、<iframe>或许表

单元素<textarea>和<input>和<select>都是典型的替换元素。

替换元素除了内容可替换这一特性以外,还有以下一些特性。

(1)内容的外观不受页面上的CSS的影响。用专业的话讲便是在款式体现在CSS效果域之外。怎样更改替换元素自身的外观需求

相似appearance特点,或许浏览器自身露出的一些款式接口,

(2)有自己的尺度。在Web中,许多替换元素在没有清晰尺度设定的状况下,其默许的尺度(不包括边框)是300像素×150像

素,如<video>、<iframe>或许<canvas>等,也有少部分替换元素为0像素,如<img>图片,而表单元素的替换元素

的尺度则和浏览器有关,没有显着的规矩。

(3)在许多CSS特点上有自己的一套体现规矩。比较具有代表性的便是vertical-align特点,关于替换元素和非替换元素,ve

rtical-align特点值的解说是不相同的。比方说vertical-align的默许值的baseline,很简单的特点值,基线之意,

被界说为字符x的下边际,而替换元素的基线却被硬生生界说成了元素的下边际。

(4)一切的替换元素都是内联水平元素,也便是替换元素和替换元素、替换元素和文字都是能够在一行显现的。可是,替换元素默许

的display值却是不相同的,有的是inline,有的是inline-block。

74.替换元素的核算规矩? 替换元素的尺度从内而外分为3类:固有尺度、HTML尺度和CSS尺度。

(1)固有尺度指的是替换内容本来的尺度。例如,图片、视频作为一个独立文件存在的时分,都是有着自己的宽度和高度的。

(2)HTML尺度只能经过HTML原生特点改动,这些HTML原生特点包括<img>的width和height特点、<input>的s

ize特点、<textarea>的cols和rows特点等。

(3)CSS尺度特指能够经过CSS的width和height或许max-width/min-width和max-height/min-height设置的

尺度,对应盒尺度中的content box。

这3层结构的核算规矩详细如下

(1)假如没有CSS尺度和HTML尺度,则运用固有尺度作为终究的宽高。

(2)假如没有CSS尺度,则运用HTML尺度作为终究的宽高。

(3)假如有CSS尺度,则终究尺度由CSS特点决议。

(4)假如“固有尺度”含有固有的宽高份额,一同仅设置了宽度或仅设置了高度,则元素依然依照固有的宽高份额显现。

(5)假如上面的条件都不契合,则终究宽度体现为300像素,高度为150像素。

(6)内联替换元素和块级替换元素运用上面同一套尺度核算规矩。

75.content 与替换元素的联系? content特点生成的方针称为“匿名替换元素”。

(1)咱们运用content生成的文本是无法选中、无法仿制的,如同设置了user select:none声明一般,可是一般元素的文本

却能够被轻松选中。一同,content生成的文本无法被屏幕阅览设备读取,也无法被搜索引擎抓取,因而,千万不要自以为是

地把重要的文本信息运用content特点生成,由于这对可拜访性和SEO都很不友好。

(2)content生成的内容不能左右:empty伪类。

(3)content动态生成值无法获取。

76.margin:auto 的填充规矩? margin的 'auto'可不是铺排,是具有激烈的核算意味的关键字,用来核算元素对应方向应该取得的剩余距离巨细。可是触发mar

gin:auto核算有一个前提条件,便是width或height为auto时,元素是具有对应方向的主动填充特性的。

(1)假如一侧定值,一侧auto,则auto为剩余空间巨细。

(2)假如两头均是auto,则平分剩余空间。

77.margin 无效的景象 (1)display核算值inline的非替换元素的笔直margin是无效的。关于内联替换元素,笔直margin有用,而且没有ma

rgin兼并的问题。

(2)表格中的<tr>和<td>元素或许设置display核算值是table-cell或table-row的元素的margin都是无效的。

(3)肯定定位元素非定位方位的margin值“无效”。

(4)定高容器的子元素的margin-bottom或许宽度定死的子元素的margin-right的定位“失效”。

78.border 的特殊性? (1)border-width却不支撑百分比。

(2)border-style的默许值是none,有一部分人或许会误以为是solid。这也是单纯设置border-width或border-col

or没有边框显现的原因。

(3)border-style:double的体现规矩:双线宽度永久持平,中心阻隔±1。

(4)border-color默许色彩便是color色值。

(5)默许background布景图片是相关于padding box定位的。

79.什么是基线和 x-height? 字母x的下边际(线)便是咱们的基线。

x-height指的便是小写字母x的高度,术语描绘便是基线和等分线(meanline)(也称作中线,midline)之间的距离。在C

SS国际中,middle指的是基线往上1/2x-height高度。咱们能够近似理解为字母x交叉点那个方位。

ex是CSS中的一个相对单位,指的是小写字母x的高度,没错,便是指x-height。ex的价值就在其副业上不受字体和字号影

响的内联元素的笔直居中对齐效果。内联元素默许是基线对齐的,而基线便是x的底部,而1ex便是一个x的高度。

80.line-height 的特殊性? (1)关于非替换元素的纯内联元素,其可视高度完全由line-height决议。关于文本这样的纯内联元素,line-height便是高

度核算的柱石,用专业说法便是指定了用来核算行框盒子高度的根底高度。

(2)内联元素的高度由固定高度和不固定高度组成,这个不固定的部分便是这儿的“行距”。换句话说,line-height之所以起作

用,便是经过改动“行距”来完结的。在CSS中,“行距”涣散在当时文字的上方和下方,也便是即便是榜首行文字,其上方也是

有“行距”的,只不过这个“行距”的高度只是是完好“行距”高度的一半,因而,也被称为“半行距”。

(3)行距=line-height-font-size。

(4)border以及line-height等传统CSS特点并没有小数像素的概念。假如标示的是文字上边距,则向下取整;假如是文字下

边距,则向上取整。

(5)关于纯文本元素,line-height直接决议了终究的高度。可是,假如一同有替换元素,则line-height只能决议最小高度。

(6)关于块级元素,line-height对其自身是没有任何效果的,咱们平常改动line-height,块级元素的高度跟着改动实践上是

经过改动块级元素里边内联等级元素占有的高度完结的。

(7)line-height的默许值是normal,还支撑数值、百分比值以及长度值。为数值类型时,其终究的核算值是和当时font-si

ze相乘后的值。为百分比值时,其终究的核算值是和当时font-size相乘后的值。为长度值时本意不变。

(8)假如运用数值作为line-height的特点值,那么一切的子元素承继的都是这个值;可是,假如运用百分比值或许长度值作为

特点值,那么一切的子元素承继的是终究的核算值。

(9)不管内联元素line-height怎样设置,终究父级元素的高度都是由数值大的那个line-height决议的。

(10)只需有“内联盒子”在,就必定会有“行框盒子”,便是每一行内联元素外面包裹的一层看不见的盒子。然后,要点来了,在每个

“行框盒子”前面有一个宽度为0的具有该元素的字体和行高特点的看不见的“鬼魂空白节点”。

81.vertical-align 的特殊性? (1)vertical-align的默许值是baseline,即基线对齐,而基线的界说是字母x的下边际。因而,内联元素默许都是沿着字

母x的下边际对齐的。关于图片等替换元素,往往运用元素自身的下边际作为基线。:一个inline-block元素,假如里边

没有内联元素,或许overflow不是visible,则该元素的基线便是其margin底边际;不然其基线便是元素里边最终一行

内联元素的基线。

(2)vertical-align:top便是笔直上边际对齐,假如是内联元素,则和这一行方位最高的内联元素的顶部对齐;假如display

核算值是table-cell的元素,咱们无妨脑补成<td>元素,则和<tr>元素上边际对齐。

(3)vertical-align:middle是中心对齐,关于内联元素,元素的笔直中心点和行框盒子基线往上1/2x-height处对齐。对

于table-cell元素,单元格填充盒子相关于外面的表格行居中对齐。

(4)vertical-align支撑数值特点,依据数值的不同,相关于基线往上或往下偏移,假如是负值,往下偏移,假如是正值,往上

偏移。

(5)vertical-align特点的百分比值则是相关于line-height的核算值核算的。

(6)vertical-align起效果是有前提条件的,这个前提条件便是:只能运用于内联元素以及display值为table-cell的元

素。

(7)table-cell元素设置vertical-align笔直对齐的是子元素,可是其效果的并不是子元素,而是table-cell元素自身。

82.overflow 的特殊性? (1)一个设置了overflow:hidden声明的元素,假定一同存在border特点和padding特点,则当子元素内容超出容器宽度

高度约束的时分,取舍的鸿沟是border box的内边际,而非padding box的内边际。

(2)HTML中有两个标签是默许能够发生翻滚条的,一个是根元素<html>,另一个是文本域<textarea>。

(3)翻滚条会占用容器的可用宽度或高度。

(4)元素设置了overflow:hidden声明,里边内容高度溢出的时分,翻滚依然存在,只是翻滚条不存在!

83.无依靠肯定定位是什么? 没有设置left/top/right/bottom特点值的肯定定位称为“无依靠肯定定位”。

无依靠肯定定位其定位的方位和没有设置position:absolute时分的方位相关。

84.absolute 与 overflow 的联系? (1)假如overflow不是定位元素,一同肯定定位元素和overflow容器之间也没有定位元素,则overflow无法对absolute

元素进行取舍。

(2)假如overflow的特点值不是hidden而是auto或许scroll,即便肯定定位元素高宽比overflow元素高宽还要大,也

都不会呈现翻滚条。

(3)overflow元素自身transform的时分,Chrome和Opera浏览器下的overflow取舍是无效的。

85.clip 裁剪是什么? 所谓“可拜访性躲藏”,指的是尽管内容肉眼看不见,可是其他辅佐设备却能够进行辨认和拜访的躲藏。

clip取舍被我称为“最佳可拜访性躲藏”的别的一个原因便是,它具有更强的遍及适应性,任何元素、任何场景都能够无障碍运用。

86.relative 的特殊性? (1)相对定位元素的left/top/right/bottom的百分比值是相关于包括块核算的,而不是自身。留意,尽管定位位移是相对自身,可是百分比值的核算值不是。

(2)top和bottom这两个笔直方向的百分比值核算跟height的百分比值是相同的,都是相对高度核算的。一同,假如包括块的高度是auto,那么核算值是0,偏移无效,也便是说,假如父元素没有设定高度或许不是“格局化高度”,那么relative相似top:20%的代码等同于top:0。

(3)当相对定位元素一同运用敌对方向定位值的时分,也便是top/bottom和left/right一同运用的时分,只需一个方向的定位特点会起效果。而谁起效果则是与文档流的次序有关的,默许的文档流是自上而下、从左往右,因而top/bottom一同运用的时分,bottom失效;left/right一同运用的时分,right失效。

87.什么是层叠上下文? 层叠上下文,英文称作stacking context,是HTML中的一个三维的概念。假如一个元素含有层叠上下文,咱们能够理解为这个元

素在z轴上就“略胜一筹”。

层叠上下文元素有如下特性:

(1)层叠上下文的层叠水平要比一般元素高(原因后边会阐明)。

(2)层叠上下文能够阻断元素的混合形式。

(3)层叠上下文能够嵌套,内部层叠上下文及其一切子元素均受制于外部的“层叠上下文”。

(4)每个层叠上下文和兄弟元素独立,也便是说,当进行层叠改动或烘托的时分,只需求考虑子孙元素。

(5)每个层叠上下文是自成体系的,当元素发生层叠的时分,整个元素被以为是在父层叠上下文的层叠次序中。

层叠上下文的创立:

(1)页面根元素天然生成具有层叠上下文,称为根层叠上下文。根层叠上下文指的是页面根元素,能够当作是<html>元素。因而,页面中一切的元素必定处于至少一个“层叠结界”中。

(2)关于position值为relative/absolute以及Firefox/IE浏览器(不包括Chrome浏览器)下含有position:fixed声明的定位元素,当其z-index值不是auto的时分,会创立层叠上下文。Chrome等WebKit内核浏览器下,position:fixed元素天然层叠上下文元素,无须z-index为数值。依据我的测验,现在IE和Firefox仍是老套路。

(3)其他一些CSS3特点,比方元素的opacity值不是1。

88.什么是层叠水平? 层叠水平,英文称作stacking level,决议了同一个层叠上下文中元素在z轴上的显现次序。

清楚明了,一切的元素都有层叠水平,包括层叠上下文元素,也包括一般元素。可是,对一般元素的层叠水平讨论只限制在当时层叠上

下文元素中。

89.元素的层叠次序?

层叠次序,英文称作 stacking order,表明元素发生层叠时有着特定的笔直显现次序。

层叠次序 90.层叠原则? (1)谁大谁上:当具有显着的层叠水平标识的时分,如收效的z-index特点值,在同一个层叠上下文范畴,层叠水平值大的那一个掩盖小的那一个。

(2)后发先至:当元素的层叠水平共同、层叠次序相同的时分,在DOM流中处于后边的元素会掩盖前面的元素。

91.font-weight 的特殊性? 假如运用数值作为font-weight特点值,有必要是100~900的整百数。由于这儿的数值只是是表面长得像数值,实践上是一个具有特定意义的关键字,而且这儿的数值关键字和字母关键字之间是有对应联系的。

92.text-indent 的特殊性? (1)text-indent仅对榜首行内联盒子内容有用。

(2)非替换元素以外的display核算值为inline的内联元素设置text-indent值无效,假如核算值inline-block/inli

ne-table则会收效。

(3)<input>标签按钮text-indent值无效。

(4)<button>标签按钮text-indent值有用。

(5)text-indent的百分比值是相关于当时元素的“包括块”核算的,而不是当时元素。

93.letter-spacing 与字符距离? letter-spacing能够用来操控字符之间的距离,这儿说的“字符”包括英文字母、汉字以及空格等。

letter-spacing具有以下一些特性。

(1)承继性。

(2)默许值是normal而不是0。尽管说正常状况下,normal的核算值便是0,但两者仍是有不同的,在有些场景下,letter-spacing会调整normal的核算值以完结更好的版面布局。

(3)支撑负值,且值足够大的时分,会让字符构成堆叠,乃至反向摆放。

(4)和text-indent特点相同,不管值多大或多小,榜首行必定会保存至少一个字符。

(5)支撑小数值,即便0.1px也是支撑的。

(6)暂不支撑百分比值。

94.word-spacing 与单词距离? letter-spacing效果于一切字符,但word-spacing仅效果于空格字符。换句话说,word-spacing的效果便是添加空格的空隙

宽度。

95.white-space 与换行和空格的操控? white-space特点声明了怎样处理元素内的空白字符,这类空白字符包括Space(空格)键、Enter(回车)键、Tab(制表符)

键发生的空白。因而,white-space能够决议图文内容是否在一行显现(回车空格是否收效),是否显现大段接连空白(空格是否

收效)等。

其特点值包括下面这些。

•normal:兼并空白字符和换行符。

•pre:空白字符不兼并,而且内容只在有换行符的当地换行。

•nowrap:该值和normal相同会兼并空白字符,但不答应文本盘绕。

•pre-wrap:空白字符不兼并,而且内容只在有换行符的当地换行,一同答应文本盘绕。

•pre-line:兼并空白字符,但只在有换行符的当地换行,答应文本盘绕。

96.躲藏元素的 background-image 究竟加不加载?

相关常识点:

依据测验,一个元素假如display核算值为none,在IE浏览器下(IE8~IE11,更高版别不确定)依然会发送图片恳求,Fire

fox浏览器不会,至于Chrome和Safari浏览器则好像愈加智能一点:假如躲藏元素一同又设置了background-image,则图片

依然会去加载;假如是父元素的display核算值为none,则布景图不会恳求,此刻浏览器或许放心肠以为这个布景图暂时是不会使

用的。

假如不是background-image,而是<img>元素,则设置display:none在一切浏览器下仍旧都会恳求图片资源。

还需求留意的是假如设置的款式没有对应的元素,则background-image也不会加载。hover状况下的background-image,在触

发时加载。

答复:

-(1)元素的布景图片

-元素自身设置 display:none,会恳求图片 -父级元素设置 display:none,不会恳求图片 -款式没有元素运用,不会恳求-:hover 款式下,触发时恳求

-(2)img 标签图片任何状况下都会恳求图片

详细材料能够参阅: 《CSS 操控前端图片 HTTP 恳求的各种状况示例》[72]

97.怎样完结单行/多行文本溢出的省掉(...)? /*单行文本溢出*/

p{

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

/*多行文本溢出*/

p{

position: relative;

line-height: 1.5em;

/*高度为需求显现的行数*行高,比方这儿咱们显现两行,则为3*/

height: 3em;

overflow: hidden;

}

p:after{

content: '...';

position: absolute;

bottom: 0;

right: 0;

background-color: #fff;

}

详细材料能够参阅: 《【CSS/JS】怎样完结单行/多行文本溢出的省掉》[73] 《CSS 多行文本溢出省掉显现》[74]

98.常见的元素躲藏办法?

-(1)运用 display:none;躲藏元素,烘托树不会包括该烘托方针,因而该元素不会在页面中占有方位,也不会呼应绑定的监听事情。

-(2)运用 visibility:hidden;躲藏元素。元素在页面中仍占有空间,可是不会呼应绑定的监听事情。

-(3)运用 opacity:0;将元素的通明度设置为 0,以此来完结元素的躲藏。元素在页面中依然占有空间,而且能够呼应元素绑定的监听事情。

-(4)经过运用肯定定位将元素移除可视区域内,以此来完结元素的躲藏。

-(5)经过 z-index 负值,来使其他元素遮盖住该元素,以此来完结躲藏。

-(6)经过 clip/clip-path 元素裁剪的办法来完结元素的躲藏,这种办法下,元素仍在页面中占有方位,可是不会呼应绑定的监听事情。

-(7)经过 transform:scale(0,0)来将元素缩放为 0,以此来完结元素的躲藏。这种办法下,元素仍在页面中占有方位,可是不会呼应绑定的监听事情。

详细材料能够参阅: 《CSS 躲藏元素的八种办法》[75]

99.css 完结上下固定中心自适应布局? 运用肯定定位完结 body{

padding: 0;

margin: 0;

}

.header{

position: absolute;

top: 0;

width: 100%;

height: 100px;

background: red;

}

.container{

position: absolute;

top: 100px;

bottom: 100px;

width: 100%;

background: green;

}

.footer{

position: absolute;

bottom: 0;

height: 100px;

width: 100%;

background: red;

}

运用 flex布局完结 html,

body{

height: 100%;

}

body{

display: flex;

padding: 0;

margin: 0;

flex-direction: column;

}

.header{

height: 100px;

background: red;

}

.container{

flex-grow: 1;

background: green;

}

.footer{

height: 100px;

background: red;

}

详细材料能够参阅: 《css 完结上下固定中心自适应布局》[76]

100.css 两栏布局的完结?

相关材料:

/*两栏布局一般指的是页面中总共两栏,左面固定,右边自适应的布局,总共有四种完结的办法。*/

/*以左面宽度固定为200px为例*/

/*(1)运用起浮,将左面元素宽度设置为200px,而且设置向左起浮。将右边元素的margin-left设置为200px,宽度设置为auto(默以为auto,撑满整个父元素)。*/

.outer{

height: 100px;

}

.left{

float: left;

height: 100px;

width: 200px;

background: tomato;

}

.right{

margin-left: 200px;

width: auto;

height: 100px;

background: gold;

}

/*(2)第二种是运用flex布局,将左面元素的扩大和缩小份额设置为0,根底巨细设置为200px。将右边的元素的扩大份额设置为1,缩小份额设置为1,根底巨细设置为auto。*/

.outer{

display: flex;

height: 100px;

}

.left{

flex-shrink: 0;

flex-grow: 0;

flex-basis: 200px;

background: tomato;

}

.right{

flex: auto;

/*11auto*/

background: gold;

}

/*(3)第三种是运用肯定定位布局的办法,将父级元素设置相对定位。左面元素设置为absolute定位,而且宽度设置为

200px。将右边元素的margin-left的值设置为200px。*/

.outer{

position: relative;

height: 100px;

}

.left{

position: absolute;

width: 200px;

height: 100px;

background: tomato;

}

.right{

margin-left: 200px;

height: 100px;

background: gold;

}

/*(4)第四种仍是运用肯定定位的办法,将父级元素设置为相对定位。左面元素宽度设置为200px,右边元素设置为肯定定位,左面定位为200px,其他方向定位为0。*/

.outer{

position: relative;

height: 100px;

}

.left{

width: 200px;

height: 100px;

background: tomato;

}

.right{

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 200px;

background: gold;

}

《两栏布局 demo 展现》[77]

答复:

两栏布局一般指的是页面中总共两栏,左面固定,右边自适应的布局,总共有四种完结的办法。

以左面宽度固定为 200px 为例

-(1)运用起浮,将左面元素宽度设置为 200px,而且设置向左起浮。将右边元素的 margin-left 设置为 200px,宽度设置为 auto(默以为 auto,撑满整个父元素)。

-(2)第二种是运用 flex 布局,将左面元素的扩大和缩小份额设置为 0,根底巨细设置为 200px。将右边的元素的扩大份额设置为 1,缩小份额设置为 1,根底巨细设置为 auto。

-(3)第三种是运用肯定定位布局的办法,将父级元素设置相对定位。左面元素设置为 absolute 定位,而且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。

-(4)第四种仍是运用肯定定位的办法,将父级元素设置为相对定位。左面元素宽度设置为 200px,右边元素设置为肯定定位,左面定位为 200px,其他方向定位为 0。

101.css 三栏布局的完结?

相关材料:

/*三栏布局一般指的是页面中总共有三栏,左右两栏宽度固定,中心自适应的布局,总共有五种完结办法。

这儿以左面宽度固定为100px,右边宽度固定为200px为例。*/

/*(1)运用肯定定位的办法,左右两栏设置为肯定定位,中心设置对应方向巨细的margin的值。*/

.outer{

position: relative;

height: 100px;

}

.left{

position: absolute;

width: 100px;

height: 100px;

background: tomato;

}

.right{

position: absolute;

top: 0;

right: 0;

width: 200px;

height: 100px;

background: gold;

}

.center{

margin-left: 100px;

margin-right: 200px;

height: 100px;

background: lightgreen;

}

/*(2)运用flex布局的办法,左右两栏的扩大和缩小份额都设置为0,根底巨细设置为固定的巨细,中心一栏设置为auto*/

.outer{

display: flex;

height: 100px;

}

.left{

flex: 00100px;

background: tomato;

}

.right{

flex: 00200px;

background: gold;

}

.center{

flex: auto;

background: lightgreen;

}

/*(3)运用起浮的办法,左右两栏设置固定巨细,并设置对应方向的起浮。中心一栏设置左右两个方向的margin值,留意这种办法,中心一栏有必要放到最终。*/

.outer{

height: 100px;

}

.left{

float: left;

width: 100px;

height: 100px;

background: tomato;

}

.right{

float: right;

width: 200px;

height: 100px;

background: gold;

}

.center{

height: 100px;

margin-left: 100px;

margin-right: 200px;

background: lightgreen;

}

/*(4)圣杯布局,运用起浮和负边距来完结。父级元素设置左右的 padding,三列均设置向左起浮,中心一列放在最前面,宽度设置为父级元素的宽度,因而后边两列都被挤到了下一行,经过设置 margin 负值将其移动到上一行,再运用相对定位,定位到两头。*/

.outer{

height: 100px;

padding-left: 100px;

padding-right: 200px;

}

.left{

position: relative;

left: - 100px;

float: left;

margin-left: - 100%;

width: 100px;

height: 100px;

background: tomato;

}

.right{

position: relative;

left: 200px;

float: right;

margin-left: - 200px;

width: 200px;

height: 100px;

background: gold;

}

.center{

float: left;

width: 100%;

height: 100px;

background: lightgreen;

}

/*(5)双飞翼布局,双飞翼布局相关于圣杯布局来说,左右方位的保存是经过中心列的 margin 值来完结的,而不是经过父元

素的 padding 来完结的。本质上来说,也是经过起浮和外边距负值来完结的。*/

.outer{

height: 100px;

}

.left{

float: left;

margin-left: - 100%;

width: 100px;

height: 100px;

background: tomato;

}

.right{

float: left;

margin-left: - 200px;

width: 200px;

height: 100px;

background: gold;

}

.wrapper{

float: left;

width: 100%;

height: 100px;

background: lightgreen;

}

.center{

margin-left: 100px;

margin-right: 200px;

height: 100px;

}

《三栏布局 demo 展现》[78]

答复:

三栏布局一般指的是页面中总共有三栏,左右两栏宽度固定,中心自适应的布局,总共有五种完结办法。

这儿以左面宽度固定为100px,右边宽度固定为200px为例。

(1)运用肯定定位的办法,左右两栏设置为肯定定位,中心设置对应方向巨细的margin的值。

(2)运用flex布局的办法,左右两栏的扩大和缩小份额都设置为0,根底巨细设置为固定的巨细,中心一栏设置为auto。

(3)运用起浮的办法,左右两栏设置固定巨细,并设置对应方向的起浮。中心一栏设置左右两个方向的margin值,留意这种办法,中心一栏有必要放到最终。

(4)圣杯布局,运用起浮和负边距来完结。父级元素设置左右的padding,三列均设置向左起浮,中心一列放在最前面,宽度设置为父级元素的宽度,因而后边两列都被挤到了下一行,经过设置margin负值将其移动到上一行,再运用相对定位,定位到两头。双飞翼布局中心列的宽度不能小于两头恣意列的宽度,而双飞翼布局则不存在这个问题。

(5)双飞翼布局,双飞翼布局相关于圣杯布局来说,左右方位的保存是经过中心列的margin值来完结的,而不是经过父元素的padding来完结的。本质上来说,也是经过起浮和外边距负值来完结的。

102.完结一个宽高自适应的正方形 /*1.榜首种办法是运用vw来完结*/

.square{

width: 10%;

height: 10vw;

background: tomato;

}

/*2.第二种办法是运用元素的margin/padding百分比是相对父元素width的性质来完结*/

.square{

width: 20%;

height: 0;

padding-top: 20%;

background: orange;

}

/*3.第三种办法是运用子元素的margin-top的值来完结的*/

.square{

width: 30%;

overflow: hidden;

background: yellow;

}

.square::after{

content: '';

display: block;

margin-top: 100%;

}

《自适应正方形 demo 展现》[79]

103.完结一个三角形 /*三角形的完结原理是运用了元素边框衔接处的等分原理。*/

.triangle{

width: 0;

height: 0;

border-width: 100px;

border-style: solid;

border-color: tomatotransparenttransparenttransparent;

}

《三角形 demo 展现》[80]

104.一个自适应矩形,水平笔直居中,且宽高比为 2:1 /*完结原理参阅自适应正方形和水平居中办法*/

.box{

position: absolute;

top: 0;

right: 0;

left: 0;

bottom: 0;

margin: auto;

width: 10%;

height: 0;

padding-top: 20%;

background: tomato;

参阅材料

[1]52.layoutviewport、visualviewport 和 idealviewport 的差异?: #52layoutviewportvisualviewport-和-idealviewport-的差异

[2]53.position:fixed;在 android 下无效怎样处理?: #53positionfixed在-android-下无效怎样处理

[3]54.假如需求手动写动画,你以为最小时刻距离是多久,为什么?(阿里): #54假如需求手动写动画你以为最小时刻距离是多久为什么阿里

[4]55.怎样让去除 inline-block 元素距离离?: #55怎样让去除-inline-block-元素距离离

[5]56.overflow:scroll 时不能滑润翻滚的问题怎样处理?: #56overflowscroll-时不能滑润翻滚的问题怎样处理

[6]57.有一个高度自适应的 div,里边有两个 div,一个高度 100px,期望另一个填满剩余的高度。: #57有一个高度自适应的-div里边有两个-div一个高度-100px期望另一个填满剩余的高度

[7]58.png、jpg、gif 这些图片格局解说一下,别离什么时分用。有没有了解过 webp?: #58pngjpggif-这些图片格局解说一下别离什么时分用有没有了解过-webp

[8]59.浏览器怎样判别是否支撑 webp 格局图片: #59浏览器怎样判别是否支撑-webp-格局图片

[9]60.什么是 Cookie 阻隔?(或许说:恳求资源的时分不要让它带 cookie 怎样做): #60什么是-cookie-阻隔或许说恳求资源的时分不要让它带-cookie-怎样做

[10]61.style 标签写在 body 后与 body 前有什么差异?: #61style-标签写在-body-后与-body-前有什么差异

[11]62.什么是 CSS 预处理器/后处理器?: #62什么是-css-预处理器后处理器

[12]63.论述一下 CSSSprites: #63论述一下-csssprites

[13]64.运用 rem 布局的优缺陷?: #64运用-rem-布局的优缺陷

[14]65.几种常见的 CSS 布局: #65几种常见的-css-布局

[15]66.画一条 0.5px 的线: #66画一条-05px-的线

[16]67.transition 和 animation 的差异: #67transition-和-animation-的差异

[17]68.什么是首选最小宽度?: #68什么是首选最小宽度

[1869.为什么 height:100x 会无效?: #69为什么-height100会无效

[19]70.min-width/max-width 和 min-height/max-height 特点间的掩盖规矩?: #70min-widthmax-width-和-min-heightmax-height-特点间的掩盖规矩

[20]71.内联盒模型根本概念: #71内联盒模型根本概念

[21]72.什么是鬼魂空白节点?: #72什么是鬼魂空白节点

[22]73.什么是替换元素?: #73什么是替换元素

[23]74.替换元素的核算规矩?: #74替换元素的核算规矩

[24]75.content 与替换元素的联系?: #75content-与替换元素的联系

[25]76.margin:auto 的填充规矩?: #76marginauto-的填充规矩

[26]77.margin 无效的景象: #77margin-无效的景象

[27]78.border 的特殊性?: #78border-的特殊性

[28]79.什么是基线和 x-height?: #79什么是基线和-x-height

[29]80.line-height 的特殊性?: #80line-height-的特殊性

[30]81.vertical-align 的特殊性?: #81vertical-align-的特殊性

[31]82.overflow 的特殊性?: #82overflow-的特殊性

[32]83.无依靠肯定定位是什么?: #83无依靠肯定定位是什么

[33]84.absolute 与 overflow 的联系?: #84absolute-与-overflow-的联系

[34]85.clip 裁剪是什么?: #85clip-裁剪是什么

[35]86.relative 的特殊性?: #86relative-的特殊性

[36]87.什么是层叠上下文?: #87什么是层叠上下文

[37]88.什么是层叠水平?: #88什么是层叠水平

[38]89.元素的层叠次序?: #89元素的层叠次序

[39]90.层叠原则?: #90层叠原则

[40]91.font-weight 的特殊性?: #91font-weight-的特殊性

[41]92.text-indent 的特殊性?: #92text-indent-的特殊性

[42]93.letter-spacing 与字符距离?: #93letter-spacing-与字符距离

[43]94.word-spacing 与单词距离?: #94word-spacing-与单词距离

[44]95.white-space 与换行和空格的操控?: #95white-space-与换行和空格的操控

[45]96.躲藏元素的 background-image 究竟加不加载?: #96躲藏元素的-background-image-究竟加不加载

[46]97.怎样完结单行/多行文本溢出的省掉(...)?: #97怎样完结单行多行文本溢出的省掉

[47]98.常见的元素躲藏办法?: #98常见的元素躲藏办法

[48]99.css 完结上下固定中心自适应布局?: #99css-完结上下固定中心自适应布局

[49]100.css 两栏布局的完结?: #100css-两栏布局的完结

[50]101.css 三栏布局的完结?: #101css-三栏布局的完结

[51]102.完结一个宽高自适应的正方形: #102完结一个宽高自适应的正方形

[52]103.完结一个三角形: #103完结一个三角形

[53]104.一个自适应矩形,水平笔直居中,且宽高比为 2:1: #104一个自适应矩形水平笔直居中且宽高比为-21

[54]《去除 inline-block 元素距离离的 N 种办法》: https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

[55]《处理页面运用 overflow:scroll 在 iOS 上滑动卡顿的问题》: https://www.jianshu.com/p/1f4693d0ad2d

[59]《toDataURL》: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

[61]

[63]《VW:是时分抛弃 REM 布局了》: https://www.jianshu.com/p/e8ae1c3861dc

[65]《运用 Flexible 完结手淘 H5 页面的终端适配》: https://github.com/amfe/article/issues/17

[70]

《CSS 动画简介》: http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

[75]《CSS 躲藏元素的八种办法》: https://juejin.im/post/584b645a128fe10058a0d625#heading-2

[76]《css 完结上下固定中心自适应布局》: https://www.jianshu.com/p/30bc9751e3e8

[77]《两栏布局 demo 展现》: http://cavszhouyou.top/Demo-Display/TwoColumnLayout/index.html

[78]《三栏布局 demo 展现》: http://cavszhouyou.top/Demo-Display/ThreeColumnLayout/index.html

[79]《自适应正方形 demo 展现》: http://cavszhouyou.top/Demo-Display/AdaptiveSquare/index.html

[80]《三角形 demo 展现》: http://cavszhouyou.top/Demo-Display/Triangle/index.html回来,检查更多

责任编辑:


地址: 电话:
Copyright © 2020 凯发k8官方网站凯发k8官方网站-凯发k873.com-k8国际官方-凯发k8官 All Rights Reserved Power by DedeCms