css高频考题

发表于 分类于 Waline：

整理了一下常见的css的问题

介绍一下标准的 CSS 的盒子模型

  • 有两种盒子模型：IE 盒模型（border-box）、W3C 标准盒模型（content-box）
  • 盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分

IE 盒模型和 W3C 标准盒模型的区别：

  • W3C 标准盒模型：属性 width，height 只包含内容 content，不包含 border 和 padding
  • IE 盒模型：属性 width，height 包含 content、border 和 padding，指的是 content + padding + border。

如果将 box-sizing 设为 border-box 则用的是 IE 盒模型。

CSS 选择符有哪些?

  1. id 选择器（#myid）
  2. 类选择器（.myclassname）
  3. 标签选择器（div,h1,p）
  4. 后代选择器（h1 p）
  5. 相邻后代选择器（子）选择器（ul>li）
  6. 兄弟选择器（li~a）
  7. 相邻兄弟选择器（li+a）
  8. 属性选择器（a[rel=”external”]）
  9. 伪类选择器（a:hover,li:nth-child）
  10. 伪元素选择器（::before、::after）
  11. 通配符选择器（*）

CSS 中哪些属性可以继承

  • 字体系列属性
    font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

  • 文本系列属性
    text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color

  • 表格布局属性
    caption-sideborder-collapseempty-cells

  • 列表属性
    list-style-type、list-style-image、list-style-position、list-style

  • 光标属性
    cursor

  • 元素可见性
    visibility

CSS3 新增伪类有那些?

  • elem:nth-child(n)选中父元素下的第 n 个子元素，并且这个子元素的标签名为 elem，n可以接受具体的数值，也可以接受函数。
  • elem:nth-last-child(n)作用同上，不过是从后开始查找。
  • elem:last-child 选中最后一个子元素。
  • elem:only-child 如果 elem 是父元素下唯一的子元素，则选中之。
  • elem:nth-of-type(n)选中父元素下第 n 个 elem 类型元素，n 可以接受具体的数值，也可以接受函数。
  • elem:first-of-type 选中父元素下第一个 elem 类型元素。
  • elem:last-of-type 选中父元素下最后一个 elem 类型元素。
  • elem:only-of-type 如果父元素下的子元素只有一个 elem 类型元素，则选中该元素。
  • elem:empty 选中不包含子元素和内容的 elem 类型元素。
  • elem:target 选择当前活动的 elem 元素。
  • :not(elem)选择非 elem 元素的每个元素。
  • :enabled 控制表单控件的禁用状态。
  • :disabled 控制表单控件的禁用状态。
  • :checked 单选框或复选框被选中。

CSS3 有哪些新特性？

  • 圆角 （border-radius:8px）
  • 多列布局 （multi-column layout）
  • 阴影和反射 （Shadow\Reflect）
  • 文字特效 （text-shadow）
  • 文字渲染 （Text-decoration）
  • 线性渐变 （gradient）
  • 过渡 （transform）缩放，定位，倾斜，动画，多背景

解释一下 CSS3 的 Flexbox（弹性盒布局模型）

弹性布局深入

width:auto 和 width:100%的区别

  • width:100%会使元素 box 的宽度等于父元素的 contentbox 的宽度。

  • width:auto 会使元素撑满整个父元素，margin、border、padding、content 区域会自动分配水平空间。

BFC规范的理解?css中常见的兼容性问题?margin 重叠问题的理解?怎么让 Chrome 支持小于 12px 的文字?

那些你不知道的CSS

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

加载性能：

  1. css 压缩：将写好的 css 进行打包压缩，可以减少很多的体积。
  2. css 单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top 0 bottom 0;但margin-bottom:bottom;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 规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配

在网页中应该使用奇数还是偶数的字体？为什么呢？

  1. 偶数字号相对更容易和 web 设计的其他部分构成比例关系。比如：当我用了 14px 的正文字号，我可能会在一些地方用 14×0.5=7px 的 margin，在另一些地方用 14×1.5=21px 的标题字号。
  2. 浏览器缘故，低版本的浏览器 ie6 会把奇数字体强制转化为偶数，即 13px 渲染为 14px。
  3. 系统差别，早期的 Windows 里，中易宋体点阵只有 12 和 14、15、16px，唯独缺少 13px。

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

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

1
2
3
4
5
{
  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 输入框的黄色背景，处理如下

1
2
3
4
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-box-shadow: 000px 1000px white inset;
  border: 1px solid #CCC !important;
}

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

webkit 内核的私有属性：-webkit-font-smoothing，用于字体抗锯齿，使用后字体看起来会更清晰舒服。

在 MacOS 测试环境下面设置-webkit-font-smoothing:antialiased;但是这个属性仅仅是面向MacOS，其他操作系统设

使用 rem 布局的优缺点

优点：
在屏幕分辨率千差万别的时代，只要将 rem 与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。而且现在浏览器基本都已经支持 rem 了，兼容性也非常的好。

缺点：

  1. 在奇葩的 dpr 设备上表现效果不太好，比如一些华为的高端机型用 rem 布局会出现错乱。
  2. 使用 iframe 引用也会出现问题。
  3. rem 在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问题。

(…未完待续)

-------------本文结束感谢您的阅读-------------