布局部分(三)

清除浮动的方式

浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属 于文档流中的普通流，当元素浮动之后， 不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮 动框不存在一样的布局模式。当包含框 的高度小于浮动框的时候，此时就会出现“高度塌陷”。 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使 我们页面后面的布局不能正常显示。

.clear::after{ content:''; display:table;//也可以是'block'，或者是'list-item' clear:both; }

CSS 优化、提高性能的方法有哪些？

加载性能： （1）css 压缩：将写好的 css 进行打包压缩，可以减少很多的体积。 （2）css 单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top0bottom0;但 margin-bottom:bot tom;margin-left:left;执行的效率更高。 （3）减少使用@import,而建议使用 link，因为后者在页面加载时一起加载，前者是等待页 面加载完成之后再进行加载。

选择器性能： （1）关键选择器（keyselector）。选择器的最后面的部分为关键选择器（即用来匹配目标元 素的部分）。CSS 选择符是从右到 左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元 素等等； （2）如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规 则（这样样式系统就不会浪费时间去匹 配它们了）。 （3）避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择。 （4）尽量少的去对标签进行选择，而是用 class。 （5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽 量将选择器的深度降到最低，最高不要超过 三层，更多的使用类来关联每一个标签元素。 （6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
渲染性能： （1）慎重使用高性能属性：浮动、定位。 （2）尽量减少页面重排、重绘。 （3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑 能减少 css 文档体积。 （4）属性值为 0 时，不加单位。 （5）属性值为浮动小数 0.，可以省略小数点之前的 0。 （6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。 （7）不使用@import 前缀，它会影响 css 的加载速度。 （8）选择器优化嵌套，尽量避免层级过深。 （9）css 雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时 图片本身会变大，使用时，优劣考虑清 楚，再使用。10）正确使用 display 的属性，由于 display 的作用，某些样式组合会无效，徒增样式体积 的同时也影响解析性能。 （11）不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生，国外却很流行。webfonts 通常体积庞大，而且一些浏 览器在下载 webfonts 时会阻塞页面渲染损伤性能。

可维护性、健壮性： （1）将具有相同属性的样式抽离出来，整合并通过 class 在页面中进行使用，提高 css 的可 维护性。 （2）样式与内容分离：将 css 代码定义到外部 css 中。

浏览器是怎样解析 CSS 选择器的？

样式系统从关键选择器(采取从右向左)开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树 一直在工作，样式系统就会持续左移，直 到和规则匹配，或者是因为不匹配而放弃该规则。 试想一下，如果采用从左至右的方式读取 CSS 规则，那么大多数规则读到最后（最右）才会 发现是不匹配的，这样做会费时耗能， 最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配， 就可以直接舍弃了，避免了许多无效匹配。

如何修改 chrome 记住密码后自动填充表单的黄色背景？

chrome 表单自动填充后，input 文本框的背景会变成黄色的，通过审查元素可以看到这是由 于 chrome 会默认给自动填充的 in put 表单加上 input:-webkit-autofill 私有属性，然后对其赋予以下样式：

 {background-color:rgb(250,255,189)!important; background-image:none!important; color:rgb(0,0,0)!important; }

对 chrome 默认定义的 background-color，background-image，color 使用 important 是不能提 高其优先级的，但是 其他属性可使用。 使用足够大的纯色内阴影来覆盖 input 输入框的黄色背景，处理如下

 input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{ -webkit-box-shadow:000px1000pxwhiteinset; border:1pxsolid#CCC!important; }

怎么让 Chrome 支持小于 12px 的文字？

在谷歌下 css 设置字体大小为 12px 及以下时，显示都是一样大小，都是默认 12px。 解决办法： （1）可以使用 Webkit 的内核的-webkit-text-size-adjust 的私有 CSS 属性来解决，只要加了 -webkit-text-size -adjust:none;字体大小就不受限制了。但是 chrome 更新到 27 版本之后就不可以用了。所以 高版本 chrome 谷歌浏览器 已经不再支持-webkit-text-size-adjust 样式，所以要使用时候慎用。
（ 2 ） 还 可 以 使 用 css3 的 transform 缩 放 属 性 -webkit-transform:scale(0.5); 注 意 -webkit-transform:scale(0. 75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素， 可以使用 display：block/ inline-block/…；
（3）使用图片：如果是内容固定不变情况下，使用将小于 12px 文字内容切出做图片，这样 不影响兼容也不影响美观。

让页面里的字体变清晰，变细用 CSS 怎么做？

webkit 内核的私有属性：-webkit-font-smoothing，用于字体抗锯齿，使用后字体看起来会更 清晰舒服。 在 MacOS 测试环境下面设置-webkit-font-smoothing:antialiased;但是这个属性仅仅是面向 MacOS，其他操作系统设 置后无效。
参考链接

position:fixed;在 android 下无效怎么处理？

因为移动端浏览器默认的 viewport 叫做layoutviewport。在移动端显示时，因为layoutviewport 的宽度大于移动端屏幕 的宽度，所以页面会出现滚动条左右移动，fixed 的元素是相对 layoutviewport 来固定位置的， 而不是移动端屏幕来固定位置的 ，所以会出现感觉 fixed 无效的情况。 如果想实现 fixed 相对于屏幕的固定效果，我们需要改变的是 viewport 的大小为 idealviewport， 可以如下设置：

 <metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,mini mum-sca le=1.0,user-scalable=no"/>

如果需要手动写动画，你认为最小时间间隔是多久?

多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60*1000ms＝ 16.7ms

overflow:scroll 时不能平滑滚动的问题怎么处理？

以下代码可解决这种卡顿的问题：

-webkit-overflow-scrolling:touch;

是因为这行代码启用了硬 件加速特性，所以滑动很流

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 格式，兼容性不太好。

阐述一下 CSSSprites (雪碧图)

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用 CSS 的 background-image， background-repeat，background -position 的组合进行背景定位。利用 CSSSprites 能很好地减少网页的 http 请求，从而很好的 提高页面的性能；CSSSprites 能减少图片的字节。 优点： 减少 HTTP 请求数，极大地提高页面加载速度 增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现 缺点： 图片合并麻烦 维护麻烦，修改一个图片可能需要重新布局整个图片，样式

画一条 0.5px 的线

参考链接

transition 和 animation 的区别

transition 关注的是 CSSproperty 的变化，property 值和时间的关系是一个三次贝塞尔曲线。 animation 作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自 由的动画效果。

vertical-align

（1）vertical-align 的默认值是 baseline，即基线对齐，而基线的定义是字母 x 的下边缘。因 此，内联元素默认都是沿着字 母 x 的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线。：一个 inline-block 元素，如果里面 没有内联元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘；否则其 基线就是元素里面最后一行 内联元素的基线。 （2）vertical-align:top 就是垂直上边缘对齐，如果是内联元素，则和这一行位置最高的内联 元素的顶部对齐；如果 display 计算值是 table-cell 的元素，我们不妨脑补成元素，则和元素上边缘对齐。 （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 元素自身。

overflow 的特殊性？

（1）一个设置了 overflow:hidden 声明的元素，假设同时存在 border 属性和 padding 属性， 则当子元素内容超出容器宽度 高度限制的时候，剪裁的边界是 borderbox 的内边缘，而非 paddingbox 的内边缘。 （2）HTML 中有两个标签是默认可以产生滚动条的，一个是根元素，另一个是文本域 。
（3）滚动条会占用容器的可用宽度或高度。 （4）元素设置了 overflow:hidden 声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚 动条不存在！

absolute 与 overflow 的关系？

（1）如果 overflow 不是定位元素，同时绝对定位元素和 overflow 容器之间也没有定位元素， 则 overflow 无法对 absolute 元素进行剪裁。 （2）如果 overflow 的属性值不是 hidden 而是 auto 或者 scroll，即使绝对定位元素高宽比 overflow 元素高宽还要大，也 都不会出现滚动条。 （3）overflow 元素自身 transform 的时候，Chrome 和 Opera 浏览器下的 overflow 剪裁是无 效的。
font-weight 的特殊性？ 如果使用数值作为 font-weight 属性值，必须是 100～900 的整百数。因为这里的数值仅仅是 外表长得像数值，实际上是一个具有特定含义的关键字，并且这里的数值关键字和字母关键 字之间是有对应关系的。

text-indent 的特殊性？

（1）text-indent 仅对第一行内联盒子内容有效。 （2）非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent 值无效，如果计 算值 inline-block/inli ne-table 则会生效。 （3）标签按钮 text-indent 值无效。 （4）标签按钮 text-indent 值有效。 （5）text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。

letter-spacing 与字符间距？

letter-spacing 可以用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格 等。letter-spacing 具有以下一些特性。 （1）继承性。 （2）默认值是 normal 而不是 0。虽然说正常情况下，normal 的计算值就是 0，但两者还是 有差别的，在有些场景下，letter-spacing 会调整 normal 的计算值以实现更好的版面布局。 （3）支持负值，且值足够大的时候，会让字符形成重叠，甚至反向排列。 （4）和 text-indent 属性一样，无论值多大或多小，第一行一定会保留至少一个字符。 （5）支持小数值，即使 0.1px 也是支持的。
（6）暂不支持百分比值。

word-spacing 与单词间距？

letter-spacing 作用于所有字符，但 word-spacing 仅作用于空格字符。换句话说，word-spacing 的作用就是增加空格的间隙 宽度。

常见的元素隐藏方式？

（1）使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中 占据位置，也不会响应绑定的监听事件。 -（2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听 事件。 -（3）使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍 然占据空间，并且能够响应元素绑定的监听事件。 -（4）通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。 -（5）通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。 -（6）通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面 中占据位置，但是不会响应绑定的监听事件。 -（7）通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下， 元素仍在页面中占据位置，但是不会响应绑定的监听事件。

分析比较 opacity: 0、visibility: hidden、 display: none 优劣和适用场景

1).display: none - 不占空间，不能点击，会引起回流，子元素不影响
2).visibility: hidden - 占据空间，不能点击，引起重绘，子元素可设置 visible 进行显示
3).opacity: 0 - 占据空间，可以点击，引起重绘，子元素不影响

移动端视口配置

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

 initial-scale: 初始的缩放比例；  minimum-scale: 允许用户缩放到的最小比例；  maximum-scale: 允许用户缩放到的最大比例；  user-scalable: 用户是否可以手动缩放；

min-width/max-width 和 min-height/max-height 属性间的覆盖规 则？

1).max-width 会 覆 盖 width ， 即 使 width 是 行 内 样 式 或 者 设 置 了 !important。
2).min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width 冲突的时候；